抽奖

src/api/mall/prize.js

@@ -46,4 +46,12 @@ export const getLuckLotteryRecordPage = async (params) => {
 		url: '/app-api/promotion/luck-lottery-record/page',
 		params
 	})
+}
+
+// 根据订单id获取中奖记录
+export const getLuckLotteryRecordByOrderId = async (orderId) => {
+  return await request.get({
+		url: '/app-api/promotion/luck-lottery-record/get/by-order-id',
+		params: { orderId }
+	})
 }

src/views/mall/components/details.vue

@@ -178,9 +178,11 @@ const onBuy = async (e) => {
 const payRef = ref()
 const showPay = ref(false)
 const payOrderId = ref('')
-const orderCreated = (id) => {
+const orderId = ref('')
+const orderCreated = (id, order) => {
   showSettlement.value = false
   payOrderId.value = id
+  orderId.value = order
   showPay.value = true
 }
 // 
@@ -192,7 +194,7 @@ const payCancel = () => {
 const paySuccess = (e) => {
   // Snackbar.success('支付成功，请前往我的订单查看！')
   // showPay.value = false
-  router.push({ path: '/mall/payOver', query: { price: e.price, spuId: id }})
+  router.push({ path: '/mall/payOver', query: { price: e.price, spuId: id, orderId: orderId.value } })
 }
 
 // 添加购物车

src/views/mall/components/details/order/confirm.vue

@@ -175,7 +175,7 @@
       pointActivityId: state.orderPayload.pointActivityId,
     });
     if (!data.payOrderId && data.payOrderId > 0) return
-    emit('orderCreated', data.payOrderId) // 更新购物车列表，如果来自购物车
+    emit('orderCreated', data.payOrderId, data.id) // 更新购物车列表，如果来自购物车
     // payImmediately(data.payOrderId)
   }
 

src/views/mall/components/prizeDraw.vue

@@ -1,66 +1,71 @@
 <template>
   <div class="prizeDrawBox">
-    <!-- <city @inputChange="null"></city> -->
-    <div class="numberBox mb-5">恭喜您获得<span class="colorBase">1</span>次抽奖机会</div>
-    <gridPage v-if="props.type === '1'" :lotteryId="props.lotteryId" @end="endCallback"></gridPage>
-    <slotMachinePage v-if="props.type === '2'" :lotteryId="props.lotteryId" height="120" @end="endCallback"></slotMachinePage>
+    <div class="text-end cursor-pointer color-666" @click="emit('success')">
+      <v-btn color="primary" variant="tonal" append-icon="mdi-pan-right">我的奖品</v-btn>
+    </div>
+    <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" @end="endCallback"></gridPage>
+      <slotMachinePage v-if="props.type === '2'" :lotteryId="props.lotteryId" height="120" :disabled="disabled" @end="endCallback"></slotMachinePage>
 
-    <CtDialog :visible="showDialog" titleClass="text-h6" :footer="false" :widthType="3" title="抽奖详情" @close="showDialog = false">
-      <div class="d-flex align-center flex-column">
-        <svg-icon name="submit" size="300"></svg-icon>
-        {{ prizeData?.prompt }}
-        <!-- <div class="mt-5 font-weight-bold color-primary text-decoration-underline cursor-pointer" @click="emit('success')">点击前往“我的-我的奖品”中领取</div> -->
-        <div class="my-10">
-          <v-btn color="primary" variant="outlined" width="120" @click="showDialog = false">取 消</v-btn>
-          <v-btn color="primary" width="120" class="ml-5" @click.stop="handleReceive">前往领取</v-btn>
+      <CtDialog :visible="showDialog" titleClass="text-h6" :footer="false" :widthType="3" title="抽奖详情" @close="showDialog = false">
+        <div class="d-flex align-center flex-column">
+          <svg-icon name="submit" size="300"></svg-icon>
+          <p v-for="(k, i) in prizeData" :key="i" class="mb-3">{{ k.prize.prompt }}</p>
+          <div class="my-10">
+            <v-btn color="primary" variant="outlined" width="120" @click="showDialog = false">取 消</v-btn>
+            <v-btn color="primary" width="120" class="ml-5" @click.stop="emit('success')">前往领取</v-btn>
+          </div>
         </div>
-      </div>
-    </CtDialog>
+      </CtDialog>
+    </div>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'prizeDraw'})
-// import city from './prizeDraw/city.vue'
 import gridPage from './prizeDraw/grid.vue'
 import slotMachinePage from './prizeDraw/slotMachine.vue'
 import { ref } from 'vue'
+import { getLuckLotteryRecordByOrderId } from '@/api/mall/prize'
+import Snackbar from '@/plugins/snackbar'
 
 const emit = defineEmits(['success'])
 const props = defineProps({
   lotteryId: [Number, String],
+  orderId: [Number, String],
   type: {
-    type:String,
+    type: String,
     default: '1'
   }
 })
 
