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-03 16:57:19 +08:00
parent d67f516e7b
commit 0c981bbe6e
13 changed files with 969 additions and 655 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/httpServe.js
View File

@ -29,7 +29,7 @@ const service = axios.create({
// 添加请求拦截器
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log("开始请求");
// console.log("开始请求");
config
return config;
}, function (error) {

BIN
src/assets/img/activity_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
src/assets/img/cloud_bottom.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 57 KiB

BIN
src/assets/img/cloud_bottom3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
src/assets/img/li_btn_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/img/pop/no_prize_pop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
src/assets/img/pop/no_recored_pop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

176
src/components/Draw.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div class="drawCon" @touchmove.prevent>
<!-- 抽奖结果反馈 -->
<div class="draw_container" v-if="!isgetMoney">
<!-- 正常中奖 -->
<div class="has_prize" v-if="drawStatus">
<div class="money_num"><span>8.88</span>元</div>
<div class="get_btn" @click="getMoney"></div>
</div>
<!-- 谢谢参与 -->
<div class="no_prize" v-if="!drawStatus"></div>
<div class="cls_btn" @click="hide"></div>
</div>
<!-- 领奖后的弹窗 -->
<div class="add_container" v-if="isgetMoney">
<!-- 已经添加过企微人员 -->
<div class="is_added">
<div class="go_index_btn"></div>
</div>
<div class="cls_btn" @click="hide"></div>
</div>
</div>
</template>
<script setup>
import {
onBeforeMount,
onMounted,
defineEmits,
defineProps,
reactive,
ref,
toRefs,
} from "vue";
import gsap from "gsap";
import axios from "axios";
import { Toast } from "vant";
import { useStore } from "vuex";
// 初始化
const emit = defineEmits(["drawCon"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore();
const drawStatus = ref(true)
const isgetMoney = ref(false)
// 页面挂载前
onBeforeMount(() => {});
// 页面挂载后
onMounted(() => {
gsap.from(".drawCon", { duration: 0.3, autoAlpha: 0 });
gsap.from(".draw_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("drawCon");
};
// 立即领取红包
const getMoney = ()=>{
gsap.to('.draw_container',{duration:0.3,scale:0,autoAlpha:0,onComplete:()=>{
drawStatus.value = false
isgetMoney.value = true
gsap.form('.add_container',{duration:0.3,scale:0,autoAlpha:0,})
}})
}
</script>
<style lang="scss" scoped>
.drawCon {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
.draw_container {
width: 750px;
height: 1180px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.has_prize {
@include box(530px, 594px);
@include bg_pos("../assets/img/pop/luckybag.png");
position: relative;
.money_num {
@include pos(530px, 92px, 0px, 134px);
color: #ff480e;
font-size: 32px;
text-align: center;
font-weight: 700;
span {
font-size: 82px;
}
}
.get_btn {
@include pos(274px, 92px, 139px, 389px);
@include bg_pos("../assets/img/pop/draw_got_btn.png");
}
}
.no_prize{
@include box(573px, 362px);
@include bg_pos("../assets/img/pop/no_prize_pop.png");
}
}
.add_container{
width: 750px;
height: 1180px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.is_added{
@include box(530px, 594px);
@include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
position: relative;
.go_index_btn{
@include pos(394px, 92px, 79px, 389px);
@include bg_pos("../assets/img/pop/to_index_btn.png");
}
}
}
.cls_btn {
@include box(72px, 72px);
@include bg_pos("../assets/img/pop/cls_btn.png");
margin-top: 50px;
}
}
</style>

1015
src/components/Index.vue
View File

File diff suppressed because it is too large Load Diff

7
src/components/LuckyWheel.vue
View File

@ -37,6 +37,7 @@ import {
reactive,
ref,
toRefs,
defineExpose
} from "vue";
import gsap from "gsap";
import axios from "axios";
@ -161,6 +162,12 @@ const btn = () => {
// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
showDrawAni(2, true);
};
// 暴露出方法给父组件调用
defineExpose({
showDrawAni
})
</script>
<style lang="scss" scoped>

350
src/components/MyPrize.vue
View File

@ -1,213 +1,231 @@
<template>
<div class="myPrizeCon" @touchmove.prevent>
<div class="myPrize_container">
<div class="cake"></div>
<div class="prize_box">
<div class="prize_top">
<div class="prize_title"></div>
</div>
<div class="prize_middle">
<div class="prize_item" v-for="(item,key) in prizeList" :key="key" v-show="item.isHas">
<div class="prize_li">
<div class="prize_num">{{ item.prizeNum }}元红包</div>
<div class="prize_spe">{{ item.spe }}</div>
</div>
<div class="buttom">
<img
:src="item.isGeted ? require('../assets/img/pop/view_btn.png') : require('../assets/img/pop/got_btn.png')" />
</div>
</div>
</div>
<div class="prize_bottom"></div>
<div class="myPrizeCon" @touchmove.prevent>
<div class="myPrize_container">
<!-- 有奖品 -->
<div class="prize_has" v-if="prizeList.length != 0">
<div class="cake"></div>
<div class="prize_box">
<div class="prize_top">
<div class="prize_title"></div>
</div>
<div class="prize_middle">
<div
class="prize_item"
v-for="(item, key) in prizeList"
:key="key"
v-show="item.isHas"
>
<div class="prize_li">
<div class="prize_num">{{ item.prizeNum }}元红包</div>
<div class="prize_spe">{{ item.spe }}</div>
</div>
<div class="buttom">
<img
:src="
item.isGeted
? require('../assets/img/pop/view_btn.png')
: require('../assets/img/pop/got_btn.png')
"
/>
</div>
</div>
<div class="cls_btn" @click="hide"></div>
</div>
<div class="prize_bottom"></div>
</div>
</div>
<!-- 没奖品记录 -->
<div class="prize_no" v-if="prizeList.length == 0"></div>
<div class="cls_btn" @click="hide"></div>
</div>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
import {
onBeforeMount,
onMounted,
defineEmits,
defineProps,
reactive,
ref,
toRefs,
} from "vue";
import gsap from "gsap";
import axios from 'axios'
import { Toast } from 'vant';
import axios from "axios";
import { Toast } from "vant";
import { useStore } from "vuex";
// 初始化
const emit = defineEmits(["MyPrize"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore()
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: '添加专属服务人员企微',
},
])
// {
// id: 1,
// prizeNum: 8.8,
// isGeted: true,
// isHas: true,
// spe: "财富88，与“礼”共见证",
// },
// {
// id: 2,
// prizeNum: 8.8,
// isGeted: false,
// isHas: true,
// spe: "添加专属服务人员企微",
// },
]);
// 页面挂载前
onBeforeMount(() => { })
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 })
})
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')
}
emit("MyPrize");
};
</script>
<style lang="scss" scoped>
.myPrizeCon {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
.myPrize_container {
width: 750px;
height: 1180px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
flex-direction: column;
.myPrize_container {
width: 750px;
height: 1180px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// 有奖品央视
.prize_has {
display: flex;
flex-direction: column;
align-items: center;
.cake {
width: 382px;
height: 201px;
@include bg_pos("../assets/img/pop/cake.png");
z-index: 999;
}
.cake {
width: 382px;
height: 201px;
@include bg_pos('../assets/img/pop/cake.png');
z-index: 999;
.prize_box {
width: 550px;
margin-top: -34px;
.prize_top {
width: 550px;
height: 135px;
@include bg_pos("../assets/img/pop/prize_box_top.png");
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
.prize_title {
width: 267px;
height: 58px;
@include bg_pos("../assets/img/pop/my_prize.png");
}
}
.prize_box {
width: 550px;
margin-top: -34px;
.prize_middle {
width: 550px;
height: 190px;
@include bg_pos("../assets/img/pop/prize_box_middle.png");
margin-top: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.prize_top {
width: 550px;
height: 135px;
@include bg_pos('../assets/img/pop/prize_box_top.png');
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
.prize_item {
width: 463px;
height: 67px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin: 20px auto;
padding-bottom: 10px;
.prize_title {
width: 267px;
height: 58px;
@include bg_pos('../assets/img/pop/my_prize.png');
}
.prize_li {
display: flex;
// justify-content: center;
// align-items: center;
flex-direction: column;
.prize_num {
color: #ca2f0a;
font-weight: 700;
font-size: 30px;
}
.prize_spe {
color: #ca2f0a;
font-weight: 700;
font-size: 24px;
margin-top: 5px;
}
}
.prize_middle {
width: 550px;
height: 190px;
@include bg_pos('../assets/img/pop/prize_box_middle.png');
margin-top: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.buttom {
width: 147px;
height: 62px;
background-size: 100%;
.prize_item {
width: 463px;
height: 67px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin: 20px auto;
padding-bottom: 10px;
.prize_li {
display: flex;
// justify-content: center;
// align-items: center;
flex-direction: column;
.prize_num {
color: #ca2f0a;
font-weight: 700;
font-size: 30px;
}
.prize_spe {
color: #ca2f0a;
font-weight: 700;
font-size: 24px;
margin-top: 5px;
}
}
.buttom {
width: 147px;
height: 62px;
background-size: 100%;
img {
width: 100%;
height: 100%;
}
}
}
img {
width: 100%;
height: 100%;
}
}
.prize_bottom {
width: 550px;
height: 50px;
@include bg_pos('../assets/img/pop/prize_box_bottom.png');
margin-top: 0px;
}
}
}
.cls_btn {
@include box(72px, 72px);
@include bg_pos('../assets/img/pop/cls_btn.png');
margin-top: 50px;
.prize_bottom {
width: 550px;
height: 50px;
@include bg_pos("../assets/img/pop/prize_box_bottom.png");
margin-top: 0px;
}
}
}
// 无奖品样式
.prize_no {
width: 573px;
height: 524px;
@include bg_pos("../assets/img/pop/no_recored_pop.png");
}
.cls_btn {
@include box(72px, 72px);
@include bg_pos("../assets/img/pop/cls_btn.png");
margin-top: 50px;
}
}
}
</style>

65
src/page/Home/Home.vue
View File

@ -57,17 +57,24 @@ const getBrithday = () => {
{}
)
.then((res) => {
console.log(res);
console.log("生日是否处于当月：",res.data.data);
store.state.userAccount.isBirthMon = 1
// store.commit({
// type: "updateBirthMoon",
// // isBirthMon: res.data.data,
// isBirthMon: 1,
// });
});
};
// 查询是否添加了企微： isInActivityDate 0否 1是
const getIsAddService = ()=>{
let isInActivityDate = 0
let isInActivityDate = 1
service
.post(process.env.VUE_APP_API + "/cms-activity/cms88/qywx/isadded/"+ isInActivityDate,{})
.then((res) => {
console.log("是否添加了企微",res);
console.log("是否添加了企微",res.data);
});
}
@ -75,12 +82,12 @@ const getMyPrizeRecored = ()=>{
service
.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",{})
.then((res) => {
console.log("红包记录：",res);
console.log("红包记录：",res.data);
});
}
// 查询员工企业微信二维码
// 查询员工企业-微信二维码
const gerCardId = (carid) => {
service
.get(
@ -100,19 +107,30 @@ const getInfo = () => {
service
.post(process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info", {})
.then((res) => {
console.log("资金账号：", res);
console.log("资金账号：", res.data);
});
};
// 页面未挂载
onBeforeMount(() => {
gerCardId(store.state.userAccount.cardId);
getInfo();
getMyPrizeRecored();
getBrithday();
getActivityNum();
getIsAddService()
// gerCardId(store.state.userAccount.cardId);
// getInfo();
// getMyPrizeRecored();
// getBrithday();
// getActivityNum();
// getIsAddService();
// 页面挂载前请求接口
let taskAll = Promise.all([
gerCardId(store.state.userAccount.cardId),
getInfo(),
getMyPrizeRecored(),
getBrithday(),
getActivityNum(),
getIsAddService(),
]).then(result =>{
console.log("接口都请求完成");
})
// 预加载图片资源
pageImgsArrLoad(imgList)
@ -165,17 +183,17 @@ const getCode = () => {
let redirect_uri = window.location.href;
// service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/xfhdAuthorize?redirect_uri='+redirect_uri,
service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/xfhdAuthorize',
qs.stringify({
redirect_uri: redirect_uri
})
// {
// qs.stringify({
// redirect_uri: redirect_uri
// }
// })
{
redirect_uri: redirect_uri
}
).then((res) => {
let code = res.data.data
console.log("get code2992",res);
console.log("get code结果",res);
// authCode.value = res.data.data
// window.location.href = res.data.data
})
@ -184,9 +202,14 @@ const getCode = () => {
// 授权获取openid
const getOpenId = (code) => {
service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/oauthInfo', qs.stringify({
service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/oauthInfo',
// qs.stringify({
// code: code
// })
{
code: code
})).then((res) => {
}
).then((res) => {
if (res.data.code == 0) {
console.log("后端返回的openid：", res.data);

9
src/store/index.js
View File

@ -7,7 +7,7 @@ export default createStore({
// 数据源
state: {
userAccount: {
xglOpenid: '', //用户openid
xglOpenid: 'o9B_fvsbOdSIIED6fPHjj_lHL24w', //用户openid
token: h5plugin.getQueryString('token'), //用户token
cardId: h5plugin.getQueryString('cardId'), //carid
nkh: h5plugin.getQueryString('nkh'), //牛卡号
@ -17,7 +17,8 @@ export default createStore({
isHasPrize: [], //是否存在奖品
participantNum: 0, //活动参与人数
prizeResult: 0, //中奖金额
eqcodeImg: '' //二维码
eqcodeImg: '', //二维码
isBirthMon: 0, //生日是否处于当月
},
},
@ -51,6 +52,10 @@ export default createStore({
updateParticipantNum(state,val){
state.userAccount.participantNum = val.participantNum
},
updateBirthMoon(state,val){
state.userAccount.isBirthMon = val.isBirthMon
},
},
// 改变方法：异步