liangzejun/zszq-celebration-88
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

不需要招商证券二步授权，小程序入口会自动授权

Browse Source
This commit is contained in:
tcubic 2022-08-01 17:56:41 +08:00
parent 1cc35b8e33
commit c02ef34e45
1 changed files with 474 additions and 505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
src/components/Index.vue
View File

@ -13,7 +13,9 @@
<div class="prize_num">{{ prizeResult }}<span>元</span></div> <div class="prize_num">{{ prizeResult }}<span>元</span></div>
</div> </div>
<div class="notice"> <div class="notice">
<span class="icon"><img src="../assets/img/laba.png" alt="" srcset=""></span> <span class="icon"
><img src="../assets/img/laba.png" alt="" srcset=""
/></span>
<span class="num">活动已有{{ participantNum }}人参与</span> <span class="num">活动已有{{ participantNum }}人参与</span>
</div> </div>
<div class="cloud_left_2"></div> <div class="cloud_left_2"></div>
@ -35,7 +37,7 @@
<div class="cloud_right_3"></div> <div class="cloud_right_3"></div>
<div class="icon_right_1"></div> <div class="icon_right_1"></div>
<div class="select_box"></div> <div class="select_box"></div>
<div class="draw_btn" @click=drawBtn></div> <div class="draw_btn" @click="drawBtn"></div>
<div class="rule_btn" @click="showRluesBtn"></div> <div class="rule_btn" @click="showRluesBtn"></div>
<div class="prize_btn" @click="showMyPrizePop"></div> <div class="prize_btn" @click="showMyPrizePop"></div>
<div class="rule_btn_text"></div> <div class="rule_btn_text"></div>
@ -45,12 +47,22 @@
<!-- 活动列表 --> <!-- 活动列表 -->
<div class="activityCon"> <div class="activityCon">
<div class="activity_box"> <div class="activity_box">
<div class="activity_title"><img src="../assets/img/activity_title.png" alt=""></div> <div class="activity_title">
<img src="../assets/img/activity_title.png" alt="" />
</div>
<div class="activity_list"> <div class="activity_list">
<div class="activity_li" v-for="(item,index) in activityList" :key="index" <div
:style="{ 'background-image': 'url(' + item.banner + ')' }" v-show="item.show"> class="activity_li"
<div class="btn" :style="{ 'background-image': 'url(' + item.btnImg + ')' }" v-for="(item, index) in activityList"
@click="activityBtn(item)"></div> :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>
</div> </div>
@ -65,191 +77,175 @@
<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" /> <ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
<LuckyWheel v-if="false" /> <LuckyWheel v-if="false" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs, getCurrentInstance, computed } from 'vue' import {
onBeforeMount,
onMounted,
defineEmits,
defineProps,
reactive,
ref,
toRefs,
getCurrentInstance,
computed,
} from "vue";
import gsap from "gsap"; import gsap from "gsap";
import axios from 'axios' import axios from "axios";
import { Toast, Dialog } from 'vant'; import { Toast, Dialog } from "vant";
import { useStore } from "vuex"; import { useStore } from "vuex";
// import { get_authorize, get_jssdk } from '@/api/authorize-api' // import { get_authorize, get_jssdk } from '@/api/authorize-api'
import service from "@/api/httpServe" import service from "@/api/httpServe";
import qs from 'qs' import qs from "qs";
import h5plugin from '@/utils/plugin' import h5plugin from "@/utils/plugin";
import Rules from '@/components/Rules' import Rules from "@/components/Rules";
import MyPrize from '@/components/MyPrize' import MyPrize from "@/components/MyPrize";
import ServiceList from '@/components/ServiceList' import ServiceList from "@/components/ServiceList";
import LuckyWheel from '@/components/LuckyWheel' import LuckyWheel from "@/components/LuckyWheel";
// 初始化 // 初始化
const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法 const emit = defineEmits(["indexPage"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore() //初始化vuex const store = useStore(); //初始化vuex
const { proxy } = getCurrentInstance(); //初始化全局方法：plugin工具箱 const { proxy } = getCurrentInstance(); //初始化全局方法：plugin工具箱
// 活动信息 // 活动信息
const participantNum = ref(store.state.userAccount.participantNum) // 活动参与人数prizeResult const participantNum = ref(store.state.userAccount.participantNum); // 活动参与人数prizeResult
const prizeResult = ref(store.state.userAccount.prizeResult) // 中奖金额 const prizeResult = ref(store.state.userAccount.prizeResult); // 中奖金额
// 页面控制 // 页面控制
const showRulesPop = ref(false) const showRulesPop = ref(false);
const showMyPrize = ref(false) const showMyPrize = ref(false);
const showServicePop = ref(false) const showServicePop = ref(false);
// 活动列表 // 活动列表
const activityList = reactive([ const activityList = reactive([
{ {
id: 1, id: 1,
show: true, show: true,
banner: require('../assets/img/activity_1.png'), banner: require("../assets/img/activity_1.png"),
btnImg: require('../assets/img/li_btn_1.png'), btnImg: require("../assets/img/li_btn_1.png"),
}, },
{ {
id: 2, id: 2,
show: true, show: true,
banner: require('../assets/img/activity_2.png'), banner: require("../assets/img/activity_2.png"),
btnImg: require('../assets/img/li_btn_2.png'), btnImg: require("../assets/img/li_btn_2.png"),
}, },
{ {
id: 3, id: 3,
show: true, show: true,
banner: require('../assets/img/activity_3.png'), banner: require("../assets/img/activity_3.png"),
btnImg: require('../assets/img/li_btn_3.png'), btnImg: require("../assets/img/li_btn_3.png"),
}, },
{ {
id: 4, id: 4,
show: true, show: true,
banner: require('../assets/img/activity_4.png'), banner: require("../assets/img/activity_4.png"),
btnImg: require('../assets/img/li_btn_4.png'), btnImg: require("../assets/img/li_btn_4.png"),
}, },
{ {
id: 5, id: 5,
show: true, show: true,
banner: require('../assets/img/activity_5.png'), banner: require("../assets/img/activity_5.png"),
btnImg: require('../assets/img/li_btn_5.png'), btnImg: require("../assets/img/li_btn_5.png"),
}, },
]) ]);
// 页面挂载前 // 页面挂载前
onBeforeMount(() => { onBeforeMount(() => {});
})
// 页面挂载后 // 页面挂载后
onMounted(() => { }) onMounted(() => {});
const btn = () => { const btn = () => {
// Toast('项目开发中'); // Toast('项目开发中');
emit('indexPage', 'hello') emit("indexPage", "hello");
Dialog.alert({ Dialog.alert({
title: '招商证券88司庆活动', title: "招商证券88司庆活动",
message: '项目开发中', message: "项目开发中",
confirmButtonText: '确定', confirmButtonText: "确定",
showCancelButton: true, showCancelButton: true,
}).then((e) => { })
.then((e) => {
// 更新openid // 更新openid
store.commit({ type: 'updateOpenid', openid: 'openid110' }) store.commit({ type: "updateOpenid", openid: "openid110" });
console.log(e, store.state.userAccount); console.log(e, store.state.userAccount);
}).catch((e) => { })
.catch((e) => {
console.log(e); console.log(e);
}); });
} };
// 抽奖按钮 // 抽奖按钮
const drawBtn = ()=>{ const drawBtn = () => {
console.log("抽奖："); console.log("抽奖：");
// console.log("授权：",getAuthorize(1)); // console.log("授权：",getAuthorize(1));
// let href = window.location.href; // let href = window.location.href;
// let h_idx = window.location.href.indexOf("#"); // let h_idx = window.location.href.indexOf("#");
// let out_href = href.slice(0, h_idx); // let out_href = href.slice(0, h_idx);
// service.get(process.env.VUE_APP_ZS_DOMAIN + '/wxauth/official/account/authorize',{params:{ // service.get(process.env.VUE_APP_ZS_DOMAIN + '/wxauth/official/account/authorize',{params:{
// redirectUrl: out_href, // redirectUrl: out_href,
// scope: 1, // scope: 1,
// }}).then((res) => { // }}).then((res) => {
// console.log("招商授权结果：",res); // console.log("招商授权结果：",res);
// }) // })
if (h5plugin.getQueryString("forceauth")) { if (h5plugin.getQueryString("forceauth")) {
// H5P.getSetCookie('authState',1,{expires:0.5}) // H5P.getSetCookie('authState',1,{expires:0.5})
console.log('yes-forceauth'); console.log("yes-forceauth");
getAuthorize(0); getAuthorize(0);
} else { } else {
// H5P.getSetCookie('authState',1,{expires:0.5}) // H5P.getSetCookie('authState',1,{expires:0.5})
console.log('no-forceauth'); console.log("no-forceauth");
getAuthorize(1); getAuthorize(1);
} }
};
}
// 活动点击 // 活动点击
const activityBtn = (item) => { const activityBtn = (item) => {
console.log(item.id); console.log(item.id);
if (item.id == 1) { if (item.id == 1) {
showServicePop.value = true showServicePop.value = true;
} }
} };
// 活动规则弹窗 // 活动规则弹窗
const showRluesBtn = () => { const showRluesBtn = () => {
showRulesPop.value = true showRulesPop.value = true;
} };
const hideRulesPop = () => { const hideRulesPop = () => {
showRulesPop.value = false showRulesPop.value = false;
} };
// 我的奖品页面 // 我的奖品页面
const showMyPrizePop = () => { const showMyPrizePop = () => {
showMyPrize.value = true showMyPrize.value = true;
} };
const myPrizePop = () => { const myPrizePop = () => {
showMyPrize.value = false showMyPrize.value = false;
} };
// 企微弹窗 // 企微弹窗
const hideServicePop = () => { const hideServicePop = () => {
showServicePop.value = false showServicePop.value = false;
} };
// 招商证券授权 // 招商证券授权
const getAuthorize = (scopeState)=> { const getAuthorize = (scopeState) => {
let href = window.location.href; let href = window.location.href;
let h_idx = window.location.href.indexOf("#"); let h_idx = window.location.href.indexOf("#");
let out_href = href.slice(0, h_idx); let out_href = href.slice(0, h_idx);
// return `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${1}"`; // 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}` window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${scopeState}`;
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -264,7 +260,6 @@ const getAuthorize = (scopeState)=> {
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
.indexCon { .indexCon {
// @include pos(100%, 1090px, 0, 0); // @include pos(100%, 1090px, 0, 0);
width: 100%; width: 100%;
@ -272,19 +267,18 @@ const getAuthorize = (scopeState)=> {
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
@include bg_pos('../assets/img/top_bg.jpg'); @include bg_pos("../assets/img/top_bg.jpg");
// overflow: hidden; // overflow: hidden;
.logo { .logo {
@include pos(241px, 36px, 31px, 41px); @include pos(241px, 36px, 31px, 41px);
@include bg_pos('../assets/img/logo.png'); @include bg_pos("../assets/img/logo.png");
pointer-events: none; pointer-events: none;
} }
.notice { .notice {
@include pos(350px, 48px, 200px, 592px); @include pos(350px, 48px, 200px, 592px);
@include bg_pos('../assets/img/notice_box.png'); @include bg_pos("../assets/img/notice_box.png");
pointer-events: none; pointer-events: none;
align-self: center; align-self: center;
justify-content: center; justify-content: center;
@ -313,110 +307,108 @@ const getAuthorize = (scopeState)=> {
.title_main { .title_main {
@include pos(547px, 221px, 107px, 108px); @include pos(547px, 221px, 107px, 108px);
@include bg_pos('../assets/img/title_main.png'); @include bg_pos("../assets/img/title_main.png");
pointer-events: none; pointer-events: none;
} }
.caidai { .caidai {
@include pos(641px, 503px, 47px, 79px); @include pos(641px, 503px, 47px, 79px);
@include bg_pos('../assets/img/caidai.png'); @include bg_pos("../assets/img/caidai.png");
pointer-events: none; pointer-events: none;
} }
.luckybag_left { .luckybag_left {
@include pos(144px, 138px, 0px, 551px); @include pos(144px, 138px, 0px, 551px);
@include bg_pos('../assets/img/luckybag_left.png'); @include bg_pos("../assets/img/luckybag_left.png");
pointer-events: none; pointer-events: none;
} }
.luckybag_right { .luckybag_right {
@include pos(118px, 110px, 615px, 503px); @include pos(118px, 110px, 615px, 503px);
@include bg_pos('../assets/img/luckybag_right_2.png'); @include bg_pos("../assets/img/luckybag_right_2.png");
pointer-events: none; pointer-events: none;
} }
.icon_left_1 { .icon_left_1 {
@include pos(54px, 52px, 104px, 605px); @include pos(54px, 52px, 104px, 605px);
@include bg_pos('../assets/img/icon_left_1.png'); @include bg_pos("../assets/img/icon_left_1.png");
pointer-events: none; pointer-events: none;
} }
.icon_left_2 { .icon_left_2 {
@include pos(63px, 61px, 11px, 652px); @include pos(63px, 61px, 11px, 652px);
@include bg_pos('../assets/img/icon_left_2.png'); @include bg_pos("../assets/img/icon_left_2.png");
pointer-events: none; pointer-events: none;
} }
.icon_right_1 { .icon_right_1 {
@include pos(81px, 80px, 556px, 400px); @include pos(81px, 80px, 556px, 400px);
@include bg_pos('../assets/img/icon_right_1.png'); @include bg_pos("../assets/img/icon_right_1.png");
pointer-events: none; pointer-events: none;
} }
.icon_right_2 { .icon_right_2 {
@include pos(70px, 65px, 567px, 573px); @include pos(70px, 65px, 567px, 573px);
@include bg_pos('../assets/img/icon_right_2.png'); @include bg_pos("../assets/img/icon_right_2.png");
pointer-events: none; pointer-events: none;
} }
.icon_right_3 { .icon_right_3 {
@include pos(103px, 108px, 633px, 600px); @include pos(103px, 108px, 633px, 600px);
@include bg_pos('../assets/img/luckybag_right.png'); @include bg_pos("../assets/img/luckybag_right.png");
pointer-events: none; pointer-events: none;
} }
.cloud_left_1 { .cloud_left_1 {
@include pos(214px, 147px, 0px, 523px); @include pos(214px, 147px, 0px, 523px);
@include bg_pos('../assets/img/cloud_left_1.png'); @include bg_pos("../assets/img/cloud_left_1.png");
pointer-events: none; pointer-events: none;
} }
.cloud_left_2 { .cloud_left_2 {
@include pos(375px, 176px, 0px, 616px); @include pos(375px, 176px, 0px, 616px);
@include bg_pos('../assets/img/cloud_left_2.png'); @include bg_pos("../assets/img/cloud_left_2.png");
pointer-events: none; pointer-events: none;
} }
.cloud_left_3 { .cloud_left_3 {
@include pos(151px, 136px, 0px, 645px); @include pos(151px, 136px, 0px, 645px);
@include bg_pos('../assets/img/cloud_left_3.png'); @include bg_pos("../assets/img/cloud_left_3.png");
pointer-events: none; pointer-events: none;
} }
.cloud_right_1 { .cloud_right_1 {
@include pos(270px, 215px, 480px, 477px); @include pos(270px, 215px, 480px, 477px);
@include bg_pos('../assets/img/cloud_right_1.png'); @include bg_pos("../assets/img/cloud_right_1.png");
pointer-events: none; pointer-events: none;
} }
.cloud_right_2 { .cloud_right_2 {
@include pos(375px, 202px, 375px, 595px); @include pos(375px, 202px, 375px, 595px);
@include bg_pos('../assets/img/cloud_right_2.png'); @include bg_pos("../assets/img/cloud_right_2.png");
pointer-events: none; pointer-events: none;
} }
.cloud_right_3 { .cloud_right_3 {
@include pos(113px, 108px, 639px, 686px); @include pos(113px, 108px, 639px, 686px);
@include bg_pos('../assets/img/cloud_right_3.png'); @include bg_pos("../assets/img/cloud_right_3.png");
pointer-events: none; pointer-events: none;
} }
.lucky_bag { .lucky_bag {
@include pos(308px, 355px, 227px, 356px); @include pos(308px, 355px, 227px, 356px);
@include bg_pos('../assets/img/luckybag.png'); @include bg_pos("../assets/img/luckybag.png");
pointer-events: none; pointer-events: none;
visibility: hidden; visibility: hidden;
} }
.lucky_bag_2 { .lucky_bag_2 {
@include pos(330px, 345px, 210px, 348px); @include pos(330px, 345px, 210px, 348px);
@include bg_pos('../assets/img/luckybag_2.png'); @include bg_pos("../assets/img/luckybag_2.png");
pointer-events: none; pointer-events: none;
// display: flex; // display: flex;
.prize_num { .prize_num {
@include pos(330px, 50px, 0px, 79px); @include pos(330px, 50px, 0px, 79px);
font-weight: 700; font-weight: 700;
@ -428,48 +420,44 @@ const getAuthorize = (scopeState)=> {
color: #ca2f0a; color: #ca2f0a;
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
}
} }
} }
}
.select_box { .select_box {
@include pos(270px, 325px, 239px, 666px); @include pos(270px, 325px, 239px, 666px);
@include bg_pos('../assets/img/select_box.png'); @include bg_pos("../assets/img/select_box.png");
pointer-events: none; pointer-events: none;
} }
.draw_btn { .draw_btn {
@include pos(216px, 252px, 273px, 810px); @include pos(216px, 252px, 273px, 810px);
@include bg_pos('../assets/img/draw_btn.png'); @include bg_pos("../assets/img/draw_btn.png");
} }
.rule_btn { .rule_btn {
@include pos(137px, 153px, 75px, 883px); @include pos(137px, 153px, 75px, 883px);
@include bg_pos('../assets/img/rule_btn.png'); @include bg_pos("../assets/img/rule_btn.png");
} }
.rule_btn_text { .rule_btn_text {
@include pos(98px, 26px, 92px, 1035px); @include pos(98px, 26px, 92px, 1035px);
@include bg_pos('../assets/img/rule_btn_text.png'); @include bg_pos("../assets/img/rule_btn_text.png");
} }
.prize_btn { .prize_btn {
@include pos(137px, 153px, 541px, 883px); @include pos(137px, 153px, 541px, 883px);
@include bg_pos('../assets/img/prize_btn.png'); @include bg_pos("../assets/img/prize_btn.png");
} }
.prize_btn_text { .prize_btn_text {
@include pos(98px, 26px, 558px, 1035px); @include pos(98px, 26px, 558px, 1035px);
@include bg_pos('../assets/img/prize_btn_text.png'); @include bg_pos("../assets/img/prize_btn_text.png");
} }
.zhuanpan { .zhuanpan {
@include pos(750px, 465px, 0px, 657px); @include pos(750px, 465px, 0px, 657px);
@include bg_pos('../assets/img/zhuanpan.png'); @include bg_pos("../assets/img/zhuanpan.png");
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
@ -492,27 +480,21 @@ const getAuthorize = (scopeState)=> {
line-height: 110px; line-height: 110px;
border-radius: 50%; border-radius: 50%;
transform: rotate(30deg); transform: rotate(30deg);
}
} }
} }
}
} }
.activityCon { .activityCon {
width: 750px; width: 750px;
@include bg_pos('../assets/img/activity_bg.jpg'); @include bg_pos("../assets/img/activity_bg.jpg");
.activity_box { .activity_box {
width: 700px; width: 700px;
// height: 100%; // height: 100%;
margin: 0 auto; margin: 0 auto;
margin-top: 30px; margin-top: 30px;
@include bg_pos('../assets/img/activity_box.png'); @include bg_pos("../assets/img/activity_box.png");
box-sizing: border-box; box-sizing: border-box;
.activity_title { .activity_title {
@ -553,30 +535,17 @@ const getAuthorize = (scopeState)=> {
top: 16px; top: 16px;
left: 479px; left: 479px;
background-size: 100%; background-size: 100%;
} }
} }
} }
} }
.cloud_bottom { .cloud_bottom {
width: 750px; width: 750px;
height: 255px; height: 255px;
margin-top: -160px; margin-top: -160px;
@include bg_pos('../assets/img/cloud_bottom.png'); @include bg_pos("../assets/img/cloud_bottom.png");
} }
} }
} }
</style> </style>