完成弹窗布局

src/components/Index.vue

@@ -9,22 +9,25 @@
             <div class="luckybag_right"></div>
             <div class="icon_left_1"></div>
             <div class="lucky_bag"></div>
+            <div class="lucky_bag_2">
+                <div class="prize_num">{{ prizeResult }}<span>元</span></div>
+            </div>
+            <div class="notice">
+                <span class="icon"><img src="../assets/img/laba.png" alt="" srcset=""></span>
+                <span class="num">活动已有{{ participantNum }}人参与</span>
+            </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 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>
             <div class="icon_right_2"></div>
             <div class="icon_right_3"></div>
@@ -33,8 +36,8 @@
             <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" @click="showRluesBtn"></div>
+            <div class="prize_btn" @click="showMyPrizePop"></div>
             <div class="rule_btn_text"></div>
             <div class="prize_btn_text"></div>
             <div class="caidai"></div>
@@ -54,6 +57,17 @@
             <div class="cloud_bottom"></div>
         </div>
 
+        <!-- 活动规则弹窗 -->
+        <Rules v-if="showRulesPop" @RulesPop="hideRulesPop" />
+        <!-- 我的奖品弹窗 -->
+        <MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
+        <!-- 添加专属服务人员企微弹窗 -->
+        <ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
+
+        <LuckyWheel v-if="false" />
+
+
+
     </div>
 </template>
 
@@ -67,6 +81,11 @@ import { get_authorize, get_jssdk } from '@/api/authorize-api'
 import service from "@/api/httpServe"
 import qs from 'qs'
 import h5plugin from '@/utils/plugin'
+import Rules from '@/components/Rules'
+import MyPrize from '@/components/MyPrize'
+import ServiceList from '@/components/ServiceList'
+import LuckyWheel from '@/components/LuckyWheel'
+
 
 
 
@@ -77,44 +96,15 @@ const store = useStore()  //初始化vuex
 const { proxy } = getCurrentInstance();  //初始化全局方法：plugin工具箱
 
 
+// 活动信息
+const participantNum = ref(store.state.userAccount.participantNum)  // 活动参与人数prizeResult
+const prizeResult = ref(store.state.userAccount.prizeResult)  // 中奖金额
 
-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 showRulesPop = ref(false)
+const showMyPrize = ref(false)
+const showServicePop = ref(false)
 
 
 
