完成我的奖品页逻辑

This commit is contained in:
tcubic 2022-08-03 21:44:50 +08:00
parent 4c0b6775f9
commit fd0f93cf80
6 changed files with 482 additions and 250 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 205 KiB

After

Width:  |  Height:  |  Size: 213 KiB

View File

@ -173,11 +173,18 @@ const activityList = reactive([
//
onBeforeMount(() => {
if (store.state.userAccount.isHasPrize.length != 0) {
//
let arr = store.state.userAccount.prizeList
arr.forEach(element => {
if(element.type == 1){
isDraw.value = true;
console.log("222222222222222222222222222222222");
}
});
});
//
const animationIndex = () => {
gsap.from(".title_main", { duration: 0.5, scale: 0 });
@ -267,11 +274,8 @@ const activityBtn = (item) => {
if (item.id == 3) {
console.log("生日专享页面");
wx.miniProgram.navigateTo({
url: "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_8rrkjpiS",
});
// window.location.href =
// "https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_8rrkjpiS";
window.location.href =
"https://appstatic.cmschina.com/activity/cmszhyxpt/bees/index.html?id=INT_SMKTC_8rrkjpiS";
}
if (item.id == 4) {

View File

@ -9,12 +9,7 @@
<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_item" v-for="(item, key) in prizeList" :key="key">
<div class="prize_li">
<div class="prize_num">{{ item.prizeNum }}元红包</div>
<div class="prize_spe">{{ item.spe }}</div>
@ -22,10 +17,11 @@
<div class="buttom">
<img
:src="
item.isGeted
item.isGeted == 0
? require('../assets/img/pop/view_btn.png')
: require('../assets/img/pop/got_btn.png')
"
@click="getMoney(item)"
/>
</div>
</div>
@ -39,6 +35,15 @@
<div class="cls_btn" @click="hide"></div>
</div>
</div>
<!-- 领取成功反馈弹窗 -->
<div class="GotedPop" @touchmove.prevent>
<div class="goted_container">
<div class="goted_box">
<div class="to_index_btn" @click="hide"></div>
</div>
<div class="cls_btn" @click="hidePop"></div>
</div>
</div>
</template>
<script setup>
@ -53,6 +58,8 @@ import {
} from "vue";
import gsap from "gsap";
import axios from "axios";
import service from "@/api/httpServe";
import qs from "qs";
import { Toast } from "vant";
import { useStore } from "vuex";
@ -79,7 +86,30 @@ const prizeList = reactive([
]);
//
onBeforeMount(() => {});
onBeforeMount(() => {
let arr = store.state.userAccount.prizeList;
arr.forEach((element) => {
if (element.receiveStatus != -1) {
if (element.type == 1) {
prizeList.push({
id: element.id,
prizeNum: element.amount,
isGeted: element.receiveStatus,
spe: "财富88与“礼”共见证",
});
}
if (element.type == 2) {
prizeList.push({
id: element.id,
prizeNum: element.amount,
isGeted: element.receiveStatus,
spe: "添加专属服务人员企微",
});
}
}
});
});
//
onMounted(() => {
@ -96,6 +126,37 @@ onMounted(() => {
const hide = () => {
emit("MyPrize");
};
const hidePop = () => {
gsap.to('.GotedPop',{duration:0.5,autoAlpha:0})
gsap.to('.myPrizeCon',{duration:0.5,autoAlpha:1,delay:0.2})
};
//
const getMoney = (val) => {
if (val.isGeted == 0) {
console.log("未领取", val);
getLuckyBag(val.id)
}
};
//
const getLuckyBag = (id) => {
service
.post(
process.env.VUE_APP_API +
"/cms-activity/cms88/redpacket/receive/" + id,
{}
)
.then((res) => {
console.log("领取红包结果", res);
gsap.to('.GotedPop',{duration:1,autoAlpha:1,delay:0.2})
gsap.to('.myPrizeCon',{duration:1,autoAlpha:0})
});
};
</script>
<style lang="scss" scoped>
@ -221,6 +282,49 @@ const hide = () => {
@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;
}
}
}
.GotedPop {
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);
visibility: hidden;
.goted_container {
width: 750px;
height: 1180px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.goted_box{
@include box(530px, 594px);
@include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
position: relative;
.to_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");

View File

@ -1,48 +1,137 @@
<template>
<div class="serviceCon" @touchmove.prevent>
<div class="service_container">
<div class="service_box">
<!-- 未添加 -->
<div class="service_box" v-if="isadd == 0">
<div class="eqcode_box">
<img :src="store.state.userAccount.eqcodeImg" alt="">
<img :src="store.state.userAccount.eqcodeImg" alt="" />
</div>
</div>
<!-- 已经添加过并且领取了红包 -->
<div class="is_got_box" v-if="isadd == 1 && isgot"></div>
<!-- 已经添加过未领取了红包 -->
<div class="has_service_box" v-if="isadd == 1 && !isgot">
<div class="money">{{moneyNum}}</div>
<div class="get_luckybag" @click="getLuckyBag"></div>
</div>
<div class="service_cls_btn" @click="hidePop"></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";
import service from "@/api/httpServe";
import qs from "qs";
//
const emit = defineEmits(["ServicePop"]); //
const props = defineProps({ sendMessage: Object }); // props
const store = useStore()
const store = useStore();
const eqcode = ref(require("../assets/img/pop/eqcode.png"));
const eqcode = ref(require('../assets/img/pop/eqcode.png'))
const isadd = ref(0); //
const isgot = ref(false);
const redpacketId = ref(0);
const moneyNum = ref('1.99');
//
onBeforeMount(() => { })
onBeforeMount(() => {
if (store.state.userAccount.isAddCustomer == 1) {
isadd.value = 1;
}
if (store.state.userAccount.isAddCustomer == 0) {
isadd.value = 0;
}
let arr = store.state.userAccount.prizeList;
arr.forEach((element) => {
if (element.type == 2) {
console.log("已经抽过》》》》》");
isgot.value = true;
}
});
});
//
onMounted(() => {
gsap.from('.serviceCon', { duration: 0.3, autoAlpha: 0 })
gsap.from('.service_box', { duration: 0.3, scale: 0.2, autoAlpha: 0, delay: 0.1 })
gsap.from('.service_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
})
gsap.from(".serviceCon", { duration: 0.3, autoAlpha: 0 });
gsap.from(".service_box,.has_service_box,.is_got_box", {
duration: 0.3,
scale: 0.2,
autoAlpha: 0,
delay: 0.1,
});
gsap.from(".service_cls_btn", {
duration: 0.3,
y: 20,
autoAlpha: 0,
delay: 0.5,
});
console.log("添加企微状态:", isadd.value);
//
if (isadd.value == 1) {
if (isgot.value == false) {
draw();
}else{
//
}
}
});
const hidePop = () => {
emit('ServicePop')
}
emit("ServicePop");
};
//
const draw = () => {
let type = 2;
service
.post(process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/draw", {
xglOpenId: store.state.userAccount.xglOpenId,
redpacketType: type,
})
.then((res) => {
console.log("添加企微-抽取红包结果:", res);
redpacketId.value = res.data.data.id;
moneyNum.value = res.data.data.amount;
});
};
//
const getLuckyBag = () => {
service
.post(
process.env.VUE_APP_API +
"/cms-activity/cms88/redpacket/receive/" +
redpacketId.value,
{}
)
.then((res) => {
console.log("领取红包结果", res);
});
};
</script>
<style lang="scss" scoped>
@ -59,7 +148,6 @@ const hidePop = () => {
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
.service_container {
width: 750px;
height: 1180px;
@ -68,13 +156,37 @@ const hidePop = () => {
align-items: center;
flex-direction: column;
.service_box {
@include box(573px, 688px);
@include bg_pos('../assets/img/pop/service_box.png');
// pointer-events: none;
.is_got_box {
@include box(530px, 594px);
@include bg_pos("../assets/img/pop/has_service_pop.png");
}
.has_service_box {
@include box(530px, 594px);
@include bg_pos("../assets/img/pop/service_pop_1.png");
position: relative;
.money{
@include pos(90px, 45px, 198px, 150px);
text-align: center;
line-height: 45px;
color: #ca2f0a;
font-weight: 700;
}
.get_luckybag {
@include pos(274px, 92px, 139px, 389px);
@include bg_pos("../assets/img/pop/get_luckyBag_btn.png");
}
}
.service_box {
@include box(573px, 688px);
@include bg_pos("../assets/img/pop/service_box.png");
// pointer-events: none;
position: relative;
.eqcode_box {
width: 210px;
@ -85,17 +197,16 @@ const hidePop = () => {
img {
width: 100%;
height: 100%
height: 100%;
}
}
}
.service_cls_btn {
@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;
}
}
}
</style>

View File

@ -8,32 +8,38 @@
</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 Index from "@/components/Index"
import imgList from '@/data/imgList'
import service from "@/api/httpServe";
import qs from "qs";
import h5plugin from "@/utils/plugin";
import Index from "@/components/Index";
import imgList from "@/data/imgList";
//
const emit = defineEmits(["indexPage"]); //
const props = defineProps({ sendMessage: Object }); // props
const store = useStore() //vuex
const store = useStore(); //vuex
const { proxy } = getCurrentInstance(); //plugin
//
const authData = ref('')
const authCode = ref('')
const showIndex = ref(false)
const authData = ref("");
const authCode = ref("");
const showIndex = ref(false);
//
const getActivityNum = () => {
@ -48,7 +54,6 @@ const getActivityNum = () => {
});
};
//
const getBrithday = () => {
service
@ -58,41 +63,54 @@ const getBrithday = () => {
)
.then((res) => {
console.log("生日是否处于当月:", res.data.data);
store.state.userAccount.isBirthMon = 1
// store.commit({
// type: "updateBirthMoon",
// // isBirthMon: 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 = 1
let isInActivityDate = 1;
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) => {
console.log("是否添加了企微", res.data);
// store.state.userAccount.isBirthMon = res.data.data
store.commit({
type: "updateIsAddCustomer",
// isBirthMon:res.data.data,
isAddCustomer: res.data.data,
});
}
});
};
//
const getMyPrizeRecored = () => {
service
.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
.then((res) => {
console.log("红包记录:", res.data);
});
}
store.commit({
type: "updatePrizeList",
prizeList: res.data.data,
});
});
};
// -
const gerCardId = (carid) => {
service
.get(
process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid
)
.get(process.env.VUE_APP_API + "/cms-activity/cms88/card/qrcode/" + carid)
.then((res) => {
console.log("企微二维码:", res.data.data);
store.commit({
@ -111,7 +129,6 @@ const getInfo = () => {
});
};
//
onBeforeMount(() => {
// gerCardId(store.state.userAccount.cardId);
@ -121,29 +138,25 @@ onBeforeMount(() => {
// getActivityNum();
// getIsAddService();
//
let taskAll = Promise.all([
Promise.all([
gerCardId(store.state.userAccount.cardId),
getInfo(),
getMyPrizeRecored(),
getBrithday(),
getActivityNum(),
getIsAddService(),
]).then(result =>{
]).then((result) => {
console.log("接口都请求完成");
})
//
pageImgsArrLoad(imgList)
.then(() => {
pageImgsArrLoad(imgList).then(() => {
console.log("load done");
showIndex.value =true
gsap.from('.homePage',{duration:0.1,autoAlpha:0,y:100})
})
showIndex.value = true;
gsap.from(".homePage", { duration: 0.1, autoAlpha: 0, y: 100 });
});
});
console.log("link", window.location.href);
// URLtoken
// store.commit({ type: "updateToken", token: h5plugin.getQueryString('token') });
// store.commit({ type: "updateCardId", cardId: h5plugin.getQueryString('cardId') });
@ -152,83 +165,76 @@ onBeforeMount(() => {
//
if (h5plugin.isWX()) {
console.log('code:', h5plugin.getQueryString('code'));
console.log("code:", h5plugin.getQueryString("code"));
if (h5plugin.getQueryString('code')) {
if (h5plugin.getQueryString("code")) {
// codeopenid
authCode.value = h5plugin.getQueryString('code')
getOpenId(authCode.value)
authCode.value = h5plugin.getQueryString("code");
getOpenId(authCode.value);
} else {
getCode()
getCode();
}
}
});
//
onMounted(() => {
});
onMounted(() => {});
//
const indexPage = (actions) => {
console.log("来自index组件", actions);
}
};
// code
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',
service
.post(
process.env.VUE_APP_API + "/cms-activity/cms88/zsApi/xfhdAuthorize",
// qs.stringify({
// redirect_uri: redirect_uri
// })
{
redirect_uri: redirect_uri
redirect_uri: redirect_uri,
}
).then((res) => {
let code = res.data.data
)
.then((res) => {
let code = res.data.data;
console.log("get code结果3", res);
authCode.value = res.data.data
window.location.href = res.data.data
})
}
authCode.value = res.data.data;
window.location.href = res.data.data;
});
};
// openid
const getOpenId = (code) => {
service.post(process.env.VUE_APP_API + '/cms-activity/cms88/zsApi/oauthInfo',
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) {
console.log("后端返回的openid", res.data);
// openid
store.commit({ type: 'updateXGLOpenid', openid: res.data.data })
store.commit({ type: "updateXGLOpenid", openid: res.data.data });
// store.commit({ type: "updateToken", token: h5plugin.getQueryString('token') });
// store.commit({ type: "updateCardId", cardId: h5plugin.getQueryString('cardId') });
// store.commit({ type: "updateNkh", cardId: h5plugin.getQueryString('nkh') });
// console.log("", store.state.userAccount);
}
})
}
});
};
//
const imgPreloader = url => {
const imgPreloader = (url) => {
return new Promise((resolve, reject) => {
let image = new Image();
image.src = url;
@ -242,14 +248,13 @@ const imgPreloader = url => {
};
//
const pageImgsArrLoad = imgs => {
const pageImgsArrLoad = (imgs) => {
let promiseArr = [];
imgs.forEach(element => {
imgs.forEach((element) => {
promiseArr.push("img", imgPreloader(element));
});
return Promise.all(promiseArr);
};
</script>
<style lang="scss" scoped>
@ -260,10 +265,8 @@ const pageImgsArrLoad = imgs => {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div {
color: #fff;
}

View File

@ -13,12 +13,13 @@ export default createStore({
nkh: h5plugin.getQueryString('nkh'), //牛卡号
isDraw: false, //是否抽过奖
isHasAccount: false, //是否存在牛卡号
isAddCustomer: false, //是否添加过服务人员
isAddCustomer: 0, //是否添加过服务人员
isHasPrize: [], //是否存在奖品
participantNum: 0, //活动参与人数
prizeResult: 0, //中奖金额
eqcodeImg: '', //二维码
isBirthMon: 1, //生日是否处于当月
prizeList: [] //奖品列表
},
},
@ -29,7 +30,7 @@ export default createStore({
mutations: {
// 更新信广龙openid
updateXGLOpenid(state, val) {
state.userAccount.xglOpenid = val.openid
state.userAccount.xglOpenId = val.openid
},
// 更新token
@ -57,6 +58,15 @@ export default createStore({
state.userAccount.isBirthMon = val.isBirthMon
},
updateIsAddCustomer(state,val){
state.userAccount.isAddCustomer = val.isAddCustomer
},
// 更新奖品
updatePrizeList(state,val){
state.userAccount.prizeList = val.prizeList
}
},
// 改变方法:异步
actions: {},