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

265
src/components/Index.vue
View File

@ -13,7 +13,9 @@
<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="icon"
><img src="../assets/img/laba.png" alt="" srcset=""
/></span>
<span class="num">活动已有{{ participantNum }}人参与</span>
</div>
<div class="cloud_left_2"></div>
@ -35,7 +37,7 @@
<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="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>
@ -45,12 +47,22 @@
<!-- 活动列表 -->
<div class="activityCon">
<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_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
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>
@ -65,117 +77,109 @@
<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 {
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 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'
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 store = useStore(); //初始化vuex
const { proxy } = getCurrentInstance(); //初始化全局方法：plugin工具箱
// 活动信息
const participantNum = ref(store.state.userAccount.participantNum) // 活动参与人数prizeResult
const prizeResult = ref(store.state.userAccount.prizeResult) // 中奖金额
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 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'),
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'),
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'),
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'),
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'),
banner: require("../assets/img/activity_5.png"),
btnImg: require("../assets/img/li_btn_5.png"),
},
])
]);
// 页面挂载前
onBeforeMount(() => {
})
onBeforeMount(() => {});
// 页面挂载后
onMounted(() => { })
onMounted(() => {});
const btn = () => {
// Toast('项目开发中');
emit('indexPage', 'hello')
emit("indexPage", "hello");
Dialog.alert({
title: '招商证券88司庆活动',
message: '项目开发中',
confirmButtonText: '确定',
title: "招商证券88司庆活动",
message: "项目开发中",
confirmButtonText: "确定",
showCancelButton: true,
}).then((e) => {
})
.then((e) => {
// 更新openid
store.commit({ type: 'updateOpenid', openid: 'openid110' })
store.commit({ type: "updateOpenid", openid: "openid110" });
console.log(e, store.state.userAccount);
}).catch((e) => {
})
.catch((e) => {
console.log(e);
});
}
};
// 抽奖按钮
const drawBtn = () => {
@ -195,61 +199,53 @@ const drawBtn = ()=>{
if (h5plugin.getQueryString("forceauth")) {
// H5P.getSetCookie('authState',1,{expires:0.5})
console.log('yes-forceauth');
console.log("yes-forceauth");
getAuthorize(0);
} else {
// H5P.getSetCookie('authState',1,{expires:0.5})
console.log('no-forceauth');
console.log("no-forceauth");
getAuthorize(1);
}
}
};
// 活动点击
const activityBtn = (item) => {
console.log(item.id);
if (item.id == 1) {
showServicePop.value = true
showServicePop.value = true;
}
}
};
// 活动规则弹窗
const showRluesBtn = () => {
showRulesPop.value = true
}
showRulesPop.value = true;
};
const hideRulesPop = () => {
showRulesPop.value = false
}
showRulesPop.value = false;
};
// 我的奖品页面
const showMyPrizePop = () => {
showMyPrize.value = true
}
showMyPrize.value = true;
};
const myPrizePop = () => {
showMyPrize.value = false
}
showMyPrize.value = false;
};
// 企微弹窗
const hideServicePop = () => {
showServicePop.value = false
}
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}`
}
window.location.href = `${process.env.VUE_APP_ZS_DOMAIN}/wxauth/official/account/authorize?redirectUrl=${out_href}&scope=${scopeState}`;
};
</script>
<style lang="scss" scoped>
@ -264,7 +260,6 @@ const getAuthorize = (scopeState)=> {
overflow: hidden;
overflow-y: scroll;
.indexCon {
// @include pos(100%, 1090px, 0, 0);
width: 100%;
@ -272,19 +267,18 @@ const getAuthorize = (scopeState)=> {
position: relative;
top: 0;
left: 0;
@include bg_pos('../assets/img/top_bg.jpg');
@include bg_pos("../assets/img/top_bg.jpg");
// overflow: hidden;
.logo {
@include pos(241px, 36px, 31px, 41px);
@include bg_pos('../assets/img/logo.png');
@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');
@include bg_pos("../assets/img/notice_box.png");
pointer-events: none;
align-self: center;
justify-content: center;
@ -313,110 +307,108 @@ const getAuthorize = (scopeState)=> {
.title_main {
@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;
}
.caidai {
@include pos(641px, 503px, 47px, 79px);
@include bg_pos('../assets/img/caidai.png');
@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');
@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');
@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');
@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');
@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');
@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');
@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');
@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');
@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');
@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');
@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');
@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');
@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');
@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');
@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');
@include bg_pos("../assets/img/luckybag_2.png");
pointer-events: none;
// display: flex;
.prize_num {
@include pos(330px, 50px, 0px, 79px);
font-weight: 700;
@ -428,48 +420,44 @@ const getAuthorize = (scopeState)=> {
color: #ca2f0a;
font-size: 24px;
font-weight: 700;
}
}
}
}
.select_box {
@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;
}
.draw_btn {
@include pos(216px, 252px, 273px, 810px);
@include bg_pos('../assets/img/draw_btn.png');
@include bg_pos("../assets/img/draw_btn.png");
}
.rule_btn {
@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 {
@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 {
@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 {
@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 {
@include pos(750px, 465px, 0px, 657px);
@include bg_pos('../assets/img/zhuanpan.png');
@include bg_pos("../assets/img/zhuanpan.png");
pointer-events: none;
overflow: hidden;
@ -492,27 +480,21 @@ const getAuthorize = (scopeState)=> {
line-height: 110px;
border-radius: 50%;
transform: rotate(30deg);
}
}
}
}
}
.activityCon {
width: 750px;
@include bg_pos('../assets/img/activity_bg.jpg');
@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');
@include bg_pos("../assets/img/activity_box.png");
box-sizing: border-box;
.activity_title {
@ -553,30 +535,17 @@ const getAuthorize = (scopeState)=> {
top: 16px;
left: 479px;
background-size: 100%;
}
}
}
}
.cloud_bottom {
width: 750px;
height: 255px;
margin-top: -160px;
@include bg_pos('../assets/img/cloud_bottom.png');
@include bg_pos("../assets/img/cloud_bottom.png");
}
}
}
</style>