@@ -128,7 +118,7 @@ const activityList = reactive([
     },
     {
         id: 2,
-        show: false,
+        show: true,
         banner: require('../assets/img/activity_2.png'),
         btnImg: require('../assets/img/li_btn_2.png'),
     },
@@ -190,10 +180,36 @@ const btn = () => {
 
 // 活动点击
 const activityBtn = (item) => {
-    console.log(item);
+    console.log(item.id);
+
+    if (item.id == 1) {
+        showServicePop.value = true
+
+    }
 }
 
 
+// 活动规则弹窗
+const showRluesBtn = () => {
+    showRulesPop.value = true
+}
+const hideRulesPop = () => {
+    showRulesPop.value = false
+}
+
+// 我的奖品页面
+const showMyPrizePop = () => {
+    showMyPrize.value = true
+}
+const myPrizePop = () => {
+    showMyPrize.value = false
+}
+
+// 企微弹窗
+const hideServicePop = () => {
+    showServicePop.value = false
+}
+
 
 </script>
 
@@ -224,6 +240,36 @@ const activityBtn = (item) => {
             @include pos(241px, 36px, 31px, 41px);
             @include bg_pos('../assets/img/logo.png');
             pointer-events: none;
+
+        }
+
+        .notice {
+            @include pos(350px, 48px, 200px, 592px);
+            @include bg_pos('../assets/img/notice_box.png');
+            pointer-events: none;
+            align-self: center;
+            justify-content: center;
+
+            display: flex;
+            font-size: 20px;
+
+            .icon {
+                width: 26px;
+                height: 48px;
+                // @include bg_pos('../assets/img/laba.png');
+
+                line-height: 54px;
+
+                img {
+                    width: 26px;
+                    height: 25px;
+                }
+            }
+
+            .num {
+                height: 48px;
+                line-height: 48px;
+            }
         }
 
         .title_main {
@@ -321,6 +367,33 @@ const activityBtn = (item) => {
             @include pos(308px, 355px, 227px, 356px);
             @include bg_pos('../assets/img/luckybag.png');
             pointer-events: none;
+            visibility: hidden;
+        }
+
+        .lucky_bag_2 {
+            @include pos(330px, 345px, 210px, 348px);
+            @include bg_pos('../assets/img/luckybag_2.png');
+            pointer-events: none;
+
+            // display: flex;
+
+
+            .prize_num {
+                @include pos(330px, 50px, 0px, 79px);
+                font-weight: 700;
+                font-size: 59px;
+                color: #ff480e;
+                text-align: center;
+
+                span {
+                    color: #ca2f0a;
+                    font-size: 24px;
+                    font-weight: 700;
+
+                }
+
+
+            }
         }
 
 

src/components/LuckyWheel.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="LuckyWheelCon" @touchmove.prevent>
+        <div class="LuckyWheel_container">
+            <div class="LuckyWheel_box">
+                <svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg">
+                    <circle cx="100" cy="100" r="3" />
+                    <circle cx="300" cy="20" r="3" />
+                    <path id="path"
+                        d="M9,100c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37" />
+                    <g id="rect">
+                        <rect width="85" height="30" fill="dodgerblue" />
+                        <text x="10" y="19" font-size="14">SVG &lt;rect&gt;</text>
+                    </g>
+                </svg>
+                <div id="div">#div</div>
+            </div>
+            <div class="btn" @click="btn">开始抽奖</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
+import gsap from "gsap";
+import axios from 'axios'
+import { Toast } from 'vant';
+import { useStore } from "vuex";
+
+import { PixiPlugin } from "gsap/PixiPlugin.js";
+import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
+// import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
+
+gsap.registerPlugin(PixiPlugin, MotionPathPlugin)
+
+
+// 初始化
+const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
+const props = defineProps({ sendMessage: Object }); // 获取props
+const store = useStore()
+
+
+const eqcode = ref(require('../assets/img/pop/eqcode.png'))
+
+
+// 页面挂载前
+onBeforeMount(() => { })
+
+
+
+
+const btn = () => {
+    console.log('抽奖');
+    // gsap.to('.LuckyWheel_box', { duration: 10, repeat: -1, "rotation": '+=360' })
+    gsap.to("#rect", {
+        duration: 5,
+        repeat: 12,
+        repeatDelay: 3,
+        yoyo: true,
+        ease: "power1.inOut",
+        motionPath: {
+            path: "#path",
+            align: "#path",
+            autoRotate: true,
+            alignOrigin: [0.5, 0.5]
+        }
+    });
+
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.LuckyWheelCon {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.7);
+
+
+    .LuckyWheel_container {
+        width: 750px;
+        height: 1180px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        .LuckyWheel_box {
+
+            border-width: 123px;
+            border-style: solid;
+            border-radius: 50%;
+            box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
+            width: 831px;
+            height: 305px;
+
+            .li {
+                width: 100px;
+                height: 100px;
+                background-color: #ff6000;
+
+            }
+
+
+        }
+
+        .btn {
+            width: 200px;
+            height: 100px;
+            text-align: center;
+            line-height: 100px;
+            font-size: 30px;
+            color: #fff;
+            background: #ff6000;
+        }
+
+    }
+
+}
+</style>

src/components/MyPrize.vue

@@ -1,6 +1,27 @@
 <template>
-    <div class="myPrizeCon">
-
+    <div class="myPrizeCon" @touchmove.prevent>
+        <div class="myPrize_container">
+            <div class="cake"></div>
+            <div class="prize_box">
+                <div class="prize_top">
+                    <div class="prize_title"></div>
+                </div>
+                <div class="prize_middle">
+                    <div class="prize_item" v-for="item in prizeList" v-show="item.isHas">
+                        <div class="prize_li">
+                            <div class="prize_num">{{ item.prizeNum }}元红包</div>
+                            <div class="prize_spe">{{ item.spe }}</div>
+                        </div>
+                        <div class="buttom">
+                            <img
+                                :src="item.isGeted ? require('../assets/img/pop/view_btn.png') : require('../assets/img/pop/got_btn.png')" />
+                        </div>
+                    </div>
+                </div>
+                <div class="prize_bottom"></div>
+            </div>
+            <div class="cls_btn" @click="hide"></div>
+        </div>
     </div>
 </template>
 
@@ -12,11 +33,30 @@ import { Toast } from 'vant';
 import { useStore } from "vuex";
 
 // 初始化
-const emit = defineEmits(["welcomePage"]); // 声明触发事件，对应父组件上面的方法
+const emit = defineEmits(["MyPrize"]); // 声明触发事件，对应父组件上面的方法
 const props = defineProps({ sendMessage: Object }); // 获取props
 const store = useStore()
 
 
+const prizeList = reactive([
+    {
+        id: 1,
+        prizeNum: 8.8,
+        isGeted: true,
+        isHas: true,
+        spe: '财富88，与“礼”共见证',
+    },
+    {
+        id: 2,
+        prizeNum: 8.8,
+        isGeted: false,
+        isHas: true,
+        spe: '添加专属服务人员企微',
+
+    },
+])
+
+
 // 页面挂载前
 onBeforeMount(() => { })
 
@@ -26,35 +66,145 @@ onBeforeMount(() => { })
 
 // 页面挂载后
 onMounted(() => {
-
+    gsap.from('.myPrizeCon', { duration: 0.3, autoAlpha: 0 })
+    gsap.from('.myPrize_container', { duration: 0.3, scale: 0.2, autoAlpha: 0, delay: 0.1 })
+    // gsap.from('.rule_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
 })
 
-
+const hide = () => {
+    emit('MyPrize')
+}
 
 
 
 </script>
 
 <style lang="scss" scoped>
-.welcomePage {
+.myPrizeCon {
     width: 100%;
     height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #000;
+    background-color: rgba(0, 0, 0, 0.7);
+
+    .myPrize_container {
+        width: 750px;
+        height: 1180px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        .cake {
+            width: 382px;
+            height: 201px;
+            @include bg_pos('../assets/img/pop/cake.png');
+            z-index: 999;
+        }
+
+        .prize_box {
+            width: 550px;
+            margin-top: -34px;
+
+            .prize_top {
+                width: 550px;
+                height: 135px;
+                @include bg_pos('../assets/img/pop/prize_box_top.png');
+                pointer-events: none;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .prize_title {
+                    width: 267px;
+                    height: 58px;
+                    @include bg_pos('../assets/img/pop/my_prize.png');
+                }
+            }
+
+            .prize_middle {
+                width: 550px;
+                height: 190px;
+                @include bg_pos('../assets/img/pop/prize_box_middle.png');
+                margin-top: 0px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
 
 
-    .video_container {
-        width: 80%;
+                .prize_item {
+                    width: 463px;
+                    height: 67px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    flex-direction: row;
+                    margin: 20px auto;
+                    padding-bottom: 10px;
 
-        .video {
+                    .prize_li {
+                        display: flex;
+                        // justify-content: center;
+                        // align-items: center;
+                        flex-direction: column;
+
+                        .prize_num {
+                            color: #ca2f0a;
+                            font-weight: 700;
+                            font-size: 30px;
+                        }
+
+                        .prize_spe {
+                            color: #ca2f0a;
+                            font-weight: 700;
+                            font-size: 24px;
+                            margin-top: 5px;
+                        }
+
+                    }
+
+                    .buttom {
+                        width: 147px;
+                        height: 62px;
+                        background-size: 100%;
+
+                        img {
                             width: 100%;
+                            height: 100%;
+                        }
+                    }
 
 
                 }
             }
 
+            .prize_bottom {
+                width: 550px;
+                height: 50px;
+                @include bg_pos('../assets/img/pop/prize_box_bottom.png');
+                margin-top: 0px;
+
+            }
+
+        }
+
+        .cls_btn {
+            @include box(72px, 72px);
+            @include bg_pos('../assets/img/pop/cls_btn.png');
+            margin-top: 50px;
+        }
+    }
+
+
+
+
 
 
 

src/components/Rules.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="rulesCon" @touchmove.prevent>
+        <div class="rules_container">
+            <div class="rule_t"></div>
+            <div class="rule_cls_btn" @click="hidePop"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
+import gsap from "gsap";
+import axios from 'axios'
+import { Toast } from 'vant';
+import { useStore } from "vuex";
+
+// 初始化
+const emit = defineEmits(["RulesPop"]); // 声明触发事件，对应父组件上面的方法
+const props = defineProps({ sendMessage: Object }); // 获取props
+const store = useStore()
+
+
+
+
+// 页面挂载前
+onBeforeMount(() => { })
+
+// 页面挂载后
+onMounted(() => {
+    gsap.from('.rulesCon', { duration: 0.3, autoAlpha: 0 })
+    gsap.from('.rule_t', { duration: 0.3, scale: 0.2, autoAlpha: 0, delay: 0.1 })
+    gsap.from('.rule_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
+
+})
+
+
+const hidePop = () => {
+    emit('RulesPop')
+}
+
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.rulesCon {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.7);
+
+    .rules_container {
+        width: 750px;
+        height: 1180px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        .rule_t {
+            @include box(629px, 762px);
+            @include bg_pos('../assets/img/pop/rule_pop.png');
+            pointer-events: none;
+        }
+
+        .rule_cls_btn {
+            @include box(72px, 72px);
+            @include bg_pos('../assets/img/pop/cls_btn.png');
+            margin-top: 50px;
+        }
+    }
+
+}
+</style>

src/components/ServiceList.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="serviceCon" @touchmove.prevent>
+        <div class="service_container">
+            <div class="service_box">
+                <div class="eqcode_box">
+                    <img :src="eqcode" alt="">
+
+                </div>
+            </div>
+            <div class="service_cls_btn" @click="hidePop"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
+import gsap from "gsap";
+import axios from 'axios'
+import { Toast } from 'vant';
+import { useStore } from "vuex";
+
+// 初始化
+const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
+const props = defineProps({ sendMessage: Object }); // 获取props
+const store = useStore()
+
+
+const eqcode = ref(require('../assets/img/pop/eqcode.png'))
+
+
+// 页面挂载前
+onBeforeMount(() => { })
+
+// 页面挂载后
+onMounted(() => {
+    gsap.from('.serviceCon', { duration: 0.3, autoAlpha: 0 })
+    gsap.from('.service_box', { duration: 0.3, scale: 0.2, autoAlpha: 0, delay: 0.1 })
+    gsap.from('.service_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
+})
+
+
+const hidePop = () => {
+    emit('ServicePop')
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.serviceCon {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.7);
+
+
+    .service_container {
+        width: 750px;
+        height: 1180px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        .service_box {
+            @include box(573px, 688px);
+            @include bg_pos('../assets/img/pop/service_box.png');
+            pointer-events: none;
+            position: relative;
+
+
+
+            .eqcode_box {
+                width: 210px;
+                height: 210px;
+                position: absolute;
+                top: 412px;
+                left: 192px;
+
+                img {
+                    width: 100%;
+                    height: 100%
+                }
+            }
+        }
+
+        .service_cls_btn {
+            @include box(72px, 72px);
+            @include bg_pos('../assets/img/pop/cls_btn.png');
+            margin-top: 50px;
+        }
+    }
+
+}
+</style>

src/page/Home/Home.vue

@@ -101,6 +101,16 @@ const getOpenId = (code) => {
 </script>
 
 <style lang="scss" scoped>
+* {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+
 div {
   color: #fff;
 }

src/store/index.js

@@ -11,7 +11,8 @@ export default createStore({
             isHasAccount: false,        //是否存在牛卡号
             isAddCustomer: false,       //是否添加过服务人员
             isHasPrize: [],             //是否存在奖品
-
+            participantNum: 1213821,     //活动参与人数
+            prizeResult: 73.11,        //中奖金额
         },
 
     },