diff --git a/src/assets/img/cloud_bottom.png b/src/assets/img/cloud_bottom.png index 7ac1bca..3836282 100644 Binary files a/src/assets/img/cloud_bottom.png and b/src/assets/img/cloud_bottom.png differ diff --git a/src/assets/img/laba.png b/src/assets/img/laba.png new file mode 100644 index 0000000..79c9578 Binary files /dev/null and b/src/assets/img/laba.png differ diff --git a/src/assets/img/li_btn_3.png b/src/assets/img/li_btn_3.png index 63e0d6a..fa699fa 100644 Binary files a/src/assets/img/li_btn_3.png and b/src/assets/img/li_btn_3.png differ diff --git a/src/assets/img/li_btn_4.png b/src/assets/img/li_btn_4.png index 0ccfc3f..13ef724 100644 Binary files a/src/assets/img/li_btn_4.png and b/src/assets/img/li_btn_4.png differ diff --git a/src/assets/img/li_btn_5.png b/src/assets/img/li_btn_5.png index 35afd3f..443b0fa 100644 Binary files a/src/assets/img/li_btn_5.png and b/src/assets/img/li_btn_5.png differ diff --git a/src/assets/img/luckybag_2.png b/src/assets/img/luckybag_2.png new file mode 100644 index 0000000..ca62960 Binary files /dev/null and b/src/assets/img/luckybag_2.png differ diff --git a/src/assets/img/notice_box.png b/src/assets/img/notice_box.png new file mode 100644 index 0000000..fa5363a Binary files /dev/null and b/src/assets/img/notice_box.png differ diff --git a/src/assets/img/pop/cake.png b/src/assets/img/pop/cake.png new file mode 100644 index 0000000..6b6a0cd Binary files /dev/null and b/src/assets/img/pop/cake.png differ diff --git a/src/assets/img/pop/cls_btn.png b/src/assets/img/pop/cls_btn.png new file mode 100644 index 0000000..bda9727 Binary files /dev/null and b/src/assets/img/pop/cls_btn.png differ diff --git a/src/assets/img/pop/draw_got_btn.png b/src/assets/img/pop/draw_got_btn.png new file mode 100644 index 0000000..8e663cd Binary files /dev/null and b/src/assets/img/pop/draw_got_btn.png differ diff --git a/src/assets/img/pop/eqcode.png b/src/assets/img/pop/eqcode.png new file mode 100644 index 0000000..1020739 Binary files /dev/null and b/src/assets/img/pop/eqcode.png differ diff --git a/src/assets/img/pop/got_btn.png b/src/assets/img/pop/got_btn.png new file mode 100644 index 0000000..5a29828 Binary files /dev/null and b/src/assets/img/pop/got_btn.png differ diff --git a/src/assets/img/pop/luckybag.png b/src/assets/img/pop/luckybag.png new file mode 100644 index 0000000..a883e2c Binary files /dev/null and b/src/assets/img/pop/luckybag.png differ diff --git a/src/assets/img/pop/my_prize.png b/src/assets/img/pop/my_prize.png new file mode 100644 index 0000000..4892cdf Binary files /dev/null and b/src/assets/img/pop/my_prize.png differ diff --git a/src/assets/img/pop/prize_box.png b/src/assets/img/pop/prize_box.png new file mode 100644 index 0000000..62721af Binary files /dev/null and b/src/assets/img/pop/prize_box.png differ diff --git a/src/assets/img/pop/prize_box_bottom.png b/src/assets/img/pop/prize_box_bottom.png new file mode 100644 index 0000000..e5db691 Binary files /dev/null and b/src/assets/img/pop/prize_box_bottom.png differ diff --git a/src/assets/img/pop/prize_box_middle.png b/src/assets/img/pop/prize_box_middle.png new file mode 100644 index 0000000..d6bdfe8 Binary files /dev/null and b/src/assets/img/pop/prize_box_middle.png differ diff --git a/src/assets/img/pop/prize_box_top.png b/src/assets/img/pop/prize_box_top.png new file mode 100644 index 0000000..036186b Binary files /dev/null and b/src/assets/img/pop/prize_box_top.png differ diff --git a/src/assets/img/pop/rule_pop.png b/src/assets/img/pop/rule_pop.png new file mode 100644 index 0000000..d8178a2 Binary files /dev/null and b/src/assets/img/pop/rule_pop.png differ diff --git a/src/assets/img/pop/service_box.png b/src/assets/img/pop/service_box.png new file mode 100644 index 0000000..9499036 Binary files /dev/null and b/src/assets/img/pop/service_box.png differ diff --git a/src/assets/img/pop/view_btn.png b/src/assets/img/pop/view_btn.png new file mode 100644 index 0000000..c9e70e7 Binary files /dev/null and b/src/assets/img/pop/view_btn.png differ diff --git a/src/components/Index.vue b/src/components/Index.vue index fe8e9a8..b0fef02 100644 --- a/src/components/Index.vue +++ b/src/components/Index.vue @@ -9,22 +9,25 @@
+
+
{{ prizeResult }}元
+
+
+ + 活动已有{{ participantNum }}人参与 +
-
+ - +
-->
@@ -33,8 +36,8 @@
-
-
+
+
@@ -54,6 +57,17 @@
+ + + + + + + + + + + @@ -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 +} + @@ -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; + + } + + + } } diff --git a/src/components/LuckyWheel.vue b/src/components/LuckyWheel.vue new file mode 100644 index 0000000..f598180 --- /dev/null +++ b/src/components/LuckyWheel.vue @@ -0,0 +1,128 @@ + + + + + \ No newline at end of file diff --git a/src/components/MyPrize.vue b/src/components/MyPrize.vue index d67903e..7bf98e2 100644 --- a/src/components/MyPrize.vue +++ b/src/components/MyPrize.vue @@ -1,6 +1,27 @@ @@ -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,32 +66,139 @@ 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') +} \ No newline at end of file diff --git a/src/components/Rules.vue b/src/components/Rules.vue new file mode 100644 index 0000000..7897e92 --- /dev/null +++ b/src/components/Rules.vue @@ -0,0 +1,82 @@ + + + + + \ No newline at end of file diff --git a/src/components/ServiceList.vue b/src/components/ServiceList.vue new file mode 100644 index 0000000..d7aa2c6 --- /dev/null +++ b/src/components/ServiceList.vue @@ -0,0 +1,102 @@ + + + + + \ No newline at end of file diff --git a/src/page/Home/Home.vue b/src/page/Home/Home.vue index e388bc0..14b77c7 100644 --- a/src/page/Home/Home.vue +++ b/src/page/Home/Home.vue @@ -101,6 +101,16 @@ const getOpenId = (code) => {