app

MrShi

2026-04-27 e56792f78e4df0df2f12552d1a61dd8ca1db5c67

 small-program/pages/payment-success/payment-success.vue

@@ -16,33 +16,79 @@
         </view>

         <view class="pickup-card">
            <text class="pickup-title">自提码</text>
            <text class="pickup-title">核销码</text>
            <view class="qrcode-box">
               <image class="qrcode-image" src="" mode="aspectFit"></image>
               <canvas canvas-id="qrcodeCanvas" id="qrcodeCanvas" style="width: 100px; height: 100px;"></canvas>
               <image class="qrcode-image" :src="qrcodeImage" mode="widthFix"></image>
            </view>
            <text class="pickup-code">38389</text>
            <text class="pickup-tip" @tap="copyCode">点击复制自提码</text>
            <text class="pickup-code">{{ orderDetail.memberVerifyCode }}</text>
            <text class="pickup-tip" @tap="copyCode">点击复制核销码</text>
         </view>
      </view>
   </view>
</template>

<script>
   import drawQrcode from 'weapp-qrcode'

   export default {
      data() {
         return {
            orderId: '',
            orderDetail: null,
            qrcodeImage: ''
         }
      },
      onLoad(options) {
         this.orderId = options.orderId
         uni.setNavigationBarTitle({
            title: '支付成功'
         })
         this.getOrderDetail()
      },
      methods: {
         async getOrderDetail() {
            const res = await this.$u.api.getOrderDetail(this.orderId)
            if (res.code === 200) {
               this.orderDetail = res.data
               if (this.orderDetail.memberVerifyCode) {
                  this.generateQrcode(this.orderDetail.memberVerifyCode)
               }
            }
         },
         generateQrcode(code) {
            drawQrcode({
               canvasId: 'qrcodeCanvas',
               text: code,
               width: 100,
               height: 100,
               correctLevel: 2
            })
            setTimeout(() => {
               uni.canvasToTempFilePath({
                  canvasId: 'qrcodeCanvas',
                  success: (res) => {
                     this.qrcodeImage = res.tempFilePath
                  }
               }, this)
            }, 100)
         },
         goHome() {
            uni.switchTab({
               url: '/pages/index/index'
            })
         },
         viewOrder() {
            uni.switchTab({
               url: '/pages/itinerary/itinerary'
            uni.navigateTo({
               url:'/pages/delivery-order-detail/delivery-order-detail?userType=0&id='+this.orderId
            })
         },
         copyCode() {
            if (!this.orderDetail || !this.orderDetail.memberVerifyCode) {
               return
            }
            uni.setClipboardData({
               data: '38389',
               data: this.orderDetail.memberVerifyCode,
               success: () => {
                  uni.showToast({
                     title: '已复制自提码',
@@ -50,7 +96,7 @@
                  })
               }
            })
         }
         } 
      }
   }
</script>
@@ -155,12 +201,18 @@
      height: 360rpx;
      border-radius: 8rpx;
      box-sizing: border-box;
      position: relative;
      canvas {
         position: absolute;
         top: 0;
         left: 0;
         opacity: 0;
      }
   }

   .qrcode-image {
      width: 100%;
      height: 100%;
      background: #f4f6fa;
   }

   .pickup-code {