From e63aa259022f090c6694963d2c9d295d9fb10e1f Mon Sep 17 00:00:00 2001
From: Burt <1020103647@qq.com>
Date: Wed, 10 Jan 2024 16:57:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B9=9D=E5=AE=AB=E6=A0=BC=E6=8A=BD?=
 =?UTF-8?q?=E5=A5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json             |  12 +++-
 src/pages/demo/clock.vue   |   6 ++
 src/pages/demo/lottery.vue | 121 +++++++++++++++++++++++++++++++++++++
 uni-pages.d.ts             |   1 +
 4 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/demo/lottery.vue

diff --git a/src/pages.json b/src/pages.json
index 7147b6b..2ad2806 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -47,7 +47,17 @@
     },
     {
       "path": "pages/demo/clock",
-      "type": "page"
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "动态时钟"
+      }
+    },
+    {
+      "path": "pages/demo/lottery",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "九宫格抽奖"
+      }
     },
     {
       "path": "pages/login/login",
diff --git a/src/pages/demo/clock.vue b/src/pages/demo/clock.vue
index f7f0212..bd517cf 100644
--- a/src/pages/demo/clock.vue
+++ b/src/pages/demo/clock.vue
@@ -1,3 +1,9 @@
+<route lang="json5">
+{
+  style: { navigationBarTitleText: '动态时钟' },
+}
+</route>
+
 <template>
   <view class="mt-4 h-10 text-center">动态时钟</view>
   <view class="clock-box">
diff --git a/src/pages/demo/lottery.vue b/src/pages/demo/lottery.vue
new file mode 100644
index 0000000..28c49ff
--- /dev/null
+++ b/src/pages/demo/lottery.vue
@@ -0,0 +1,121 @@
+<route lang="json5">
+{
+  style: { navigationBarTitleText: '九宫格抽奖' },
+}
+</route>
+
+<template>
+  <view class="mt-4 h-10 text-center">九宫格抽奖</view>
+  <view class="lottery-box">
+    <view class="lottery-list">
+      <view
+        class="lottery-item"
+        :class="{
+          active: n === activeIndex,
+          btn: n === btnIndex, // 最中间那个是展示按钮
+        }"
+        v-for="n in numList"
+        :key="n"
+        @click="handleClick(n)"
+      >
+        <view v-if="n === btnIndex">点击抽奖</view>
+        <view v-else> {{ n }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { reactive, computed } from 'vue'
+
+const numList = [1, 2, 3, 8, -1, 4, 7, 6, 5]
+
+const btnIndex = numList[4] // 最中间那个是展示按钮
+// const activeIndex = ref(0)
+
+const state = reactive({
+  lottery: 0, // 奖品
+  step: -1, // 目前转动的步数
+  stopStep: 32, // 目标步数，上面我们有提到默认都会转几圈，这里默认转四圈，一圈有八个格子，四圈就是要转动32步
+  speed: 2, // 转动速度，我们是通过定时器去实现转动效果的，所以这也就是定时器的执行频率
+  timer: null, // 定时器ID
+  loading: false,
+})
+// 通过目前转动的步数来对8取模得到当前转到的格子索引
+const activeIndex = computed(() => {
+  return (state.step % 8) + 1
+})
+
+function runFn() {
+  // 当前步数大于等于目标步数
+  if (state.step >= state.stopStep) {
+    // 清空定时器，停止转动
+    clearTimeout(state.timer)
+    // 将初始化步数为最终奖品的步数，转动速度也置为初始速度，下次才能正确转动
+    state.step = state.lottery
+    state.speed = 2
+    state.loading = false
+    console.log(`恭喜获得${state.lottery}号奖品`)
+    return
+  }
+  // 转动到最后一圈时，增加speed，也就是定时器执行间隔时间变长，转动速度变慢
+  if (state.step > 24 + state.lottery) {
+    state.speed++
+  }
+  // 抽奖函数每执行一次，当前步数加一
+  state.step++
+  // 重新开启定时器执行抽奖函数
+  state.timer = setTimeout(runFn, state.speed * 30)
+}
+// 点击抽奖之后调用的函数
+function handleClick(n) {
+  if (n !== btnIndex) {
+    return
+  }
+  if (state.loading) return
+  state.loading = true
+  // 最终获得的奖品，实际业务中是通过接口获取的，这里使用随机数来模拟下
+  state.lottery = Math.floor(Math.random() * 9)
+  console.log(state.lottery)
+  // 计算总共要转动的步数，转4圈后再转到奖品处
+  state.stopStep = state.lottery + 32
+  // 执行抽奖函数
+  runFn()
+}
+</script>
+
+<style lang="css">
+.lottery-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lottery-list {
+  --size: 100px;
+
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(3 * var(--size) + 3px);
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+
+.lottery-item {
+  width: var(--size);
+  height: var(--size);
+  line-height: var(--size);
+  text-align: center;
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+}
+
+.lottery-item.active {
+  color: #fff;
+  background-color: red;
+}
+
+.lottery-item.btn {
+  cursor: pointer;
+}
+</style>
diff --git a/uni-pages.d.ts b/uni-pages.d.ts
index 51e4c5f..1f22657 100644
--- a/uni-pages.d.ts
+++ b/uni-pages.d.ts
@@ -6,6 +6,7 @@
 interface NavigateToOptions {
   url: "pages/index/index" |
        "pages/demo/clock" |
+       "pages/demo/lottery" |
        "pages/login/login" |
        "pages/my/index" |
        "pages/throughout/index" |