|
@@ -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">
|