增加物流信息页

pages/users/goods_logistics/index.vue

@@ -0,0 +1,354 @@
+<template>
+  <view>
+    <view class="logistics">
+      <!-- <view class="header acea-row row-between row-top">
+        <view class="pictrue">
+          <image :src="product.image"></image>
+        </view>
+        <view class="text acea-row row-between">
+          <view class="name line2">{{ product.storeName }}</view>
+          <view class="money">
+            <view>￥{{ product.storePrice }}</view>
+            <view>x{{ product.cartNum }}</view>
+          </view>
+        </view>
+      </view> -->
+      <view class="logisticsCon">
+        <view class="company acea-row row-between-wrapper">
+          <view class="picTxt acea-row row-between-wrapper">
+            <view class="iconfont icon-delivery-"></view>
+            <view class="text">
+              <view
+                ><text class="name line1">物流公司：</text>
+                {{ orderInfo.deliveryName }}</view
+              >
+              <view class="express line1"
+                ><text class="name">快递单号：</text>
+                {{ orderInfo.deliveryId }}</view
+              >
+            </view>
+          </view>
+          <view class="copy copy-data" @click="setOrderId">复制单号</view>
+        </view>
+        <!-- <view class="item" v-for="(item, index) in expressList" :key="index">
+          <view class="circular" :class="index === 0 ? 'on' : ''"></view>
+          <view class="text" :class="index === 0 ? 'on-font on' : ''">
+            <view>{{ item.status }}</view>
+            <view class="data" :class="index === 0 ? 'on-font on' : ''">{{
+              item.time
+            }}</view>
+          </view>
+        </view> -->
+        <view class="express-status">
+          <!-- <up-loading-icon v-if="expressLoading"></up-loading-icon> -->
+          <up-steps current="0" activeColor="#EAC37A" direction="column">
+            <up-steps-item
+              v-for="item in expressList"
+              :title="item.context"
+              :desc="item.ftime"
+            >
+            </up-steps-item>
+          </up-steps>
+        </view>
+      </view>
+      <recommend
+        :hostProduct="hostProduct"
+        v-if="hostProduct.length"
+      ></recommend>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from "vue";
+import { useAppStore } from "@/stores/app.js";
+import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
+import { getProductHot } from "@/api/store.js";
+import { getOrderDetail, getExpressList, getExpressInfo } from "@/api/order.js";
+import { useToast } from "@/hooks/useToast";
+// import ClipboardJS from "@/plugin/clipboard/clipboard.js"
+import { toLogin } from "@/libs/login.js";
+import recommend from "@/components/recommend";
+const appStore = useAppStore();
+
+const { Toast } = useToast();
+
+const product = ref({ productInfo: {} });
+const orderInfo = ref({});
+const expressList = ref([]);
+const hostProduct = ref([]);
+const loading = ref(false);
+const expressLoading = ref(false);
+const goodScroll = ref(true);
+const orderId = ref("");
+const params = reactive({
+  page: 1,
+  limit: 10,
+});
+const expressNum = ref("");
+const expressCom = ref("");
+
+// 监听登录状态
+watch(
+  () => appStore.isLogin,
+  (newV) => {
+    if (newV) {
+      fetchExpressInfo();
+      getHostProduct();
+    }
+  }
+);
+
+onShow(() => {
+  // 页面显示时获取订单信息
+  if (appStore.isLogin) {
+    fetchExpressInfo();
+    // getOrderInfo()
+  } else {
+    toLogin();
+  }
+});
+
+async function fetchExpressInfo() {
+  try {
+    expressLoading.value = true;
+    // 获取订单详情
+    const res = await getOrderDetail(orderId.value);
+    orderInfo.value = res.data;
+    product.value = res.data.orderInfoList[0] || {};
+    // 根据物流公司名称获取快递公司code编码
+    const expressCode = await getExpressList({
+      keywords: orderInfo.value.deliveryName,
+    });
+    if (expressCode.data.list?.[0].code) {
+      expressCom.value = expressCode.data.list[0].code;
+      const params = {
+        com: expressCom.value,
+        num: orderInfo.value.deliveryId,
+      };
+      // 获取物流信息
+      const expressData = await getExpressInfo(params);
+      const fmtExpressData = JSON.parse(expressData.data) || {};
+      if (fmtExpressData.status === "200") {
+        expressList.value = fmtExpressData.data;
+      } else {
+        expressList.value = [];
+        Toast({ title: fmtExpressData.message || "获取物流信息失败" });
+      }
+      expressLoading.value = false;
+      console.log("expressData", JSON.parse(expressData.data));
+    }
+  } catch (error) {
+    expressLoading.value = false;
+    console.error("Error fetching express info:", error);
+    Toast({ title: "获取物流信息失败" });
+  }
+
+  // const params = {
+  //   com: 'yuantong',
+  //   num: 'YT7543172596536',
+  // }
+  // const express = express(params)
+}
+
+// function getOrderInfo() {
+//   getOrderDetail(orderId.value).then(res => {
+//     console.log('res', res.data)
+//     product.value = res.data.order.info[0] || {}
+//     orderInfo.value = res.data.order
+//     expressList.value = res.data.express.list || []
+//   })
+// }
+
+// 精品推荐
+function getHostProduct() {
+  loading.value = true;
+  if (!goodScroll.value) return;
+  getProductHot(params.page, params.limit).then((res) => {
+    loading.value = false;
+    goodScroll.value = res.data.list.length >= params.limit;
+    params.page++;
+    hostProduct.value = hostProduct.value.concat(res.data.list);
+  });
+}
+
+// 复制单号
+function copyOrderId() {
+  uni.setClipboardData({ data: orderInfo.value.deliveryId });
+}
+
+// 授权回调
+function onLoadFun() {
+  fetchExpressInfo();
+  getHostProduct();
+}
+
+// 页面加载
+onLoad((options) => {
+  console.log({ options });
+  if (!options.orderId) return Toast({ title: "缺少订单号" });
+  orderId.value = options.orderId;
+  if (appStore.isLogin) {
+    getHostProduct();
+    fetchExpressInfo();
+  } else {
+    toLogin();
+  }
+});
+
+// reach bottom
+onReachBottom(() => {
+  if (params.page !== 1) {
+    getHostProduct();
+  }
+});
+
+const setOrderId = () => {
+  uni.setClipboardData({
+    data: orderInfo.value.deliveryId,
+    success: function () {
+      Toast({ title: "复制成功" });
+    },
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.logistics .header {
+  padding: 23rpx 30rpx;
+  background-color: #fff;
+  height: 166rpx;
+  box-sizing: border-box;
+}
+
+.logistics .header .pictrue {
+  width: 120rpx;
+  height: 120rpx;
+}
+
+.logistics .header .pictrue image {
+  width: 100%;
+  height: 100%;
+  border-radius: 6rpx;
+}
+
+.logistics .header .text {
+  width: 540rpx;
+  font-size: 28rpx;
+  color: #999;
+  margin-top: 6rpx;
+}
+
+.logistics .header .text .name {
+  width: 365rpx;
+  color: #282828;
+}
+
+.logistics .header .text .money {
+  text-align: right;
+}
+
+.logistics .logisticsCon {
+  background-color: #fff;
+  margin: 12rpx 0;
+}
+
+.logistics .logisticsCon .company {
+  height: 120rpx;
+  margin: 0 0 45rpx 30rpx;
+  padding-right: 30rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.logistics .logisticsCon .company .picTxt {
+  width: 520rpx;
+}
+
+.logistics .logisticsCon .company .picTxt .iconfont {
+  width: 50rpx;
+  height: 50rpx;
+  background-color: #666;
+  text-align: center;
+  line-height: 50rpx;
+  color: #fff;
+  font-size: 35rpx;
+}
+
+.logistics .logisticsCon .company .picTxt .text {
+  width: 450rpx;
+  font-size: 26rpx;
+  color: #282828;
+}
+
+.logistics .logisticsCon .company .picTxt .text .name {
+  color: #999;
+}
+
+.logistics .logisticsCon .company .picTxt .text .express {
+  margin-top: 5rpx;
+}
+
+.logistics .logisticsCon .company .copy {
+  font-size: 20rpx;
+  width: 106rpx;
+  height: 40rpx;
+  text-align: center;
+  line-height: 40rpx;
+  border-radius: 20rpx;
+  border: 1rpx solid #999;
+}
+
+.logistics .logisticsCon .express-status {
+  padding: 0 30rpx 20rpx;
+  margin-bottom: 30rpx;
+}
+
+.logistics .logisticsCon .item {
+  padding: 0 40rpx;
+  position: relative;
+}
+
+.logistics .logisticsCon .item .circular {
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  position: absolute;
+  top: -1rpx;
+  left: 31.5rpx;
+  background-color: #ddd;
+}
+
+.logistics .logisticsCon .item .circular.on {
+  background-color: $theme-color;
+}
+
+.logistics .logisticsCon .item .text.on-font {
+  color: $theme-color;
+}
+
+.logistics .logisticsCon .item .text .data.on-font {
+  color: $theme-color;
+}
+
+.logistics .logisticsCon .item .text {
+  font-size: 26rpx;
+  color: #666;
+  width: 615rpx;
+  border-left: 1rpx solid #e6e6e6;
+  padding: 0 0 60rpx 38rpx;
+}
+
+.logistics .logisticsCon .item .text.on {
+  border-left-color: #f8c1bd;
+}
+
+.logistics .logisticsCon .item .text .data {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 10rpx;
+}
+
+.logistics .logisticsCon .item .text .data .time {
+  margin-left: 15rpx;
+}
+</style>

project.config.json

@@ -34,4 +34,4 @@
     "appid": "wx50b11af56ee2a3ed",
     "editorSetting": {},
     "libVersion": "3.11.1"
-}
+}