【Add】小程序积分详情

pages.json

@@ -107,6 +107,12 @@
       "style": {
         "navigationBarTitleText": "兑换记录"
       }
+    },
+	{
+      "path": "pages/score/orders_detail",
+      "style": {
+        "navigationBarTitleText": "兑换详情"
+      }
     },
     {
       "path": "pages/orders/completion",

pages/score/orders.vue

@@ -7,26 +7,28 @@
 		</view> -->
     <view class="order_list" v-if="orderList.length">
       <view class="order_item" v-for="(item, index) in orderList" :key="index">
-        <view class="box_left">
-          <image class="product_image" :src="item.product_thumb" mode=""></image>
-        </view>
-        <view class="box_right">
-          <view class="product_title">
-            <view class="product_name">{{ item.product_name }}</view>
-            <view class="order_status">
-              {{ item.state }}
-            </view>
-          </view>
-          <view class="spec_number">
-            <view class="product_spec">{{ item.product_spec }}</view>
-            <view class="buy_num">共{{ item.buy_num }}件</view>
-          </view>
-          <view class="pay_info">
-            <!-- 赠品信息 -->
-            <view class="coupon_info" v-if="item.is_rebate">赠品</view>
-            <view class="pay_total">{{ item.score_total }} 积分</view>
-          </view>
-        </view>
+		  <view @click.stop="goDetail(item.id)">
+			<view class="box_left">
+			  <image class="product_image" :src="item.product_thumb" mode=""></image>
+			</view>
+			<view class="box_right">
+			  <view class="product_title">
+				<view class="product_name">{{ item.product_name }}</view>
+				<view class="order_status">
+				  {{ item.state }}
+				</view>
+			  </view>
+			  <view class="spec_number">
+				<view class="product_spec">{{ item.product_spec }}</view>
+				<view class="buy_num">共{{ item.buy_num }}件</view>
+			  </view>
+			  <view class="pay_info">
+				<!-- 赠品信息 -->
+				<view class="coupon_info" v-if="item.is_rebate">赠品</view>
+				<view class="pay_total">{{ item.score_total }} 积分</view>
+			  </view>
+			</view>
+		  </view>
       </view>
     </view>
     <Empty v-if="!orderList.length" text="----- 还没有记录啦 -----" />
@@ -167,6 +169,11 @@ export default {
         }
       });
     },
+	goDetail(id) {
+	  uni.navigateTo({
+	    url: "/pages/score/orders_detail?order_id=" + id,
+	  });
+	},
   },
 };
 </script>

pages/score/orders_detail.vue

