feat：更新泡泡抽奖
This commit is contained in:
dengtongyu committed
1 parent
e5e2ccc95b
commit
7ae7ad5029
17 files changed
+715
-297
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@@ -2,7 +2,7 @@
|
||||
<div class="ball-content" :class="modeClass">
|
||||
<div class="ball-content-main">
|
||||
<div class="ball-content-main-notice">
|
||||
<notice :drawType="drawType" :gifts="prizeItemList"></notice>
|
||||
<notice :drawType="drawType" :gifts="lotteryPrizeItemList"></notice>
|
||||
</div>
|
||||
<div class="ball-content-main-grid">
|
||||
<lucky-grid-view></lucky-grid-view>
|
||||
@@ -23,7 +23,7 @@ export default {
|
||||
},
|
||||
props: {},
|
||||
computed: {
|
||||
...mapGetters(["prizeItemList", "drawType"]),
|
||||
...mapGetters(["lotteryPrizeItemList", "drawType"]),
|
||||
modeClass() {
|
||||
if (this.drawType === "turntable1") return "ball-xy";
|
||||
return "ball-hh";
|
||||
|
||||
@@ -1,55 +1,21 @@
|
||||
<template>
|
||||
<div class="notice" :class="modeClass">
|
||||
<swiper :options="swiperOption" class="notice-swiper">
|
||||
<swiper-slide
|
||||
class="notice-swiper-slide"
|
||||
v-for="(item, index) in recordList"
|
||||
:key="`notice-swiper-slide-${item.id}-${index}`"
|
||||
>
|
||||
<div class="notice-swiper-slide-content">
|
||||
<label>{{ item.nick }}</label>
|
||||
<span>在{{ modeName }}获得了</span>
|
||||
<label>{{ item.prizeName }}x{{ item.num }}</label>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
<swiper-notice :class="modeClass" :text="text"></swiper-notice>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryPrizeMsg } from "@/api";
|
||||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||||
import swiperNotice from "@/components/swiperNotice";
|
||||
|
||||
export default {
|
||||
name: "Notice",
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide
|
||||
swiperNotice
|
||||
},
|
||||
props: {
|
||||
drawType: {
|
||||
type: String,
|
||||
default: "turntable1"
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recordList: [],
|
||||
swiperOption: {
|
||||
direction: "vertical",
|
||||
autoplay: {
|
||||
delay: 3000 // 5秒切换一次
|
||||
},
|
||||
// 设置轮播可循环
|
||||
loop: true
|
||||
},
|
||||
interval: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
modeClass() {
|
||||
if (this.drawType === "turntable1") return "notice-xy";
|
||||
@@ -58,65 +24,15 @@ export default {
|
||||
modeName() {
|
||||
if (this.drawType === "turntable1") return "幸运扭扭蛋";
|
||||
return "豪华扭扭蛋";
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getQueryPrizeMsg();
|
||||
},
|
||||
mounted() {
|
||||
this.interval = setInterval(this.getQueryPrizeMsg, 120 * 1000);
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
methods: {
|
||||
getQueryPrizeMsg() {
|
||||
queryPrizeMsg().then(res => {
|
||||
const { code, data, msg } = res;
|
||||
if (code === 200) {
|
||||
this.recordList = data;
|
||||
} else {
|
||||
this.$toast.fail(msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
text() {
|
||||
return `在${this.modeName}获得了`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~swiper/css/swiper.css";
|
||||
.notice {
|
||||
width: 618px;
|
||||
height: 64px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin: 0 auto;
|
||||
&-swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
&-slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&-content {
|
||||
margin: 0 30px;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
font-size: 24px;
|
||||
& > label {
|
||||
color: #ffe26c;
|
||||
}
|
||||
& > span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notice-xy {
|
||||
background-image: url(../../assets/images/tz_bg.png);
|
||||
}
|
||||
|
||||
@@ -13,10 +13,6 @@ export default {
|
||||
position: {
|
||||
type: String,
|
||||
default: "left"
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -1,18 +1,30 @@
|
||||
<template>
|
||||
<div class="bobo-enter-view">
|
||||
<div class="bobo-enter-view-row">
|
||||
<bobo-enter-Btn class="bobo-enter-view-button" position="left"
|
||||
<bobo-enter-Btn
|
||||
class="bobo-enter-view-button"
|
||||
position="left"
|
||||
@click.native="clickEntryBtn('数据')"
|
||||
>数据</bobo-enter-Btn
|
||||
>
|
||||
<bobo-enter-Btn class="bobo-enter-view-button" position="right"
|
||||
<bobo-enter-Btn
|
||||
class="bobo-enter-view-button"
|
||||
position="right"
|
||||
@click.native="clickEntryBtn('记录')"
|
||||
>记录</bobo-enter-Btn
|
||||
>
|
||||
</div>
|
||||
<div class="bobo-enter-view-row">
|
||||
<bobo-enter-Btn class="bobo-enter-view-button" position="left"
|
||||
<bobo-enter-Btn
|
||||
class="bobo-enter-view-button"
|
||||
position="left"
|
||||
@click.native="clickEntryBtn('排行榜')"
|
||||
>排行榜</bobo-enter-Btn
|
||||
>
|
||||
<bobo-enter-Btn class="bobo-enter-view-button" position="right"
|
||||
<bobo-enter-Btn
|
||||
class="bobo-enter-view-button"
|
||||
position="right"
|
||||
@click.native="clickEntryBtn('奖品')"
|
||||
>奖品</bobo-enter-Btn
|
||||
>
|
||||
</div>
|
||||
@@ -25,6 +37,12 @@ export default {
|
||||
name: "BoboEnterView",
|
||||
components: {
|
||||
BoboEnterBtn
|
||||
},
|
||||
methods: {
|
||||
clickEntryBtn(text) {
|
||||
// console.log("clickEntryBtn", text);
|
||||
this.$emit("clickEntryBtn", text);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="bobo-lottery-count">
|
||||
<button
|
||||
class="count-button"
|
||||
v-for="(item, index) in ticketRuleList"
|
||||
:key="`count-button-${index}`"
|
||||
:class="index === active ? 'count-button-active' : ''"
|
||||
@click="clcikButton(index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "BoboLotteryCount",
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["ticketRuleList", "ticketRuleConfig"])
|
||||
},
|
||||
created() {
|
||||
this.getqueryTicketRule("turntable1");
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["SetRuleType"]),
|
||||
...mapActions(["getqueryTicketRule"]),
|
||||
clcikButton(index) {
|
||||
this.active = index;
|
||||
this.SetRuleType(this.ticketRuleConfig[this.active].ruleType);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bobo-lottery-count {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.count-button {
|
||||
width: 140px;
|
||||
height: 64px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: url(../../assets/images/bobo/but_unchecked.png);
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin: 0 20px;
|
||||
&-active {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
background-image: url(../../assets/images/bobo/but_select.png);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div class="bobo-yq-view">
|
||||
<div class="bobo-yq-view-text"></div>
|
||||
<div class="bobo-yq-view-text">
|
||||
<label>次数：</label>
|
||||
<span>{{ remainTicketNum }}</span>
|
||||
</div>
|
||||
<div class="bobo-yq-view-btn">
|
||||
<button></button>
|
||||
</div>
|
||||
@@ -8,8 +11,24 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "BoboYqView"
|
||||
name: "BoboYqView",
|
||||
props: {
|
||||
uid: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["remainTicketNum"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["getQueryTicketNum"])
|
||||
},
|
||||
created() {
|
||||
this.getQueryTicketNum({ uid: this.uid });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -18,15 +37,27 @@ export default {
|
||||
width: 346px;
|
||||
height: 59px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-size: 100% 100%;
|
||||
background-image: url(../../assets/images/bobo/gmcx_bg.png);
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
&-text {
|
||||
flex: 1;
|
||||
font-size: 22px;
|
||||
line-height: 59px;
|
||||
& > label {
|
||||
color: #ffffff;
|
||||
padding-left: 20px;
|
||||
}
|
||||
& > span {
|
||||
color: #ffe26c;
|
||||
}
|
||||
}
|
||||
&-btn {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
padding-right: 10px;
|
||||
padding-top: 6px;
|
||||
& > button {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import BoboLottery from "./main";
|
||||
|
||||
BoboLottery.install = function(Vue) {
|
||||
Vue.component(BoboLottery.name, BoboLottery);
|
||||
};
|
||||
|
||||
export default BoboLottery;
|
||||
@@ -1,11 +1,105 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="bobo-lottery">
|
||||
<bobo-yq-view :uid="uid"></bobo-yq-view>
|
||||
<bobo-lottery-count></bobo-lottery-count>
|
||||
<button class="bobo-lottery-button" @touchend="clickLottery"></button>
|
||||
</div>
|
||||
<lottery-prizes-dialog
|
||||
v-model="show"
|
||||
:list="lotteryPrizeItemList"
|
||||
></lottery-prizes-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import boboYqView from "./boboYqView.vue";
|
||||
import boboLotteryCount from "./boboLotteryCount.vue";
|
||||
import lotteryPrizesDialog from "@/components/lotteryPrizesDialog";
|
||||
import { mapGetters, mapMutations, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "BoboLottery"
|
||||
name: "BoboLottery",
|
||||
components: {
|
||||
boboYqView,
|
||||
boboLotteryCount,
|
||||
lotteryPrizesDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"canLottery",
|
||||
"remainTicketNum",
|
||||
"curTicketRuleValue",
|
||||
"lotteryPrizeItemList"
|
||||
]),
|
||||
uid() {
|
||||
return this.$route.query.uid;
|
||||
},
|
||||
roomUid() {
|
||||
return this.$route.query.roomUid;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["SetCanLottery"]),
|
||||
...mapActions(["runLottery"]),
|
||||
clickLottery() {
|
||||
if (this.canLottery) {
|
||||
this.SetCanLottery(false);
|
||||
this.Lottery();
|
||||
} else {
|
||||
this.$toast.fail("您点太快了，本次抽奖还没结束哦！");
|
||||
}
|
||||
},
|
||||
Lottery() {
|
||||
if (
|
||||
this.remainTicketNum === 0 ||
|
||||
this.remainTicketNum < this.curTicketRuleValue
|
||||
) {
|
||||
this.$toast.fail("余额不足！");
|
||||
return;
|
||||
}
|
||||
|
||||
this.runLottery({
|
||||
uid: this.uid,
|
||||
roomUid: this.roomUid
|
||||
})
|
||||
.then(res => {
|
||||
this.SetCanLottery(true);
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
this.show = true;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.SetCanLottery(true);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.bobo-lottery {
|
||||
margin-top: 212px;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
&-button {
|
||||
width: 320px;
|
||||
height: 100px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: url(../../assets/images/bobo/but_cpp.png);
|
||||
&:active {
|
||||
background-image: url(../../assets/images/bobo/but_cpp_press.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -25,8 +25,7 @@
|
||||
import balanceView from "./balanceView.vue";
|
||||
import lotteryBtn from "./lotteryBtn.vue";
|
||||
import ticketView from "./ticketView.vue";
|
||||
import { queryTicketNum, queryTicketRule } from "@/api";
|
||||
import { mapMutations, mapGetters } from "vuex";
|
||||
import { mapMutations, mapGetters, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "BottomView",
|
||||
components: {
|
||||
@@ -40,8 +39,18 @@ export default {
|
||||
default: "turntable1"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["remainTicketNum", "ticketRule"]),
|
||||
...mapGetters([
|
||||
"remainTicketNum",
|
||||
"ticketRule",
|
||||
"ticketRuleList",
|
||||
"ticketRuleConfig"
|
||||
]),
|
||||
modeClass() {
|
||||
if (this.drawType === "turntable1") return "bottom-view-xy";
|
||||
return "bottom-view-hh";
|
||||
@@ -51,92 +60,26 @@ export default {
|
||||
},
|
||||
roomUid() {
|
||||
return this.$route.query.roomUid;
|
||||
},
|
||||
ticketRuleList() {
|
||||
const list = [];
|
||||
if (!this.ticketRule) return list;
|
||||
for (let index = 0; index < this.ticketRuleConfig.length; index++) {
|
||||
const element = this.ticketRuleConfig[index];
|
||||
const val = this.ticketRule[element.ruleType];
|
||||
list.push({
|
||||
label: element.name,
|
||||
desc: `${val}张鱼券`,
|
||||
value: val,
|
||||
ruleType: element.ruleType
|
||||
});
|
||||
}
|
||||
return list;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
drawType() {
|
||||
this.active = 0;
|
||||
this.getqueryTicketRule();
|
||||
this.getqueryTicketRule(this.drawType);
|
||||
},
|
||||
active() {
|
||||
this.SetRuleType(this.ticketRuleConfig[this.active].ruleType);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
ticketRuleConfig: [
|
||||
{
|
||||
ruleType: "one",
|
||||
name: "1次",
|
||||
index: 0
|
||||
},
|
||||
{
|
||||
ruleType: "ten",
|
||||
name: "10次",
|
||||
index: 1
|
||||
},
|
||||
{
|
||||
ruleType: "hundred",
|
||||
name: "100次",
|
||||
index: 2
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getQueryTicketNum();
|
||||
this.getqueryTicketRule();
|
||||
this.getQueryTicketNum({ uid: this.uid });
|
||||
this.getqueryTicketRule(this.drawType);
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["SetRuleType", "SetRemainTicketNum", "SetTicketRule"]),
|
||||
getQueryTicketNum() {
|
||||
queryTicketNum({ uid: this.uid })
|
||||
.then(res => {
|
||||
const { code, data, msg } = res;
|
||||
if (code === 200) {
|
||||
this.SetRemainTicketNum(data.num || 0);
|
||||
} else {
|
||||
this.$toast.fail(msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$toast.fail("获取余额失败！");
|
||||
});
|
||||
},
|
||||
getqueryTicketRule() {
|
||||
queryTicketRule({ drawType: this.drawType })
|
||||
.then(res => {
|
||||
const { code, data, msg } = res;
|
||||
if (code === 200) {
|
||||
// this.ticketRule = data || null;
|
||||
this.SetTicketRule(data || null);
|
||||
} else {
|
||||
this.$toast.fail(msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$toast.fail("获取规则次数失败！");
|
||||
});
|
||||
},
|
||||
...mapMutations(["SetRuleType"]),
|
||||
...mapActions(["getqueryTicketRule", "getQueryTicketNum"]),
|
||||
clickTicketView(item, index) {
|
||||
this.active = index;
|
||||
// this.SetRuleType(item.ruleType);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import LotteryPrizesDialog from "./main";
|
||||
|
||||
LotteryPrizesDialog.install = function(Vue) {
|
||||
Vue.component(LotteryPrizesDialog.name, LotteryPrizesDialog);
|
||||
};
|
||||
|
||||
export default LotteryPrizesDialog;
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<van-dialog
|
||||
v-model="show"
|
||||
confirmButtonColor="#9E98FF"
|
||||
title="恭喜您获得奖品"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<div class="lucky-grid-prize">
|
||||
<div
|
||||
class="lucky-grid-prize-item"
|
||||
v-for="item in list"
|
||||
:key="`lucky_grid_prize_item_${item.prizeId}`"
|
||||
>
|
||||
<div class="lucky-grid-prize-item-img">
|
||||
<img :src="item.prizeImgUrl" :alt="item.prizeName" />
|
||||
</div>
|
||||
<div class="lucky-grid-prize-item-name">
|
||||
{{ item.prizeName }}x{{ item.prizeNum }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LotteryPrizesDialog",
|
||||
model: {
|
||||
prop: "visible",
|
||||
event: "change"
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (val) this.show = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeDialog() {
|
||||
this.show = false;
|
||||
this.$emit("change", this.show);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.lucky-grid-prize {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30px;
|
||||
&-item {
|
||||
width: 150px;
|
||||
&-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&-name {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -13,38 +13,23 @@
|
||||
@end="endCallBack"
|
||||
/>
|
||||
|
||||
<van-dialog
|
||||
<lottery-prizes-dialog
|
||||
v-model="showDialog"
|
||||
confirmButtonColor="#9E98FF"
|
||||
title="恭喜您获得奖品"
|
||||
>
|
||||
<div class="lucky-grid-prize">
|
||||
<div
|
||||
class="lucky-grid-prize-item"
|
||||
v-for="item in prizeItemList"
|
||||
:key="`lucky_grid_prize_item_${item.prizeId}`"
|
||||
>
|
||||
<div class="lucky-grid-prize-item-img">
|
||||
<img :src="item.prizeImgUrl" :alt="item.prizeName" />
|
||||
</div>
|
||||
<div class="lucky-grid-prize-item-name">
|
||||
{{ item.prizeName }}x{{ item.prizeNum }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-dialog>
|
||||
:list="lotteryPrizeItemList"
|
||||
></lottery-prizes-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LuckyGrid } from "vue-luck-draw";
|
||||
import { doLottery, saveLog } from "@/api";
|
||||
import lotteryPrizesDialog from "@/components/lotteryPrizesDialog";
|
||||
import { mapMutations, mapGetters, mapActions } from "vuex";
|
||||
import eventBus from "@/lib/eventBus";
|
||||
export default {
|
||||
name: "LuckyGridView",
|
||||
components: {
|
||||
LuckyGrid
|
||||
LuckyGrid,
|
||||
lotteryPrizesDialog
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
@@ -86,14 +71,22 @@ export default {
|
||||
],
|
||||
opImages: require("@/assets/images/hig_p.png"),
|
||||
heightLineImages: require("@/assets/images/hig.png"),
|
||||
defaultImage: require("@/assets/images/logo_tm.png"),
|
||||
showDialog: false,
|
||||
lotteryData: null,
|
||||
timeout: false,
|
||||
request: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["ruleType", "prizeIdList", "remainTicketNum", "drawType"]),
|
||||
...mapGetters([
|
||||
"ruleType",
|
||||
"prizeIdList",
|
||||
"remainTicketNum",
|
||||
"drawType",
|
||||
"maxVauePrizeIndex",
|
||||
"curTicketRuleValue",
|
||||
"lotteryPrizeItemList"
|
||||
]),
|
||||
prizesImages() {
|
||||
if (this.drawType === "turntable1") return this.blueImages;
|
||||
return this.goldImages;
|
||||
@@ -104,37 +97,6 @@ export default {
|
||||
roomUid() {
|
||||
return this.$route.query.roomUid;
|
||||
},
|
||||
prizeItemList() {
|
||||
if (!this.lotteryData) return null;
|
||||
return this.lotteryData.prizeItemList;
|
||||
},
|
||||
prizeids() {
|
||||
if (!this.lotteryData) return null;
|
||||
return this.lotteryData.prizeIdList;
|
||||
},
|
||||
maxPrizeVaue() {
|
||||
let list = [];
|
||||
for (let index = 0; index < this.prizeItemList.length; index++) {
|
||||
const element = this.prizeItemList[index];
|
||||
list.push(element.platformValue);
|
||||
}
|
||||
let max = Math.max(...list);
|
||||
return max;
|
||||
},
|
||||
maxVauePrizeId() {
|
||||
let id = 0;
|
||||
for (let index = 0; index < this.prizeItemList.length; index++) {
|
||||
const element = this.prizeItemList[index];
|
||||
if (this.maxPrizeVaue === element.platformValue) {
|
||||
id = element.prizeId;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return id;
|
||||
},
|
||||
maxVauePrizeIndex() {
|
||||
return this.getPrizeIndex(this.maxVauePrizeId);
|
||||
},
|
||||
runTime() {
|
||||
if (this.ruleType === "one") return 1000;
|
||||
if (this.ruleType === "ten") return 2000;
|
||||
@@ -185,10 +147,10 @@ export default {
|
||||
methods: {
|
||||
...mapMutations([
|
||||
"SetRemainTicketNum",
|
||||
"SetCanLottery",
|
||||
"SetPrizeItemList"
|
||||
"SetCanLottery"
|
||||
// "SetPrizeItemList"
|
||||
]),
|
||||
...mapActions(["getQueryPrizeInfo"]),
|
||||
...mapActions(["getQueryPrizeInfo", "runLottery"]),
|
||||
queryPrizeInfo() {
|
||||
this.getQueryPrizeInfo().then(res => {
|
||||
const { code, data } = res;
|
||||
@@ -209,44 +171,25 @@ export default {
|
||||
this.timeout = false;
|
||||
this.request = false;
|
||||
this.$refs.LuckDraw.play();
|
||||
doLottery({
|
||||
|
||||
this.runLottery({
|
||||
uid: this.uid,
|
||||
roomUid: this.roomUid,
|
||||
drawType: this.drawType,
|
||||
sendMessage: true,
|
||||
deviceId: "abc",
|
||||
ruleType: this.ruleType
|
||||
roomUid: this.roomUid
|
||||
}).then(res => {
|
||||
const { code, data, msg } = res;
|
||||
const { code } = res;
|
||||
if (code === 200) {
|
||||
this.request = true;
|
||||
this.lotteryData = data;
|
||||
this.SetRemainTicketNum(data.remainTicketNum || 0);
|
||||
if (this.timeout && this.request)
|
||||
this.stopLuckDraw(this.maxVauePrizeIndex);
|
||||
this.postSaveLog();
|
||||
} else {
|
||||
this.$toast.fail(msg);
|
||||
}
|
||||
});
|
||||
|
||||
// console.log("runTime", this.runTime);
|
||||
|
||||
setTimeout(() => {
|
||||
this.timeout = true;
|
||||
if (this.timeout && this.request)
|
||||
this.stopLuckDraw(this.maxVauePrizeIndex);
|
||||
}, this.runTime);
|
||||
},
|
||||
postSaveLog() {
|
||||
saveLog({
|
||||
uid: this.uid,
|
||||
prizeids: JSON.stringify(this.prizeids),
|
||||
prizeIndex: this.maxVauePrizeIndex,
|
||||
createdTime: this.prizeItemList[0].createTime,
|
||||
prizeIdList: JSON.stringify(this.prizeIdList)
|
||||
});
|
||||
},
|
||||
configPrizes(prizeInfo) {
|
||||
const prizes = [];
|
||||
this.luckyNum = 1;
|
||||
@@ -259,7 +202,11 @@ export default {
|
||||
// fonts: [{ text: item.name, top: "70%" }],
|
||||
imgs: [
|
||||
{ src: this.prizesImages[0], width: "100%", top: "8%" },
|
||||
{ src: prizeItem.prizeImgUrl, width: "70%", top: "20%" },
|
||||
{
|
||||
src: (prizeItem && prizeItem.prizeImgUrl) || this.defaultImage,
|
||||
width: "70%",
|
||||
top: "20%"
|
||||
},
|
||||
{
|
||||
src: this.opImages,
|
||||
activeSrc: this.heightLineImages,
|
||||
@@ -292,7 +239,7 @@ export default {
|
||||
endCallBack() {
|
||||
this.showDialog = true;
|
||||
this.SetCanLottery(true);
|
||||
this.SetPrizeItemList(this.prizeItemList);
|
||||
// this.SetPrizeItemList(this.prizeItemList);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -308,27 +255,4 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.lucky-grid-prize {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30px;
|
||||
&-item {
|
||||
width: 150px;
|
||||
&-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&-name {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
import SwiperNotice from "./main";
|
||||
|
||||
SwiperNotice.install = function(Vue) {
|
||||
Vue.component(SwiperNotice.name, SwiperNotice);
|
||||
};
|
||||
|
||||
export default SwiperNotice;
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="notice">
|
||||
<swiper :options="swiperOption" class="notice-swiper">
|
||||
<swiper-slide
|
||||
class="notice-swiper-slide"
|
||||
v-for="(item, index) in recordList"
|
||||
:key="`notice-swiper-slide-${item.id}-${index}`"
|
||||
>
|
||||
<div class="notice-swiper-slide-content">
|
||||
<label>{{ item.nick }}</label>
|
||||
<span>{{ text }}</span>
|
||||
<label>{{ item.prizeName }}x{{ item.num }}</label>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryPrizeMsg } from "@/api";
|
||||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||||
export default {
|
||||
name: "SwiperNotice",
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide
|
||||
},
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recordList: [],
|
||||
swiperOption: {
|
||||
direction: "vertical",
|
||||
autoplay: {
|
||||
delay: 3000 // 5秒切换一次
|
||||
},
|
||||
// 设置轮播可循环
|
||||
loop: true
|
||||
},
|
||||
interval: 0
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getQueryPrizeMsg();
|
||||
},
|
||||
mounted() {
|
||||
this.interval = setInterval(this.getQueryPrizeMsg, 120 * 1000);
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
methods: {
|
||||
getQueryPrizeMsg() {
|
||||
queryPrizeMsg().then(res => {
|
||||
const { code, data, msg } = res;
|
||||
if (code === 200) {
|
||||
this.recordList = data;
|
||||
} else {
|
||||
this.$toast.fail(msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~swiper/css/swiper.css";
|
||||
.notice {
|
||||
width: 618px;
|
||||
height: 64px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin: 0 auto;
|
||||
&-swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
&-slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&-content {
|
||||
margin: 0 30px;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
font-size: 24px;
|
||||
& > label {
|
||||
color: #ffe26c;
|
||||
}
|
||||
& > span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+168
-9
@@ -1,7 +1,13 @@
|
||||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
import { Toast } from "vant";
|
||||
import { queryPrizeInfo } from "@/api";
|
||||
import {
|
||||
queryPrizeInfo,
|
||||
queryTicketRule,
|
||||
doLottery,
|
||||
saveLog,
|
||||
queryTicketNum
|
||||
} from "@/api";
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
@@ -12,12 +18,30 @@ export default new Vuex.Store({
|
||||
turntable1: [],
|
||||
turntable2: []
|
||||
},
|
||||
prizeItemList: [],
|
||||
// prizeItemList: [],
|
||||
ruleType: "one",
|
||||
remainTicketNum: 0,
|
||||
ticketRule: null,
|
||||
canLottery: true,
|
||||
lotteryRecordRateVo: {}
|
||||
lotteryRecordRateVo: {},
|
||||
ticketRuleConfig: [
|
||||
{
|
||||
ruleType: "one",
|
||||
name: "1次",
|
||||
index: 0
|
||||
},
|
||||
{
|
||||
ruleType: "ten",
|
||||
name: "10次",
|
||||
index: 1
|
||||
},
|
||||
{
|
||||
ruleType: "hundred",
|
||||
name: "100次",
|
||||
index: 2
|
||||
}
|
||||
],
|
||||
lotteryData: null
|
||||
},
|
||||
getters: {
|
||||
drawType: state => {
|
||||
@@ -29,9 +53,9 @@ export default new Vuex.Store({
|
||||
curDrawTypePrizeInfo: state => {
|
||||
return state.prizeInfo[state.drawType];
|
||||
},
|
||||
prizeItemList: state => {
|
||||
return state.prizeItemList;
|
||||
},
|
||||
// prizeItemList: state => {
|
||||
// return state.prizeItemList;
|
||||
// },
|
||||
prizeIdList: (state, getters) => {
|
||||
const { curDrawTypePrizeInfo } = getters;
|
||||
const list = [];
|
||||
@@ -59,6 +83,74 @@ export default new Vuex.Store({
|
||||
},
|
||||
lotteryRecordRateVo: state => {
|
||||
return state.lotteryRecordRateVo;
|
||||
},
|
||||
ticketRuleConfig: state => {
|
||||
return state.ticketRuleConfig;
|
||||
},
|
||||
ticketRuleList: (state, getters) => {
|
||||
const list = [];
|
||||
if (!getters.ticketRule) return list;
|
||||
for (let index = 0; index < getters.ticketRuleConfig.length; index++) {
|
||||
const element = getters.ticketRuleConfig[index];
|
||||
const val = getters.ticketRule[element.ruleType];
|
||||
list.push({
|
||||
label: element.name,
|
||||
desc: `${val}张鱼券`,
|
||||
value: val,
|
||||
ruleType: element.ruleType
|
||||
});
|
||||
}
|
||||
return list;
|
||||
},
|
||||
lotteryData: state => {
|
||||
return state.lotteryData;
|
||||
},
|
||||
lotteryPrizeItemList: (state, getters) => {
|
||||
if (!getters.lotteryData) return null;
|
||||
return getters.lotteryData.prizeItemList;
|
||||
},
|
||||
prizeids: (state, getters) => {
|
||||
if (!getters.lotteryData) return null;
|
||||
return getters.lotteryData.prizeIdList;
|
||||
},
|
||||
maxPrizeVaue: (state, getters) => {
|
||||
let list = [];
|
||||
for (
|
||||
let index = 0;
|
||||
index < getters.lotteryPrizeItemList.length;
|
||||
index++
|
||||
) {
|
||||
const element = getters.lotteryPrizeItemList[index];
|
||||
list.push(element.platformValue);
|
||||
}
|
||||
let max = Math.max(...list);
|
||||
return max;
|
||||
},
|
||||
maxVauePrizeId: (state, getters) => {
|
||||
let id = 0;
|
||||
for (
|
||||
let index = 0;
|
||||
index < getters.lotteryPrizeItemList.length;
|
||||
index++
|
||||
) {
|
||||
const element = getters.lotteryPrizeItemList[index];
|
||||
if (getters.maxPrizeVaue === element.platformValue) {
|
||||
id = element.prizeId;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return id;
|
||||
},
|
||||
maxVauePrizeIndex: (state, getters) => {
|
||||
let num = null;
|
||||
for (let index = 0; index < getters.prizeIdList.length; index++) {
|
||||
const element = getters.prizeIdList[index];
|
||||
if (element === getters.maxVauePrizeId) {
|
||||
num = index;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return num;
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
@@ -69,9 +161,9 @@ export default new Vuex.Store({
|
||||
const { drawType, list } = payload;
|
||||
state.prizeInfo[drawType || state.drawType] = list;
|
||||
},
|
||||
SetPrizeItemList(state, payload) {
|
||||
state.prizeItemList = payload;
|
||||
},
|
||||
// SetPrizeItemList(state, payload) {
|
||||
// state.prizeItemList = payload;
|
||||
// },
|
||||
SetRuleType(state, payload) {
|
||||
state.ruleType = payload;
|
||||
},
|
||||
@@ -86,6 +178,9 @@ export default new Vuex.Store({
|
||||
},
|
||||
SetLotteryRecordRateVo(state, payload) {
|
||||
state.lotteryRecordRateVo = payload;
|
||||
},
|
||||
SetLotteryData(state, payload) {
|
||||
state.lotteryData = payload;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@@ -106,6 +201,70 @@ export default new Vuex.Store({
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
},
|
||||
getqueryTicketRule({ commit }, drawType) {
|
||||
queryTicketRule({ drawType: drawType })
|
||||
.then(res => {
|
||||
const { code, data, msg } = res;
|
||||
if (code === 200) {
|
||||
commit("SetTicketRule", data || null);
|
||||
} else {
|
||||
Toast.fail(msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
Toast.fail("获取规则次数失败！");
|
||||
});
|
||||
},
|
||||
runLottery({ state, commit, dispatch }, option) {
|
||||
return new Promise((resolve, reject) => {
|
||||
doLottery({
|
||||
uid: option.uid,
|
||||
roomUid: option.roomUid,
|
||||
drawType: state.drawType,
|
||||
sendMessage: true,
|
||||
deviceId: "abc",
|
||||
ruleType: state.ruleType
|
||||
})
|
||||
.then(res => {
|
||||
const { code, data, msg } = res;
|
||||
if (code === 200) {
|
||||
commit("SetRemainTicketNum", data.remainTicketNum || 0);
|
||||
commit("SetLotteryData", data);
|
||||
dispatch("postSaveLog", option);
|
||||
} else {
|
||||
Toast.fail(msg);
|
||||
}
|
||||
resolve(res);
|
||||
})
|
||||
.catch(err => {
|
||||
Toast.fail("抽奖发生意外错误！");
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
},
|
||||
postSaveLog({ getters }, option) {
|
||||
saveLog({
|
||||
uid: option.uid,
|
||||
prizeids: JSON.stringify(getters.prizeids),
|
||||
prizeIndex: getters.maxVauePrizeIndex,
|
||||
createdTime: getters.lotteryPrizeItemList[0].createTime,
|
||||
prizeIdList: JSON.stringify(getters.prizeIdList)
|
||||
});
|
||||
},
|
||||
getQueryTicketNum({ commit }, option) {
|
||||
queryTicketNum({ uid: option.uid })
|
||||
.then(res => {
|
||||
const { code, data, msg } = res;
|
||||
if (code === 200) {
|
||||
commit("SetRemainTicketNum", data.num || 0);
|
||||
} else {
|
||||
Toast.fail(msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
Toast.fail("获取余额失败！");
|
||||
});
|
||||
}
|
||||
},
|
||||
modules: {}
|
||||
|
||||
+65
-3
@@ -1,17 +1,75 @@
|
||||
<template>
|
||||
<div class="bobo">
|
||||
<bobo-enter-view class="bobo-enter"></bobo-enter-view>
|
||||
<swiper-notice class="bobo-notice" :text="text"></swiper-notice>
|
||||
<bobo-enter-view
|
||||
class="bobo-enter"
|
||||
@clickEntryBtn="clickEntryBtn"
|
||||
></bobo-enter-view>
|
||||
|
||||
<bobo-lottery></bobo-lottery>
|
||||
|
||||
<button class="bobo-gz-button"></button>
|
||||
|
||||
<van-popup
|
||||
v-model="show"
|
||||
position="left"
|
||||
:style="{ height: '100%', width: '100%' }"
|
||||
:close-on-click-overlay="false"
|
||||
close-icon="arrow-left"
|
||||
closeable
|
||||
close-icon-position="top-left"
|
||||
get-container="#app"
|
||||
>
|
||||
<!-- <prizes-view></prizes-view> -->
|
||||
<component :is="curComponentsName"></component>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import boboEnterView from "@/components/boboEnterView";
|
||||
import boboLottery from "@/components/boboLottery";
|
||||
import swiperNotice from "@/components/swiperNotice";
|
||||
export default {
|
||||
name: "Bobo",
|
||||
components: {
|
||||
boboEnterView
|
||||
boboEnterView,
|
||||
boboLottery,
|
||||
swiperNotice,
|
||||
prizesView: resolve => require(["./prizesView.vue"], resolve),
|
||||
ruleView: resolve => require(["./ruleView.vue"], resolve),
|
||||
recordView: resolve => require(["./recordView.vue"], resolve),
|
||||
rankView: resolve => require(["./rankView.vue"], resolve),
|
||||
dataView: resolve => require(["./dataView.vue"], resolve)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: "戳中了",
|
||||
show: false,
|
||||
curBtnText: "",
|
||||
componentsName: {
|
||||
规则: "rule-view",
|
||||
奖品: "prizes-view",
|
||||
排行榜: "rank-view",
|
||||
记录: "record-view",
|
||||
数据: "data-view"
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
curComponentsName() {
|
||||
return this.componentsName[this.curBtnText];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickEntryBtn(val) {
|
||||
this.curBtnText = val;
|
||||
this.show = true;
|
||||
},
|
||||
clickLeftTopButton() {
|
||||
this.curBtnText = "数据";
|
||||
this.show = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -25,8 +83,12 @@ export default {
|
||||
background-image: url(../assets/images/bobo/bobo_bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
overflow: hidden;
|
||||
&-notice {
|
||||
margin-top: 100px;
|
||||
}
|
||||
&-enter {
|
||||
padding-top: 180px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
&-gz-button {
|
||||
width: 78px;
|
||||
|
||||
Reference in new issue
Block a user