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-04 16:36:17 +08:00
parent fd0f93cf80
commit fc817eafb8
8 changed files with 370 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 95 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

129
src/components/Draw.vue
View File

@ -4,7 +4,10 @@
<div class="draw_container" v-if="!isgetMoney"> <div class="draw_container" v-if="!isgetMoney">
<!-- 正常中奖 --> <!-- 正常中奖 -->
<div class="has_prize" v-if="drawStatus"> <div class="has_prize" v-if="drawStatus">
<div class="money_num"><span>8.88</span>元</div> <div class="money_num">
<span>{{ amount }}</span
>元
</div>
<div class="get_btn" @click="getMoney"></div> <div class="get_btn" @click="getMoney"></div>
</div> </div>
@ -16,14 +19,12 @@
<!-- 领奖后的弹窗 --> <!-- 领奖后的弹窗 -->
<div class="add_container" v-if="isgetMoney"> <div class="add_container" v-if="isgetMoney">
<!-- 已经添加过企微人员 --> <!-- 已经添加过企微人员 -->
<div class="is_added"> <div class="is_added">
<div class="go_index_btn"></div> <div class="go_index_btn"></div>
</div> </div>
<div class="cls_btn" @click="hide"></div> <div class="cls_btn" @click="hide"></div>
</div> </div>
</div> </div>
</template> </template>
@ -42,23 +43,30 @@ import gsap from "gsap";
import axios from "axios"; import axios from "axios";
import service from "@/api/httpServe"; import service from "@/api/httpServe";
import qs from "qs"; import qs from "qs";
import wx from "@/utils/wx-jssdk.1.6.0.js";
import { Toast, Dialog } from "vant";
import { Toast } from "vant";
import { useStore } from "vuex"; import { useStore } from "vuex";
// 初始化 // 初始化
const emit = defineEmits(["drawCon"]); // 声明触发事件，对应父组件上面的方法 const emit = defineEmits(["drawCon"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props const props = defineProps({ prizeMsg: Object }); // 获取props
const store = useStore(); const store = useStore();
const drawStatus = ref(true);
const drawStatus = ref(true) const isgetMoney = ref(false);
const isgetMoney = ref(false) const amount = ref(0);
const prizeId = ref(1);
// 页面挂载前 // 页面挂载前
onBeforeMount(() => {}); onBeforeMount(() => {
amount.value = props.prizeMsg.amount;
prizeId.value = props.prizeMsg.id;
if (props.prizeMsg.amount == 0) {
drawStatus.value = false;
}
console.log("props:", props.prizeMsg);
});
// 页面挂载后 // 页面挂载后
onMounted(() => { onMounted(() => {
@ -73,30 +81,17 @@ onMounted(() => {
}); });
const hide = () => { const hide = () => {
emit("drawCon"); emit("drawCon");
}; };
// 立即领取红包 // 立即领取红包
const getMoney = ()=>{ const getMoney = () => {
redpacket() redpacket(prizeId.value);
};
gsap.to('.draw_container',{duration:0.3,scale:0,autoAlpha:0,onComplete:()=>{
drawStatus.value = false
isgetMoney.value = true
gsap.form('.add_container',{duration:0.5,scale:0,autoAlpha:0,})
}})
}
// 领取接口 // 领取接口
const redpacket = (prizeId) => { const redpacket = (prizeId) => {
let redpacketId = 84; let redpacketId = prizeId;
service service
.post( .post(
process.env.VUE_APP_API + process.env.VUE_APP_API +
@ -106,10 +101,38 @@ const redpacket = (prizeId) => {
) )
.then((res) => { .then((res) => {
console.log("领取红包结果", res); console.log("领取红包结果", res);
let data = res.data;
if (data.code == 0) {
gsap.to(".draw_container", {
duration: 0.3,
scale: 0,
autoAlpha: 0,
onComplete: () => {
drawStatus.value = false;
isgetMoney.value = true;
// gsap.form('.add_container',{duration:0.5,scale:0,autoAlpha:0,})
},
});
} else {
Toast(data.msg);
Dialog.confirm({
title: "温馨提示",
message: data.msg,
confirmButtonText: '前往绑定',
})
.then(() => {
wx.miniProgram.navigateTo({
url: "/subs/bind/pages/login/login",
});
})
.catch(() => {
console.log(2);
// on cancel
});
}
}); });
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -157,14 +180,13 @@ const redpacket = (prizeId) => {
} }
} }
.no_prize{ .no_prize {
@include box(573px, 362px); @include box(573px, 362px);
@include bg_pos("../assets/img/pop/no_prize_pop.png"); @include bg_pos("../assets/img/pop/no_prize_pop.png");
} }
} }
.add_container{ .add_container {
width: 750px; width: 750px;
height: 1180px; height: 1180px;
display: flex; display: flex;
@ -172,25 +194,22 @@ const redpacket = (prizeId) => {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
.is_added{ .is_added {
@include box(530px, 594px); @include box(530px, 594px);
@include bg_pos("../assets/img/pop/got_luckyBag_pop.png"); @include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
position: relative; position: relative;
.go_index_btn{
@include pos(394px, 92px, 79px, 389px);
@include bg_pos("../assets/img/pop/to_index_btn.png");
}
.go_index_btn {
@include pos(394px, 92px, 79px, 389px);
@include bg_pos("../assets/img/pop/to_index_btn.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>

83
src/components/Index.vue
View File

@ -8,9 +8,11 @@
<div class="luckybag_left"></div> <div class="luckybag_left"></div>
<div class="luckybag_right"></div> <div class="luckybag_right"></div>
<div class="icon_left_1"></div> <div class="icon_left_1"></div>
<div class="lucky_bag"></div> <div class="lucky_bag" v-if="!gameOver"></div>
<div class="lucky_bag_2"> <div class="lucky_bag_2" v-if="gameOver">
<div class="prize_num">{{ prizeResult }}<span>元</span></div> <div class="no_prize_text" v-if="drawAmount == 0"></div>
<div class="prize_text" v-if="drawAmount != 0"></div>
<div class="prize_num" v-if="drawAmount != 0">{{ drawAmount }}<span>元</span></div>
</div> </div>
<div class="notice"> <div class="notice">
<span class="icon" <span class="icon"
@ -25,7 +27,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" ref="LuckyWheelCon" /> <LuckyWheel v-if="true" ref="LuckyWheelCon" @luckyWheel="luckyWheelFn" />
<div class="icon_right_2"></div> <div class="icon_right_2"></div>
<div class="icon_right_3"></div> <div class="icon_right_3"></div>
@ -80,7 +82,7 @@
<!-- 添加专属服务人员企微弹窗 --> <!-- 添加专属服务人员企微弹窗 -->
<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" /> <ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
<!-- 抽奖结果弹窗 --> <!-- 抽奖结果弹窗 -->
<Draw v-if="showDrawCon" @drawCon="drawConFn" /> <Draw v-if="showDrawCon" @drawCon="drawConFn" :prizeMsg="prizeMsg" />
</div> </div>
</template> </template>
@ -126,10 +128,18 @@ const showRulesPop = ref(false);
const showMyPrize = ref(false); const showMyPrize = ref(false);
const showServicePop = ref(false); const showServicePop = ref(false);
const gameOver = ref(false)
const drawType = ref(1); const drawType = ref(1);
const isDraw = ref(false); const isDraw = ref(false);
const LuckyWheelCon = ref(null); const LuckyWheelCon = ref(null);
const showDrawCon = ref(false); //抽奖结果弹窗组件 const showDrawCon = ref(false); //抽奖结果弹窗组件
const drawAmount = ref('') //显示的红包金额
const prizeMsg = reactive({
amount: 0,
id: 1,
})
// 活动列表 // 活动列表
const activityList = reactive([ const activityList = reactive([
@ -179,7 +189,8 @@ onBeforeMount(() => {
arr.forEach(element => { arr.forEach(element => {
if(element.type == 1){ if(element.type == 1){
isDraw.value = true; isDraw.value = true;
console.log("222222222222222222222222222222222"); gameOver.value = true
drawAmount.value = element.amount
} }
}); });
@ -250,10 +261,20 @@ const drawBtn = () => {
// LuckyWheelCon.value.showDrawAni(3, true) // LuckyWheelCon.value.showDrawAni(3, true)
getluckyBag(1); //大转盘抽奖：传参数1 getluckyBag(1); //大转盘抽奖：传参数1
isDraw.value = true;
}else{
Toast('您已经抽过奖')
} }
}; };
// 大转盘结束后的处理事件
const luckyWheelFn = ()=>{
console.log("game over");
showDrawCon.value = true;
gameOver.value = true
}
// 活动点击 // 活动点击
const activityBtn = (item) => { const activityBtn = (item) => {
console.log(item.id); console.log(item.id);
@ -265,8 +286,6 @@ const activityBtn = (item) => {
if (item.id == 2) { if (item.id == 2) {
console.log("新客专享页面"); console.log("新客专享页面");
// let url = "/subs/financial/pages/index/index"; // let url = "/subs/financial/pages/index/index";
// console.log(wx);
wx.miniProgram.navigateTo({ wx.miniProgram.navigateTo({
url: "/subs/financial/pages/index/index", url: "/subs/financial/pages/index/index",
}); });
@ -361,7 +380,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);
store.commit({
type: "updatePrizeList",
prizeList: res.data.data,
});
}); });
}; };
@ -391,17 +415,16 @@ const getluckyBag = (id) => {
}) })
.then((res) => { .then((res) => {
console.log("抽取红包结果：", res); console.log("抽取红包结果：", res);
let prizeNum = res.data.data.amount;
// 判断抽奖类型drawType = 1时转动大转盘
if (drawType.value == 1) {
// 判断抽奖结果状态
if (res.data.code == 0) { if (res.data.code == 0) {
isDraw.value = true;
let prizeNum = res.data.data.amount;
drawAmount.value = res.data.data.amount
prizeMsg.amount = res.data.data.amount
prizeMsg.id = res.data.data.id
// 大转盘正常抽奖 // 大转盘正常抽奖
if (prizeNum == 0) { if (prizeNum == 0) {
// 谢谢参与 // 谢谢参与
console.log("抽中1：");
LuckyWheelCon.value.showDrawAni(5, true); LuckyWheelCon.value.showDrawAni(5, true);
} }
if (prizeNum == 1.08) { if (prizeNum == 1.08) {
@ -420,15 +443,13 @@ const getluckyBag = (id) => {
// 6.66元 // 6.66元
LuckyWheelCon.value.showDrawAni(4, true); LuckyWheelCon.value.showDrawAni(4, true);
} }
getMyPrizeRecored() // 更新我的奖品列表
} else { } else {
if (res.data.data == 0) { Toast(res.data.msg)
// 谢谢参与
LuckyWheelCon.value.showDrawAni(5, true);
}
} }
} else {
// 加企业微信奖
}
}); });
}; };
@ -631,7 +652,7 @@ const deleteData = (type) => {
@include pos(308px, 355px, 227px, 356px); @include pos(308px, 355px, 227px, 356px);
@include bg_pos("../assets/img/luckybag.png"); @include bg_pos("../assets/img/luckybag.png");
pointer-events: none; pointer-events: none;
visibility: hidden; // visibility: hidden;
} }
.lucky_bag_2 { .lucky_bag_2 {
@ -641,6 +662,18 @@ const deleteData = (type) => {
// display: flex; // display: flex;
.no_prize_text{
@include pos(221px, 59px, 55px, 55px);
@include bg_pos("../assets/img/no_prize_text.png");
pointer-events: none;
}
.prize_text{
@include pos(172px, 23px, 80px, 37px);
@include bg_pos("../assets/img/prize_text.png");
pointer-events: none;
}
.prize_num { .prize_num {
@include pos(330px, 50px, 0px, 79px); @include pos(330px, 50px, 0px, 79px);
font-weight: 700; font-weight: 700;

403
src/components/LuckyWheel.vue
View File

@ -1,43 +1,43 @@
<template> <template>
<div class="LuckyWheelCon" @touchmove.prevent> <div class="LuckyWheelCon" @touchmove.prevent>
<div class="LuckyWheel_container"> <div class="LuckyWheel_container">
<div class="LuckyWheel_box"> <div class="LuckyWheel_box">
<div class="prize p-1" ref="p1"></div> <div class="prize p-1" ref="p1"></div>
<div class="prize p-2" ref="p2"></div> <div class="prize p-2" ref="p2"></div>
<div class="prize p-3" ref="p3"></div> <div class="prize p-3" ref="p3"></div>
<div class="prize p-4" ref="p4"></div> <div class="prize p-4" ref="p4"></div>
<div class="prize p-5" ref="p5"></div> <div class="prize p-5" ref="p5"></div>
<div class="prize p-1" ref="p6"></div> <div class="prize p-1" ref="p6"></div>
<div class="prize p-2" ref="p7"></div> <div class="prize p-2" ref="p7"></div>
<div class="prize p-3" ref="p8"></div> <div class="prize p-3" ref="p8"></div>
<div class="prize p-4" ref="p9"></div> <div class="prize p-4" ref="p9"></div>
<div class="prize p-5" ref="p10"></div> <div class="prize p-5" ref="p10"></div>
<div class="prize p-1" ref="p11"></div> <div class="prize p-1" ref="p11"></div>
<div class="prize p-2" ref="p12"></div> <div class="prize p-2" ref="p12"></div>
<div class="prize p-3" ref="p13"></div> <div class="prize p-3" ref="p13"></div>
<div class="prize p-4" ref="p14"></div> <div class="prize p-4" ref="p14"></div>
<div class="prize p-5" ref="p15"></div> <div class="prize p-5" ref="p15"></div>
<div class="prize p-5" ref="p16"></div> <div class="prize p-5" ref="p16"></div>
<div class="prize p-5" ref="p17"></div> <div class="prize p-5" ref="p17"></div>
<div class="prize p-5" ref="p18"></div> <div class="prize p-5" ref="p18"></div>
<div class="prize p-5" ref="p19"></div> <div class="prize p-5" ref="p19"></div>
<!-- <div class="prize p-3" ref="p20"></div> --> <!-- <div class="prize p-3" ref="p20"></div> -->
</div> </div>
<!-- <div class="btn" @click="btn">开始抽奖</div> --> <!-- <div class="btn" @click="btn">开始抽奖</div> -->
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { import {
onBeforeMount, onBeforeMount,
onMounted, onMounted,
defineEmits, defineEmits,
defineProps, defineProps,
reactive, reactive,
ref, ref,
toRefs, toRefs,
defineExpose defineExpose,
} from "vue"; } from "vue";
import gsap from "gsap"; import gsap from "gsap";
import axios from "axios"; import axios from "axios";
@ -51,7 +51,7 @@ import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
gsap.registerPlugin(MotionPathPlugin); gsap.registerPlugin(MotionPathPlugin);
// 初始化 // 初始化
const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法 const emit = defineEmits(["luckyWheel"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore(); const store = useStore();
const p1 = ref(null); const p1 = ref(null);
@ -76,186 +76,205 @@ const p19 = ref(null);
const aniGroup = ref([]); const aniGroup = ref([]);
const eqcode = ref(require("../assets/img/pop/eqcode.png")); const eqcode = ref(require("../assets/img/pop/eqcode.png"));
const luckyWheelStatus = ref(false);
// 大转盘结束回调
const isStop = () => {
if (!luckyWheelStatus.value) {
luckyWheelStatus.value = true;
console.log("大转盘结束");
emit('luckyWheel') //告诉主页弹出相应结果弹窗
}
};
// 页面挂载前 // 页面挂载前
onBeforeMount(() => {}); onBeforeMount(() => {});
onMounted(() => { onMounted(() => {
showDrawAni(); showDrawAni();
}); });
// bingo 为中奖index 对应 pArr的index // bingo 为中奖index 对应 pArr的index
const showDrawAni = (bingo, repeat) => { const showDrawAni = (bingo, repeat) => {
const pArr = [ const pArr = [
p1, // 1.08 p1, // 1.08
p2, // 2.68 p2, // 2.68
p3, // 6.66 p3, // 6.66
p4, // 8.88 p4, // 8.88
p5, // 谢谢 默认选中值 p5, // 谢谢 默认选中值
p6, //以下皆为填充奖品 可随便填充 p6, //以下皆为填充奖品 可随便填充
p7, p7,
p8, p8,
p9, p9,
p10, p10,
p11, p11,
p12, p12,
p13, p13,
p14, p14,
p15, p15,
p16, p16,
p17, p17,
p18, p18,
p19, p19,
]; ];
const singleRate = 1 / pArr.length; // 路径平均分 单个元素在路径上的位置 const singleRate = 1 / pArr.length; // 路径平均分 单个元素在路径上的位置
const delta = singleRate + 0.068; // 修正偏移量 const delta = singleRate + 0.068; // 修正偏移量
let rotateDelta = 0; //转到哪一个停止 | 默认为第五个奖品 谢谢参与 let rotateDelta = 0; //转到哪一个停止 | 默认为第五个奖品 谢谢参与
if (bingo) { if (bingo) {
rotateDelta = (5 - bingo) * singleRate; rotateDelta = (5 - bingo) * singleRate;
} }
for (let i = 1; i < pArr.length + 1; i++) { for (let i = 1; i < pArr.length + 1; i++) {
let ani = gsap.to( let ani = gsap.to(
[pArr[i - 1].value], [pArr[i - 1].value],
{ {
duration: 10, duration: 10,
paused: bingo ? false : true, //没有中奖结果则为初始化 paused: bingo ? false : true, //没有中奖结果则为初始化
// repeat: -1, // repeat: -1,
// delay: i * 0.5 - 1, // delay: i * 0.5 - 1,
// stagger: 0.5, // stagger: 0.5,
// repeatDelay: 3, // repeatDelay: 3,
// yoyo: true, // yoyo: true,
ease: "back.out(1.4)", ease: "back.out(1.4)",
motionPath: { motionPath: {
path: "M115.37,73.45C177.05-25.14,462-22.69,535,70,686.45,248.93,797.17,321.7,324.48,321.7-121,321.7-20.39,248.93,115.37,73.45Z", path: "M115.37,73.45C177.05-25.14,462-22.69,535,70,686.45,248.93,797.17,321.7,324.48,321.7-121,321.7-20.39,248.93,115.37,73.45Z",
// align: [1, 1], // align: [1, 1],
autoRotate: true, autoRotate: true,
start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1 start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷 end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
offsetX: -177, offsetX: -177,
offsetY: -43, offsetY: -43,
alignOrigin: [0.5, 0], alignOrigin: [0.5, 0],
}, },
onUpdate: () => { onUpdate: () => {
// if (i === 1) console.log(ani.progress()); // if (i === 1) console.log(ani.progress());
}, },
}, onStart: () => {
"same" if (i == pArr.length - 1) {
); setTimeout(() => {
// 更新视图 // console.log("停止2");
ani.seek(0); isStop()
if (bingo && repeat) { }, 5000);
setTimeout(() => { }
showDrawAni(bingo, false); },
}, 800);
} onComplete: () => {},
} },
"same"
);
// 更新视图
ani.seek(0);
if (bingo && repeat) {
setTimeout(() => {
showDrawAni(bingo, false);
}, 800);
}
}
}; };
const btn = () => { const btn = () => {
console.log("抽奖"); console.log("抽奖");
// 中奖奖品ID // 中奖奖品ID
// 奖品 1 - 1.08 // 奖品 1 - 1.08
// 奖品 2 - 2.68 // 奖品 2 - 2.68
// 奖品 3 - 6.66 // 奖品 3 - 6.66
// 奖品 4 - 8.88 // 奖品 4 - 8.88
// 奖品 5 - 谢谢参与 // 奖品 5 - 谢谢参与
// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止 // 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
showDrawAni(2, true); showDrawAni(2, true);
}; };
// 暴露出方法给父组件调用 // 暴露出方法给父组件调用
defineExpose({ defineExpose({
showDrawAni showDrawAni,
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.LuckyWheelCon { .LuckyWheelCon {
width: 100%; width: 100%;
height: 800px; height: 800px;
position: absolute; position: absolute;
// z-index: 10; // z-index: 10;
top: 0; top: 0;
left: 0; left: 0;
// right: 0; // right: 0;
// bottom: 0; // bottom: 0;
// display: flex; // display: flex;
// justify-content: center; // justify-content: center;
// align-items: center; // align-items: center;
// background-color: rgba(0, 0, 0, 0.3); // background-color: rgba(0, 0, 0, 0.3);
pointer-events: none; pointer-events: none;
.LuckyWheel_container { .LuckyWheel_container {
position: absolute; position: absolute;
top: 770px; top: 770px;
left: 0; left: 0;
width: 760px; width: 760px;
height: 500px; height: 500px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
.LuckyWheel_box { .LuckyWheel_box {
// // border-width: 123px; // // border-width: 123px;
// border-style: solid; // border-style: solid;
// border-radius: 50%; // border-radius: 50%;
// // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16); // // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
// width: 831px; // width: 831px;
// height: 305px; // height: 305px;
// width: 100%; // width: 100%;
// height: 100%; // height: 100%;
// position: absolute; // position: absolute;
// top: 0; // top: 0;
// left: 20px; // left: 20px;
.li { .li {
width: 100px; width: 100px;
height: 100px; height: 100px;
background-color: #ff6000; background-color: #ff6000;
} }
} }
.btn { .btn {
width: 200px; width: 200px;
height: 100px; height: 100px;
text-align: center; text-align: center;
line-height: 100px; line-height: 100px;
font-size: 30px; font-size: 30px;
color: #fff; color: #fff;
background: #ff6000; background: #ff6000;
} }
} }
.prize { .prize {
position: absolute; position: absolute;
width: 160px; width: 160px;
height: 96px; height: 96px;
left: 0; left: 0;
top: 10px; top: 10px;
// 奖品图 // 奖品图
&.p-1 { &.p-1 {
background-image: url("~@/assets/img/p_1.png"); background-image: url("~@/assets/img/p_1.png");
background-size: 160px 96px; background-size: 160px 96px;
} }
&.p-2 { &.p-2 {
background-image: url("~@/assets/img/p_2.png"); background-image: url("~@/assets/img/p_2.png");
background-size: 160px 96px; background-size: 160px 96px;
} }
&.p-3 { &.p-3 {
background-image: url("~@/assets/img/p_3.png"); background-image: url("~@/assets/img/p_3.png");
background-size: 160px 96px; background-size: 160px 96px;
} }
&.p-4 { &.p-4 {
background-image: url("~@/assets/img/p_4.png"); background-image: url("~@/assets/img/p_4.png");
background-size: 160px 96px; background-size: 160px 96px;
} }
&.p-5 { &.p-5 {
background-image: url("~@/assets/img/p_5.png"); background-image: url("~@/assets/img/p_5.png");
background-size: 160px 96px; background-size: 160px 96px;
} }
// background-color: #f00; // background-color: #f00;
} }
} }
</style> </style>

43
src/components/MyPrize.vue
View File

@ -93,6 +93,7 @@ onBeforeMount(() => {
if (element.type == 1) { if (element.type == 1) {
prizeList.push({ prizeList.push({
id: element.id, id: element.id,
type: element.type,
prizeNum: element.amount, prizeNum: element.amount,
isGeted: element.receiveStatus, isGeted: element.receiveStatus,
spe: "财富88，与“礼”共见证", spe: "财富88，与“礼”共见证",
@ -102,6 +103,7 @@ onBeforeMount(() => {
if (element.type == 2) { if (element.type == 2) {
prizeList.push({ prizeList.push({
id: element.id, id: element.id,
type: element.type,
prizeNum: element.amount, prizeNum: element.amount,
isGeted: element.receiveStatus, isGeted: element.receiveStatus,
spe: "添加专属服务人员企微", spe: "添加专属服务人员企微",
@ -128,15 +130,28 @@ const hide = () => {
}; };
const hidePop = () => { const hidePop = () => {
gsap.to('.GotedPop',{duration:0.5,autoAlpha:0}) gsap.to(".GotedPop", { duration: 0.5, autoAlpha: 0 });
gsap.to('.myPrizeCon',{duration:0.5,autoAlpha:1,delay:0.2}) gsap.to(".myPrizeCon", { duration: 0.5, autoAlpha: 1, delay: 0.2 });
}; };
// 领取按钮 // 领取按钮
const getMoney = (val) => { const getMoney = (val) => {
if (val.isGeted == 0) { console.log("val:", val);
console.log("未领取", val);
getLuckyBag(val.id) // 红包类型未参与红包： 需先绑定牛卡号
if (val.type == 1) {
if (!store.state.userAccount.nkh) {
Toast("牛卡号为空，先绑定牛卡号");
} else {
getLuckyBag(val.id);
}
}
if (val.type == 2) {
if (val.isGeted == 0) {
console.log("未领取", val);
getLuckyBag(val.id);
}
} }
}; };
@ -144,19 +159,15 @@ const getMoney = (val) => {
const getLuckyBag = (id) => { const getLuckyBag = (id) => {
service service
.post( .post(
process.env.VUE_APP_API + process.env.VUE_APP_API + "/cms-activity/cms88/redpacket/receive/" + id,
"/cms-activity/cms88/redpacket/receive/" + id,
{} {}
) )
.then((res) => { .then((res) => {
console.log("领取红包结果", res); console.log("领取红包结果", res);
gsap.to('.GotedPop',{duration:1,autoAlpha:1,delay:0.2}) gsap.to(".GotedPop", { duration: 1, autoAlpha: 1, delay: 0.2 });
gsap.to('.myPrizeCon',{duration:1,autoAlpha:0}) gsap.to(".myPrizeCon", { duration: 1, autoAlpha: 0 });
}); });
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -312,19 +323,17 @@ const getLuckyBag = (id) => {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
.goted_box{ .goted_box {
@include box(530px, 594px);
@include box(530px, 594px);
@include bg_pos("../assets/img/pop/got_luckyBag_pop.png"); @include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
position: relative; position: relative;
.to_index_btn{ .to_index_btn {
@include pos(394px, 92px, 79px, 389px); @include pos(394px, 92px, 79px, 389px);
@include bg_pos("../assets/img/pop/to_index_btn.png"); @include bg_pos("../assets/img/pop/to_index_btn.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");

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

@ -146,7 +146,7 @@ onBeforeMount(() => {
getActivityNum(), getActivityNum(),
getIsAddService(), getIsAddService(),
]).then((result) => { ]).then((result) => {
console.log("接口都请求完成"); console.log("接口都请求完成",result);
// 预加载图片资源 // 预加载图片资源
pageImgsArrLoad(imgList).then(() => { pageImgsArrLoad(imgList).then(() => {
console.log("load done"); console.log("load done");
@ -156,11 +156,6 @@ onBeforeMount(() => {
}); });
console.log("link：", window.location.href); console.log("link：", window.location.href);
// 从URL中获取token等数据
// store.commit({ type: "updateToken", token: h5plugin.getQueryString('token') });
// store.commit({ type: "updateCardId", cardId: h5plugin.getQueryString('cardId') });
// store.commit({ type: "updateNkh", nkh: h5plugin.getQueryString('nkh') });
console.log("用户活动信息：", store.state.userAccount); console.log("用户活动信息：", store.state.userAccount);
// 微信环境授权 // 微信环境授权