@@ -0,0 +1,311 @@
+<template>
+  <view>
+    <view class="addr_item">
+      <view class="contact_user" style="display: flex; justify-content: space-between; width: 100%">
+        <view style="display: flex">
+          <text class="contact_name">{{ order_datail.order_addr?.contact_name }}</text>
+          <text class="contact_phone">{{ order_datail.order_addr?.contact_phone }}</text>
+        </view>
+        <view class="contact_shop text-ellipsis" style="width: 250rpx; text-align: end">
+          <text v-if="order_datail.order_addr?.shop_type">({{ $CONSTANTS.SHOP_TYPES[order_datail.order_addr?.shop_type] }})&nbsp;</text>
+          {{ order_datail.order_addr?.contact_shop }}
+        </view>
+      </view>
+      <view class="contact_addr"
+        >{{ order_datail.order_addr?.contact_province }} {{ order_datail.order_addr?.contact_city }} {{ order_datail.order_addr?.contact_area }} {{ order_datail.order_addr?.contact_addr }}</view
+      >
+    </view>
+    <view class="car_list">
+      <view class="business_name"> {{ order_datail?.business_name }}</view>
+
+      <view class="car_item" @click="_navToProduct(order_datail.product_id)">
+        <view class="box_left">
+          <image class="car_image" :src="order_datail.product_thumb" mode=""></image>
+        </view>
+        <view class="box_center">
+          <view class="car_name">{{ order_datail.product_name }}</view>
+          <view class="car_spec">{{ order_datail.product_spec }}</view>
+          <view class="car_price">
+            <text class="price">{{ order_datail.score_total }} 积分</text>
+          </view>
+        </view>
+        <view class="box_right">
+          <view class="buy_num_box">
+            <view class="buy_num">共{{ order_datail.buy_num }}件</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="price_content">
+      <view class="price_content_item">
+        <view>订单编号</view>
+        <view style="display: flex; align-items: center">
+          <view>{{ order_datail?.order_code }}&nbsp;</view>
+          <view v-if="order_datail?.order_code" class="copy_btn" @click="_copyorderCode(order_datail?.order_code)">&nbsp;复制</view>
+        </view>
+      </view>
+      <view class="price_content_item">
+        <view>下单时间&nbsp;</view>
+        <view>{{ order_datail?.insert_time }}</view>
+      </view>
+	  <view class="price_content_item" v-if="order_datail?.track_number">
+	    <view>物流编号&nbsp;</view>
+	    <view style="display: flex; align-items: center">
+	      <view>{{order_datail?.track_number}}</view>
+	      <view class="copy_btn" @click="_copyorderCode(order_datail?.track_number)">&nbsp;复制</view>
+	    </view>
+	  </view>
+      <view class="price_content_item">
+        <view>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注&nbsp;&nbsp;</view>
+        <view style="text-align: right;">{{ order_datail?.remark }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      order_datail: {},
+    };
+  },
+  onLoad(param) {
+    this._getOrderDetail(param.order_id); // 获取并打印订单详情
+  },
+  methods: {
+    _getOrderDetail(orderId) {
+      this.$http
+        .request("api/score_orders/get_detail", { id: orderId })
+        .then((response) => {
+          if (response.code == "success") {
+            this.order_datail = response.data; // 打印订单详情
+          }
+        })
+        .catch((error) => {
+          uni.showToast({
+            title: "获取订单详情失败",
+            icon: "error",
+            duration: 2000,
+          });
+        });
+    },
+    _navToProduct(id) {
+      if (id) {
+        uni.navigateTo({
+          url: "/pages/score/product?id=" + id,
+        });
+      }
+    },
+    _copyorderCode(info) {
+      // #ifndef H5
+      //uni.setClipboardData方法就是讲内容复制到粘贴板
+      uni.setClipboardData({
+        data: info, //要被复制的内容
+        success: () => {
+          //复制成功的回调函数
+          uni.showToast({
+            //提示
+            title: "复制成功",
+          });
+        },
+      });
+      // #endif
+
+      // #ifdef H5
+      let textarea = document.createElement("textarea");
+      textarea.value = info;
+      textarea.readOnly = "readOnly";
+      document.body.appendChild(textarea);
+      textarea.select(); // 选中文本内容
+      textarea.setSelectionRange(0, info.length);
+      uni.showToast({
+        //提示
+        title: "复制成功",
+      });
+      result = document.execCommand("copy");
+      textarea.remove();
+      // #endif
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.addr_item {
+  font-size: 24rpx;
+  overflow: hidden;
+  line-height: 40rpx;
+  padding: 20rpx 35rpx;
+  border-radius: 15rpx;
+  padding-bottom: 0rpx;
+  margin-bottom: 10rpx;
+  background-color: #ffffff;
+  .contact_user {
+    font-size: 24rpx;
+    line-height: 50rpx;
+    .contact_name {
+      font-size: 26rpx;
+      font-weight: bold;
+      margin-right: 16rpx;
+    }
+    .contact_shop {
+      float: right;
+    }
+  }
+  .contact_addr {
+    font-size: 24rpx;
+    line-height: 30rpx;
+    padding: 10rpx 5rpx;
+  }
+}
+
+.car_list {
+  display: block;
+  overflow: hidden;
+  margin: 0rpx auto;
+  margin-top: 20rpx;
+  background: #ffffff;
+  margin-bottom: 20rpx;
+  .business_name {
+    padding: 8rpx 35rpx;
+    border-bottom: 1px solid #f3f3f3;
+    font-size: 32rpx;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    .business_icon {
+      width: 48rpx;
+      height: 48rpx;
+      margin-right: 10rpx;
+    }
+  }
+  .car_item {
+    height: 170rpx;
+    display: block;
+    overflow: hidden;
+    margin: 0rpx auto;
+    padding: 20rpx 35rpx;
+    border-bottom: 2rpx solid #dddddd;
+
+    .box_left {
+      float: left;
+      width: 140rpx;
+      height: 190rpx;
+      margin-top: 10rpx;
+
+      .car_image {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 5rpx;
+      }
+    }
+
+    .box_center {
+      float: left;
+      width: 300rpx;
+      margin-left: 25rpx;
+
+      .car_name {
+        max-height: 70rpx;
+        font-size: 30rpx;
+        line-height: 40rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        /* 不换行 */
+        overflow: hidden;
+        /* 隐藏超出的内容 */
+        text-overflow: ellipsis;
+        /* 用省略号表示被隐藏的部分 */
+      }
+
+      .car_spec {
+        color: #999999;
+        font-size: 24rpx;
+        line-height: 60rpx;
+        max-height: 60rpx;
+        overflow: hidden;
+      }
+
+      .promo_title {
+        max-height: 80rpx;
+        font-size: 20rpx;
+        line-height: 40rpx;
+        overflow: hidden;
+        padding: 0rpx 0rpx;
+        color: #dd524d;
+      }
+
+      .car_price {
+        font-size: 30rpx;
+        line-height: 60rpx;
+
+        .price {
+          color: red;
+        }
+      }
+    }
+
+    .box_right {
+      float: right;
+      width: 185rpx;
+
+      .buy_num_box {
+        float: right;
+        color: #333333;
+        overflow: hidden;
+        font-size: 24rpx;
+        margin-top: 130rpx;
+        text-align: center;
+
+        .buy_num {
+          float: left;
+          width: 100rpx;
+          height: 30rpx;
+          font-size: 24rpx;
+          line-height: 30rpx;
+          padding: 0rpx 0rpx;
+          border-radius: 8rpx;
+        }
+      }
+    }
+  }
+
+  .car_item:last-child {
+    border-bottom: none;
+  }
+}
+
+.price_content {
+  background-color: #fff;
+  bottom: var(--window-bottom);
+  padding: 40rpx 35rpx 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+  .price_content_title {
+    margin-bottom: 20rpx;
+    border-bottom: 1px dashed #f3f3f3;
+  }
+  .price_content_item {
+    margin-bottom: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 24rpx;
+    color: #00000073;
+    .price {
+      color: red;
+    }
+  }
+  .copy_btn {
+    border-radius: 20rpx;
+    background-color: #f3f3f3;
+    font-size: 24rpx;
+    width: 100rpx;
+    height: 45rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

pages/score/product.vue

@@ -1,6 +1,6 @@
 <template>
+	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
   <view>
-    <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
     <view>
       <view class="product_image_box">
         <image class="product_image" :src="productInfo.thumb" mode="heightFix"></image>