添加快递信息

src/views/shop-mall/shop-order-detail/index.module.less

@@ -1,11 +1,11 @@
 .shopOrderDetail {
   padding: 12px 14px;
-  :global{
-    .van-cell__title{
+  :global {
+    .van-cell__title {
       font-size: 14px;
       color: #999;
     }
-    .van-cell__value{
+    .van-cell__value {
       font-size: 14px;
       color: #333;
     }
@@ -20,6 +20,8 @@ body {
   overflow: hidden;
   margin-bottom: 12px;
   padding: 14px;
+
+  --van-step-circle-size: 10px;
   :global {
     .van-card {
       background: transparent;
@@ -31,6 +33,16 @@ body {
       font-weight: 500;
     }
   }
+
+  .logisticsTitle {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+  .logisticsTime {
+    padding-top: 5px;
+    font-size: 14px;
+  }
 }
 .addressDetail {
   :global {
@@ -40,8 +52,8 @@ body {
   }
 }
 
-.copyWrap{
+.copyWrap {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-}
+}

src/views/shop-mall/shop-order-detail/index.tsx

@@ -1,23 +1,34 @@
 import request from '@/helpers/request'
-import { Divider, Cell, CellGroup, Button, Toast } from 'vant'
+import {
+  Divider,
+  Cell,
+  CellGroup,
+  Button,
+  Toast,
+  Steps,
+  Step,
+  Dialog
+} from 'vant'
 import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import ShopItem from '../components/shop-item'
 import styles from './index.module.less'
 import { orderState } from '@/views/shop-mall/shop-mall'
-import { moneyFormat } from '@/helpers/utils'
+import { dateFormat, moneyFormat } from '@/helpers/utils'
+import ColSticky from '@/components/col-sticky'
 
 export default defineComponent({
   name: 'shop-order-detail',
   setup() {
     const route = useRoute()
-    let items = ref([])
-    let order = ref({}) as any
+    const items = ref([])
+    const order = ref({}) as any
+    const deliveryList = ref([])
     const getOrderInfo = async () => {
       const id = route.query.id
       if (!id) return
       try {
-        let { code, data } = await request.get(
+        const { code, data } = await request.get(
           `/api-mall-portal/order/detail/${id}`
         )
         if (code === 200) {
@@ -30,8 +41,15 @@ export default defineComponent({
             data.receiverRegion,
             data.receiverDetailAddress
           ].join('')
+
+          // 判断是否有订单号
+          if (data.deliverySn) {
+            await getCourier(data.deliverySn)
+          }
         }
-      } catch (error) {}
+      } catch (error) {
+        //
+      }
     }
     onMounted(() => {
       getOrderInfo()
@@ -79,112 +97,190 @@ export default defineComponent({
       }
     }
 
+    // 获取物流信息
+    const getCourier = async (deliverySn: string) => {
+      try {
+        const { data } = await request.get(
+          '/api-mall-portal/order/selectCourier',
+          {
+            params: {
+              deliverySn
+            }
+          }
+        )
+        const logistics = data.logistics ? JSON.parse(data.logistics) : []
+        console.log(logistics)
+        deliveryList.value = logistics
+      } catch {
+        //
+      }
+    }
+
+    // 确认收货
+    const onConfirmReceipt = async (item: any) => {
+      const dialog = await Dialog.confirm({
+        title: '提示',
+        message: '确认收货?',
+        confirmButtonText: '收货',
+        confirmButtonColor: 'var(--van-primary)'
+      })
+      if (dialog === 'confirm') {
+        const res = await request.post(
+          '/api-mall-portal/order/confirmReceiveOrder',
+          { params: { orderId: item.id } }
+        )
+        if (res.code === 200) {
+          getOrderInfo()
+        }
+      }
+    }
+
     return () => (
       <>
         {items.value.length ? (
-          <div class={styles.shopOrderDetail}>
-            <div class={styles.box}>
-              {items.value.map((item: any, index: number) => (
-                <div>
-                  <ShopItem item={item}></ShopItem>
-                  {index === items.value.length - 1 ? null : (
-                    <Divider></Divider>
-                  )}
-                </div>
-              ))}
-            </div>
-
-            <div class={styles.box} style={{ padding: 0 }}>
-              <Cell
-                border={false}
-                title="商品价格："
-                value={'¥ ' + moneyFormat(order.value?.totalAmount)}
-              ></Cell>
-              <Cell
-                border={false}
-                title="优惠价格："
-                value={'-¥ ' + moneyFormat(order.value?.couponAmount)}
-              ></Cell>
-              <Cell
-                border={false}
-                title="订单状态："
-                value={orderState[order.value?.status]}
-              ></Cell>
-              <Cell
-                border={false}
-                title="收货状态："
-                value={order.value?.confirmStatus ? '已确认收货' : '未确认收货'}
-              ></Cell>
-              <Divider style={{ margin: 0 }}></Divider>
-              <Cell
-                border={false}
-                title="订单号："
-                value={order.value?.orderSn}
-              ></Cell>
+          <>
+            <div class={styles.shopOrderDetail}>
+              <div class={styles.box}>
+                {items.value.map((item: any, index: number) => (
+                  <div>
+                    <ShopItem item={item}></ShopItem>
+                    {index === items.value.length - 1 ? null : (
+                      <Divider></Divider>
+                    )}
+                  </div>
+                ))}
+              </div>
 
-              <Cell
-                border={false}
-                title="创建时间："
-                value={order.value?.createTime}
-              ></Cell>
-              <Cell
-                border={false}
-                title="付款时间："
-                value={order.value?.paymentTime}
-              ></Cell>
-            </div>
-
-            <div class={styles.box} style={{ padding: 0 }}>
-              <CellGroup title="收货信息" border={false}>
+              <div class={styles.box} style={{ padding: 0 }}>
                 <Cell
                   border={false}
-                  title="姓名："
-                  value={order.value?.receiverName}
+                  title="商品价格："
+                  value={'¥ ' + moneyFormat(order.value?.totalAmount)}
                 ></Cell>
                 <Cell
                   border={false}
-                  title="手机号："
-                  value={order.value?.receiverPhone}
+                  title="优惠价格："
+                  value={'-¥ ' + moneyFormat(order.value?.couponAmount)}
                 ></Cell>
                 <Cell
-                  class={styles.addressDetail}
                   border={false}
-                  title="地址："
-                  value={order.value?.address_data}
+                  title="订单状态："
+                  value={orderState[order.value?.status]}
                 ></Cell>
                 <Cell
-                  class={styles.addressDetail}
                   border={false}
-                  title="物流公司(配送方式):"
-                  value={order.value?.deliveryCompany}
+                  title="收货状态："
+                  value={
+                    order.value?.confirmStatus ? '已确认收货' : '未确认收货'
+                  }
                 ></Cell>
+                <Divider style={{ margin: 0 }}></Divider>
                 <Cell
-                  class={styles.addressDetail}
                   border={false}
-                  title="运单编号："
-                  v-slots={{
-                    value: () => (
-                      <div class={styles.copyWrap}>
-                        <span style={{ marginRight: '8px' }}>
-                          {order.value?.deliverySn}
-                        </span>
-                        {order.value?.deliverySn && (
-                          <Button
-                            size="mini"
-                            onClick={evt => {
-                              copyText(order.value?.deliverySn)
-                            }}
-                          >
-                            点击复制
-                          </Button>
-                        )}
-                      </div>
-                    )
-                  }}
+                  title="订单号："
+                  value={order.value?.orderSn}
+                ></Cell>
+
+                <Cell
+                  border={false}
+                  title="创建时间："
+                  value={order.value?.createTime}
                 ></Cell>
-              </CellGroup>
+                <Cell
+                  border={false}
+                  title="付款时间："
+                  value={order.value?.paymentTime}
+                ></Cell>
+              </div>
+
+              <div class={styles.box} style={{ padding: 0 }}>
+                <CellGroup title="收货信息" border={false}>
+                  <Cell
+                    border={false}
+                    title="姓名："
+                    value={order.value?.receiverName}
+                  ></Cell>
+                  <Cell
+                    border={false}
+                    title="手机号："
+                    value={order.value?.receiverPhone}
+                  ></Cell>
+                  <Cell
+                    class={styles.addressDetail}
+                    border={false}
+                    title="地址："
+                    value={order.value?.address_data}
+                  ></Cell>
+                  <Cell
+                    class={styles.addressDetail}
+                    border={false}
+                    title="物流公司(配送方式):"
+                    value={order.value?.deliveryCompany}
+                  ></Cell>
+                  <Cell
+                    class={styles.addressDetail}
+                    border={false}
+                    title="运单编号："
+                    v-slots={{
+                      value: () => (
+                        <div class={styles.copyWrap}>
+                          <span style={{ marginRight: '8px' }}>
+                            {order.value?.deliverySn}
+                          </span>
+                          {order.value?.deliverySn && (
+                            <Button
+                              size="mini"
+                              onClick={evt => {
+                                copyText(order.value?.deliverySn)
+                              }}
+                            >
+                              点击复制
+                            </Button>
+                          )}
+                        </div>
+                      )
+                    }}
+                  ></Cell>
+                </CellGroup>
+              </div>
+
+              {/* 判断是否有物流单号 */}
+              {deliveryList.value.length > 0 && (
+                <div class={styles.box} style={{ padding: 0 }}>
+                  <CellGroup title="物流信息" border={false}>
+                    <Steps
+                      direction="vertical"
+                      active={0}
+                      activeColor={'var(--van-primary)'}
+                    >
+                      {deliveryList.value.map((item: any) => (
+                        <Step>
+                          <h3 class={styles.logisticsTitle}>{item.context}</h3>
+                          <p class={styles.logisticsTime}>
+                            {dateFormat(item.time, 'YYYY-MM-DD HH:mm')}
+                          </p>
+                        </Step>
+                      ))}
+                    </Steps>
+                  </CellGroup>
+                </div>
+              )}
             </div>
-          </div>
+            <ColSticky position="bottom" background="white">
+              <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
+                <Button
+                  block
+                  round
+                  type="primary"
+                  onClick={() => {
+                    onConfirmReceipt(order.value)
+                  }}
+                >
+                  确认收货
+                </Button>
+              </div>
+            </ColSticky>
+          </>
         ) : null}
       </>
     )