diff --git a/src/assets/img/luckybag_2.png b/src/assets/img/luckybag_2.png index ca62960..10fd6a4 100644 Binary files a/src/assets/img/luckybag_2.png and b/src/assets/img/luckybag_2.png differ diff --git a/src/assets/img/no_prize_text.png b/src/assets/img/no_prize_text.png new file mode 100644 index 0000000..e060907 Binary files /dev/null and b/src/assets/img/no_prize_text.png differ diff --git a/src/assets/img/prize_text.png b/src/assets/img/prize_text.png new file mode 100644 index 0000000..78f9677 Binary files /dev/null and b/src/assets/img/prize_text.png differ diff --git a/src/components/Draw.vue b/src/components/Draw.vue index 18b876f..eece9e6 100644 --- a/src/components/Draw.vue +++ b/src/components/Draw.vue @@ -4,7 +4,10 @@
-
8.88元
+
+ {{ amount }}元 +
@@ -16,14 +19,12 @@
- -
-
-
- + +
+
+
-
@@ -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 + }); + } }); }; - - \ No newline at end of file diff --git a/src/components/Index.vue b/src/components/Index.vue index 4b66f5b..de7c842 100644 --- a/src/components/Index.vue +++ b/src/components/Index.vue @@ -8,9 +8,11 @@
-
-
-
{{ prizeResult }}元
+
+
+
+
+
{{ drawAmount }}元
- +
@@ -80,7 +82,7 @@ - +
@@ -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; diff --git a/src/components/LuckyWheel.vue b/src/components/LuckyWheel.vue index 5c5b449..d9bd6b8 100644 --- a/src/components/LuckyWheel.vue +++ b/src/components/LuckyWheel.vue @@ -1,43 +1,43 @@ \ No newline at end of file diff --git a/src/components/MyPrize.vue b/src/components/MyPrize.vue index 48d0d20..0c1a599 100644 --- a/src/components/MyPrize.vue +++ b/src/components/MyPrize.vue @@ -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 }); }); }; - - -