From 44052b22c307a808ac321ce697c9e3b08737e357 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 6 Aug 2024 18:11:49 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E8=AF=A6=E6=83=85=EF=BC=9A=E6=A0=B8=E9=94=80=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=80=BB=E8=BE=91=E5=8F=8A=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/order/detail.vue       |  33 ++++-
 pages/order/pickUpVerify.vue | 261 +++++++++++++++++++++++++++++++++++
 sheep/api/trade/delivery.js  |  14 +-
 static/images/writeOff.png   | Bin 0 -> 2315 bytes
 4 files changed, 299 insertions(+), 9 deletions(-)
 create mode 100644 pages/order/pickUpVerify.vue
 create mode 100644 static/images/writeOff.png

diff --git a/pages/order/detail.vue b/pages/order/detail.vue
index b9527e76..e6ac016c 100644
--- a/pages/order/detail.vue
+++ b/pages/order/detail.vue
@@ -45,9 +45,9 @@
         </image>
         <view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
       </view>
-      <view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{
-        formatOrderStatusDescription(state.orderInfo)
-      }}</view>
+      <view class="ss-font-26 ss-m-x-20 ss-m-b-70">
+        {{ formatOrderStatusDescription(state.orderInfo) }}
+      </view>
     </view>
 
     <!-- 收货地址 -->
@@ -126,6 +126,9 @@
       </view>
     </view>
 
+    <!--  自提核销  -->
+    <PickUpVerify :order-info="state.orderInfo" :systemStore="systemStore" ref="pickUpVerifyRef"></PickUpVerify>
+
     <!-- 订单信息 -->
     <view class="notice-box">
       <view class="notice-box__content">
@@ -251,7 +254,7 @@
 <script setup>
   import sheep from '@/sheep';
   import { onLoad } from '@dcloudio/uni-app';
-  import { reactive } from 'vue';
+  import { reactive, ref } from 'vue';
   import { isEmpty } from 'lodash';
   import {
     fen2yuan,
@@ -260,6 +263,8 @@
     handleOrderButtons,
   } from '@/sheep/hooks/useGoods';
   import OrderApi from '@/sheep/api/trade/order';
+  import DeliveryApi from '@/sheep/api/trade/delivery';
+  import PickUpVerify from '@/pages/order/pickUpVerify.vue';
 
   const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
   const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
@@ -270,6 +275,9 @@
     comeinType: '', // 进入订单详情的来源类型
   });
 
