wxapp_shuibei/pages/users/goods_logistics/index.vue

<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>