奖品列表

src/api/mall/prize.js

@@ -3,6 +3,31 @@ import request from '@/config/axios'
 // 根据商品id获取抽奖活动
 export const getPrizeByGoodsId = async (spuId) => {
   return await request.get({
-		url: `/app-api/promotion/luck-lottery/get/by-spu-id?spuId=${spuId}`
+		url: `/app-api/promotion/luck-lottery/get/by-spu-id`,
+		params: { spuId }
+	})
+}
+
+// 根据活动id获取奖品
+export const getPrizeByLotteryId = async (lotteryId) => {
+  return await request.get({
+		url: `/app-api/promotion/luck-prize/get`,
+		params: { lotteryId }
+	})
+}
+
+// 根据活动id获取用户抽奖次数
+export const getNumByLotteryId = async (lotteryId) => {
+  return await request.get({
+		url: `/app-api/promotion/luck-lottery/get/user-num`,
+		params: { lotteryId }
+	})
+}
+
+// 领取奖品
+export const luckyLotteryRecordReceive = async (data) => {
+  return await request.post({
+		url: `/app-api/promotion/luck-lottery-record/receive`,
+		data
 	})
 }

src/views/mall/cart/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <Navbar v-if="props.showNavbar" class="mb-3" />
-  <v-card class="card-box mb-5 pa-5 resume-box" :class="props.defaultWidth ? 'default-width' : '100%'" :elevation="props.elevation">
+  <Navbar v-if="props.showNavbar" />
+  <v-card class="card-box mb-5 pa-5 resume-box mt-3" :class="props.defaultWidth ? 'default-width' : '100%'" :elevation="props.elevation">
     <div class="resume-header">
       <div class="resume-title">我的购物车</div>
       <div>

src/views/mall/components/details.vue

@@ -1,7 +1,7 @@
 <!-- 商品详情 -->
 <template>
-  <Navbar class="mb-3" />
-  <div class="default-width pb-5" v-if="state.goodsInfo && Object.keys(state.goodsInfo).length">
+  <Navbar />
+  <div class="default-width pb-5 mt-3" v-if="state.goodsInfo && Object.keys(state.goodsInfo).length">
     <v-card class="carousel border-radius-8 white-bgc pa-5" style="width: 100%;">
       <div class=" d-flex">
         <!-- 图片展示-轮播 -->
@@ -120,7 +120,7 @@ const getData = async () => {
 
   // 查询当前商品是否参与抽奖活动
   const data = await getPrizeByGoodsId(id)
-  showPrize.value = data && Object.keys(data).length
+  showPrize.value = data && Object.keys(data).length > 0
 }
 getData()
 
