现阶段剩转盘抽奖逻辑

package.json

@@ -12,6 +12,7 @@
     "deploy:prod": "deploy-cli-service deploy --mode prod"
   },
   "dependencies": {
+    "@lucky-canvas/vue": "^0.1.11",
     "@upload-io/vue-uploader": "^1.5.5",
     "amfe-flexible": "^2.2.1",
     "autoprefixer": "^9.8.8",

src/components/Index.vue

@@ -1,8 +1,59 @@
 <template>
     <div class="indexPage">
-        <div>招商证券88司庆活动</div>
-        <div @click="auth">点击授权</div>
-        <div>授权信息：{{ authData }}</div>
+        <div class="indexCon">
+            <div class="logo"></div>
+            <div class="title_main"></div>
+            <div class="cloud_left_1"></div>
+            <div class="cloud_right_1"></div>
+            <div class="luckybag_left"></div>
+            <div class="luckybag_right"></div>
+            <div class="icon_left_1"></div>
+            <div class="lucky_bag"></div>
+            <div class="cloud_left_2"></div>
+            <div class="icon_left_2"></div>
+            <div class="cloud_right_2"></div>
+            <!-- 大转盘 -->
+            <div class="zhuanpan">
+                <div class="liwu">
+                    <div>1.99</div>
+                    <div>2.99</div>
+                    <div>3.99</div>
+                    <div>4.99</div>
+                    <div>5.99</div>
+
+                </div>
+                <!-- <lucky-wheel ref="myLucky" width="300px" height="300px" :prizes="prizes" :blocks="blocks"
+                    :buttons="buttons" @start="startCallback" @end="endCallback" /> -->
+
+            </div>
+            <div class="icon_right_2"></div>
+            <div class="icon_right_3"></div>
+            <div class="cloud_left_3"></div>
+            <div class="cloud_right_3"></div>
+            <div class="icon_right_1"></div>
+            <div class="select_box"></div>
+            <div class="draw_btn"></div>
+            <div class="rule_btn"></div>
+            <div class="prize_btn"></div>
+            <div class="rule_btn_text"></div>
+            <div class="prize_btn_text"></div>
+            <div class="caidai"></div>
+        </div>
+        <!-- 活动列表 -->
+        <div class="activityCon">
+            <div class="activity_box">
+                <div class="activity_title"><img src="../assets/img/activity_title.png" alt=""></div>
+                <div class="activity_list">
+                    <div class="activity_li" v-for="item in activityList"
+                        :style="{ 'background-image': 'url(' + item.banner + ')' }" v-show="item.show">
+                        <div class="btn" :style="{ 'background-image': 'url(' + item.btnImg + ')' }"
+                            @click="activityBtn(item)"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="cloud_bottom"></div>
+        </div>
+
     </div>
 </template>
 
@@ -26,42 +77,98 @@ const store = useStore()  //初始化vuex
 const { proxy } = getCurrentInstance();  //初始化全局方法：plugin工具箱
 
 
-const authData = ref('')
-const authCode = ref('')
+
+const myLucky = ref(null)
+const blocks = reactive({ padding: '13px', background: '#617df2' })
+const prizes = reactive([
+    { 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' },
+])
+const buttons = ([
+    { radius: '50px', background: '#617df2' },
+    { radius: '45px', background: '#afc8ff' },
+    {
+        radius: '40px', background: '#869cfa',
+        pointer: true,
+        fonts: [{ text: '开始\n抽奖', top: '-20px' }]
+    },
+])
+
+// 点击抽奖按钮会触发star回调
+const startCallback = () => {
+    // 调用抽奖组件的play方法开始游戏
+    myLucky.value.play()
+    // 模拟调用接口异步抽奖
+    setTimeout(() => {
+        // 假设后端返回的中奖索引是0
+        const index = 0
+        // 调用stop停止旋转并传递中奖索引
+        myLucky.value.stop(index)
+    }, 3000)
+}
+// 抽奖结束会触发end回调
+const endCallback = (prize) => {
+    console.log(prize)
+}
+
+
+
+
+// 活动列表
+const activityList = reactive([
+    {
+        id: 1,
+        show: true,
+        banner: require('../assets/img/activity_1.png'),
+        btnImg: require('../assets/img/li_btn_1.png'),
+    },
+    {
+        id: 2,
+        show: false,
+        banner: require('../assets/img/activity_2.png'),
+        btnImg: require('../assets/img/li_btn_2.png'),
+    },
+    {
+        id: 3,
+        show: true,
+        banner: require('../assets/img/activity_3.png'),
+        btnImg: require('../assets/img/li_btn_3.png'),
+    },
+    {
+        id: 4,
+        show: true,
+        banner: require('../assets/img/activity_4.png'),
+        btnImg: require('../assets/img/li_btn_4.png'),
+    },
+    {
+        id: 5,
+        show: true,
+        banner: require('../assets/img/activity_5.png'),
+        btnImg: require('../assets/img/li_btn_5.png'),
+    },
+])
+
 
 
 // 页面挂载前
-onBeforeMount(() => { })
+onBeforeMount(() => {
+
+})
 
 
 
 // 页面挂载后
-onMounted(() => {
-    console.log("用户活动信息：", store.state.userAccount);
-    console.log("api:", process.env.VUE_APP_XGL_DOMAIN);
-
-
-    console.log('code:', h5plugin.getQueryString('code'));
-
-    if (h5plugin.getQueryString('code')) {
-        authCode.value = h5plugin.getQueryString('code')
-
-        console.log("存在code");
-        getOpenId(authCode.value)
-    } else {
-        getCode()
-    }
-
-})
+onMounted(() => { })
 
 const btn = () => {
     // Toast('项目开发中');
     emit('indexPage', 'hello')
 
 
-
-
-
     Dialog.alert({
         title: '招商证券88司庆活动',
         message: '项目开发中',
@@ -80,47 +187,12 @@ const btn = () => {
 }
 
 
-const auth = () => {
-    // get_authorize()
-    // let api = get_jssdk(process.env.VUE_APP_XGL_AUTHORIZE_DOMAIN)
 
-    // service.get('/zsApi/xfhdAuthorize')
-    //     .then((res) => {
-    //         console.log("结果：", res);
-    //         authData.value = res.data
-    //     })
-
-    getCode()
+// 活动点击
+const activityBtn = (item) => {
+    console.log(item);
 }
 
-// getCode
-const getCode = () => {
-    // let redirect_uri = `${window.location.protocol}//${window.location.host + window.location.pathname}?activityId=${activityId}&gameId=${gameId}&rankType=${rankType}`;
-    let redirect_uri = window.location.href;
-    service.post(process.env.VUE_APP_API + '/zsApi/xfhdAuthorize', qs.stringify({
-        redirect_uri: redirect_uri
-
-    })).then((res) => {
-
-        let code = res.data.data
-        authCode.value = res.data.data
-
-        window.location.href = res.data.data
-
-    })
-}
-
-// getOpenid
-const getOpenId = (code) => {
-
-    service.post(process.env.VUE_APP_API + '/zsApi/oauthInfo', qs.stringify({
-        code: code
-    })).then((res) => {
-
-    })
-}
-
-
 
 
 </script>
@@ -129,16 +201,270 @@ const getOpenId = (code) => {
 .indexPage {
     width: 100%;
     height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #000;
-    flex-wrap: wrap;
-    flex-direction: column;
-}
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+    overflow-y: scroll;
 
-span {
-    color: rgb(255, 0, 0);
+
+    .indexCon {
+        // @include pos(100%, 1090px, 0, 0);
+        width: 100%;
+        height: 1090px;
+        position: relative;
+        top: 0;
+        left: 0;
+        @include bg_pos('../assets/img/top_bg.jpg');
+        // overflow: hidden;
+
+        .logo {
+            @include pos(241px, 36px, 31px, 41px);
+            @include bg_pos('../assets/img/logo.png');
+            pointer-events: none;
+        }
+
+        .title_main {
+            @include pos(547px, 221px, 107px, 108px);
+            @include bg_pos('../assets/img/title_main.png');
+            pointer-events: none;
+        }
+
+        .caidai {
+            @include pos(641px, 503px, 47px, 79px);
+            @include bg_pos('../assets/img/caidai.png');
+            pointer-events: none;
+        }
+
+        .luckybag_left {
+            @include pos(144px, 138px, 0px, 551px);
+            @include bg_pos('../assets/img/luckybag_left.png');
+            pointer-events: none;
+        }
+
+        .luckybag_right {
+            @include pos(118px, 110px, 615px, 503px);
+            @include bg_pos('../assets/img/luckybag_right_2.png');
+            pointer-events: none;
+        }
+
+        .icon_left_1 {
+            @include pos(54px, 52px, 104px, 605px);
+            @include bg_pos('../assets/img/icon_left_1.png');
+            pointer-events: none;
+        }
+
+        .icon_left_2 {
+            @include pos(63px, 61px, 11px, 652px);
+            @include bg_pos('../assets/img/icon_left_2.png');
+            pointer-events: none;
+        }
+
+        .icon_right_1 {
+            @include pos(81px, 80px, 556px, 400px);
+            @include bg_pos('../assets/img/icon_right_1.png');
+            pointer-events: none;
+        }
+
+        .icon_right_2 {
+            @include pos(70px, 65px, 567px, 573px);
+            @include bg_pos('../assets/img/icon_right_2.png');
+            pointer-events: none;
+        }
+
+        .icon_right_3 {
+            @include pos(103px, 108px, 633px, 600px);
+            @include bg_pos('../assets/img/luckybag_right.png');
+            pointer-events: none;
+        }
+
+
+        .cloud_left_1 {
+            @include pos(214px, 147px, 0px, 523px);
+            @include bg_pos('../assets/img/cloud_left_1.png');
+            pointer-events: none;
+        }
+
+        .cloud_left_2 {
+            @include pos(375px, 176px, 0px, 616px);
+            @include bg_pos('../assets/img/cloud_left_2.png');
+            pointer-events: none;
+        }
+
+        .cloud_left_3 {
+            @include pos(151px, 136px, 0px, 645px);
+            @include bg_pos('../assets/img/cloud_left_3.png');
+            pointer-events: none;
+        }
+
+        .cloud_right_1 {
+            @include pos(270px, 215px, 480px, 477px);
+            @include bg_pos('../assets/img/cloud_right_1.png');
+            pointer-events: none;
+        }
+
+        .cloud_right_2 {
+            @include pos(375px, 202px, 375px, 595px);
+            @include bg_pos('../assets/img/cloud_right_2.png');
+            pointer-events: none;
+        }
+
+        .cloud_right_3 {
+            @include pos(113px, 108px, 639px, 686px);
+            @include bg_pos('../assets/img/cloud_right_3.png');
+            pointer-events: none;
+        }
+
+        .lucky_bag {
+            @include pos(308px, 355px, 227px, 356px);
+            @include bg_pos('../assets/img/luckybag.png');
+            pointer-events: none;
+        }
+
+
+        .select_box {
+            @include pos(270px, 325px, 239px, 666px);
+            @include bg_pos('../assets/img/select_box.png');
+            pointer-events: none;
+        }
+
+        .draw_btn {
+            @include pos(216px, 252px, 273px, 810px);
+            @include bg_pos('../assets/img/draw_btn.png');
+        }
+
+        .rule_btn {
+            @include pos(137px, 153px, 75px, 883px);
+            @include bg_pos('../assets/img/rule_btn.png');
+        }
+
+        .rule_btn_text {
+            @include pos(98px, 26px, 92px, 1035px);
+            @include bg_pos('../assets/img/rule_btn_text.png');
+        }
+
+        .prize_btn {
+            @include pos(137px, 153px, 541px, 883px);
+            @include bg_pos('../assets/img/prize_btn.png');
+        }
+
+        .prize_btn_text {
+            @include pos(98px, 26px, 558px, 1035px);
+            @include bg_pos('../assets/img/prize_btn_text.png');
+        }
+
+        .zhuanpan {
+            @include pos(750px, 465px, 0px, 657px);
+            @include bg_pos('../assets/img/zhuanpan.png');
+            pointer-events: none;
+            overflow: hidden;
+
+            .liwu {
+                @include pos(750px, 465px, 0px, 40px);
+                display: flex;
+                border-radius: 50%;
+                // background-color: rgb(255, 0, 0);
+                // width: 1146px;
+                // height: 812px;
+
+                div {
+                    border: 2px solid #000;
+                    width: 20%;
+                    height: 110px;
+                    font-size: 36px;
                     font-weight: 700;
+                    color: #fc4638;
+                    text-align: center;
+                    line-height: 110px;
+                    border-radius: 50%;
+                    transform: rotate(30deg);
+
+                }
+
+            }
+        }
+
+
+
+    }
+
+    .activityCon {
+
+        width: 750px;
+        @include bg_pos('../assets/img/activity_bg.jpg');
+
+        .activity_box {
+            width: 700px;
+            // height: 100%;
+            margin: 0 auto;
+            margin-top: 30px;
+            @include bg_pos('../assets/img/activity_box.png');
+            box-sizing: border-box;
+
+            .activity_title {
+                width: 633px;
+                height: 120px;
+                margin: 0 auto;
+                // margin-top: 55px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                img {
+                    width: 633px;
+                    height: 29px;
+                }
+
+                // @include bg_pos('../assets/img/activity_title.png');
+            }
+
+            .activity_list {
+                width: 633px;
+                margin: 0 auto;
+                display: flex;
+                flex-direction: column;
+                margin-top: 20px;
+
+                .activity_li {
+                    width: 633px;
+                    height: 166px;
+                    margin-bottom: 30px;
+                    background-size: 100%;
+                    position: relative;
+
+                    .btn {
+                        width: 121px;
+                        height: 121px;
+                        position: absolute;
+                        top: 16px;
+                        left: 479px;
+                        background-size: 100%;
+
+                    }
+
+
+                }
+
+
+
+
+            }
+
+        }
+
+        .cloud_bottom {
+            width: 750px;
+            height: 255px;
+            margin-top: -160px;
+            @include bg_pos('../assets/img/cloud_bottom.png');
+
+
+        }
+
+    }
+
+
 }
 </style>

src/page/Home/Home.vue

@@ -8,17 +8,52 @@
 </template>
 
 <script setup>
-import { onMounted, onBeforeMount, watch, ref, reactive } from "vue";
-import { wxShare } from "@/utils/wxshare.js";
-import h5plugin from "@/utils/plugin.js";
+import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs, getCurrentInstance, computed } from 'vue'
 import gsap from "gsap";
+import axios from 'axios'
+import { Toast, Dialog } from 'vant';
+import { useStore } from "vuex";
+import { get_authorize, get_jssdk } from '@/api/authorize-api'
+import service from "@/api/httpServe"
+import qs from 'qs'
+import h5plugin from '@/utils/plugin'
 import Index from "@/components/Index"
 
+
+// 初始化
+const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法
+const props = defineProps({ sendMessage: Object }); // 获取props
+const store = useStore()  //初始化vuex
+const { proxy } = getCurrentInstance();  //初始化全局方法：plugin工具箱
+
+
+
 // 变量定义
+const authData = ref('')
+const authCode = ref('')
 
 
 // 页面未挂载
-onBeforeMount(() => { });
+onBeforeMount(() => {
+  console.log("用户活动信息：", store.state.userAccount);
+
+  // 微信环境授权
+  // if (h5plugin.isWX()) {
+  //   console.log('code:', h5plugin.getQueryString('code'));
+
+  //   if (h5plugin.getQueryString('code')) {
+  //     // 存在code的话去换取openid
+  //     authCode.value = h5plugin.getQueryString('code')
+  //     getOpenId(authCode.value)
+  //   } else {
+  //     getCode()
+  //   }
+
+  // }
+
+
+
+});
 
 // 页面挂载
 onMounted(() => { });
@@ -29,6 +64,40 @@ const indexPage = (actions) => {
   console.log("来自index组件：", actions);
 }
 
+
+// 授权获取code
+const getCode = () => {
+  let redirect_uri = window.location.href;
+  service.post(process.env.VUE_APP_API + '/zsApi/xfhdAuthorize', qs.stringify({
+    redirect_uri: redirect_uri
+
+  })).then((res) => {
+    let code = res.data.data
+    authCode.value = res.data.data
+    window.location.href = res.data.data
+  })
+}
+
+// 授权获取openid
+const getOpenId = (code) => {
+
+  service.post(process.env.VUE_APP_API + '/zsApi/oauthInfo', qs.stringify({
+    code: code
+  })).then((res) => {
+
+    if (res.data.code == 0) {
+      console.log("后端返回的openid：", res.data);
+      // 更新openid
+      store.commit({ type: 'updateXGLOpenid', openid: res.data.data })
+      console.log("用户活动信息：", store.state.userAccount);
+
+
+    }
+
+  })
+}
+
+
 </script>
 
 <style lang="scss" scoped>

src/page/Home/main.js

@@ -6,6 +6,7 @@ import Vue from 'vue'
 import store from '@/store'
 import "amfe-flexible"
 import h5plugin from '@/utils/plugin'
+import VueLuckyCanvas from '@lucky-canvas/vue'
 
 
 import VConsole from 'vconsole'
@@ -26,6 +27,7 @@ console.log("环境：", process.env.NODE_ENV)
 
 
 // app.use(router)
+app.use(VueLuckyCanvas)
 app.use(store)
 app.mount('#app')
 

src/store/index.js

@@ -5,7 +5,7 @@ export default createStore({
     // 数据源
     state: {
         userAccount: {
-            openid: 'openid12138',      //用户openid
+            xglOpenid: 'openid12138',      //用户openid
             token: 'token12138',        //用户token
             isDraw: false,              //是否抽过奖
             isHasAccount: false,        //是否存在牛卡号
@@ -20,11 +20,9 @@ export default createStore({
 
     // 改变方法(同步)：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)
     mutations: {
-        // 更新openid
-        updateOpenid(state, val) {
-            console.log("update");
-            state.userAccount.openid = val.openid
-
+        // 更新信广龙openid
+        updateXGLOpenid(state, val) {
+            state.userAccount.xglOpenid = val.openid
         }
     },
     // 改变方法：异步