|
|
@@ -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>
|
ext.liuqiwen3