+  // ========== 门店自提（核销） ==========
+  const systemStore = ref({}); // 门店信息
+
   // 复制
   const onCopy = () => {
     sheep.$helper.copyText(state.orderInfo.no);
@@ -294,7 +302,7 @@
     uni.showModal({
       title: '提示',
       content: '确定要取消订单吗?',
-      success: async function (res) {
+      success: async function(res) {
         if (!res.confirm) {
           return;
         }
@@ -366,15 +374,18 @@
       },
     });
   }
+
   // #endif
 
   // 评价
   function onComment(id) {
     sheep.$router.go('/pages/goods/comment/add', {
-      id
+      id,
     });
   }
 
+  const pickUpVerifyRef = ref();
+
   async function getOrderDetail(id) {
     // 对详情数据进行适配
     let res;
@@ -389,6 +400,14 @@
     if (res.code === 0) {
       state.orderInfo = res.data;
       handleOrderButtons(state.orderInfo);
+      // 配送方式：门店自提
+      if (res.data.pickUpStoreId) {
+        const { data } = await DeliveryApi.getDeliveryPickUpStore(res.data.pickUpStoreId);
+        systemStore.value = data || {};
+      }
+      if (state.orderInfo.deliveryType === 2 && state.orderInfo.payStatus) {
+        pickUpVerifyRef.value && pickUpVerifyRef.value.markCode(res.data.pickUpVerifyCode);
+      }
     } else {
       sheep.$router.back();
     }
@@ -429,7 +448,7 @@
     color: rgba(#fff, 0.9);
     width: 100%;
     background: v-bind(headerBg) no-repeat,
-      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
     background-size: 750rpx 100%;
     box-sizing: border-box;
 
diff --git a/pages/order/pickUpVerify.vue b/pages/order/pickUpVerify.vue
new file mode 100644
index 00000000..b16d0804
--- /dev/null
+++ b/pages/order/pickUpVerify.vue
@@ -0,0 +1,261 @@
+<template>
+  <view class='order-details'>
+    <!--  自提商品核销  -->
+    <view v-if="orderInfo.deliveryType === 2 && orderInfo.payStatus" class="writeOff borRadius14">
+      <view class="title">核销信息</view>
+      <view class="grayBg flex-center">
+        <view class="pictrue">
+          <image
+            v-if="!!painterImageUrl"
+            :src="painterImageUrl"
+            :style="{width: `${state.qrcodeSize}px`, height: `${state.qrcodeSize}px`}"
+            :show-menu-by-longpress="true"
+          />
+        </view>
+      </view>
+      <view class="gear">
+        <image :src="sheep.$url.static('/static/images/writeOff.png', 'local')"></image>
+      </view>
+      <view class="num">{{ orderInfo.pickUpVerifyCode }}</view>
+      <view class="rules">
+        <!-- TODO puhui999: 需要后端放回 -->
+<!--        <view class="item">-->
+<!--          <view class="rulesTitle flex flex-wrap align-center">-->
+<!--            核销时间-->
+<!--          </view>-->
+<!--          <view class="info">-->
+<!--            每日：-->
+<!--            <text class="time">2020-2-+52</text>-->
+<!--          </view>-->
+<!--        </view>-->
+        <view class="item">
+          <view class="rulesTitle flex flex-wrap align-center">
+            <text class="iconfont icon-shuoming1"></text>
+            使用说明
+          </view>
+          <view class="info">可将二维码出示给店员扫描或提供数字核销码</view>
+        </view>
+      </view>
+    </view>
+    <view v-if="orderInfo.deliveryType === 2" class="map flex flex-wrap align-center ss-row-between borRadius14">
+      <view>自提地址信息</view>
+      <view class="place cart-color flex flex-wrap flex-center" @tap="showMaoLocation">
+        查看位置
+      </view>
+    </view>
+    <!--  海报画板：默认隐藏只用来生成海报。生成方式为主动调用  -->
+    <l-painter
+      v-if="showPainter"
+      isCanvasToTempFilePath
+      pathType="url"
+      @success="setPainterImageUrl"
+      hidden
+      ref="painterRef"
+    />
+  </view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import { reactive, ref } from 'vue';
+
+  const props = defineProps({
+    orderInfo: {
+      type: Object,
+      default() {},
+    },
+    systemStore:{
+      type: Object,
+      default() {},
+    }
+  });
+  const state = reactive({
+    qrcodeSize: 145
+  })
+
+  /**
+   * 打开地图
+   */
+  const showMaoLocation = () => {
+    console.log(props.systemStore);
+    if (!props.systemStore.latitude || !props.systemStore.longitude) {
+      sheep.$helper.toast('缺少经纬度信息无法查看地图!');
+      return
+    }
+    uni.openLocation({
+      latitude: props.systemStore.latitude,
+      longitude: props.systemStore.longitude,
+      scale: 8,
+      name: props.systemStore.name,
+      address: props.systemStore.areaName + props.systemStore.detailAddress,
+    });
+  }
+  /**
+   * 拨打电话
+   */
+  const makePhone = () => {
+    uni.makePhoneCall({
+      phoneNumber: props.systemStore.phone
+    })
+  }
+
+  const painterRef = ref(); // 海报画板
+  const painterImageUrl = ref(); // 海报 url
+  const showPainter = ref(true)
+  // 渲染海报
+  const renderPoster = async (poster) => {
+    await painterRef.value.render(poster);
+  };
+  // 获得生成的图片
+  const setPainterImageUrl = (path) => {
+    painterImageUrl.value = path;
+    showPainter.value = false
+  };
+  /**
+   * 生成核销二维码
+   */
+  const markCode = (text) => {
+    renderPoster({
+      css: {
+        width: `${state.qrcodeSize}px`,
+        height: `${state.qrcodeSize}px`
+      },
+      views:[
+        {
+          type: 'qrcode',
+          text: text,
+          css: {
+            width: `${state.qrcodeSize}px`,
+            height: `${state.qrcodeSize}px`
+          }
+        }
+      ]
+    })
+  }
+  defineExpose({
+    markCode
+  })
+</script>
+
+<style scoped lang="scss">
+  // TODO puhui999: 样式需要调整有 bug
+  .borRadius14 {
+    border-radius: 14rpx !important;
+  }
+  .cart-color {
+    color: #E93323 !important;
+    border: 1px solid #E93323 !important
+  }
+  .order-details{
+    border-radius: 10rpx;
+    margin: 0 20rpx 20rpx 20rpx;
+  }
+  .order-details .writeOff {
+    background-color: #fff;
+    margin-top: 15rpx;
+    padding-bottom: 50rpx;
+  }
+
+  .order-details .writeOff .title {
+    font-size: 30rpx;
+    color: #282828;
+    height: 87rpx;
+    border-bottom: 1px solid #f0f0f0;
+    padding: 0 24rpx;
+    line-height: 87rpx;
+  }
+
+  .order-details .writeOff .grayBg {
+    background-color: #f2f5f7;
+    width: 590rpx;
+    height: 384rpx;
+    border-radius: 20rpx 20rpx 0 0;
+    margin: 50rpx auto 0 auto;
+    padding-top: 55rpx;
+  }
+
+  .order-details .writeOff .grayBg .pictrue {
+    width: 290rpx;
+    height: 290rpx;
+  }
+
+  .order-details .writeOff .grayBg .pictrue image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .order-details .writeOff .gear {
+    width: 590rpx;
+    height: 30rpx;
+    margin: 0 auto;
+  }
+
+  .order-details .writeOff .gear image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .order-details .writeOff .num {
+    background-color: #f0c34c;
+    width: 590rpx;
+    height: 84rpx;
+    color: #282828;
+    font-size: 48rpx;
+    margin: 0 auto;
+    border-radius: 0 0 20rpx 20rpx;
+    text-align: center;
+    padding-top: 4rpx;
+  }
+
+  .order-details .writeOff .rules {
+    margin: 46rpx 30rpx 0 30rpx;
+    border-top: 1px solid #f0f0f0;
+    padding-top: 10rpx;
+  }
+
+  .order-details .writeOff .rules .item {
+    margin-top: 20rpx;
+  }
+
+  .order-details .writeOff .rules .item .rulesTitle {
+    font-size: 28rpx;
+    color: #282828;
+  }
+
+  .order-details .writeOff .rules .item .rulesTitle .iconfont {
+    font-size: 30rpx;
+    color: #333;
+    margin-right: 8rpx;
+    margin-top: 5rpx;
+  }
+
+  .order-details .writeOff .rules .item .info {
+    font-size: 28rpx;
+    color: #999;
+    margin-top: 7rpx;
+  }
+
+  .order-details .writeOff .rules .item .info .time {
+    margin-left: 20rpx;
+  }
+
+  .order-details .map {
+    height: 86rpx;
+    font-size: 30rpx;
+    color: #282828;
+    line-height: 86rpx;
+    border-bottom: 1px solid #f0f0f0;
+    margin-top: 15rpx;
+    background-color: #fff;
+    padding: 0 24rpx;
+  }
+
+  .order-details .map .place {
+    font-size: 26rpx;
+    width: 176rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    line-height: 50rpx;
+    text-align: center;
+  }
+</style>
diff --git a/sheep/api/trade/delivery.js b/sheep/api/trade/delivery.js
index 6f0f7f5a..a6551dab 100644
--- a/sheep/api/trade/delivery.js
+++ b/sheep/api/trade/delivery.js
@@ -13,9 +13,19 @@ const DeliveryApi = {
     return request({
       url: `/trade/delivery/pick-up-store/list`,
       method: 'GET',
-      params
+      params,
     });
-  }
+  },
+  // 获得自提门店
+  getDeliveryPickUpStore: (id) => {
+    return request({
+      url: `/trade/delivery/pick-up-store/get`,
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
 };
 
 export default DeliveryApi;
diff --git a/static/images/writeOff.png b/static/images/writeOff.png
new file mode 100644
index 0000000000000000000000000000000000000000..68749d8bae1165c970e40afbcf88a4a4271984f3
GIT binary patch
literal 2315
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
Ha*qBF@-=tW

literal 0
HcmV?d00001