572 lines
15 KiB
Vue
572 lines
15 KiB
Vue
<template>
|
||
<div class="indexPage">
|
||
<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="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>1.99</div>
|
||
<div>2.99</div>
|
||
<div>3.99</div>
|
||
<div>4.99</div>
|
||
<div>5.99</div>
|
||
</div> -->
|
||
</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" @click=drawBtn></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>
|
||
</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,index) in activityList" :key="index"
|
||
: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>
|
||
|
||
<!-- 活动规则弹窗 -->
|
||
<Rules v-if="showRulesPop" @RulesPop="hideRulesPop" />
|
||
<!-- 我的奖品弹窗 -->
|
||
<MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
|
||
<!-- 添加专属服务人员企微弹窗 -->
|
||
<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
|
||
|
||
<LuckyWheel v-if="false" />
|
||
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
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 Rules from '@/components/Rules'
|
||
import MyPrize from '@/components/MyPrize'
|
||
import ServiceList from '@/components/ServiceList'
|
||
import LuckyWheel from '@/components/LuckyWheel'
|
||
|
||
|
||
|
||
|
||
// 初始化
|
||
const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法
|
||
const props = defineProps({ sendMessage: Object }); // 获取props
|
||
const store = useStore() //初始化vuex
|
||
const { proxy } = getCurrentInstance(); //初始化全局方法：plugin工具箱
|
||
|
||
|
||
// 活动信息
|
||
const participantNum = ref(store.state.userAccount.participantNum) // 活动参与人数prizeResult
|
||
const prizeResult = ref(store.state.userAccount.prizeResult) // 中奖金额
|
||
|
||
|
||
// 页面控制
|
||
const showRulesPop = ref(false)
|
||
const showMyPrize = ref(false)
|
||
const showServicePop = ref(false)
|
||
|
||
|
||
|
||
// 活动列表
|
||
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: true,
|
||
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(() => {
|
||
|
||
})
|
||
|
||
|
||
|
||
// 页面挂载后
|
||
onMounted(() => { })
|
||
|
||
const btn = () => {
|
||
// Toast('项目开发中');
|
||
emit('indexPage', 'hello')
|
||
|
||
|
||
Dialog.alert({
|
||
title: '招商证券88司庆活动',
|
||
message: '项目开发中',
|
||
confirmButtonText: '确定',
|
||
showCancelButton: true,
|
||
}).then((e) => {
|
||
|
||
// 更新openid
|
||
store.commit({ type: 'updateOpenid', openid: 'openid110' })
|
||
|
||
|
||
console.log(e, store.state.userAccount);
|
||
}).catch((e) => {
|
||
console.log(e);
|
||
});
|
||
}
|
||
|
||
|
||
// 抽奖按钮
|
||
const drawBtn = ()=>{
|
||
console.log("抽奖：");
|
||
console.log("授权：",getAuthorize(1));
|
||
// let href = window.location.href;
|
||
// let h_idx = window.location.href.indexOf("#");
|
||
// let out_href = href.slice(0, h_idx);
|
||
|
||
// service.get(process.env.VUE_APP_ZS_DOMAIN + '/wxauth/official/account/authorize',{params:{
|
||
// redirectUrl: out_href,
|
||
// scope: 1,
|
||
// }}).then((res) => {
|
||
|
||
// console.log("招商授权结果：",res);
|
||
// })
|
||
|
||
}
|
||
|
||
|
||
// 活动点击
|
||
const activityBtn = (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
|
||
}
|
||
|
||
|
||
// 招商证券授权
|
||
const getAuthorize = (scopeState)=> {
|
||
|
||
let href = window.location.href;
|
||
let h_idx = window.location.href.indexOf("#");
|
||
let out_href = href.slice(0, h_idx);
|
||
// return `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`;
|
||
window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${(out_href)}&scope=${scopeState}`
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.indexPage {
|
||
width: 100%;
|
||
height: 100%;
|
||
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(41px, 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 {
|
||
@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;
|
||
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;
|
||
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
|
||
.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> |