382 lines
8.9 KiB
Vue
382 lines
8.9 KiB
Vue
<template>
|
||
<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">
|
||
<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 == 0
|
||
? require('../assets/img/pop/view_btn.png')
|
||
: require('../assets/img/pop/got_btn.png')
|
||
"
|
||
@click="getMoney(item)"
|
||
/>
|
||
</div>
|
||
</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>
|
||
<!-- 领取成功反馈弹窗 -->
|
||
<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>
|
||
import {
|
||
onBeforeMount,
|
||
onMounted,
|
||
defineEmits,
|
||
defineProps,
|
||
reactive,
|
||
ref,
|
||
toRefs,
|
||
} from "vue";
|
||
import gsap from "gsap";
|
||
import axios from "axios";
|
||
import service from "@/api/httpServe";
|
||
import qs from "qs";
|
||
import { Toast, Dialog } from "vant";
|
||
import { useStore } from "vuex";
|
||
import wx from "@/utils/wx-jssdk.1.6.0.js";
|
||
|
||
// 初始化
|
||
const emit = defineEmits(["MyPrize"]); // 声明触发事件，对应父组件上面的方法
|
||
const props = defineProps({ sendMessage: Object }); // 获取props
|
||
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: "添加专属服务人员企微",
|
||
// },
|
||
]);
|
||
|
||
// 页面挂载前
|
||
onBeforeMount(() => {
|
||
let arr = store.state.userAccount.prizeList;
|
||
arr.forEach((element) => {
|
||
if (element.receiveStatus != -1) {
|
||
if (element.type == 1) {
|
||
prizeList.push({
|
||
id: element.id,
|
||
type: element.type,
|
||
prizeNum: element.amount,
|
||
isGeted: element.receiveStatus,
|
||
spe: "财富88，与“礼”共见证",
|
||
});
|
||
}
|
||
|
||
if (element.type == 2) {
|
||
prizeList.push({
|
||
id: element.id,
|
||
type: element.type,
|
||
prizeNum: element.amount,
|
||
isGeted: element.receiveStatus,
|
||
spe: "添加专属服务人员企微",
|
||
});
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 页面挂载后
|
||
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 })
|
||
});
|
||
|
||
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) => {
|
||
console.log("val:", val);
|
||
|
||
// 红包类型未参与红包： 需先绑定牛卡号
|
||
if (val.type == 1) {
|
||
console.log("牛卡号：",store.state.userAccount.nkh);
|
||
if (store.state.userAccount.nkh == '') {
|
||
// Toast("牛卡号为空，先绑定牛卡号");
|
||
Dialog.confirm({
|
||
title: "温馨提示",
|
||
message: "牛卡号为空，先绑定牛卡号",
|
||
confirmButtonText: "前往绑定",
|
||
})
|
||
.then(() => {
|
||
wx.miniProgram.navigateTo({
|
||
url: "/subs/bind/pages/login/login",
|
||
});
|
||
})
|
||
.catch(() => {
|
||
console.log(2);
|
||
// on cancel
|
||
});
|
||
} else {
|
||
getLuckyBag(val.id);
|
||
}
|
||
}
|
||
|
||
if (val.type == 2) {
|
||
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);
|
||
|
||
let data = res.data;
|
||
|
||
if (data.code == 0) {
|
||
gsap.to(".GotedPop", { duration: 1, autoAlpha: 1, delay: 0.2 });
|
||
gsap.to(".myPrizeCon", { duration: 1, autoAlpha: 0 });
|
||
getMyPrizeRecored();
|
||
} else {
|
||
Toast(data.msg);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 我的红包记录
|
||
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,
|
||
});
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.myPrizeCon {
|
||
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;
|
||
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;
|
||
}
|
||
|
||
.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_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_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%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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");
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
}
|
||
</style> |