完成红包领取逻辑
This commit is contained in:
tcubic
parent
fd0f93cf80
commit
fc817eafb8
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
BIN
src/assets/img/no_prize_text.png
Normal file
BIN
src/assets/img/no_prize_text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/img/prize_text.png
Normal file
BIN
src/assets/img/prize_text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -4,7 +4,10 @@
|
||||
<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="money_num">
|
||||
<span>{{ amount }}</span
|
||||
>元
|
||||
</div>
|
||||
<div class="get_btn" @click="getMoney"></div>
|
||||
</div>
|
||||
|
||||
@ -16,14 +19,12 @@
|
||||
|
||||
<!-- 领奖后的弹窗 -->
|
||||
<div class="add_container" v-if="isgetMoney">
|
||||
<!-- 已经添加过企微人员 -->
|
||||
<div class="is_added">
|
||||
<div class="go_index_btn"></div>
|
||||
</div>
|
||||
|
||||
<!-- 已经添加过企微人员 -->
|
||||
<div class="is_added">
|
||||
<div class="go_index_btn"></div>
|
||||
</div>
|
||||
|
||||
<div class="cls_btn" @click="hide"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -42,23 +43,30 @@ import gsap from "gsap";
|
||||
import axios from "axios";
|
||||
import service from "@/api/httpServe";
|
||||
import qs from "qs";
|
||||
|
||||
|
||||
import { Toast } from "vant";
|
||||
import wx from "@/utils/wx-jssdk.1.6.0.js";
|
||||
import { Toast, Dialog } from "vant";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
// 初始化
|
||||
const emit = defineEmits(["drawCon"]); // 声明触发事件，对应父组件上面的方法
|
||||
const props = defineProps({ sendMessage: Object }); // 获取props
|
||||
const props = defineProps({ prizeMsg: Object }); // 获取props
|
||||
const store = useStore();
|
||||
|
||||
|
||||
const drawStatus = ref(true)
|
||||
const isgetMoney = ref(false)
|
||||
|
||||
const drawStatus = ref(true);
|
||||
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(() => {
|
||||
@ -73,30 +81,17 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
const hide = () => {
|
||||
emit("drawCon");
|
||||
emit("drawCon");
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// 立即领取红包
|
||||
const getMoney = ()=>{
|
||||
redpacket()
|
||||
|
||||
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 getMoney = () => {
|
||||
redpacket(prizeId.value);
|
||||
};
|
||||
|
||||
// 领取接口
|
||||
const redpacket = (prizeId) => {
|
||||
let redpacketId = 84;
|
||||
let redpacketId = prizeId;
|
||||
service
|
||||
.post(
|
||||
process.env.VUE_APP_API +
|
||||
@ -106,10 +101,38 @@ const redpacket = (prizeId) => {
|
||||
)
|
||||
.then((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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -157,14 +180,13 @@ const redpacket = (prizeId) => {
|
||||
}
|
||||
}
|
||||
|
||||
.no_prize{
|
||||
@include box(573px, 362px);
|
||||
.no_prize {
|
||||
@include box(573px, 362px);
|
||||
@include bg_pos("../assets/img/pop/no_prize_pop.png");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.add_container{
|
||||
.add_container {
|
||||
width: 750px;
|
||||
height: 1180px;
|
||||
display: flex;
|
||||
@ -172,25 +194,22 @@ const redpacket = (prizeId) => {
|
||||
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");
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@include box(72px, 72px);
|
||||
@include bg_pos("../assets/img/pop/cls_btn.png");
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -8,9 +8,11 @@
|
||||
<div class="luckybag_left"></div>
|
||||
<div class="luckybag_right"></div>
|
||||
<div class="icon_left_1"></div>
|
||||
<div class="lucky_bag"></div>
|
||||
<div class="lucky_bag_2">
|
||||
<div class="prize_num">{{ prizeResult }}<span>元</span></div>
|
||||
<div class="lucky_bag" v-if="!gameOver"></div>
|
||||
<div class="lucky_bag_2" v-if="gameOver">
|
||||
<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 class="notice">
|
||||
<span class="icon"
|
||||
@ -25,7 +27,7 @@
|
||||
<div class="cloud_right_2"></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_3"></div>
|
||||
@ -80,7 +82,7 @@
|
||||
<!-- 添加专属服务人员企微弹窗 -->
|
||||
<ServiceList v-if="showServicePop" @ServicePop="hideServicePop" />
|
||||
<!-- 抽奖结果弹窗 -->
|
||||
<Draw v-if="showDrawCon" @drawCon="drawConFn" />
|
||||
<Draw v-if="showDrawCon" @drawCon="drawConFn" :prizeMsg="prizeMsg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -126,10 +128,18 @@ const showRulesPop = ref(false);
|
||||
const showMyPrize = ref(false);
|
||||
const showServicePop = ref(false);
|
||||
|
||||
|
||||
const gameOver = ref(false)
|
||||
const drawType = ref(1);
|
||||
const isDraw = ref(false);
|
||||
const LuckyWheelCon = ref(null);
|
||||
const showDrawCon = ref(false); //抽奖结果弹窗组件
|
||||
const drawAmount = ref('') //显示的红包金额
|
||||
const prizeMsg = reactive({
|
||||
amount: 0,
|
||||
id: 1,
|
||||
})
|
||||
|
||||
|
||||
// 活动列表
|
||||
const activityList = reactive([
|
||||
@ -179,7 +189,8 @@ onBeforeMount(() => {
|
||||
arr.forEach(element => {
|
||||
if(element.type == 1){
|
||||
isDraw.value = true;
|
||||
console.log("222222222222222222222222222222222");
|
||||
gameOver.value = true
|
||||
drawAmount.value = element.amount
|
||||
}
|
||||
});
|
||||
|
||||
@ -250,10 +261,20 @@ const drawBtn = () => {
|
||||
// LuckyWheelCon.value.showDrawAni(3, true)
|
||||
|
||||
getluckyBag(1); //大转盘抽奖：传参数1
|
||||
isDraw.value = true;
|
||||
|
||||
}else{
|
||||
Toast('您已经抽过奖')
|
||||
}
|
||||
};
|
||||
|
||||
// 大转盘结束后的处理事件
|
||||
const luckyWheelFn = ()=>{
|
||||
console.log("game over");
|
||||
showDrawCon.value = true;
|
||||
gameOver.value = true
|
||||
}
|
||||
|
||||
|
||||
// 活动点击
|
||||
const activityBtn = (item) => {
|
||||
console.log(item.id);
|
||||
@ -265,8 +286,6 @@ const activityBtn = (item) => {
|
||||
if (item.id == 2) {
|
||||
console.log("新客专享页面");
|
||||
// let url = "/subs/financial/pages/index/index";
|
||||
// console.log(wx);
|
||||
|
||||
wx.miniProgram.navigateTo({
|
||||
url: "/subs/financial/pages/index/index",
|
||||
});
|
||||
@ -361,7 +380,12 @@ const getMyPrizeRecored = () => {
|
||||
service
|
||||
.post(process.env.VUE_APP_API + "/cms-activity/cms88/prize/list", {})
|
||||
.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) => {
|
||||
console.log("抽取红包结果：", res);
|
||||
|
||||
let prizeNum = res.data.data.amount;
|
||||
|
||||
// 判断抽奖类型drawType = 1时转动大转盘
|
||||
if (drawType.value == 1) {
|
||||
// 判断抽奖结果状态
|
||||
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) {
|
||||
// 谢谢参与
|
||||
console.log("抽中1：");
|
||||
LuckyWheelCon.value.showDrawAni(5, true);
|
||||
}
|
||||
if (prizeNum == 1.08) {
|
||||
@ -420,15 +443,13 @@ const getluckyBag = (id) => {
|
||||
// 6.66元
|
||||
LuckyWheelCon.value.showDrawAni(4, true);
|
||||
}
|
||||
|
||||
getMyPrizeRecored() // 更新我的奖品列表
|
||||
|
||||
} else {
|
||||
if (res.data.data == 0) {
|
||||
// 谢谢参与
|
||||
LuckyWheelCon.value.showDrawAni(5, true);
|
||||
}
|
||||
Toast(res.data.msg)
|
||||
}
|
||||
} else {
|
||||
// 加企业微信奖
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
@ -631,7 +652,7 @@ const deleteData = (type) => {
|
||||
@include pos(308px, 355px, 227px, 356px);
|
||||
@include bg_pos("../assets/img/luckybag.png");
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
// visibility: hidden;
|
||||
}
|
||||
|
||||
.lucky_bag_2 {
|
||||
@ -641,6 +662,18 @@ const deleteData = (type) => {
|
||||
|
||||
// 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 {
|
||||
@include pos(330px, 50px, 0px, 79px);
|
||||
font-weight: 700;
|
||||
|
||||
@ -1,43 +1,43 @@
|
||||
<template>
|
||||
<div class="LuckyWheelCon" @touchmove.prevent>
|
||||
<div class="LuckyWheel_container">
|
||||
<div class="LuckyWheel_box">
|
||||
<div class="prize p-1" ref="p1"></div>
|
||||
<div class="prize p-2" ref="p2"></div>
|
||||
<div class="prize p-3" ref="p3"></div>
|
||||
<div class="prize p-4" ref="p4"></div>
|
||||
<div class="prize p-5" ref="p5"></div>
|
||||
<div class="prize p-1" ref="p6"></div>
|
||||
<div class="prize p-2" ref="p7"></div>
|
||||
<div class="prize p-3" ref="p8"></div>
|
||||
<div class="prize p-4" ref="p9"></div>
|
||||
<div class="prize p-5" ref="p10"></div>
|
||||
<div class="prize p-1" ref="p11"></div>
|
||||
<div class="prize p-2" ref="p12"></div>
|
||||
<div class="prize p-3" ref="p13"></div>
|
||||
<div class="prize p-4" ref="p14"></div>
|
||||
<div class="prize p-5" ref="p15"></div>
|
||||
<div class="prize p-5" ref="p16"></div>
|
||||
<div class="prize p-5" ref="p17"></div>
|
||||
<div class="prize p-5" ref="p18"></div>
|
||||
<div class="prize p-5" ref="p19"></div>
|
||||
<!-- <div class="prize p-3" ref="p20"></div> -->
|
||||
</div>
|
||||
<!-- <div class="btn" @click="btn">开始抽奖</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="LuckyWheelCon" @touchmove.prevent>
|
||||
<div class="LuckyWheel_container">
|
||||
<div class="LuckyWheel_box">
|
||||
<div class="prize p-1" ref="p1"></div>
|
||||
<div class="prize p-2" ref="p2"></div>
|
||||
<div class="prize p-3" ref="p3"></div>
|
||||
<div class="prize p-4" ref="p4"></div>
|
||||
<div class="prize p-5" ref="p5"></div>
|
||||
<div class="prize p-1" ref="p6"></div>
|
||||
<div class="prize p-2" ref="p7"></div>
|
||||
<div class="prize p-3" ref="p8"></div>
|
||||
<div class="prize p-4" ref="p9"></div>
|
||||
<div class="prize p-5" ref="p10"></div>
|
||||
<div class="prize p-1" ref="p11"></div>
|
||||
<div class="prize p-2" ref="p12"></div>
|
||||
<div class="prize p-3" ref="p13"></div>
|
||||
<div class="prize p-4" ref="p14"></div>
|
||||
<div class="prize p-5" ref="p15"></div>
|
||||
<div class="prize p-5" ref="p16"></div>
|
||||
<div class="prize p-5" ref="p17"></div>
|
||||
<div class="prize p-5" ref="p18"></div>
|
||||
<div class="prize p-5" ref="p19"></div>
|
||||
<!-- <div class="prize p-3" ref="p20"></div> -->
|
||||
</div>
|
||||
<!-- <div class="btn" @click="btn">开始抽奖</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onBeforeMount,
|
||||
onMounted,
|
||||
defineEmits,
|
||||
defineProps,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
defineExpose
|
||||
onBeforeMount,
|
||||
onMounted,
|
||||
defineEmits,
|
||||
defineProps,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
defineExpose,
|
||||
} from "vue";
|
||||
import gsap from "gsap";
|
||||
import axios from "axios";
|
||||
@ -51,7 +51,7 @@ import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
|
||||
gsap.registerPlugin(MotionPathPlugin);
|
||||
|
||||
// 初始化
|
||||
const emit = defineEmits(["ServicePop"]); // 声明触发事件，对应父组件上面的方法
|
||||
const emit = defineEmits(["luckyWheel"]); // 声明触发事件，对应父组件上面的方法
|
||||
const props = defineProps({ sendMessage: Object }); // 获取props
|
||||
const store = useStore();
|
||||
const p1 = ref(null);
|
||||
@ -76,186 +76,205 @@ const p19 = ref(null);
|
||||
const aniGroup = ref([]);
|
||||
|
||||
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(() => {});
|
||||
|
||||
onMounted(() => {
|
||||
showDrawAni();
|
||||
showDrawAni();
|
||||
});
|
||||
|
||||
// bingo 为中奖index 对应 pArr的index
|
||||
const showDrawAni = (bingo, repeat) => {
|
||||
const pArr = [
|
||||
p1, // 1.08
|
||||
p2, // 2.68
|
||||
p3, // 6.66
|
||||
p4, // 8.88
|
||||
p5, // 谢谢 默认选中值
|
||||
p6, //以下皆为填充奖品 可随便填充
|
||||
p7,
|
||||
p8,
|
||||
p9,
|
||||
p10,
|
||||
p11,
|
||||
p12,
|
||||
p13,
|
||||
p14,
|
||||
p15,
|
||||
p16,
|
||||
p17,
|
||||
p18,
|
||||
p19,
|
||||
];
|
||||
const singleRate = 1 / pArr.length; // 路径平均分 单个元素在路径上的位置
|
||||
const delta = singleRate + 0.068; // 修正偏移量
|
||||
let rotateDelta = 0; //转到哪一个停止 | 默认为第五个奖品 谢谢参与
|
||||
if (bingo) {
|
||||
rotateDelta = (5 - bingo) * singleRate;
|
||||
}
|
||||
for (let i = 1; i < pArr.length + 1; i++) {
|
||||
let ani = gsap.to(
|
||||
[pArr[i - 1].value],
|
||||
{
|
||||
duration: 10,
|
||||
paused: bingo ? false : true, //没有中奖结果则为初始化
|
||||
// repeat: -1,
|
||||
// delay: i * 0.5 - 1,
|
||||
// stagger: 0.5,
|
||||
// repeatDelay: 3,
|
||||
// yoyo: true,
|
||||
ease: "back.out(1.4)",
|
||||
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",
|
||||
// align: [1, 1],
|
||||
autoRotate: true,
|
||||
start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
|
||||
end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
|
||||
offsetX: -177,
|
||||
offsetY: -43,
|
||||
alignOrigin: [0.5, 0],
|
||||
},
|
||||
onUpdate: () => {
|
||||
// if (i === 1) console.log(ani.progress());
|
||||
},
|
||||
},
|
||||
"same"
|
||||
);
|
||||
// 更新视图
|
||||
ani.seek(0);
|
||||
if (bingo && repeat) {
|
||||
setTimeout(() => {
|
||||
showDrawAni(bingo, false);
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
const pArr = [
|
||||
p1, // 1.08
|
||||
p2, // 2.68
|
||||
p3, // 6.66
|
||||
p4, // 8.88
|
||||
p5, // 谢谢 默认选中值
|
||||
p6, //以下皆为填充奖品 可随便填充
|
||||
p7,
|
||||
p8,
|
||||
p9,
|
||||
p10,
|
||||
p11,
|
||||
p12,
|
||||
p13,
|
||||
p14,
|
||||
p15,
|
||||
p16,
|
||||
p17,
|
||||
p18,
|
||||
p19,
|
||||
];
|
||||
const singleRate = 1 / pArr.length; // 路径平均分 单个元素在路径上的位置
|
||||
const delta = singleRate + 0.068; // 修正偏移量
|
||||
let rotateDelta = 0; //转到哪一个停止 | 默认为第五个奖品 谢谢参与
|
||||
if (bingo) {
|
||||
rotateDelta = (5 - bingo) * singleRate;
|
||||
}
|
||||
for (let i = 1; i < pArr.length + 1; i++) {
|
||||
let ani = gsap.to(
|
||||
[pArr[i - 1].value],
|
||||
{
|
||||
duration: 10,
|
||||
paused: bingo ? false : true, //没有中奖结果则为初始化
|
||||
// repeat: -1,
|
||||
// delay: i * 0.5 - 1,
|
||||
// stagger: 0.5,
|
||||
// repeatDelay: 3,
|
||||
// yoyo: true,
|
||||
ease: "back.out(1.4)",
|
||||
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",
|
||||
// align: [1, 1],
|
||||
autoRotate: true,
|
||||
start: i * singleRate + rotateDelta - delta, // 动画开始于路径的位置 0-1
|
||||
end: i * singleRate + 1 + rotateDelta - delta, // 动画结束于路径的位置 0-无穷
|
||||
offsetX: -177,
|
||||
offsetY: -43,
|
||||
alignOrigin: [0.5, 0],
|
||||
},
|
||||
onUpdate: () => {
|
||||
// if (i === 1) console.log(ani.progress());
|
||||
},
|
||||
onStart: () => {
|
||||
if (i == pArr.length - 1) {
|
||||
setTimeout(() => {
|
||||
// console.log("停止2");
|
||||
isStop()
|
||||
}, 5000);
|
||||
}
|
||||
},
|
||||
|
||||
onComplete: () => {},
|
||||
},
|
||||
"same"
|
||||
);
|
||||
// 更新视图
|
||||
ani.seek(0);
|
||||
if (bingo && repeat) {
|
||||
setTimeout(() => {
|
||||
showDrawAni(bingo, false);
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const btn = () => {
|
||||
console.log("抽奖");
|
||||
// 中奖奖品ID
|
||||
// 奖品 1 - 1.08
|
||||
// 奖品 2 - 2.68
|
||||
// 奖品 3 - 6.66
|
||||
// 奖品 4 - 8.88
|
||||
// 奖品 5 - 谢谢参与
|
||||
// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
|
||||
showDrawAni(2, true);
|
||||
console.log("抽奖");
|
||||
// 中奖奖品ID
|
||||
// 奖品 1 - 1.08
|
||||
// 奖品 2 - 2.68
|
||||
// 奖品 3 - 6.66
|
||||
// 奖品 4 - 8.88
|
||||
// 奖品 5 - 谢谢参与
|
||||
// 第一个参数 对应奖品对应id, 第二个参数是是否多旋转一会儿 fasle旋转一圈就停止
|
||||
showDrawAni(2, true);
|
||||
};
|
||||
|
||||
// 暴露出方法给父组件调用
|
||||
defineExpose({
|
||||
showDrawAni
|
||||
})
|
||||
|
||||
showDrawAni,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.LuckyWheelCon {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
position: absolute;
|
||||
// z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// background-color: rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
position: absolute;
|
||||
// z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// background-color: rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
|
||||
.LuckyWheel_container {
|
||||
position: absolute;
|
||||
top: 770px;
|
||||
left: 0;
|
||||
width: 760px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.LuckyWheel_container {
|
||||
position: absolute;
|
||||
top: 770px;
|
||||
left: 0;
|
||||
width: 760px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.LuckyWheel_box {
|
||||
// // border-width: 123px;
|
||||
// border-style: solid;
|
||||
// border-radius: 50%;
|
||||
// // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
|
||||
// width: 831px;
|
||||
// height: 305px;
|
||||
.LuckyWheel_box {
|
||||
// // border-width: 123px;
|
||||
// border-style: solid;
|
||||
// border-radius: 50%;
|
||||
// // box-shadow: -1.569px -17.932px 16px 0px rgba(234, 6, 16, 0.16);
|
||||
// width: 831px;
|
||||
// height: 305px;
|
||||
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 20px;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 20px;
|
||||
|
||||
.li {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #ff6000;
|
||||
}
|
||||
}
|
||||
.li {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #ff6000;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
background: #ff6000;
|
||||
}
|
||||
}
|
||||
.prize {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 96px;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
// 奖品图
|
||||
&.p-1 {
|
||||
background-image: url("~@/assets/img/p_1.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
&.p-2 {
|
||||
background-image: url("~@/assets/img/p_2.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
&.p-3 {
|
||||
background-image: url("~@/assets/img/p_3.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
&.p-4 {
|
||||
background-image: url("~@/assets/img/p_4.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
&.p-5 {
|
||||
background-image: url("~@/assets/img/p_5.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
// background-color: #f00;
|
||||
}
|
||||
.btn {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
background: #ff6000;
|
||||
}
|
||||
}
|
||||
.prize {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 96px;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
// 奖品图
|
||||
&.p-1 {
|
||||
background-image: url("~@/assets/img/p_1.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
&.p-2 {
|
||||
background-image: url("~@/assets/img/p_2.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
&.p-3 {
|
||||
background-image: url("~@/assets/img/p_3.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
&.p-4 {
|
||||
background-image: url("~@/assets/img/p_4.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
&.p-5 {
|
||||
background-image: url("~@/assets/img/p_5.png");
|
||||
background-size: 160px 96px;
|
||||
}
|
||||
// background-color: #f00;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -93,6 +93,7 @@ onBeforeMount(() => {
|
||||
if (element.type == 1) {
|
||||
prizeList.push({
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
prizeNum: element.amount,
|
||||
isGeted: element.receiveStatus,
|
||||
spe: "财富88，与“礼”共见证",
|
||||
@ -102,6 +103,7 @@ onBeforeMount(() => {
|
||||
if (element.type == 2) {
|
||||
prizeList.push({
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
prizeNum: element.amount,
|
||||
isGeted: element.receiveStatus,
|
||||
spe: "添加专属服务人员企微",
|
||||
@ -128,15 +130,28 @@ const hide = () => {
|
||||
};
|
||||
|
||||
const hidePop = () => {
|
||||
gsap.to('.GotedPop',{duration:0.5,autoAlpha:0})
|
||||
gsap.to('.myPrizeCon',{duration:0.5,autoAlpha:1,delay:0.2})
|
||||
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)
|
||||
console.log("val:", val);
|
||||
|
||||
// 红包类型未参与红包： 需先绑定牛卡号
|
||||
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) => {
|
||||
service
|
||||
.post(
|
||||
process.env.VUE_APP_API +
|
||||
"/cms-activity/cms88/redpacket/receive/" + id,
|
||||
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})
|
||||
gsap.to(".GotedPop", { duration: 1, autoAlpha: 1, delay: 0.2 });
|
||||
gsap.to(".myPrizeCon", { duration: 1, autoAlpha: 0 });
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -312,19 +323,17 @@ const getLuckyBag = (id) => {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.goted_box{
|
||||
|
||||
@include box(530px, 594px);
|
||||
.goted_box {
|
||||
@include box(530px, 594px);
|
||||
@include bg_pos("../assets/img/pop/got_luckyBag_pop.png");
|
||||
position: relative;
|
||||
|
||||
.to_index_btn{
|
||||
.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");
|
||||
|
||||
@ -146,7 +146,7 @@ onBeforeMount(() => {
|
||||
getActivityNum(),
|
||||
getIsAddService(),
|
||||
]).then((result) => {
|
||||
console.log("接口都请求完成");
|
||||
console.log("接口都请求完成",result);
|
||||
// 预加载图片资源
|
||||
pageImgsArrLoad(imgList).then(() => {
|
||||
console.log("load done");
|
||||
@ -156,11 +156,6 @@ onBeforeMount(() => {
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
// 微信环境授权
|
||||
|
||||
Loading…
Reference in New Issue
Block a user