抽奖

src/views/mall/components/prizeDraw.vue

@@ -1,44 +1,74 @@
 <template>
-  <LuckyGrid
-    ref="myLucky"
-    width="300px"
-    height="300px"
-    :prizes="prizes"
-    :blocks="blocks"
-    :buttons="buttons"
-    :activeStyle="activeStyle"
-    :defaultStyle="defaultStyle"
-    @start="startCallback"
-    @end="endCallback"
-  />
-  <v-btn @click="startCallback" class="mt-3" color="primary">开始抽奖</v-btn>
+  <div class="prizeDrawBox">
+    <LuckyGrid
+      ref="myLucky"
+      width="300px"
+      height="300px"
+      :prizes="prizes"
+      :blocks="blocks"
+      :buttons="buttons"
+      :activeStyle="activeStyle"
+      :defaultStyle="defaultStyle"
+      :disabled="true"
+      class="prizeDraw"
+      @start="startCallback"
+      @end="endCallback"
+    />
+    <!-- <v-btn @click="startCallback" class="mt-3" color="primary">开始抽奖</v-btn> -->
+    <div class="mt-5">你还剩余<span class="colorBase">{{ number }}</span>次抽奖机会</div>
+  </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'prizeDraw'})
+import Snackbar from '@/plugins/snackbar'
 import { ref } from 'vue'
+// const props = defineProps({
+//   number: {
+//     type: [String, Number],
+//     default: 0,
+//   }
+// })
+
+// const blocksImg1 = { src: 'https://img1.baidu.com/it/u=681765036,1809656907&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400', width: '100%', height: '100%' }
 
 const myLucky = ref()
 const blocks = [
-  { padding: '10px', background: '#869cfa' },
+  { padding: '10px', background: '#fff', imgs:[] },
   { padding: '10px', background: '#e9e8fe' },
 ]
+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 cellImg = {
+//   src: '/static/imgs/cell-80.png',
+//   width: '100%',
+//   height: '100%'
+// }
 const prizes = [
-  { x: 0, y: 0 },
-  { x: 1, y: 0 },
-  { x: 2, y: 0 },
-  { x: 2, y: 1 },
-  { x: 2, y: 2 },
-  { x: 1, y: 2 },
-  { x: 0, y: 2 },
-  { x: 0, y: 1 }
+  { 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] }
 ]
 const buttons = [
   {
     x: 1, y: 1,
-    background: '#fe9202',
+    background: '#fe920200',
     borderRaduis: '10px',
-    fonts: [{ text: '开始抽奖', fontColor: '#fff', top: 30}]
+    // fonts: [{ text: '开始抽奖', fontColor: '#fff', margin: '10px', top: 30}],
+    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%',
+    }],
   }
 ]
 const defaultStyle = {
@@ -50,6 +80,7 @@ const activeStyle = {
 }
 
 const startCallback = () => {
+  if (!number.value) return Snackbar.warning('抽奖次数已用完!')
   // 调用抽奖组件的play方法开始游戏
   myLucky.value.play()
   // 模拟调用接口异步抽奖
@@ -63,9 +94,35 @@ const startCallback = () => {
 
 const endCallback  = (prize) => {
   console.log(prize, 'end')
+  getData()
+}
+
+
+// 获取抽奖次数
+const number = ref(10)
+const getData = async () => {
+  number.value--
+  // const data = await getProductDetail()
+  // number.value = data || 0
 }
+getData()
+
 </script>
 
 <style scoped lang="scss">
-
+.prizeDrawBox {
+  padding: 40px;
+  background-color: var(--default-bgc);
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  align-items: center;
+}
+.prizeDraw {
+  margin: 0 auto; 
+  cursor: pointer;
+}
+.colorBase {
+  color: var(--v-primary-base);
+}
 </style>

src/views/mall/payOver/index.vue

@@ -4,7 +4,7 @@
   <v-card class="default-width">
     <showText></showText>
     <!-- 抽奖 -->
-    <div class="mt-10"></div>
+    <prizeDraw class="prizeDraw mx-15 my-7" ></prizeDraw>
   </v-card>
 </template>
 
@@ -12,6 +12,8 @@
 defineOptions({name: 'payOver-index'})
 // import Navbar from '../components/navbar.vue'
 import showText from './components/show.vue'
+import prizeDraw from '@/views/mall/components/prizeDraw.vue'
+
 </script>
 <style lang="scss" scoped>
 </style>