-// 抽中奖品信息
-const showDialog = ref(false)
+const disabled = ref(false)
+
+// 获取中奖记录
 const prizeData = ref({})
-const endCallback  = (value) => {
-  console.log(value.prize, '抽中的奖品')
-  prizeData.value = value.prize
-  showDialog.value = true
+const getRecord = async () => {
+  const data = await getLuckLotteryRecordByOrderId(props.orderId)
+  prizeData.value = data || []
+  if (!data || !data.length) disabled.value = true
 }
+if (props.orderId) getRecord()
 
-// const handleReceive = () => {
-//   showDialog.value = false
-// }
+const showDialog = ref(false)
+const endCallback = () => {
+  if (!prizeData.value.length) return Snackbar.warning('您已经抽过奖了哦')
+  showDialog.value = true
+  disabled.value = true
+}
 </script>
 
 <style scoped lang="scss">
 .prizeDrawBox {
   padding: 20px 40px;
   background-color: var(--default-bgc);
-  display: flex;
-  flex-direction: column;
-  // justify-content: center;
-  align-items: center;
 }
 .prizeDraw {
   margin: 0 auto; 
-  cursor: pointer;
 }
 .numberBox {
   font-size: 20px;

src/views/mall/components/prizeDraw/grid.vue

@@ -21,8 +21,9 @@ defineOptions({name: 'prizeDraw-LuckyGrid'})
 import { getPrizeByLotteryId } from '@/api/mall/prize'
 import Snackbar from '@/plugins/snackbar'
 import { ref } from 'vue'
+
 const emit = defineEmits(['start', 'end'])
-const props = defineProps({ lotteryId: [Number, String] })
+const props = defineProps({ lotteryId: [Number, String], disabled: Boolean })
 
 const myLucky = ref()
 // 背景样式
@@ -74,6 +75,7 @@ const getPrizeData = async (lotteryId) => {
 if (props.lotteryId) getPrizeData()
 
 const startCallback = () => {
+  if (props.disabled) return Snackbar.warning('您已经参与过该抽奖活动了哦')
   emit('start')
   // 调用抽奖组件的play方法开始游戏
   myLucky.value.play()

src/views/mall/components/prizeDraw/slotMachine.vue

@@ -16,6 +16,7 @@
       @end="endCallback"
     />
     <v-img
+      class="cursor-pointer"
       src="https://img1.baidu.com/it/u=3949019928,2138080900&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300"
       :width="100"
       style="margin: 0 auto;"
@@ -27,10 +28,11 @@
 <script setup>
 defineOptions({name: 'prizeDraw-LuckyGrid'})
 import { getPrizeByLotteryId } from '@/api/mall/prize'
-// import Snackbar from '@/plugins/snackbar'
+import Snackbar from '@/plugins/snackbar'
 import { ref } from 'vue'
+
 const emit = defineEmits(['start', 'end'])
-const props = defineProps({ lotteryId: [Number, String], height: [Number, String] })
+const props = defineProps({ lotteryId: [Number, String], height: [Number, String], disabled: Boolean })
 
 const myLucky = ref()
 // 背景样式
@@ -72,6 +74,7 @@ const getPrizeData = async (lotteryId) => {
 if (props.lotteryId) getPrizeData()
 
 const startCallback = () => {
+  if (props.disabled) return Snackbar.warning('您已经参与过该抽奖活动了哦')
   emit('start')
   // 调用抽奖组件的play方法开始游戏
   myLucky.value.play()

src/views/mall/payOver/index.vue

@@ -1,11 +1,11 @@
 <!--  -->
 <template>
   <Navbar class="mb-3" />
-  <v-card class="default-width my-3" style="height: calc(100vh - 356px)">
+  <v-card class="default-width my-3">
     <showText :class="showPrizeDraw ? '' : 'mb-15'"></showText>
 
     <!-- 抽奖 -->
-    <prizeDraw v-if="showPrizeDraw" type="2" :lotteryId="lotteryId" class="prizeDraw mx-15 my-7" @success="handleReceive"></prizeDraw>
+    <prizeDraw v-if="showPrizeDraw" type="2" :orderId="orderId" :lotteryId="lotteryId" class="prizeDraw mx-15 my-7" @success="handleReceive"></prizeDraw>
   </v-card>
 </template>
 
@@ -18,14 +18,13 @@ import prizeDraw from '@/views/mall/components/prizeDraw.vue'
 import { useRoute, useRouter } from 'vue-router'
 import { getPrizeByGoodsId } from '@/api/mall/prize'
 
-const { spuId } = useRoute().query
+const { spuId, orderId } = useRoute().query
 const showPrizeDraw = ref(false)
 const lotteryId = ref('')
 const getLottery = async () => {
   if (!spuId) return
   const data = await getPrizeByGoodsId(spuId)
   showPrizeDraw.value = data && Object.keys(data).length > 0
-  console.log(showPrizeDraw.value, '是否显示抽奖活动')
 
   lotteryId.value = data.id
 }