授权测试
@ -29,7 +29,7 @@ const service = axios.create({
|
|||||||
// 添加请求拦截器
|
// 添加请求拦截器
|
||||||
service.interceptors.request.use(function (config) {
|
service.interceptors.request.use(function (config) {
|
||||||
// 在发送请求之前做些什么
|
// 在发送请求之前做些什么
|
||||||
console.log("开始请求");
|
// console.log("开始请求");
|
||||||
config
|
config
|
||||||
return config;
|
return config;
|
||||||
}, function (error) {
|
}, function (error) {
|
||||||
|
|||||||
BIN
src/assets/img/activity_6.png
Normal file
|
After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 57 KiB |
BIN
src/assets/img/cloud_bottom3.png
Normal file
|
After Width: | Height: | Size: 67 KiB |
BIN
src/assets/img/li_btn_6.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/img/pop/no_prize_pop.png
Normal file
|
After Width: | Height: | Size: 127 KiB |
BIN
src/assets/img/pop/no_recored_pop.png
Normal file
|
After Width: | Height: | Size: 180 KiB |
176
src/components/Draw.vue
Normal 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>
|
||||||
@ -17,9 +17,7 @@
|
|||||||
><img src="../assets/img/laba.png" alt="" srcset=""
|
><img src="../assets/img/laba.png" alt="" srcset=""
|
||||||
/></span>
|
/></span>
|
||||||
<span class="num"
|
<span class="num"
|
||||||
>活动已有{{
|
>活动已有{{ store.state.userAccount.participantNum }}人参与</span
|
||||||
store.state.userAccount.participantNum
|
|
||||||
}}人参与</span
|
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="cloud_left_2"></div>
|
<div class="cloud_left_2"></div>
|
||||||
@ -27,7 +25,7 @@
|
|||||||
<div class="cloud_right_2"></div>
|
<div class="cloud_right_2"></div>
|
||||||
<!-- 大转盘 -->
|
<!-- 大转盘 -->
|
||||||
<div class="zhuanpan"></div>
|
<div class="zhuanpan"></div>
|
||||||
<LuckyWheel v-if="true" />
|
<LuckyWheel v-if="true" ref="LuckyWheelCon" />
|
||||||
|
|
||||||
<div class="icon_right_2"></div>
|
<div class="icon_right_2"></div>
|
||||||
<div class="icon_right_3"></div>
|
<div class="icon_right_3"></div>
|
||||||
@ -77,8 +75,9 @@
|
|||||||
<MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
|
<MyPrize v-if="showMyPrize" @MyPrize="myPrizePop" />
|
||||||
<!-- 添加专属服务人员企微弹窗 -->
|
<!-- 添加专属服务人员企微弹窗 -->
|
||||||
<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
|
<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
|
||||||
|
<!-- 抽奖结果弹窗 -->
|
||||||
|
<Draw v-if="showDrawCon" @drawCon="drawConFn" />
|
||||||
|
|
||||||
<!-- <LuckyWheel v-if="true" /> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -106,6 +105,7 @@ 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";
|
||||||
|
import Draw from "@/components/Draw";
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
const emit = defineEmits(["indexPage"]); // 声明触发事件,对应父组件上面的方法
|
const emit = defineEmits(["indexPage"]); // 声明触发事件,对应父组件上面的方法
|
||||||
@ -122,7 +122,10 @@ const showRulesPop = ref(false);
|
|||||||
const showMyPrize = ref(false);
|
const showMyPrize = ref(false);
|
||||||
const showServicePop = ref(false);
|
const showServicePop = ref(false);
|
||||||
|
|
||||||
const isDraw = ref(false)
|
const drawType = ref(1);
|
||||||
|
const isDraw = ref(false);
|
||||||
|
const LuckyWheelCon = ref(null);
|
||||||
|
const showDrawCon = ref(false) //抽奖结果弹窗组件
|
||||||
|
|
||||||
// 活动列表
|
// 活动列表
|
||||||
const activityList = reactive([
|
const activityList = reactive([
|
||||||
@ -140,7 +143,7 @@ const activityList = reactive([
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
show: true,
|
show: store.state.userAccount.isBirthMon,
|
||||||
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"),
|
||||||
},
|
},
|
||||||
@ -156,55 +159,90 @@ const activityList = reactive([
|
|||||||
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"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
show: true,
|
||||||
|
banner: require("../assets/img/activity_6.png"),
|
||||||
|
btnImg: require("../assets/img/li_btn_6.png"),
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 页面挂载前
|
// 页面挂载前
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
// 获取企微二维码
|
// 获取企微二维码
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 入场动画
|
||||||
|
const animationIndex = () => {
|
||||||
|
gsap.from(".title_main", { duration: 0.5, scale: 0 });
|
||||||
|
gsap.from(".indexCon", { duration: 0.5, autoAlpha: 0 });
|
||||||
|
|
||||||
|
gsap.from(".cloud_left_1,.cloud_left_2,.cloud_left_3", {
|
||||||
|
duration: 0.5,
|
||||||
|
x: -200,
|
||||||
|
delay: 0.5,
|
||||||
|
});
|
||||||
|
gsap.from(".cloud_right_1,.cloud_right_2", {
|
||||||
|
duration: 0.5,
|
||||||
|
x: 200,
|
||||||
|
delay: 0.5,
|
||||||
|
});
|
||||||
|
gsap.from(".lucky_bag_2,.lucky_bag,.notice", {
|
||||||
|
duration: 0.5,
|
||||||
|
y: -200,
|
||||||
|
autoAlpha: 0,
|
||||||
|
});
|
||||||
|
gsap.from(".LuckyWheelCon", { duration: 0.5, autoAlpha: 0, delay: 1 });
|
||||||
|
gsap.from(
|
||||||
|
".activityCon,.zhuanpan,.select_box,.draw_btn,.rule_btn,.rule_btn_text,.prize_btn,.prize_btn_text",
|
||||||
|
{
|
||||||
|
duration: 0.5,
|
||||||
|
y: 200,
|
||||||
|
autoAlpha: 0,
|
||||||
|
onComplete: () => {
|
||||||
|
gsap.from(".luckybag_left,.luckybag_right", {
|
||||||
|
duration: 2,
|
||||||
|
y: -10,
|
||||||
|
repeat: -1,
|
||||||
|
yoyo: true,
|
||||||
|
});
|
||||||
|
gsap.from(".icon_right_3", {
|
||||||
|
duration: 1,
|
||||||
|
rotation: -10,
|
||||||
|
scale: 1.1,
|
||||||
|
repeat: -1,
|
||||||
|
yoyo: true,
|
||||||
|
});
|
||||||
|
gsap.to(".title_main", {
|
||||||
|
duration: 2,
|
||||||
|
y: -10,
|
||||||
|
scale: 1.05,
|
||||||
|
repeat: -1,
|
||||||
|
yoyo: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
// 页面挂载后
|
// 页面挂载后
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
gsap.from('.title_main',{duration:0.5,scale:0})
|
// 挂载后执行入场动画
|
||||||
gsap.from('.cloud_left_1,.cloud_left_2,.cloud_left_3',{duration:0.5,x:-200})
|
animationIndex();
|
||||||
gsap.from('.cloud_right_1,.cloud_right_2',{duration:0.5,x:200})
|
|
||||||
gsap.from('.lucky_bag_2,.lucky_bag,.notice',{duration:0.5,y:200})
|
|
||||||
gsap.from('.activityCon,.zhuanpan',{duration:0.5,y:200,autoAlpha:0})
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
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 = () => {
|
const drawBtn = () => {
|
||||||
|
|
||||||
console.log("抽奖:");
|
console.log("抽奖:");
|
||||||
|
|
||||||
if(!isDraw.value){
|
console.log(LuckyWheelCon.value);
|
||||||
getluckyBag(1);
|
|
||||||
isDraw.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
|
if (!isDraw.value) {
|
||||||
|
// LuckyWheelCon.value.showDrawAni(3, true)
|
||||||
|
|
||||||
|
getluckyBag(1); //大转盘抽奖:传参数1
|
||||||
|
isDraw.value = true;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 活动点击
|
// 活动点击
|
||||||
@ -232,6 +270,11 @@ const myPrizePop = () => {
|
|||||||
showMyPrize.value = false;
|
showMyPrize.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const drawConFn = ()=>{
|
||||||
|
showDrawCon.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// 企微弹窗
|
// 企微弹窗
|
||||||
const hideServicePop = () => {
|
const hideServicePop = () => {
|
||||||
showServicePop.value = false;
|
showServicePop.value = false;
|
||||||
@ -249,9 +292,7 @@ const getAuthorize = (scopeState) => {
|
|||||||
// 查询员工企业微信二维码
|
// 查询员工企业微信二维码
|
||||||
const gerCardId = (carid) => {
|
const gerCardId = (carid) => {
|
||||||
service
|
service
|
||||||
.get(
|
.get(process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid)
|
||||||
process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid
|
|
||||||
)
|
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log("企微二维码:", res.data.data);
|
console.log("企微二维码:", res.data.data);
|
||||||
store.commit({
|
store.commit({
|
||||||
@ -272,34 +313,78 @@ const getInfo = () => {
|
|||||||
|
|
||||||
// 我的红包记录
|
// 我的红包记录
|
||||||
|
|
||||||
const getMyPrizeRecored = ()=>{
|
const getMyPrizeRecored = () => {
|
||||||
service
|
service
|
||||||
.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",{})
|
.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log("红包记录:",res);
|
console.log("红包记录:", res);
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
// 查询是否添加了企微: isInActivityDate 0否 1是
|
// 查询是否添加了企微: isInActivityDate 0否 1是
|
||||||
const getIsAddService = ()=>{
|
const getIsAddService = () => {
|
||||||
let isInActivityDate = 0
|
let isInActivityDate = 0;
|
||||||
service
|
service
|
||||||
.post(process.env.VUE_APP_API + "/cms-activity/cms88/qywx/isadded/"+ isInActivityDate,{})
|
.post(
|
||||||
|
process.env.VUE_APP_API +
|
||||||
|
"/cms-activity/cms88/qywx/isadded/" +
|
||||||
|
isInActivityDate,
|
||||||
|
{}
|
||||||
|
)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log("是否添加了企微",res);
|
console.log("是否添加了企微", res);
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
// 抽取红包 type为红包类型 1为参与红包 2为加企微
|
// 抽取红包 type为红包类型 1为参与红包 2为加企微
|
||||||
const getluckyBag = (id)=>{
|
const getluckyBag = (id) => {
|
||||||
let type = id
|
let type = id;
|
||||||
|
drawType.value = id;
|
||||||
service
|
service
|
||||||
.post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw/"+ type,{})
|
.post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw", {
|
||||||
|
xglOpenId: store.state.userAccount.xglOpenid,
|
||||||
|
redpacketType: type,
|
||||||
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log("抽取红包结果:",res);
|
console.log("抽取红包结果:", res);
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// 判断抽奖类型drawType = 1时转动大转盘
|
||||||
|
if (drawType.value == 1) {
|
||||||
|
// 判断抽奖结果状态
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
// 大转盘正常抽奖
|
||||||
|
if (res.data.data == 0) {
|
||||||
|
// 谢谢参与
|
||||||
|
LuckyWheelCon.value.showDrawAni(5, true);
|
||||||
|
}
|
||||||
|
if (res.data.data == 188) {
|
||||||
|
// 1.88元
|
||||||
|
LuckyWheelCon.value.showDrawAni(1, true);
|
||||||
|
}
|
||||||
|
if (res.data.data == 268) {
|
||||||
|
// 2.68元
|
||||||
|
LuckyWheelCon.value.showDrawAni(2, true);
|
||||||
|
}
|
||||||
|
if (res.data.data == 666) {
|
||||||
|
// 6.66元
|
||||||
|
LuckyWheelCon.value.showDrawAni(3, true);
|
||||||
|
}
|
||||||
|
if (res.data.data == 888) {
|
||||||
|
// 6.66元
|
||||||
|
LuckyWheelCon.value.showDrawAni(4, true);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (res.data.data == 0) {
|
||||||
|
// 谢谢参与
|
||||||
|
LuckyWheelCon.value.showDrawAni(5, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
// 加企业微信奖
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 活动参与人数
|
// 活动参与人数
|
||||||
const getActivityNum = () => {
|
const getActivityNum = () => {
|
||||||
@ -622,8 +707,8 @@ const getBrithday = () => {
|
|||||||
|
|
||||||
.cloud_bottom {
|
.cloud_bottom {
|
||||||
width: 750px;
|
width: 750px;
|
||||||
height: 255px;
|
height: 132px;
|
||||||
margin-top: -160px;
|
margin-top: 0px;
|
||||||
@include bg_pos("../assets/img/cloud_bottom.png");
|
@include bg_pos("../assets/img/cloud_bottom.png");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -37,6 +37,7 @@ import {
|
|||||||
reactive,
|
reactive,
|
||||||
ref,
|
ref,
|
||||||
toRefs,
|
toRefs,
|
||||||
|
defineExpose
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
@ -161,6 +162,12 @@ const btn = () => {
|
|||||||
// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
|
// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
|
||||||
showDrawAni(2, true);
|
showDrawAni(2, true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 暴露出方法给父组件调用
|
||||||
|
defineExpose({
|
||||||
|
showDrawAni
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -1,82 +1,101 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="myPrizeCon" @touchmove.prevent>
|
<div class="myPrizeCon" @touchmove.prevent>
|
||||||
<div class="myPrize_container">
|
<div class="myPrize_container">
|
||||||
|
<!-- 有奖品 -->
|
||||||
|
<div class="prize_has" v-if="prizeList.length != 0">
|
||||||
<div class="cake"></div>
|
<div class="cake"></div>
|
||||||
<div class="prize_box">
|
<div class="prize_box">
|
||||||
<div class="prize_top">
|
<div class="prize_top">
|
||||||
<div class="prize_title"></div>
|
<div class="prize_title"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="prize_middle">
|
<div class="prize_middle">
|
||||||
<div class="prize_item" v-for="(item,key) in prizeList" :key="key" v-show="item.isHas">
|
<div
|
||||||
|
class="prize_item"
|
||||||
|
v-for="(item, key) in prizeList"
|
||||||
|
:key="key"
|
||||||
|
v-show="item.isHas"
|
||||||
|
>
|
||||||
<div class="prize_li">
|
<div class="prize_li">
|
||||||
<div class="prize_num">{{ item.prizeNum }}元红包</div>
|
<div class="prize_num">{{ item.prizeNum }}元红包</div>
|
||||||
<div class="prize_spe">{{ item.spe }}</div>
|
<div class="prize_spe">{{ item.spe }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttom">
|
<div class="buttom">
|
||||||
<img
|
<img
|
||||||
:src="item.isGeted ? require('../assets/img/pop/view_btn.png') : require('../assets/img/pop/got_btn.png')" />
|
:src="
|
||||||
|
item.isGeted
|
||||||
|
? require('../assets/img/pop/view_btn.png')
|
||||||
|
: require('../assets/img/pop/got_btn.png')
|
||||||
|
"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="prize_bottom"></div>
|
<div class="prize_bottom"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 没奖品记录 -->
|
||||||
|
<div class="prize_no" v-if="prizeList.length == 0"></div>
|
||||||
<div class="cls_btn" @click="hide"></div>
|
<div class="cls_btn" @click="hide"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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 gsap from "gsap";
|
||||||
import axios from 'axios'
|
import axios from "axios";
|
||||||
import { Toast } from 'vant';
|
import { Toast } from "vant";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
const emit = defineEmits(["MyPrize"]); // 声明触发事件,对应父组件上面的方法
|
const emit = defineEmits(["MyPrize"]); // 声明触发事件,对应父组件上面的方法
|
||||||
const props = defineProps({ sendMessage: Object }); // 获取props
|
const props = defineProps({ sendMessage: Object }); // 获取props
|
||||||
const store = useStore()
|
const store = useStore();
|
||||||
|
|
||||||
|
|
||||||
const prizeList = reactive([
|
const prizeList = reactive([
|
||||||
{
|
// {
|
||||||
id: 1,
|
// id: 1,
|
||||||
prizeNum: 8.8,
|
// prizeNum: 8.8,
|
||||||
isGeted: true,
|
// isGeted: true,
|
||||||
isHas: true,
|
// isHas: true,
|
||||||
spe: '财富88,与“礼”共见证',
|
// spe: "财富88,与“礼”共见证",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 2,
|
// id: 2,
|
||||||
prizeNum: 8.8,
|
// prizeNum: 8.8,
|
||||||
isGeted: false,
|
// isGeted: false,
|
||||||
isHas: true,
|
// isHas: true,
|
||||||
spe: '添加专属服务人员企微',
|
// spe: "添加专属服务人员企微",
|
||||||
|
// },
|
||||||
},
|
]);
|
||||||
])
|
|
||||||
|
|
||||||
|
|
||||||
// 页面挂载前
|
// 页面挂载前
|
||||||
onBeforeMount(() => { })
|
onBeforeMount(() => {});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 页面挂载后
|
// 页面挂载后
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
gsap.from('.myPrizeCon', { duration: 0.3, autoAlpha: 0 })
|
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(".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('.rule_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
|
||||||
})
|
});
|
||||||
|
|
||||||
const hide = () => {
|
const hide = () => {
|
||||||
emit('MyPrize')
|
emit("MyPrize");
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -101,10 +120,15 @@ const hide = () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
// 有奖品央视
|
||||||
|
.prize_has {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
.cake {
|
.cake {
|
||||||
width: 382px;
|
width: 382px;
|
||||||
height: 201px;
|
height: 201px;
|
||||||
@include bg_pos('../assets/img/pop/cake.png');
|
@include bg_pos("../assets/img/pop/cake.png");
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,7 +139,7 @@ const hide = () => {
|
|||||||
.prize_top {
|
.prize_top {
|
||||||
width: 550px;
|
width: 550px;
|
||||||
height: 135px;
|
height: 135px;
|
||||||
@include bg_pos('../assets/img/pop/prize_box_top.png');
|
@include bg_pos("../assets/img/pop/prize_box_top.png");
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -124,21 +148,20 @@ const hide = () => {
|
|||||||
.prize_title {
|
.prize_title {
|
||||||
width: 267px;
|
width: 267px;
|
||||||
height: 58px;
|
height: 58px;
|
||||||
@include bg_pos('../assets/img/pop/my_prize.png');
|
@include bg_pos("../assets/img/pop/my_prize.png");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.prize_middle {
|
.prize_middle {
|
||||||
width: 550px;
|
width: 550px;
|
||||||
height: 190px;
|
height: 190px;
|
||||||
@include bg_pos('../assets/img/pop/prize_box_middle.png');
|
@include bg_pos("../assets/img/pop/prize_box_middle.png");
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
|
||||||
.prize_item {
|
.prize_item {
|
||||||
width: 463px;
|
width: 463px;
|
||||||
height: 67px;
|
height: 67px;
|
||||||
@ -167,7 +190,6 @@ const hide = () => {
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttom {
|
.buttom {
|
||||||
@ -180,34 +202,30 @@ const hide = () => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.prize_bottom {
|
.prize_bottom {
|
||||||
width: 550px;
|
width: 550px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
@include bg_pos('../assets/img/pop/prize_box_bottom.png');
|
@include bg_pos("../assets/img/pop/prize_box_bottom.png");
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 无奖品样式
|
||||||
|
.prize_no {
|
||||||
|
width: 573px;
|
||||||
|
height: 524px;
|
||||||
|
@include bg_pos("../assets/img/pop/no_recored_pop.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.cls_btn {
|
.cls_btn {
|
||||||
@include box(72px, 72px);
|
@include box(72px, 72px);
|
||||||
@include bg_pos('../assets/img/pop/cls_btn.png');
|
@include bg_pos("../assets/img/pop/cls_btn.png");
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -57,17 +57,24 @@ const getBrithday = () => {
|
|||||||
{}
|
{}
|
||||||
)
|
)
|
||||||
.then((res) => {
|
.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是
|
// 查询是否添加了企微: isInActivityDate 0否 1是
|
||||||
const getIsAddService = ()=>{
|
const getIsAddService = ()=>{
|
||||||
let isInActivityDate = 0
|
let isInActivityDate = 1
|
||||||
service
|
service
|
||||||
.post(process.env.VUE_APP_API + "/cms-activity/cms88/qywx/isadded/"+ isInActivityDate,{})
|
.post(process.env.VUE_APP_API + "/cms-activity/cms88/qywx/isadded/"+ isInActivityDate,{})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log("是否添加了企微",res);
|
console.log("是否添加了企微",res.data);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -75,12 +82,12 @@ const getMyPrizeRecored = ()=>{
|
|||||||
service
|
service
|
||||||
.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",{})
|
.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list",{})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log("红包记录:",res);
|
console.log("红包记录:",res.data);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 查询员工企业微信二维码
|
// 查询员工企业-微信二维码
|
||||||
const gerCardId = (carid) => {
|
const gerCardId = (carid) => {
|
||||||
service
|
service
|
||||||
.get(
|
.get(
|
||||||
@ -100,19 +107,30 @@ const getInfo = () => {
|
|||||||
service
|
service
|
||||||
.post(process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info", {})
|
.post(process.env.VUE_APP_API + "/cms-activity/cms88/nkh/info", {})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log("资金账号:", res);
|
console.log("资金账号:", res.data);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
// 页面未挂载
|
// 页面未挂载
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
gerCardId(store.state.userAccount.cardId);
|
// gerCardId(store.state.userAccount.cardId);
|
||||||
getInfo();
|
// getInfo();
|
||||||
getMyPrizeRecored();
|
// getMyPrizeRecored();
|
||||||
getBrithday();
|
// getBrithday();
|
||||||
getActivityNum();
|
// getActivityNum();
|
||||||
getIsAddService()
|
// getIsAddService();
|
||||||
|
// 页面挂载前请求接口
|
||||||
|
let taskAll = Promise.all([
|
||||||
|
gerCardId(store.state.userAccount.cardId),
|
||||||
|
getInfo(),
|
||||||
|
getMyPrizeRecored(),
|
||||||
|
getBrithday(),
|
||||||
|
getActivityNum(),
|
||||||
|
getIsAddService(),
|
||||||
|
]).then(result =>{
|
||||||
|
console.log("接口都请求完成");
|
||||||
|
})
|
||||||
|
|
||||||
// 预加载图片资源
|
// 预加载图片资源
|
||||||
pageImgsArrLoad(imgList)
|
pageImgsArrLoad(imgList)
|
||||||
@ -165,17 +183,17 @@ const getCode = () => {
|
|||||||
let redirect_uri = window.location.href;
|
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?redirect_uri='+redirect_uri,
|
||||||
service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/xfhdAuthorize',
|
service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/xfhdAuthorize',
|
||||||
qs.stringify({
|
// qs.stringify({
|
||||||
redirect_uri: redirect_uri
|
|
||||||
})
|
|
||||||
|
|
||||||
// {
|
|
||||||
// redirect_uri: redirect_uri
|
// redirect_uri: redirect_uri
|
||||||
// }
|
// })
|
||||||
|
|
||||||
|
{
|
||||||
|
redirect_uri: redirect_uri
|
||||||
|
}
|
||||||
|
|
||||||
).then((res) => {
|
).then((res) => {
|
||||||
let code = res.data.data
|
let code = res.data.data
|
||||||
console.log("get code2992",res);
|
console.log("get code结果",res);
|
||||||
// authCode.value = res.data.data
|
// authCode.value = res.data.data
|
||||||
// window.location.href = res.data.data
|
// window.location.href = res.data.data
|
||||||
})
|
})
|
||||||
@ -184,9 +202,14 @@ const getCode = () => {
|
|||||||
// 授权获取openid
|
// 授权获取openid
|
||||||
const getOpenId = (code) => {
|
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
|
code: code
|
||||||
})).then((res) => {
|
}
|
||||||
|
).then((res) => {
|
||||||
|
|
||||||
if (res.data.code == 0) {
|
if (res.data.code == 0) {
|
||||||
console.log("后端返回的openid:", res.data);
|
console.log("后端返回的openid:", res.data);
|
||||||
|
|||||||
@ -7,7 +7,7 @@ export default createStore({
|
|||||||
// 数据源
|
// 数据源
|
||||||
state: {
|
state: {
|
||||||
userAccount: {
|
userAccount: {
|
||||||
xglOpenid: '', //用户openid
|
xglOpenid: 'o9B_fvsbOdSIIED6fPHjj_lHL24w', //用户openid
|
||||||
token: h5plugin.getQueryString('token'), //用户token
|
token: h5plugin.getQueryString('token'), //用户token
|
||||||
cardId: h5plugin.getQueryString('cardId'), //carid
|
cardId: h5plugin.getQueryString('cardId'), //carid
|
||||||
nkh: h5plugin.getQueryString('nkh'), //牛卡号
|
nkh: h5plugin.getQueryString('nkh'), //牛卡号
|
||||||
@ -17,7 +17,8 @@ export default createStore({
|
|||||||
isHasPrize: [], //是否存在奖品
|
isHasPrize: [], //是否存在奖品
|
||||||
participantNum: 0, //活动参与人数
|
participantNum: 0, //活动参与人数
|
||||||
prizeResult: 0, //中奖金额
|
prizeResult: 0, //中奖金额
|
||||||
eqcodeImg: '' //二维码
|
eqcodeImg: '', //二维码
|
||||||
|
isBirthMon: 0, //生日是否处于当月
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
@ -52,6 +53,10 @@ export default createStore({
|
|||||||
state.userAccount.participantNum = val.participantNum
|
state.userAccount.participantNum = val.participantNum
|
||||||
},
|
},
|
||||||
|
|
||||||
|
updateBirthMoon(state,val){
|
||||||
|
state.userAccount.isBirthMon = val.isBirthMon
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
// 改变方法:异步
|
// 改变方法:异步
|
||||||
actions: {},
|
actions: {},
|
||||||
|
|||||||