九宫格抽奖

package.json

@@ -88,6 +88,7 @@
     }
   },
   "dependencies": {
+    "@lucky-canvas/uni": "^0.0.13",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",

pages/lucky/Grid.vue

@@ -0,0 +1,121 @@
+<template>
+  <view class="prizeDrawBox">
+    <LuckyGrid
+      ref="myLucky"
+      width="300px"
+      height="300px"
+      :prizes="prizes"
+      :blocks="blocks"
+      :buttons="buttons"
+      :default-config="defaultConfig"
+      :disabled="true"
+      class="prizeDraw"
+      @start="startCallback"
+      @end="endCallback"
+    />
+    <view class="numberBox mt-5">您还剩余<span class="colorBase">{{ number }}</span>次抽奖机会</view>
+  </view>
+</template>
+
+<script setup>
+import LuckyGrid from '@lucky-canvas/uni/lucky-grid'
+import { ref } from 'vue'
+import sheep from '@/sheep';
+
+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] }
+]
+const buttons = [
+  {
+    x: 1, y: 1,
+    background: '#fe920200',
+    borderRadius: '10px',
+    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 defaultConfig = {
+  gutter: 10, // 格子之间的间隙
+  speed: 10 // 旋转速度的峰值
+}
+
+const startCallback = () => {
+  // if (!number.value) return Snackbar.warning('抽奖次数已用完!')
+  if (!number.value) {
+    sheep.$helper.toast('抽奖次数已用完')
+    return
+  }
+  // 调用抽奖组件的play方法开始游戏
+  myLucky.value.play()
+  // 模拟调用接口异步抽奖
+  setTimeout(() => {
+    // 假设后端返回的中奖索引是0
+    const index = 3
+    // 调用stop停止旋转并传递中奖索引
+    myLucky.value.stop(index)
+  }, 1500)
+}
+
+const endCallback  = (prize) => {
+  console.log(prize, 'end')
+  getData()
+}
+
+
+// 获取抽奖次数
+const number = ref(3)
+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;
+}
+.numberBox {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 2px 38px;
+  border-bottom: 3px solid #00897B;
+}
+.colorBase {
+  color: var(--v-primary-base);
+  margin: 0 6px;
+  font-size: 22px;
+}
+</style>

pages/lucky/Wheel.vue

@@ -0,0 +1,63 @@
+<template>
+  <view>
+    <LuckyWheel
+      ref="myLucky"
+      width="600rpx"
+      height="600rpx"
+      :blocks="blocks"
+      :prizes="prizes"
+      :buttons="buttons"
+      :defaultStyle="defaultStyle"
+      @start="startCallBack"
+      @end="endCallBack"
+    />
+  </view>
+</template>
+
+<script>
+  import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
+  export default {
+    components: { LuckyWheel },
+    data () {
+      return {
+        blocks: [{ padding: '13px', background: '#617df2' }],
+        prizes: [
+          { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
+          { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
+          { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
+          { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
+          { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
+          { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
+        ],
+        buttons: [
+          { radius: '50px', background: '#617df2' },
+          { radius: '45px', background: '#afc8ff' },
+          {
+            radius: '40px', background: '#869cfa',
+            pointer: true,
+            fonts: [{ text: '开始\n抽奖', top: '-20px' }]
+          },
+        ],
+      }
+    },
+    methods: {
+      // 点击抽奖按钮触发回调
+      startCallBack () {
+        // 先开始旋转
+        this.$refs.myLucky.play()
+        // 使用定时器来模拟请求接口
+        setTimeout(() => {
+          // 假设后端返回的中奖索引是0
+          const index = 0
+          // 调用stop停止旋转并传递中奖索引
+          this.$refs.myLucky.stop(index)
+        }, 3000)
+      },
+      // 抽奖结束触发回调
+      endCallBack (prize) {
+        // 奖品详情
+        console.log(prize)
+      }
+    }
+  }
+</script>

pages/pay/prizeDraw.vue

@@ -0,0 +1,26 @@
+<template>
+  <view>
+    <!-- <luckyWheel></luckyWheel> -->
+    <luckyGrid></luckyGrid>
+    <!-- <div class="numberBox mt-5">你还剩余<span class="colorBase">{{ number }}</span>次抽奖机会</div> -->
+  </view>
+</template>
+<script setup>
+// import luckyWheel from '@/pages/lucky/Wheel'
+import luckyGrid from '@/pages/lucky/Grid'
+
+const number = 10
+</script>
+<style lang="scss" scoped>
+.numberBox {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 2px 38px;
+  text-align: center;
+}
+.colorBase {
+  color: #00897B;
+  margin: 0 6px;
+  font-size: 22px;
+}
+</style>

pages/pay/result.vue

@@ -59,6 +59,7 @@
         <view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
       </view>
       <!-- #endif -->
+      <prizeDraw v-if="payResult === 'success'" class="prizeDraw"></prizeDraw>
     </view>
   </s-layout>
 </template>
@@ -72,6 +73,7 @@
   import { fen2yuan } from '@/sheep/hooks/useGoods';
   import OrderApi from '@/sheep/api/trade/order';
   import { WxaSubscribeTemplate } from '@/sheep/util/const';
+  import prizeDraw from './prizeDraw.vue'
 
   const state = reactive({
     id: 0, // 支付单号
@@ -241,7 +243,7 @@
 
   .pay-result-box {
     padding: 60rpx 0;
-
+    background-color: #fff;
     .pay-waiting {
       margin-top: 20rpx;
       width: 60rpx;
@@ -318,4 +320,9 @@
       }
     }
   }
+  .prizeDraw {
+    margin-top: 50rpx;
+    border-top: 1px solid #b6b5c5;
+    padding: 50rpx 0;
+  }
 </style>