diff --git a/package.json b/package.json index 8a3c538..54dcd8b 100644 --- a/package.json +++ b/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", diff --git a/src/assets/img/activity_1.png b/src/assets/img/activity_1.png new file mode 100644 index 0000000..cfcba37 Binary files /dev/null and b/src/assets/img/activity_1.png differ diff --git a/src/assets/img/activity_2.png b/src/assets/img/activity_2.png new file mode 100644 index 0000000..14eb35f Binary files /dev/null and b/src/assets/img/activity_2.png differ diff --git a/src/assets/img/activity_3.png b/src/assets/img/activity_3.png new file mode 100644 index 0000000..d80039e Binary files /dev/null and b/src/assets/img/activity_3.png differ diff --git a/src/assets/img/activity_4.png b/src/assets/img/activity_4.png new file mode 100644 index 0000000..1b79be2 Binary files /dev/null and b/src/assets/img/activity_4.png differ diff --git a/src/assets/img/activity_5.png b/src/assets/img/activity_5.png new file mode 100644 index 0000000..b103069 Binary files /dev/null and b/src/assets/img/activity_5.png differ diff --git a/src/assets/img/activity_bg.jpg b/src/assets/img/activity_bg.jpg new file mode 100644 index 0000000..b6bacea Binary files /dev/null and b/src/assets/img/activity_bg.jpg differ diff --git a/src/assets/img/activity_box.png b/src/assets/img/activity_box.png new file mode 100644 index 0000000..58e7707 Binary files /dev/null and b/src/assets/img/activity_box.png differ diff --git a/src/assets/img/activity_title.png b/src/assets/img/activity_title.png new file mode 100644 index 0000000..208075a Binary files /dev/null and b/src/assets/img/activity_title.png differ diff --git a/src/assets/img/caidai.png b/src/assets/img/caidai.png new file mode 100644 index 0000000..8cee5b1 Binary files /dev/null and b/src/assets/img/caidai.png differ diff --git a/src/assets/img/cloud_bottom.png b/src/assets/img/cloud_bottom.png new file mode 100644 index 0000000..7ac1bca Binary files /dev/null and b/src/assets/img/cloud_bottom.png differ diff --git a/src/assets/img/cloud_left_1.png b/src/assets/img/cloud_left_1.png new file mode 100644 index 0000000..441b867 Binary files /dev/null and b/src/assets/img/cloud_left_1.png differ diff --git a/src/assets/img/cloud_left_2.png b/src/assets/img/cloud_left_2.png new file mode 100644 index 0000000..687723e Binary files /dev/null and b/src/assets/img/cloud_left_2.png differ diff --git a/src/assets/img/cloud_left_3.png b/src/assets/img/cloud_left_3.png new file mode 100644 index 0000000..161c10b Binary files /dev/null and b/src/assets/img/cloud_left_3.png differ diff --git a/src/assets/img/cloud_right_1.png b/src/assets/img/cloud_right_1.png new file mode 100644 index 0000000..fbd993f Binary files /dev/null and b/src/assets/img/cloud_right_1.png differ diff --git a/src/assets/img/cloud_right_2.png b/src/assets/img/cloud_right_2.png new file mode 100644 index 0000000..c15b534 Binary files /dev/null and b/src/assets/img/cloud_right_2.png differ diff --git a/src/assets/img/cloud_right_3.png b/src/assets/img/cloud_right_3.png new file mode 100644 index 0000000..8977936 Binary files /dev/null and b/src/assets/img/cloud_right_3.png differ diff --git a/src/assets/img/draw_btn.png b/src/assets/img/draw_btn.png new file mode 100644 index 0000000..dbd3e49 Binary files /dev/null and b/src/assets/img/draw_btn.png differ diff --git a/src/assets/img/icon_left_1.png b/src/assets/img/icon_left_1.png new file mode 100644 index 0000000..34e9561 Binary files /dev/null and b/src/assets/img/icon_left_1.png differ diff --git a/src/assets/img/icon_left_2.png b/src/assets/img/icon_left_2.png new file mode 100644 index 0000000..68351e8 Binary files /dev/null and b/src/assets/img/icon_left_2.png differ diff --git a/src/assets/img/icon_right_1.png b/src/assets/img/icon_right_1.png new file mode 100644 index 0000000..20e6873 Binary files /dev/null and b/src/assets/img/icon_right_1.png differ diff --git a/src/assets/img/icon_right_2.png b/src/assets/img/icon_right_2.png new file mode 100644 index 0000000..76504fe Binary files /dev/null and b/src/assets/img/icon_right_2.png differ diff --git a/src/assets/img/li_btn_1.png b/src/assets/img/li_btn_1.png new file mode 100644 index 0000000..af5c5a8 Binary files /dev/null and b/src/assets/img/li_btn_1.png differ diff --git a/src/assets/img/li_btn_2.png b/src/assets/img/li_btn_2.png new file mode 100644 index 0000000..3c2fec8 Binary files /dev/null and b/src/assets/img/li_btn_2.png differ diff --git a/src/assets/img/li_btn_3.png b/src/assets/img/li_btn_3.png new file mode 100644 index 0000000..63e0d6a Binary files /dev/null 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 new file mode 100644 index 0000000..0ccfc3f Binary files /dev/null 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 new file mode 100644 index 0000000..35afd3f Binary files /dev/null and b/src/assets/img/li_btn_5.png differ diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png new file mode 100644 index 0000000..1b8cbdb Binary files /dev/null and b/src/assets/img/logo.png differ diff --git a/src/assets/img/luckybag.png b/src/assets/img/luckybag.png new file mode 100644 index 0000000..3c98b93 Binary files /dev/null and b/src/assets/img/luckybag.png differ diff --git a/src/assets/img/luckybag_left.png b/src/assets/img/luckybag_left.png new file mode 100644 index 0000000..fd218a7 Binary files /dev/null and b/src/assets/img/luckybag_left.png differ diff --git a/src/assets/img/luckybag_right.png b/src/assets/img/luckybag_right.png new file mode 100644 index 0000000..182a2ff Binary files /dev/null and b/src/assets/img/luckybag_right.png differ diff --git a/src/assets/img/luckybag_right_2.png b/src/assets/img/luckybag_right_2.png new file mode 100644 index 0000000..bf6deae Binary files /dev/null and b/src/assets/img/luckybag_right_2.png differ diff --git a/src/assets/img/pdf.pdf b/src/assets/img/pdf.pdf deleted file mode 100644 index 8b7d7bd..0000000 Binary files a/src/assets/img/pdf.pdf and /dev/null differ diff --git a/src/assets/img/prize_btn.png b/src/assets/img/prize_btn.png new file mode 100644 index 0000000..6cdba8f Binary files /dev/null and b/src/assets/img/prize_btn.png differ diff --git a/src/assets/img/prize_btn_text.png b/src/assets/img/prize_btn_text.png new file mode 100644 index 0000000..3dad279 Binary files /dev/null and b/src/assets/img/prize_btn_text.png differ diff --git a/src/assets/img/rule_btn.png b/src/assets/img/rule_btn.png new file mode 100644 index 0000000..eab513e Binary files /dev/null and b/src/assets/img/rule_btn.png differ diff --git a/src/assets/img/rule_btn_text.png b/src/assets/img/rule_btn_text.png new file mode 100644 index 0000000..14db15f Binary files /dev/null and b/src/assets/img/rule_btn_text.png differ diff --git a/src/assets/img/select_box.png b/src/assets/img/select_box.png new file mode 100644 index 0000000..77d9beb Binary files /dev/null and b/src/assets/img/select_box.png differ diff --git a/src/assets/img/share.jpg b/src/assets/img/share.jpg deleted file mode 100644 index e8acfbe..0000000 Binary files a/src/assets/img/share.jpg and /dev/null differ diff --git a/src/assets/img/title_main.png b/src/assets/img/title_main.png new file mode 100644 index 0000000..41602ce Binary files /dev/null and b/src/assets/img/title_main.png differ diff --git a/src/assets/img/top_bg.jpg b/src/assets/img/top_bg.jpg new file mode 100644 index 0000000..b6dde3a Binary files /dev/null and b/src/assets/img/top_bg.jpg differ diff --git a/src/assets/img/zhuanpan.png b/src/assets/img/zhuanpan.png new file mode 100644 index 0000000..4266a02 Binary files /dev/null and b/src/assets/img/zhuanpan.png differ diff --git a/src/components/Index.vue b/src/components/Index.vue index 9479a39..fe8e9a8 100644 --- a/src/components/Index.vue +++ b/src/components/Index.vue @@ -1,8 +1,59 @@ @@ -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) => { - - }) -} - - @@ -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; + + + .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'); + + + } + + } + -span { - color: rgb(255, 0, 0); - font-weight: 700; } \ No newline at end of file diff --git a/src/page/Home/Home.vue b/src/page/Home/Home.vue index e01b62c..e388bc0 100644 --- a/src/page/Home/Home.vue +++ b/src/page/Home/Home.vue @@ -8,17 +8,52 @@