Browse Source

抽奖的逻辑处理,显示对应。

lifanagju_citu 1 tháng trước cách đây
mục cha
commit
e6c3d68612
1 tập tin đã thay đổi với 36 bổ sung18 xóa
  1. 36 18
      src/views/mall/components/prizeDraw.vue

+ 36 - 18
src/views/mall/components/prizeDraw.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="prizeDrawBox">
     <div class="d-flex flex-column align-center">
-      <CtDialog :visible="showDialog" :widthType="3" :footer="false" titleClass="text-h6" title="房券抽奖" @close="showDialog = false">
+      <CtDialog :visible="showDialog" :widthType="3" :footer="false" titleClass="text-h6" title="房券抽奖" :closeable="false">
         <div class="d-flex flex-column align-center">
           <div class="numberBox mb-5">房券抽奖</div>
-          <gridPage v-if="props.type === '1'" :lotteryId="props.lotteryId" :disabled="disabled" @start="disabled = true" @end="endCallback"></gridPage>
-          <slotMachinePage v-if="props.type === '2'" :lotteryId="props.lotteryId" height="120" :class="{'mb-3': disabled}" :disabled="disabled" @start="disabled = true" @end="endCallback"></slotMachinePage>
+          <gridPage v-if="props.type === '1'" :lotteryId="props.lotteryId" @end="endCallback"></gridPage>
+          <slotMachinePage v-if="props.type === '2'" :lotteryId="props.lotteryId" height="120" :class="{'mb-3': disabled}" @end="endCallback"></slotMachinePage>
         </div>
       </CtDialog>
 
       <v-card min-height="300" width="700" class="pa-5" :class="{'mt-3': !disabled}" style="position: relative;">
+        <div v-if="disabled" class="color-warning text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">活动获取失败,<span class="defaultLink" @click="contactUs">请联系管理员</span>。</div>
+        <div v-if="isReceive" class="color-warning text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">奖品领取成功,请前往<span class="defaultLink" @click="toMyPrize">我的奖品</span>查看。</div>
         <div v-if="showPrize">
           <p v-for="(k, i) in prizeData" :key="i" class="color-primary">
             {{ k.prize.prompt }}
@@ -54,7 +56,7 @@
             </div>
           </div>
         </div>
-        <div v-else class="color-warning text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">请先进行抽奖</div>
+        <!-- <div v-else class="color-warning text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">请先进行抽奖</div> -->
       </v-card>
     </div>
   </div>
@@ -64,7 +66,7 @@
 defineOptions({ name: 'prizeDraw'})
 import gridPage from './prizeDraw/grid.vue'
 import slotMachinePage from './prizeDraw/slotMachine.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { getLuckLotteryRecordByOrderId } from '@/api/mall/prize'
 import { getMallUserAddressList } from '@/api/mall/address'
 import Snackbar from '@/plugins/snackbar'
@@ -83,16 +85,6 @@ const props = defineProps({
 })
 
 const showDialog = ref(false)
-onMounted(() =>{
-  if (localStorage.getItem('showLotteryBefore')) {
-    // 已经点击过抽奖按钮,直接展示奖品。例如刷新支付完成页面
-    showPrize.value = true
-  } else {
-    // 刚进入支付完成页面
-    showDialog.value = true
-  }
-})
-
 const router = useRouter()
 const newAddress = ref({
   name: '',
@@ -130,12 +122,30 @@ const handleChangeArea = () => {
 }
 
 // 获取中奖记录、收货地址
+const isReceive = ref(false) // 是否已领取
 const address = ref([])
 const prizeData = ref({})
 const getRecord = async () => {
   const data = await getLuckLotteryRecordByOrderId(props.orderId)
   prizeData.value = data || []
-  if (!data || !data.length) disabled.value = true
+  if (!data || !data.length) {
+    disabled.value = true
+    return
+  }
+  
+  if (data[0].record?.isReceive) {
+    isReceive.value = true
+    return
+  }
+
+  const orderIds = localStorage.getItem('handleLotteryOrderIds')
+  if (orderIds?.length && orderIds.includes(props.orderId)) {
+    // 已经点击过抽奖按钮,直接展示奖品。例如刷新支付完成页面
+    showPrize.value = true
+  } else {
+    // 刚进入支付完成页面
+    showDialog.value = true
+  }
 
   const addressData = await getMallUserAddressList()
   address.value = [...addressData, { id: 9999, label: '使用新地址' }] || []
@@ -145,7 +155,8 @@ if (props.orderId) getRecord()
 
 const showPrize = ref(false)
 const endCallback = () => {
-  localStorage.setItem('showLotteryBefore', true) // 标记已抽奖
+  const orderIds = JSON.parse(localStorage.getItem('handleLotteryOrderIds') || '[]')
+  localStorage.setItem('handleLotteryOrderIds', JSON.stringify([...orderIds, props.orderId])) // 标记已抽奖
   showDialog.value = false
   showPrize.value = true
 }
@@ -167,10 +178,17 @@ const handleSubmit = async () => {
     query = newAddress.value
   } else query = address.value.find(item => item.id === addressSelect.value)
   await luckyLotteryRecordReceive({ id: prizeData.value[0].record.id, receiveInfo: JSON.stringify(query) })
-  localStorage.removeItem('showLotteryBefore') // 清空已抽奖痕迹
   Snackbar.success('奖品领取成功,待商家发货')
   router.replace('/recruit/personal/personalCenter/tradeOrder?key=1')
 }
+
+const toMyPrize = () => {
+  router.replace('/recruit/personal/personalCenter/tradeOrder?key=1')
+}
+const contactUs = () => {
+  router.replace('/contactUs')
+}
+
 </script>
 
 <style scoped lang="scss">