物流订单

src/api/order.js

@@ -114,3 +114,11 @@ export function getLogisticsMap(data) {
     data,
   });
 }
+
+// 确认收货 orderNumber
+export function confirmReceipt(data) {
+  return request({
+    url: '/sgyrdd/sgyOrder/receipt/' + data,
+    method: 'POST',
+  });
+}

src/pages/assistingAgriculture/order/components/stepBar/index.vue

@@ -15,72 +15,49 @@
         </view>
         <view class="top">
           <view class="left">
-            <image class="logo" src="/static/ticket/logo.png" mode="aspectFill"></image>
-            <text>中通快递78810259271088</text>
+            <image class="logo" :src="iconUrl + info.com + '.png'" mode="aspectFill"></image>
+            <view class="text">{{ info.companyName }}{{ info.nu }}</view>
           </view>
           <view class="right">
-            <text>复制</text>
+            <text @tap="copyTextToClipboard(info.nu)">复制</text>
             <text>丨</text>
-            <text>打电话</text>
+            <text @tap="callShopPhone(shopInfo.phone)">打电话</text>
           </view>
         </view>
       </view>
     </view>
     <view class="steps">
       <wd-steps :active="1" vertical>
-        <wd-step>
-          <template #icon>
-            <view class="dot-red"></view>
-          </template>
-          <template #title>
-            <view class="titlebox">
-              <text class="title red-title">待取件</text>
-              <text class="time red">06-25 17:37</text>
-            </view>
-          </template>
-          <template #description>
-            <view class="desc">您购买的包裹已暂存至贵阳市市政公园菜鸟驿站， 请凭取件码取件。</view>
-          </template>
-        </wd-step>
-        <wd-step>
-          <template #icon>
-            <view class="dot"></view>
-          </template>
-          <template #title>
-            <view class="titlebox">
-              <text class="title">派送中</text>
-              <text class="time">06-25 09:05</text>
-            </view>
-          </template>
-          <template #description>
-            <rich-text class="desc1" :nodes="detail"></rich-text>
-          </template>
-        </wd-step>
-        <wd-step>
-          <template #icon>
-            <view class="dot"></view>
-          </template>
-          <template #title>
-            <view class="titlebox">
-              <text class="title">运输中</text>
-              <text class="time">06-25 05:15</text>
-            </view>
-          </template>
-          <template #description>
-            <text class="desc2">【贵阳市】快件已到达 贵阳小河二部</text>
-          </template>
-        </wd-step>
-        <wd-step>
+        <wd-step v-for="(item, index) in info.data" :key="index">
           <template #icon>
-            <view class="dot"></view>
+            <view class="dot-red" v-if="index === 0"></view>
+            <view class="dot" v-else></view>
           </template>
           <template #title>
             <view class="titlebox">
-              <text class="time">06-20 01:25</text>
+              <text
+                class="title"
+                :class="index === 0 ? 'red-title' : ''"
+                v-if="item.status !== '在途'"
+              >
+                {{ item.status }}
+              </text>
+              <text class="time" :class="index === 0 ? 'red' : ''">
+                {{ item.ftime.slice(5, 16) }}
+              </text>
             </view>
           </template>
           <template #description>
-            <text class="desc2">【黔南布依族苗族自治州】快件已发往 贵阳小河二部</text>
+            <!-- <rich-text class="desc1" :nodes="item.context"></rich-text> -->
+            <text
+              class="desc1"
+              v-for="(t, i) in distinguishPhone(item.context)"
+              @click="phoneCall(t)"
+              :key="i"
+              :style="{ color: t.type === 'phone' ? '#ff0909' : '' }"
+            >
+              {{ t.val }}
+            </text>
           </template>
         </wd-step>
         <wd-step>
@@ -99,9 +76,12 @@
     <view class="bottom">
       <view class="b-icon">收</view>
       <view class="right">
-        <text class="title">送至 贵阳市市政公园正门菜鸟驿站</text>
+        <text class="title">送至 {{ orderInfo.orderLogistics.receiverAddress }}</text>
         <view class="rowbox">
-          <text class="text1">李先生 +86-187****4253</text>
+          <text class="text1">
+            {{ orderInfo.orderLogistics.receiverName }}
+            {{ maskPhoneNumber(orderInfo.orderLogistics.receiverMobile) }}
+          </text>
           <text class="text">隐藏保护中</text>
         </view>
       </view>
