feat: 添加抽奖

src/pages-sub/lottery/index.vue

@@ -1,19 +1,146 @@
-<script setup lang="ts">
-import NavBar from '@/components/NavBar.vue'
-</script>
-
 <route lang="json5">
 {
   style: {
-    navigationBarTitleText: '幸运大转盘',
+    navigationBarTitleText: '转盘抽奖',
     navigationBarBackgroundColor: '#fff',
     navigationStyle: 'custom',
   },
 }
 </route>
 
+<script setup lang="ts">
+import NavBar from '@/components/NavBar.vue'
+import GridLottery from '@/components/GridLottery.vue'
+
+import lotteryIcon from '@/static/images/home/nav-2.png'
+
+const list = [
+  {
+    id: 1,
+    sort: 0,
+    title: '\u6BDB\u5DFE',
+    icon: lotteryIcon,
+  },
+  {
+    id: 2,
+    sort: 1,
+    title: '\u6BDB\u5DFE',
+    icon: lotteryIcon,
+  },
+  {
+    id: 3,
+    sort: 2,
+    title: '\u6BDB\u5DFE',
+    icon: lotteryIcon,
+  },
+  {
+    id: 4,
+    sort: 3,
+    title: '\u6BDB\u5DFE',
+    icon: lotteryIcon,
+  },
+  {
+    id: 5,
+    sort: 4,
+    title: '\u6BDB\u5DFE',
+    icon: lotteryIcon,
+  },
+  {
+    id: 6,
+    sort: 5,
+    title: '\u6BDB\u5DFE',
+    icon: lotteryIcon,
+  },
+  {
+    id: 7,
+    sort: 6,
+    title: '\u6BDB\u5DFE',
+    icon: lotteryIcon,
+  },
+  {
+    id: 8,
+    sort: 7,
+    title: '\u6BDB\u5DFE',
+    icon: lotteryIcon,
+  },
+]
+
+const gridLotteryRef = ref(null)
+const onStart = () => {
+  // 中奖id,抽奖轮转时间毫秒
+  gridLotteryRef.value.start(3, 10000)
+}
+const onEnd = () => {
+  console.log('onEnd')
+}
+</script>
+
 <template>
-  <view class="min-h-screen">
+  <view class="min-h-screen lottery-page">
     <NavBar />
+    <view class="mt-240 w-315 h-315 flex items-center justify-center mx-auto lottery-container">
+      <grid-lottery
+        :itemHeight="186"
+        ref="gridLotteryRef"
+        class="w-280 ml-8 mt-8"
+        :list="list"
+        @onStart="onStart"
+        @onEnd="onEnd"
+      >
+        <!-- <view slot="lottery-item" slot-scope="slotProps">{{ slotProps }}</view> -->
+        <template #lottery-item="{ data, index, currIndex }">
+          <view
+            class="overflow-hidden relative lottery-item flex flex-col items-center justify-center rounded-10 bg-[linear-gradient(180deg,#fffdf7,#fff1ca)] w-86 h-86"
+            :class="{
+              mask: currIndex !== index,
+            }"
+          >
+            <image :src="data.icon" class="w-30 h-30" />
+            <view class="text-14 text-#333 mt-8">{{ data.title }}</view>
+          </view>
+        </template>
+        <template #start-button>
+          <view
+            class="w-86 flex flex-col items-center justify-center h-86 bg-[linear-gradient(180deg,#FF8282,#D73434)] text-#FBEDC6 text-25 rounded-10"
+          >
+            <view>点击</view>
+            <view>抽奖</view>
+          </view>
+        </template>
+        <template #activity-box>
+          <view class="w-86 h-86 bg-red-500"></view>
+        </template>
+      </grid-lottery>
+    </view>
+    <view class="text-16 mx-auto w-315 mb-15 font-bold text-#fff mt-30">抽奖规则</view>
+    <view class="text-12 mx-auto w-315 mb-15 text-#fff mt-15">
+      1. 每轮抽奖消耗10000认购点，每轮抽奖次数为3次，每轮抽奖结束后，消耗的认购点将恢复为0。
+    </view>
   </view>
 </template>
+<style>
+.lottery-item {
+  &.mask {
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      content: '';
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+.lottery-container {
+  background-image: url('@/static/images/lottery-bar.png');
+  background-size: 100% 100%;
+}
+.lottery-page {
+  background-color: #517aae;
+  background-image: url('@/static/images/lottery-bg.png');
+  background-repeat: no-repeat;
+  background-position: top;
+  background-size: 100%;
+}
+</style>