Fix(订单):[#5293]待付款的活动商品，点击立即付款并付款后，页面未出现已获得抽奖码的弹窗

assets/css/style.less

@@ -8231,3 +8231,191 @@ rich-text {
     font-size: 28rpx;
   }
 }
+
+.draw-ticket-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24rpx;
+  box-sizing: border-box;
+}
+.draw-ticket-popup {
+  width: 100%;
+  max-width: 640rpx;
+  background: #fff;
+  border-radius: 40rpx;
+  padding: 50rpx 40rpx 60rpx;
+  position: relative;
+  box-sizing: border-box;
+
+  .draw-ticket-close {
+    position: absolute;
+    top: 30rpx;
+    right: 30rpx;
+    width: 40rpx;
+    height: 40rpx;
+    border: 4rpx solid #333;
+    border-radius: 50%;
+    color: #333;
+    text-align: center;
+    font-weight: bold;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .draw-ticket-icon {
+    display: flex;
+    justify-content: center;
+    margin-top: 20rpx;
+  }
+
+  .ticket-icon-box {
+    width: 100rpx;
+    height: 70rpx;
+    border-radius: 10rpx;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .ticket-icon-check {
+    width: 100%;
+    height: 100%;
+  }
+
+  .draw-ticket-title {
+    font-size: 56rpx;
+    color: #222;
+    font-weight: 800;
+    text-align: center;
+    margin-top: 24rpx;
+    letter-spacing: 2rpx;
+  }
+
+  .ticket-card-container {
+    margin-top: 50rpx;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .ticket-badge {
+    background-color: #fff9eb;
+    border: 6rpx solid #111;
+    border-radius: 40rpx;
+    padding: 12rpx 40rpx;
+    font-size: 46rpx;
+    font-weight: 800;
+    color: #222;
+    position: relative;
+    z-index: 2;
+    margin-bottom: -36rpx;
+    letter-spacing: 2rpx;
+  }
+
+  .ticket-badge-arrow {
+    position: absolute;
+    bottom: -22rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 22rpx solid transparent;
+    border-right: 22rpx solid transparent;
+    border-top: 22rpx solid #111;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: -26rpx;
+      left: -16rpx;
+      border-left: 16rpx solid transparent;
+      border-right: 16rpx solid transparent;
+      border-top: 16rpx solid #fff9eb;
+    }
+  }
+
+  .ticket-card {
+    width: 100%;
+    background: #c23326;
+    border-radius: 36rpx;
+    padding: 70rpx 36rpx 40rpx;
+    box-sizing: border-box;
+    text-align: center;
+    position: relative;
+  }
+
+  .ticket-card-subtitle {
+    display: flex;
+    justify-content: center;
+  }
+
+  .ticket-card-subtitle-text {
+    color: #fff;
+    font-size: 34rpx;
+    font-weight: 700;
+    border: 2rpx solid #fff;
+    border-radius: 40rpx;
+    padding: 8rpx 50rpx;
+    letter-spacing: 4rpx;
+  }
+
+  .ticket-card-code-box {
+    background: #fff;
+    border-radius: 20rpx;
+    margin-top: 36rpx;
+    padding: 36rpx 0;
+  }
+
+  .ticket-card-code {
+    color: #c23326;
+    font-size: 72rpx;
+    font-weight: 800;
+    letter-spacing: 8rpx;
+  }
+
+  .ticket-card-time {
+    color: #fff;
+    font-size: 30rpx;
+    margin-top: 36rpx;
+    text-align: left;
+  }
+
+  .draw-ticket-actions {
+    margin-top: 60rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20rpx;
+
+    .action-btn {
+      flex: 1;
+      height: 86rpx;
+      border-radius: 44rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      white-space: nowrap;
+
+      &.home-btn {
+        color: #c23326;
+        border: 2rpx solid #c23326;
+        background: #fff;
+      }
+
+      &.primary {
+        color: #fff;
+        background: #c23326;
+      }
+    }
+  }
+}

mixins/orderPaySuccessToCheckDrawStatus.js

@@ -0,0 +1,72 @@
+import { getDrawTicketByOrder } from '@/api/lottery'
+export const orderPaySuccessToCheckDrawStatus = {
+	data(){
+		return {
+      drawTicketPopup: {
+        show: false,
+        ticketCode: '',
+        drawTime: ''
+      }
+		}
+	},
+	methods: {
+    setDrawTicketPopupFromQuery(ticketData = '') {
+      const drawTicketData = ticketData || this.$yroute.query.drawTicketData
+      if (!drawTicketData) {
+        return
+      }
+      let result = {}
+      try {
+        result = typeof drawTicketData === 'string' ? JSON.parse(decodeURIComponent(drawTicketData)) : drawTicketData
+        console.log(result)
+      } catch (e) {
+        result = {}
+      }
+      const hasTicket = Number(result.hasTicket || 0) === 1
+      const howPopup = Number(result.showPopup || 0) === 1
+      if (!hasTicket || !howPopup) {
+        return
+      }
+      this.drawTicketPopup = {
+        show: true,
+        ticketCode: result.ticketCode || result.code || '',
+        drawTime: result.drawTime || ''
+      }
+    },
+    closeDrawTicketPopup() {
+      this.drawTicketPopup.show = false
+    },
+    goHomeFromPopup() {
+      this.drawTicketPopup.show = false
+      uni.switchTab({
+        url: '/pages/home/index'
+      })
+    },
+    goTicketsFromPopup() {
+      this.drawTicketPopup.show = false
+      uni.navigateTo({
+        url: '/pkg-video/views/county-my-tickets'
+      })
+    },
+    buildOrderDetailQuery(orderId, drawTicketResult = {}) {
+      return {
+        id: orderId,
+        drawTicketData: encodeURIComponent(JSON.stringify(drawTicketResult || {}))
+      }
+    },
+    async afterPaySuccess(orderId, fallback) {
+      if (!orderId) {
+        fallback && fallback()
+        return
+      }
+      try {
+        const res = await getDrawTicketByOrder(orderId)
+        const result = (res && res.data) || {}
+        fallback && fallback(result)
+        return
+      } catch (e) {
+      }
+      fallback && fallback({})
+    }
+	}
+}

pages/order/MyOrder/index.vue

@@ -602,6 +602,40 @@
       @update:show="showDatePicker = false"
       @input="handleDateSelected"
     ></DateRangePicker>
+    <view
+      v-if="drawTicketPopup.show"
+      class="draw-ticket-mask"
+      @touchmove.stop.prevent
+    >
+      <view class="draw-ticket-popup">
+        <view class="draw-ticket-close" @click="closeDrawTicketPopup">×</view>
+        <view class="draw-ticket-icon">
+          <view class="ticket-icon-box">
+            <image class="ticket-icon-check" :src="webUrl + '/home/gongxi.png'" mode="widthFix"></image>
+          </view>
+        </view>
+        <view class="draw-ticket-title">支付成功</view>
+        <view class="ticket-card-container">
+          <view class="ticket-badge">
+            <text>恭喜获得抽奖码！</text>
+            <view class="ticket-badge-arrow"></view>
+          </view>
+          <view class="ticket-card">
+            <view class="ticket-card-subtitle">
+              <text class="ticket-card-subtitle-text">您的专属抽奖码</text>
+            </view>
+            <view class="ticket-card-code-box">
+              <text class="ticket-card-code">{{ drawTicketPopup.ticketCode }}</text>
+            </view>
+            <view class="ticket-card-time">开奖时间：{{ (drawTicketPopup.drawTime) }}</view>
+          </view>
+        </view>
+        <view class="draw-ticket-actions">
+          <view class="action-btn home-btn" @click="goHomeFromPopup">返回首页</view>
+          <view class="action-btn primary" @click="goTicketsFromPopup">查看我的抽奖码</view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 <script>
@@ -626,10 +660,11 @@ import Payment from "@/components/Payment"
 import { mapGetters } from "vuex"
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 import settings from '@/config/baseSetting.js'
+import { orderPaySuccessToCheckDrawStatus } from '@/mixins/orderPaySuccessToCheckDrawStatus.js'
 
 export default {
   name: "MyOrder",
-  mixins: [pageListenMixins],
+  mixins: [pageListenMixins, orderPaySuccessToCheckDrawStatus],
   data() {
     return {
       giftItem: {},
@@ -1017,9 +1052,14 @@ export default {
       })
     },
     async toYuePay(payPwd) {
-      const that = this;
+      const that = this
+      const orderId = this.orderInfo.orderId
       // 网络请求
-      await yuePayOrderHandle(this.orderInfo.orderId, "yue", that.from, payPwd);
+      await yuePayOrderHandle(orderId, "yue", that.from, payPwd).then(() => {
+        this.afterPaySuccess(orderId, (drawTicketResult) => {
+          this.setDrawTicketPopupFromQuery(drawTicketResult)
+        })
+      });
       that.changeType();
       this.payPassword = "";
     },
@@ -1379,13 +1419,17 @@ export default {
       }
     },
     toPay(type) {
-      const that = this
       // 余额支付需要输入支付密码
       if (type == "yue") {
         this.isShowPayPwdPop = true
         return
       } else {
-        payOrderHandle(this.orderInfo.orderId, type, that.from)
+        const orderId = this.orderInfo.orderId
+        payOrderHandle(orderId, type, this.from).then(() => {
+          this.afterPaySuccess(orderId, (drawTicketResult) => {
+            this.setDrawTicketPopupFromQuery(drawTicketResult)
+          })
+        })
       }
     },
     toDelay(id) {

pages/order/OrderSubmission/index.vue

@@ -331,6 +331,7 @@ import CouponsPopup from "@/components/CouponsPopup.vue"
 import { getDrawTicketByOrder } from '@/api/lottery'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 import settings from '@/config/baseSetting.js'
+import { orderPaySuccessToCheckDrawStatus } from '@/mixins/orderPaySuccessToCheckDrawStatus.js'
 
 const NAME = "OrderSubmission"
 const _isWeixin = isWeixin()
@@ -344,7 +345,7 @@ export default {
     passkeyborad,
     CouponsPopup
   },
-  mixins: [pageListenMixins],
+  mixins: [pageListenMixins, orderPaySuccessToCheckDrawStatus],
   props: {},
   data: function () {
     return {
@@ -847,28 +848,7 @@ export default {
       this.computedPrice(1)
       // this.couponId = uni.getStorageSync('couponId') || 0
       // this.couponTitle = item.couponTitle
-    },
-    buildOrderDetailQuery(orderId, drawTicketResult = {}) {
-      return {
-        id: orderId,
-        drawTicketData: encodeURIComponent(JSON.stringify(drawTicketResult || {}))
     }
-    },
-    async afterPaySuccess(orderId, fallback) {
-      if (!orderId) {
-        fallback && fallback()
-        return
-      }
-      try {
-        const res = await getDrawTicketByOrder(orderId)
-        const result = (res && res.data) || {}
-        fallback && fallback(result)
-        return
-      } catch (e) {
-      }
-      fallback && fallback({})
-    },
-    
   }
 };
 </script>

pagesOrder/order/OrderDetails/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <view class="order-details" style="padding: 30rpx;" @click="handleBody" v-if="!loading && orderInfo.isTickets !== undefined">
+  <view class="order-details" style="padding: 30rpx;" @click="handleBody">
+    <view v-if="!loading && orderInfo.isTickets !== undefined">
       <!-- 给header上与data上加on为退款订单-->
       <view class=" v12-pa-3 v12-white" :class="refundOrder ? 'on' : ''" style="border-radius: 20rpx;" v-if="!isGift">
         <!-- <view class="status-img-box">
@@ -583,17 +584,41 @@
           <view class="bnt v12-primary-text v12-primary-border" @click="goGroupRule(orderInfo)">查看拼团</view>
         </template>
       </view>
-    <u-modal :show="showExtend" title="确认延长收货时间？" content='每笔订单只能延长一次哦' showCancelButton
+      <u-modal
-             @cancel="showExtend=false" @confirm="doneDelay"></u-modal>
+        :show="showExtend"
-    <Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
+        title="确认延长收货时间？"
+        content='每笔订单只能延长一次哦'
+        showCancelButton
+        @cancel="showExtend=false"
+        @confirm="doneDelay"
+      />
       <view class="geoPage" v-if="mapShow">
         <iframe width="100%" height="100%" frameborder="0" scrolling="no"
                 :src="'https://apis.map.qq.com/uri/v1/geocoder?coord=' + system_store.latitude + ',' +system_store.longitude +'&referer=' +mapKey"></iframe>
       </view>
+      <Payment
+        v-model="pay"
+        :types="payType"
+        :balance="userInfo.nowMoney"
+        @checked="toPay"
+      />
 
-    <passkeyborad v-if="isShowPayPwdPop" :money="orderInfo.payPrice" showMoney :show="isShowPayPwdPop" ref='payPwdPop' @close="pwdPopClose"
+      <passkeyborad
-                  @finish="pwdPopFinish"></passkeyborad>
+        v-if="isShowPayPwdPop"
-    <view v-if="drawTicketPopup.show" class="draw-ticket-mask" @touchmove.stop.prevent>
+        ref='payPwdPop'
+        :money="orderInfo.payPrice"
+        :show="isShowPayPwdPop"
+        showMoney
+        @close="pwdPopClose"
+        @finish="pwdPopFinish"
+      />
+
+    </view>
+    <view
+      v-if="drawTicketPopup.show"
+      class="draw-ticket-mask"
+      @touchmove.stop.prevent
+    >
       <view class="draw-ticket-popup">
         <view class="draw-ticket-close" @click="closeDrawTicketPopup">×</view>
         <view class="draw-ticket-icon">
@@ -623,7 +648,6 @@
         </view>
       </view>
     </view>
-
   </view>
 </template>
 
@@ -639,6 +663,7 @@ import {cancelOrderHandle, delOrderHandle, payOrderHandle, takeOrderHandle, yueP
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 // import {postCartAdd} from "@/api/store";
 import settings from '@/config/baseSetting.js'
+import { orderPaySuccessToCheckDrawStatus } from '@/mixins/orderPaySuccessToCheckDrawStatus.js'
 
 const STATUS = [
   "待付款",
@@ -662,7 +687,7 @@ export default {
     DataFormat,
     passkeyborad
   },
-  mixins: [pageListenMixins],
+  mixins: [pageListenMixins, orderPaySuccessToCheckDrawStatus],
   data: function () {
     return {
       showMoreDeliver: false,
@@ -693,14 +718,7 @@ export default {
       isGroup: false,
       key: "",
       loading: true,
-      addressEditOrderId: "",
+      addressEditOrderId: ""
-      drawTicketPopupHandled: false,
-      drawTicketPopup: {
-        show: false,
-        orderId: '',
-        ticketCode: '',
-        drawTime: ''
-      }
     };
   },
   computed: {
@@ -770,36 +788,6 @@ export default {
   },
   methods: {
     copyClipboard,
-    setDrawTicketPopupFromQuery() {
-      if (this.drawTicketPopupHandled) {
-        return
-      }
-      this.drawTicketPopupHandled = true
-      const drawTicketData = this.$yroute.query.drawTicketData
-      if (!drawTicketData) {
-        return
-      }
-      let result = {}
-      try {
-        result = JSON.parse(decodeURIComponent(drawTicketData))
-      } catch (e) {
-        result = {}
-      }
-      const hasTicket = Number(result.hasTicket || 0) === 1
-      const howPopup = Number(result.showPopup || 0) === 1
-      if (!hasTicket || !howPopup) {
-        return
-      }
-      this.drawTicketPopup = {
-        show: true,
-        orderId: this.id || this.$yroute.query.id || '',
-        ticketCode: result.ticketCode || result.code || '',
-        drawTime: result.drawTime || ''
-      }
-    },
-    closeDrawTicketPopup() {
-      this.drawTicketPopup.show = false
-    },
     formatDrawTime(time) {
       if (!time) return '--'
       const date = new Date(String(time).replace(/-/g, '/'))
@@ -811,18 +799,6 @@ export default {
       const mm = String(date.getMinutes()).padStart(2, '0')
       return `${y}年${m}月${d}日 ${hh}:${mm}`
     },
-    goHomeFromPopup() {
-      this.drawTicketPopup.show = false
-      uni.switchTab({
-        url: '/pages/home/index'
-      })
-    },
-    goTicketsFromPopup() {
-      this.drawTicketPopup.show = false
-      uni.navigateTo({
-        url: '/pkg-video/views/county-my-tickets'
-      })
-    },
     getTime(type) {
       const timeMap = {
         1:"48小时内",
@@ -1121,11 +1097,15 @@ export default {
       });
     },
     async toYuePay(payPwd) {
-      var that = this;
+      const orderId = this.orderInfo.orderId
       // 网络请求
-      await yuePayOrderHandle(this.orderInfo.orderId, "yue", that.from, payPwd);
+      await yuePayOrderHandle(orderId, "yue", this.from, payPwd).then(() => {
-      that.getDetail();
+        this.afterPaySuccess(orderId, (drawTicketResult) => {
-      this.payPassword = "";
+          this.setDrawTicketPopupFromQuery(drawTicketResult)
+        })
+      })
+      this.getDetail()
+      this.payPassword = ""
     },
     pwdPopClose() {
       this.isShowPayPwdPop = false;
@@ -1290,19 +1270,20 @@ export default {
       })
     },
     async toPay(type) {
-      var that = this;
-      console.log(type, "支付方式");
-
       // 余额支付需要输入支付密码
       if (type == "yue") {
-        this.isShowPayPwdPop = true;
+        this.isShowPayPwdPop = true
-        return;
+        return
       } else {
-        await payOrderHandle(this.orderInfo.orderId, type, that.from);
+        const orderId = this.orderInfo.orderId
-        that.getDetail();
+        // 网络请求
+        await payOrderHandle(orderId, type, this.from).then(() => {
+          this.afterPaySuccess(orderId, (drawTicketResult) => {
+            this.setDrawTicketPopupFromQuery(drawTicketResult)
+          })
+        })
+        this.getDetail()
       }
-
-
     }
   }
 };
@@ -1560,193 +1541,4 @@ export default {
   align-items: center;
   justify-content: space-between;
 }
-
-.draw-ticket-mask {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24rpx;
-  box-sizing: border-box;
-}
-
-.draw-ticket-popup {
-  width: 100%;
-  max-width: 640rpx;
-  background: #fff;
-  border-radius: 40rpx;
-  padding: 50rpx 40rpx 60rpx;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.draw-ticket-close {
-  position: absolute;
-  top: 30rpx;
-  right: 30rpx;
-  width: 40rpx;
-  height: 40rpx;
-  border: 4rpx solid #333;
-  border-radius: 50%;
-  color: #333;
-  text-align: center;
-  font-weight: bold;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.draw-ticket-icon {
-  display: flex;
-  justify-content: center;
-  margin-top: 20rpx;
-}
-
-.ticket-icon-box {
-  width: 100rpx;
-  height: 70rpx;
-  border-radius: 10rpx;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.ticket-icon-check {
-  width: 100%;
-  height: 100%;
-}
-
-.draw-ticket-title {
-  font-size: 56rpx;
-  color: #222;
-  font-weight: 800;
-  text-align: center;
-  margin-top: 24rpx;
-  letter-spacing: 2rpx;
-}
-
-.ticket-card-container {
-  margin-top: 50rpx;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.ticket-badge {
-  background-color: #fff9eb;
-  border: 6rpx solid #111;
-  border-radius: 40rpx;
-  padding: 12rpx 40rpx;
-  font-size: 46rpx;
-  font-weight: 800;
-  color: #222;
-  position: relative;
-  z-index: 2;
-  margin-bottom: -36rpx;
-  letter-spacing: 2rpx;
-}
-
-.ticket-badge-arrow {
-  position: absolute;
-  bottom: -22rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0;
-  height: 0;
-  border-left: 22rpx solid transparent;
-  border-right: 22rpx solid transparent;
-  border-top: 22rpx solid #111;
-}
-
-.ticket-badge-arrow::after {
-  content: '';
-  position: absolute;
-  top: -26rpx;
-  left: -16rpx;
-  border-left: 16rpx solid transparent;
-  border-right: 16rpx solid transparent;
-  border-top: 16rpx solid #fff9eb;
-}
-
-.ticket-card {
-  width: 100%;
-  background: #c23326;
-  border-radius: 36rpx;
-  padding: 70rpx 36rpx 40rpx;
-  box-sizing: border-box;
-  text-align: center;
-  position: relative;
-}
-
-.ticket-card-subtitle {
-  display: flex;
-  justify-content: center;
-}
-
-.ticket-card-subtitle-text {
-  color: #fff;
-  font-size: 34rpx;
-  font-weight: 700;
-  border: 2rpx solid #fff;
-  border-radius: 40rpx;
-  padding: 8rpx 50rpx;
-  letter-spacing: 4rpx;
-}
-
-.ticket-card-code-box {
-  background: #fff;
-  border-radius: 20rpx;
-  margin-top: 36rpx;
-  padding: 36rpx 0;
-}
-
-.ticket-card-code {
-  color: #c23326;
-  font-size: 72rpx;
-  font-weight: 800;
-  letter-spacing: 8rpx;
-}
-
-.ticket-card-time {
-  color: #fff;
-  font-size: 30rpx;
-  margin-top: 36rpx;
-  text-align: left;
-}
-
-.draw-ticket-actions {
-  margin-top: 60rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20rpx;
-}
-
-.action-btn {
-  flex: 1;
-  height: 86rpx;
-  border-radius: 44rpx;
-  font-size: 32rpx;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  white-space: nowrap;
-}
-
-.action-btn.home-btn {
-  color: #c23326;
-  border: 2rpx solid #c23326;
-  background: #fff;
-}
-
-.action-btn.primary {
-  color: #fff;
-  background: #c23326;
-}
 </style>