@@ -111,11 +91,18 @@
 
 <script setup>
 const props = defineProps({
-  dataList: {
-    type: Array,
+  orderInfo: {
+    type: Object,
     default: null,
   },
+  phone: {
+    type: String,
+    default: '',
+  },
 });
+const info = ref({}); // 物流轨迹信息
+
+const iconUrl = ref('https://cdn.kuaidi100.com/images/all/56/');
 const show = ref(false);
 // 正则表达式匹配电话号码
 const phoneRegex = /\b(\d{3,4}-\d{7,8}|\d{11})\b/g;
@@ -123,16 +110,78 @@ const phoneRegex = /\b(\d{3,4}-\d{7,8}|\d{11})\b/g;
 const highlightedText = (val) => {
   return val.replace(phoneRegex, '<span class="highlight">$1</span>');
 };
-const detail = ref(
-  '【贵阳市】贵阳小河二部的业务员【文凯凯， 18784286692】正在为您派件（95720为中通快递员外呼专属号码，请放心接听，如有问题可联系网点：0851-83876676，投诉电话：0851-83876678）',
-);
-const open = () => {
-  detail.value = highlightedText(detail.value);
+
+const maskPhoneNumber = (phone) => {
+  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+};
+
+const distinguishPhone = (val) => {
+  const a = val;
+  const c = a.split(phoneRegex);
+  const list = [];
+  for (const i in c) {
+    const flag = c[i] !== '' && phoneRegex.test(c[i]);
+    c[i] !== '' &&
+      list.push({
+        type: flag ? 'phone' : 'text',
+        val: c[i],
+      });
+  }
+  return list;
+};
+
+/**
+ * 拨打商家电话
+ * @param {*} phoneNumber
+ */
+function callShopPhone(phoneNumber) {
+  xma.makePhoneCall({
+    phoneNumber, // 仅为示例
+  });
+}
+
+const phoneCall = (t) => {
+  if (t.type === 'phone') {
+    console.log(t.val);
+    uni.makePhoneCall({
+      phoneNumber: t.val,
+      success: () => {},
+      fail: () => {},
+    });
+  }
+};
+
+/**
+ * 复制到剪切板
+ * @param {*} text
+ */
+function copyTextToClipboard(text) {
+  xma.setClipboardData({
+    data: text,
+    success: function () {
+      // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
+      xma.showToast({
+        title: '复制成功',
+        icon: 'success',
+        duration: 2000,
+      });
+    },
+  });
+}
+
+const open = (val) => {
+  info.value = val;
+  // info.value.data.forEach((item) => {
+  //   item.context = highlightedText(item.context);
+  // });
+  console.log(info.value);
   show.value = true;
 };
+
 const close = () => {
   show.value = false;
 };
+
 defineExpose({
   open,
   close,
@@ -150,6 +199,12 @@ defineExpose({
     border-bottom: 1px solid #ededed;
     padding: 20rpx 30rpx 33rpx;
     gap: 26rpx;
+    position: fixed;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #fff;
+    z-index: 10;
+    border-radius: 16rpx 16rpx 0 0;
 
     .rowbox {
       display: flex;
@@ -181,7 +236,7 @@ defineExpose({
           border-radius: 50%;
         }
 
-        text {
+        .text {
           font-family: PingFang SC;
           font-weight: 500;
           font-size: 28rpx;
@@ -207,6 +262,7 @@ defineExpose({
 }
 
 .steps {
+  margin-top: 160rpx;
   padding: 28rpx 30rpx;
 
   &:deep(.wd-step__icon.is-icon) {
@@ -317,6 +373,7 @@ defineExpose({
     display: flex;
     flex-direction: column;
     gap: 6rpx;
+
     .title {
       font-family:
         PingFang SC,

src/pages/assistingAgriculture/order/detail.vue

@@ -7,39 +7,67 @@
       v-if="logisticsDetail"
     ></web-view>
     <!-- <view style="height: 600rpx; background-color: aquamarine"></view> -->
-    <view class="content">
+    <view class="content" v-if="orderDetail">
       <view class="info">
-        <view class="top">
+        <view class="top" v-if="logisticsDetail">
           <view class="left">
-            <image class="logo" src="/static/ticket/logo.png" mode="aspectFill"></image>
-            <text>中通快递{{ orderDetail.orderLogistics.logisticsNumber }}</text>
+            <image
+              class="logo"
+              :src="iconUrl + logisticsDetail.com + '.png'"
+              mode="aspectFill"
+            ></image>
+            <view class="text">
+              {{ logisticsDetail.companyName }}{{ orderDetail.orderLogistics.logisticsNumber }}
+            </view>
           </view>
           <view class="right">
-            <text>复制</text>
+            <text @tap="copyTextToClipboard(orderDetail.orderLogistics.logisticsNumber)">复制</text>
             <text>丨</text>
-            <text>打电话</text>
+            <text @tap="callShopPhone(shopDetail.phone)">打电话</text>
           </view>
         </view>
-        <view class="steps">
+        <view class="steps" :style="{ 'padding-top': logisticsDetail ? '0' : '80rpx' }">
           <view class="step-box">
             <view class="header">
               <view class="dot"></view>
               <view class="line"></view>
             </view>
             <view class="content">
-              <view class="rowbox">
+              <view
+                class="rowbox"
+                v-if="
+                  orderDetail.orderLogistics.status === '3' ||
+                  orderDetail.orderLogistics.status === '4' ||
+                  orderDetail.orderLogistics.status === '5'
+                "
+              >
                 <view class="textbox">
-                  <text class="title">待取件</text>
-                  <text class="text">06-25 17:37</text>
+                  <text class="title">{{ logisticsDetail.data[0].status }}</text>
+                  <text class="text">{{ logisticsDetail.data[0].ftime.slice(5, 16) }}</text>
                 </view>
                 <text class="detail" @tap="openPop()">详细信息 ></text>
               </view>
-              <view class="detailbox">
-                <text class="text">
-                  【贵阳市】您的快递已签收。如有疑问请联系业务员：
-                  18275185576，代理点电话：18275185576，投诉电
-                  话：0851-88628778。感谢使用中通快递，期待再次 为您服务！
+              <view class="rowbox" v-else>
+                <view class="textbox" v-if="orderDetail">
+                  <text class="title">
+                    {{ orderStatusList[orderDetail.orderLogistics.status] }}
                   </text>
+                  <text class="text" v-if="orderDetail.orderLogistics.status === '2'">
+                    {{ orderDetail.orderLogistics.createTime.slice(5, 16) }}
+                  </text>
+                </view>
+              </view>
+              <view class="detailbox">
+                <rich-text
+                  class="text"
+                  v-if="
+                    orderDetail.orderLogistics.status === '3' ||
+                    orderDetail.orderLogistics.status === '4' ||
+                    orderDetail.orderLogistics.status === '5'
+                  "
+                  :nodes="logisticsDetail.data[0].context"
+                ></rich-text>
+                <text class="text" v-if="logisticsDetail"></text>
                 <!-- <view class="infobox">
                   <text class="addr">请问本次收件是否遇到问题？</text>
                   <view class="row">
@@ -47,13 +75,13 @@
                     <view class="btn">去评价</view>
                   </view>
                 </view> -->
-                <view class="infobox">
+                <!-- <view class="infobox">
                   <text class="addr">贵阳市市政公园菜鸟驿站店</text>
                   <view class="column">
                     <text class="text">取件码</text>
                     <text class="code">2-7-4109</text>
                   </view>
-                </view>
+                </view> -->
               </view>
             </view>
           </view>
@@ -62,16 +90,19 @@
               <view class="past-dot"></view>
               <!-- <view class="line"></view> -->
             </view>
-            <view class="content">
-              <text class="title">送至 贵阳市市政公园正门菜鸟驿站</text>
+            <view class="content" v-if="orderDetail">
+              <text class="title">送至 {{ orderDetail.orderLogistics.receiverAddress }}</text>
               <view class="rowbox">
-                <text class="text1">李先生 +86-187****4253</text>
+                <text class="text1">
+                  {{ orderDetail.orderLogistics.receiverName }}
+                  {{ maskPhoneNumber(orderDetail.orderLogistics.receiverMobile) }}
+                </text>
                 <text class="text">隐藏保护中</text>
               </view>
-              <view class="rowbox">
+              <!-- <view class="rowbox">
                 <text class="text1">取件时可初始虚拟号码 172****4532-3113</text>
                 <wd-icon name="browse" size="22px" color="#999"></wd-icon>
-              </view>
+              </view> -->
             </view>
           </view>
         </view>
@@ -122,7 +153,7 @@
           <view class="total-item">
             <text>实付</text>
             <view class="pricebox">
-              <text class="text">共2件 合计：</text>
+              <view class="text">共{{ orderDetail.prodCount }}件 合计：</view>
               <text class="icon">￥</text>
               <text class="price">{{ orderDetail.orderLogistics.actualTotal }}</text>
               <!-- <text class="icon">{{ orderDetail.orderLogistics.actualTotal.split('.')[1] }}</text> -->
@@ -161,20 +192,36 @@
       <view style="height: 170rpx"></view>
     </view>
     <view class="footer" v-if="orderDetail">
-      <view class="btn" v-if="orderDetail.orderLogistics.status === '3'">查看物流</view>
-      <view class="btn">联系商家</view>
-      <view class="btn err" v-if="orderDetail.orderLogistics.status === '3'">确认收货</view>
-      <view class="btn err" v-if="orderDetail.orderLogistics.status === '1'">立即付款</view>
+      <view class="btn" v-if="orderDetail.orderLogistics.status === '3'" @tap="openPop()">
+        查看物流
+      </view>
+      <view class="btn" @tap="callShopPhone(shopDetail.phone)">联系商家</view>
+      <view class="btn err" v-if="orderDetail.orderLogistics.status === '3'" @click="receipt()">
+        确认收货
+      </view>
+      <view
+        class="btn err"
+        v-if="orderDetail.orderLogistics.status === '4'"
+        @click="handleRemark()"
+      >
+        评价订单
+      </view>
     </view>
   </view>
-  <stepBar ref="stepBarRef"></stepBar>
+  <stepBar
+    v-if="logisticsDetail"
+    ref="stepBarRef"
+    :orderInfo="orderDetail"
+    :phone="shopDetail.phone"
+  ></stepBar>
 </template>
 
 <script setup>
 import Header from '@/pages/order/components/Header/index.vue';
 import stepBar from '@/pages/assistingAgriculture/order/components/stepBar/index.vue';
-import { getOrderDetail, getShopDetail, getLogisticsMap } from '@/api/order';
+import { getOrderDetail, getShopDetail, getLogisticsMap, confirmReceipt } from '@/api/order';
 const fileDomain = import.meta.env.VITE_APP_IMG_URL;
+const iconUrl = ref('https://cdn.kuaidi100.com/images/all/56/');
 
 const orderNumber = ref('');
 onLoad((options) => {
@@ -182,6 +229,16 @@ onLoad((options) => {
   getDetail();
 });
 
+const orderStatusList = ref({
+  1: '待付款',
+  2: '待发货',
+  3: '待收货',
+  4: '待评价',
+  5: '已完成',
+  6: '已取消',
+  7: '退款',
+});
+
 const payWayList = ref({
   0: '翼支付',
   1: '支付宝',
@@ -193,12 +250,23 @@ const payWayList = ref({
  */
 const orderDetail = ref();
 const getDetail = async () => {
+  xma.showLoading({
+    title: '加载中...',
+    mask: true,
+  });
   const res = await getOrderDetail({ orderNumber: orderNumber.value });
   orderDetail.value = res.data;
   getShopMailDetail(orderDetail.value.baseOrder.shopId);
   if (orderDetail.value.orderLogistics.logisticsNumber) {
     getLogisticsDetail(orderDetail.value.orderLogistics.logisticsNumber);
   }
+  // 计算购买件数
+  let count = 0;
+  orderDetail.value.orderItems.forEach((item) => {
+    count += item.prodCount;
+  });
+  orderDetail.value.prodCount = count;
+  xma.hideLoading();
 };
 
 /**
@@ -238,7 +306,78 @@ const changeShowMore = () => {
 
 const stepBarRef = ref(null);
 const openPop = () => {
-  stepBarRef.value.open();
+  stepBarRef.value.open(logisticsDetail.value);
+};
+
+const maskPhoneNumber = (phone) => {
+  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+};
+
+/**
+ * 拨打商家电话
+ * @param {*} phoneNumber
+ */
+function callShopPhone(phoneNumber) {
+  xma.makePhoneCall({
+    phoneNumber, // 仅为示例
+  });
+}
+
+/**
+ * 复制到剪切板
+ * @param {*} text
+ */
+function copyTextToClipboard(text) {
+  xma.setClipboardData({
+    data: text,
+    success: function () {
+      // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
+      xma.showToast({
+        title: '复制成功',
+        icon: 'success',
+        duration: 2000,
+      });
+    },
+  });
+}
+
+/**
+ * 确认收货
+ * @param {*} orderNumber
+ */
+const receipt = () => {
+  xma.showModal({
+    title: '提示',
+    content: '确认收货后，订单将无法退换货，请确认是否已收到货物',
+    success: function (res) {
+      if (res.confirm) {
+        xma.showLoading({
+          title: '加载中',
+          mask: true,
+        });
+        confirmReceipt(orderNumber.value).then((res) => {
+          xma.hideLoading();
+          xma.showToast({
+            title: '收货成功',
+            icon: 'success',
+            duration: 2000,
+          });
+          setTimeout(() => {
+            getDetail();
+          });
+        });
+      }
+    },
+  });
+};
+
+/**
+ * 订单评价
+ */
+const handleRemark = () => {
+  xma.navigateTo({
+    url: `/pages/order/remark?orderNumber=${orderNumber.value}&shopName=${shopDetail.value.shopName}`,
+  });
 };
 </script>
 
@@ -285,7 +424,7 @@ page {
             border-radius: 50%;
           }
 
-          text {
+          .text {
             font-family: PingFang SC;
             font-weight: 500;
             font-size: 28rpx;

src/pages/order/order.vue

@@ -78,6 +78,7 @@
                   >
                     删除
                   </view>
+                  <view v-if="item.orderType !== 'logistics'">
                     <view
                       class="btn-info"
                       v-if="item.status === 'receive' || item.status == 'not_use'"
@@ -85,6 +86,23 @@
                     >
                       核销码
                     </view>
+                  </view>
+                  <view v-if="item.orderType === 'logistics'">
+                    <view
+                      class="btn-info"
+                      v-if="item.status == 'not_use'"
+                      @tap="handleDetail(item)"
+                    >
+                      查看物流
+                    </view>
+                  </view>
+                  <view
+                    class="btn-info"
+                    @tap="receipt(item.orderNumber)"
+                    v-if="item.orderType === 'logistics' && item.status === 'not_use'"
+                  >
+                    确认收货
+                  </view>
                   <view
                     class="btn-info"
                     @tap="handleCancel(item.orderNumber)"
@@ -167,6 +185,7 @@ import {
   cancelOrderApi,
   repaymentApi,
   getOrderDetail,
+  confirmReceipt,
 } from '@/api/order';
 import { getOrderDic } from '@/utils/orderDic';
 import { orderStatus, signIn } from '@/utils/signIn';
@@ -302,7 +321,7 @@ const catalog = reactive({
   endDate: '',
   keyword: '',
   status: '', // 待付款-not_pay，待使用-not_use，待评价not_eval，退款-after_sales
-  orderType: '', // 团购到店-store，外卖订单-takeaway，筑农物流logistics
+  orderType: 'logistics', // 团购到店-store，外卖订单-takeaway，筑农物流logistics
 });
 const getList = async () => {
   if (isEnd.value) return;
@@ -574,6 +593,38 @@ const handleRefund = (item) => {
   });
 };
 
+/**
+ * 确认收货
+ * @param {*} orderNumber
+ */
+const receipt = (orderNumber) => {
+  xma.showModal({
+    title: '提示',
+    content: '确认收货后，订单将无法退换货，请确认是否已收到货物',
+    success: function (res) {
+      if (res.confirm) {
+        xma.showLoading({
+          title: '加载中',
+          mask: true,
+        });
+        confirmReceipt(orderNumber).then((res) => {
+          xma.hideLoading();
+          xma.showToast({
+            title: '收货成功',
+            icon: 'success',
+            duration: 2000,
+          });
+          setTimeout(() => {
+            initDataList().then(() => {
+              getList();
+            }, 2000);
+          });
+        });
+      }
+    },
+  });
+};
+
 /**
  * 店铺详情
  */
@@ -658,6 +709,7 @@ page {
       gap: 10rpx;
       display: flex;
       align-items: center;
+
       .text {
         margin-left: 10rpx;
         font-family:
@@ -762,7 +814,7 @@ page {
       gap: 14rpx;
 
       .btn-info {
-        width: 162rpx;
+        width: 152rpx;
         height: 66rpx;
         border-radius: 34rpx;
         border: 1rpx solid #999999;

src/pages/order/refund.vue

@@ -23,17 +23,17 @@
             <text class="num">{{ orderDetail.orderItems[0].prodCount }}</text>
             <text>件商品 实付款</text>
             <text class="icon">￥</text>
-            <text class="price">{{ orderDetail.orderStore.actualTotal }}</text>
+            <text class="price">{{ orderDetail.baseOrder.actualTotal }}</text>
           </view>
         </view>
         <view class="content-item">
           <view class="item-buttom">
-            <text>{{ orderDetail.orderStore.createTime }}</text>
+            <text>{{ orderDetail.baseOrder.createTime }}</text>
           </view>
         </view>
         <view class="content-between">
           <text>退款金额</text>
-          <text class="price">￥{{ orderDetail.orderStore.actualTotal }}</text>
+          <text class="price">￥{{ orderDetail.baseOrder.actualTotal }}</text>
         </view>
         <view class="content-between">
           <text>相关图片</text>