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