@@ -182,7 +182,7 @@ const payCancel = () => {
 const paySuccess = (e) => {
   // Snackbar.success('支付成功，请前往我的订单查看！')
   // showPay.value = false
-  router.push({ path: '/mall/payOver', query: { price: e.price }})
+  router.push({ path: '/mall/payOver', query: { price: e.price, spuId: id }})
 }
 
 // 添加购物车
@@ -224,6 +224,7 @@ const loginClose = () => {
 }
 
 </script>
+
 <style lang="scss" scoped>
 .border-radius-8 {
   border-radius: 8px;

src/views/mall/components/navbar.vue

@@ -1,49 +1,47 @@
 <template>
-  <div>
-    <div class="stickyBox py-5">
-      <div class="default-width d-flex align-center justify-space-between">
-        <div class="header-link d-flex">
-          <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">
-            <v-icon size="24" class="mr-2">mdi-shopping-outline</v-icon>
-            首页
-          </span>
-          <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/user', true)}" @click="handleTo('/mall/user')">
-            <v-icon size="24" class="mr-2">mdi-account-circle-outline</v-icon>
-            我的
-          </span>
-          <!-- <span class="cursor-pointer d-flex align-center ml-8" @click="emit('pointExchange')">
-            <v-icon>mdi-octagram-outline</v-icon>
-            积分兑换
-          </span> -->
-          <!-- <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/order')}" @click="handleTo('/mall/user/order')">
-            <v-icon size="20" class="mr-2">mdi-order-bool-ascending</v-icon>
-            我的订单
-          </span> -->
-          <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/cart')}" @click="handleTo('/mall/cart')">
-            <v-icon size="20" class="mr-2">mdi-cart-outline</v-icon>
-            购物车
-          </span>
-        </div>
-        <div v-if="!props.hideSearch" class="search d-flex align-center">
-          <v-text-field
-            v-model="inputVal"
-            placeholder="请输入商品关键词"
-            color="primary"
-            variant="plain"
-            density="compact"
-            clearable
-            :hide-details="true"
-            class="ml-3 px-2"
-            style="height: 100%; line-height: 100%;"
-            @keyup.enter="handleSearch"
-          ></v-text-field>
-          <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
-        </div>
+  <div class="stickyBox py-5">
+    <div class="default-width d-flex align-center justify-space-between">
+      <div class="header-link d-flex">
+        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">
+          <v-icon size="24" class="mr-2">mdi-shopping-outline</v-icon>
+          首页
+        </span>
+        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/user', true)}" @click="handleTo('/mall/user')">
+          <v-icon size="24" class="mr-2">mdi-account-circle-outline</v-icon>
+          我的
+        </span>
+        <!-- <span class="cursor-pointer d-flex align-center ml-8" @click="emit('pointExchange')">
+          <v-icon>mdi-octagram-outline</v-icon>
+          积分兑换
+        </span> -->
+        <!-- <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/order')}" @click="handleTo('/mall/user/order')">
+          <v-icon size="20" class="mr-2">mdi-order-bool-ascending</v-icon>
+          我的订单
+        </span> -->
+        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/cart')}" @click="handleTo('/mall/cart')">
+          <v-icon size="20" class="mr-2">mdi-cart-outline</v-icon>
+          购物车
+        </span>
+      </div>
+      <div v-if="!props.hideSearch" class="search d-flex align-center">
+        <v-text-field
+          v-model="inputVal"
+          placeholder="请输入商品关键词"
+          color="primary"
+          variant="plain"
+          density="compact"
+          clearable
+          :hide-details="true"
+          class="ml-3 px-2"
+          style="height: 100%; line-height: 100%;"
+          @keyup.enter="handleSearch"
+        ></v-text-field>
+        <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
       </div>
     </div>
-    <!-- 快速登录 -->
-    <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
   </div>
+  <!-- 快速登录 -->
+  <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
 </template>
 
 <script setup>
@@ -54,6 +52,8 @@ import { useRouter } from 'vue-router'; const router = useRouter()
 import { getToken } from '@/utils/auth'
 import Snackbar from '@/plugins/snackbar'
 import loginPage from '@/views/common/loginDialog.vue'
+import { getPrizeByGoodsId } from '@/api/mall/prize'
+
 const emit = defineEmits(['login', 'pointExchange', 'search'])
 const props = defineProps({
   hideSearch: {

src/views/mall/components/prizeDraw.vue

@@ -14,16 +14,17 @@
       @start="startCallback"
       @end="endCallback"
     />
-    <div class="numberBox mt-5">您还剩余<span class="colorBase">{{ number }}</span>次抽奖机会</div>
+    <div class="numberBox mt-5">您还剩余<span class="colorBase">{{ luckyDrawsNum }}</span>次抽奖机会</div>
 
     <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>
-        恭喜您获得三亚五日游
-        <div class="my-10">
+        {{ 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">取 消</v-btn>
-          <v-btn color="primary" width="120" class="ml-5">领 取</v-btn>
-        </div>
+          <v-btn color="primary" width="120" class="ml-5" @click.stop="handleReceive">领 取</v-btn>
+        </div> -->
       </div>
     </CtDialog>
   </div>
@@ -34,34 +35,26 @@ defineOptions({ name: 'prizeDraw'})
 import Snackbar from '@/plugins/snackbar'
 import city from './prizeDraw/city.vue'
 import { ref } from 'vue'
-// const props = defineProps({
-//   number: {
-//     type: [String, Number],
-//     default: 0,
-//   }
-// })
+import { getPrizeByLotteryId, getNumByLotteryId, luckyLotteryRecordReceive } from '@/api/mall/prize'
+
+const emit = defineEmits(['success'])
+const props = defineProps({ lotteryId: [Number, String] })
 
 const myLucky = ref()
+// 背景样式
 const blocks = [
-  // { padding: '10px', background: '#fff', imgs:[] },
-  { padding: '10px', background: '#00897B', borderRadius: 6 },
-]
-const prizeImg = {
-  src: 'https://img1.baidu.com/it/u=681765036,1809656907&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
-  activeSrc: 'https://bpic.588ku.com/element_origin_min_pic/19/11/15/a6f8bd3b208aca40e3de49209ab309ca.jpg',
-  width: '100%',
-  top: '0%'
-}
-const prizes = [
-  { x: 0, y: 0, imgs: [prizeImg] },
-  { x: 1, y: 0, imgs: [prizeImg] },
-  { x: 2, y: 0, imgs: [prizeImg] },
-  { x: 2, y: 1, imgs: [prizeImg] },
-  { x: 2, y: 2, imgs: [prizeImg] },
-  { x: 1, y: 2, imgs: [prizeImg] },
-  { x: 0, y: 2, imgs: [prizeImg] },
-  { x: 0, y: 1, imgs: [prizeImg] }
+  { padding: '10px', background: '#00897B', borderRadius: 6 }
 ]
+const prizes = ref([
+  { x: 0, y: 0, imgs: [] },
+  { x: 1, y: 0, imgs: [] },
+  { x: 2, y: 0, imgs: [] },
+  { x: 2, y: 1, imgs: [] },
+  { x: 2, y: 2, imgs: [] },
+  { x: 1, y: 2, imgs: [] },
+  { x: 0, y: 2, imgs: [] },
+  { x: 0, y: 1, imgs: [] }
+])
 const buttons = [
   {
     x: 1, y: 1,
@@ -70,8 +63,8 @@ const buttons = [
     imgs: [{
       src: 'https://img1.baidu.com/it/u=3949019928,2138080900&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300',
       width: '100%',
-      height: '100%',
-    }],
+      height: '100%'
+    }]
   }
 ]
 const defaultConfig = {
@@ -79,8 +72,33 @@ const defaultConfig = {
   speed: 10 // 旋转速度的峰值
 }
 
+// 获取抽奖次数
+const luckyDrawsNum = ref(0)
+const getLuckyNum = async () => {
+  luckyDrawsNum.value = await getNumByLotteryId(props.lotteryId)
+}
+
+// 根据活动id获取奖品列表
+const getPrizeData = async () => {
+  // 抽奖次数
+  getLuckyNum()
+  // 奖品列表
+  const data = await getPrizeByLotteryId(props.lotteryId)
+
+  data.forEach((item, index) => {
+    prizes.value[index].prize = item
+    prizes.value[index].imgs = [{
+      src: item.image,
+      activeSrc: 'https://bpic.588ku.com/element_origin_min_pic/19/11/15/a6f8bd3b208aca40e3de49209ab309ca.jpg',
+      width: '100%',
+      top: '0%'
+    }]
+  })
+}
+if (props.lotteryId) getPrizeData()
+
 const startCallback = () => {
-  if (!number.value) return Snackbar.warning('抽奖次数已用完!')
+  if (!luckyDrawsNum.value) return Snackbar.warning('抽奖次数已用完!')
   // 调用抽奖组件的play方法开始游戏
   myLucky.value.play()
   // 模拟调用接口异步抽奖
@@ -92,23 +110,16 @@ const startCallback = () => {
   }, 1500)
 }
 
+// 抽中奖品信息
 const showDialog = ref(false)
-const endCallback  = (prize) => {
-  console.log(prize, 'end')
-  showDialog.value = true
-  getData()
-}
+const prizeData = ref({})
+const endCallback  = (value) => {
+  console.log(value.prize, '抽中的奖品')
 
-
-// 获取抽奖次数
-const number = ref(10)
-const getData = async () => {
-  number.value--
-  // const data = await getProductDetail()
-  // number.value = data || 0
+  prizeData.value = value.prize
+  showDialog.value = true
+  getLuckyNum()
 }
-getData()
-
 </script>
 
 <style scoped lang="scss">

src/views/mall/payOver/index.vue

@@ -3,17 +3,40 @@
   <Navbar class="mb-3" />
   <v-card class="default-width my-3">
     <showText></showText>
+
     <!-- 抽奖 -->
-    <prizeDraw class="prizeDraw mx-15 my-7" ></prizeDraw>
+    <prizeDraw v-if="showPrizeDraw" :lotteryId="lotteryId" class="prizeDraw mx-15 my-7" @success="handleReceive"></prizeDraw>
   </v-card>
 </template>
 
 <script setup>
 defineOptions({name: 'payOver-index'})
+import { ref } from 'vue'
 import Navbar from '../components/navbar.vue'
 import showText from './components/show.vue'
 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 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
+}
+getLottery()
+
+// 前往我的奖品
+const router = useRouter()
+const handleReceive = () => {
+  router.push('/mall/user/prize')
+}
 </script>
+
 <style lang="scss" scoped>
 </style>

src/views/mall/user/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <Navbar class="mb-3" />
-  <div class="d-flex parent default-width mb-5">
+  <Navbar />
+  <div class="d-flex parent default-width mb-5 mt-3">
     <v-card class="left">
       <v-list color="primary">
         <div class="text-center my-3">