feat: 新增大转盘功能模块

Yi.Bbs.Vue3/src/apis/integralApi.js

@@ -13,3 +13,10 @@ export function signInRecord() {
     method: "get"
   });
 }
+
+export function luckyWheel() {
+  return request({
+    url: "/lucky/wheel",
+    method: "post"
+  });
+}

Yi.Bbs.Vue3/src/layout/activity/components/ActivityNav.vue

@@ -18,7 +18,7 @@
             <el-icon><Memo /></el-icon>
           <span>任务列表</span>
         </el-menu-item>
-        <el-menu-item index="4" :route="{path:'/activity/sign'}">
+        <el-menu-item index="4" :route="{path:'/activity/lucky'}">
             <el-icon><HelpFilled /></el-icon>
           <span>大转盘</span>
         </el-menu-item>

Yi.Bbs.Vue3/src/main.js

@@ -11,6 +11,7 @@ import "@/assets/styles/index.scss"; // global css
 
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import directive from "./directive"; // directive
+import VueLuckyCanvas from '@lucky-canvas/vue'
 
 import "./permission";
 
@@ -24,6 +25,7 @@ import "./permission";
   app.use(pinia);
   directive(app);
   app.use(router);
+  app.use(VueLuckyCanvas);
   await router.isReady();
   app.mount("#app");
 })();

Yi.Bbs.Vue3/src/router/index.js

@@ -122,6 +122,14 @@ const router = createRouter({
             title: "等级",
           },
         },
+        {
+          name: "lucky",
+          path: "lucky",
+          component: () => import("../views/lucky/Index.vue"),
+          meta: {
+            title: "大转盘",
+          },
+        },
       ],
     },
     { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },

Yi.Bbs.Vue3/src/views/level/Index.vue

@@ -39,9 +39,10 @@ import {getList,upgrade} from '@/apis/levelApi.js'
 import {getBbsUserProfile} from '@/apis/userApi.js'
 import { ref,onMounted, reactive,computed  } from 'vue'
 import  useAuths  from '@/hooks/useAuths.js';
-const { isLogin,currentUserInfo } = useAuths();
+import useUserStore from "@/stores/user";
+const { isLogin } = useAuths();
 const userInfo=ref({});
-
+const currentUserInfo=useUserStore();
 const levelData =ref([]);
 const moneyNum=ref(1);
 
@@ -73,7 +74,7 @@ const loadLevelData=  async () => {
 const loadUserInfoData=async()=>{
     if(isLogin)
    {
-        const {data}= await getBbsUserProfile(currentUserInfo.value.id);
+        const {data}= await getBbsUserProfile(currentUserInfo.id);
         userInfo.value=data;
    }
 }

Yi.Bbs.Vue3/src/views/lucky/Index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <h2>谨记人生赌博，不如理性规划</h2>
+    <h3>50钱钱一次,我的钱钱:{{ userInfo?.money ?? '未登录' }}</h3>
+    <LuckyWheel class="wheel" ref="myLucky" width="500px" height="500px" :prizes="prizes" :blocks="blocks"
+      :buttons="buttons" @start="startCallback" @end="endCallback" />
+  </div>
+</template>
+  
+<script setup>
+import { ref, onMounted } from "vue";
+import useAuths from '@/hooks/useAuths.js';
+const { isLogin } = useAuths();
+import { getBbsUserProfile } from '@/apis/userApi.js'
+import { luckyWheel } from '@/apis/integralApi.js'
+import useUserStore from "@/stores/user";
+const userInfo = ref({});
+const currentUserInfo=useUserStore();
+onMounted(async () => {
+  await loadUserInfoData();
+})
+const loadUserInfoData = async () => {
+  if (isLogin) {
+    const { data } = await getBbsUserProfile(currentUserInfo.id);
+    userInfo.value = data;
+  }
+}
+
+const blocks = [{ padding: '13px', background: '#617df2' }];
+const prizes = [
+  { fonts: [{ text: '啥也没有', top: '10%' }], background: '#e9e8fe' },
+  { fonts: [{ text: '10', top: '10%' }], background: '#b8c5f2' },
+  { fonts: [{ text: '30', top: '10%' }], background: '#e9e8fe' },
+  { fonts: [{ text: '50', top: '10%' }], background: '#b8c5f2' },
+  { fonts: [{ text: '80', top: '10%' }], background: '#e9e8fe' },
+  { fonts: [{ text: '100', top: '10%' }], background: '#b8c5f2' },
+  { fonts: [{ text: '150', top: '10%' }], background: '#e9e8fe' },
+  { fonts: [{ text: '200', top: '10%' }], background: '#b8c5f2' },
+  { fonts: [{ text: '300', top: '10%' }], background: '#e9e8fe' },
+  { fonts: [{ text: '666', top: '10%' }], background: '#FAD400' }
+];
+const buttons = [{
+  radius: '35%',
+  background: '#8a9bf3',
+  pointer: true,
+  fonts: [{ text: '启动', top: '-10px' }]
+}];
+
+const myLucky = ref(null);
+// 点击抽奖按钮会触发star回调
+const startCallback = () => {
+  var index =0;
+  // 调用抽奖组件的play方法开始游戏
+  if (!isLogin) {
+    ElMessage({
+      message: '请登录后启动！',
+      type: 'warning',
+    })
+    return;
+  }
+  ElMessageBox.confirm(
+    '每次启动需要消耗50钱钱，确定要启动吗?',
+    '警告',
+    {
+      confirmButtonText: '启动',
+      cancelButtonText: '放弃',
+      type: 'warning',
+    }
+  )
+    .then(async () => {
+      myLucky.value.play()
+
+
+
+
+      //等待3秒
+      // 模拟调用接口异步抽奖
+       setTimeout(() => {
+        // 假设后端返回的中奖索引是0
+        // 调用stop停止旋转并传递中奖索引
+      }, 3000)
+      index= (await luckyWheel()).data;
+      myLucky.value.stop(index)
+
+   
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '成功克制',
+      })
+    })
+
+};
+// 抽奖结束会触发end回调
+const endCallback = async (prize) => {
+
+  ElMessage({
+    type: 'success',
+    message: `恭喜你抽中了[${prize.fonts[0].text}]`,
+  })
+  await loadUserInfoData();
+}
+</script>
+<style scoped>
+.wheel {
+  margin: auto;
+  margin-top: 10%;
+}
+
+h2 {
+  text-align: center;
+}
+
+h3 {
+  text-align: center;
+}
+</style>

Yi.Bbs.Vue3/src/views/signIn/Index.vue

@@ -34,6 +34,7 @@
 import { onMounted, ref, reactive, computed, nextTick, watch } from "vue";
 import { signIn, signInRecord } from "@/apis/integralApi.js";
 import useAuths from "@/hooks/useAuths";
+
 const { isLogin } = useAuths();
 const number=ref(0);
 const signInData=ref([]);