369 lines
9.9 KiB
Vue
369 lines
9.9 KiB
Vue
<template>
|
|
<view class="pkg-video-lottery" v-if="ready">
|
|
<image style="width: 100vw;height: auto" :src="lotteryDetail.diceConfig['diceBackgroundImage']" mode="widthFix"/>
|
|
<image class="btn-rules" :src="webUrl+'/20240124205433052863.png'" mode="scaleToFill" @click="openRulesModel"/>
|
|
<image class="btn-log" :src="webUrl+'/20240124205425974838.png'" mode="scaleToFill" @click="navToLog"/>
|
|
|
|
<view class="dialog-mask" v-if="showDialog">
|
|
<view class="dialog-rules flex jc-center" :style="{'backgroundImage':`url(${webUrl}/20240124210831292142.png)`}"
|
|
v-if="showRules">
|
|
<rich-text style="width: 546rpx;height:590rpx;overflow: scroll;" :nodes="lotteryDetail.diceConfig['ruleText']"/>
|
|
<image class="btn-know" :src="webUrl+'/20240124210742446577.png'" mode="scaleToFill" @click="closeRulesModel"/>
|
|
</view>
|
|
|
|
<view class="dialog-result" :style="{'backgroundImage':`url(${webUrl}/20240124210703446407.png)`}"
|
|
v-if="showResult">
|
|
<view class="btn-close" @click="onlyClose"/>
|
|
<view class="img-box flex flex-col ai-center" v-if="diceResult['prizeImage']">
|
|
<image style="width: 240rpx;height: 240rpx" :src="diceResult['prizeImage']" mode="scaleToFill"/>
|
|
<image style="width: 80rpx;height: 80rpx;margin-top: 34rpx;" :src="diceResult['diceImage']"
|
|
mode="scaleToFill"/>
|
|
<view class="one-t bold tc" style="width:300rpx;margin-top: 46rpx;color:#F7E7B2;font-size: 30rpx"
|
|
v-if="diceResult['isHit']===0">感谢您的参与
|
|
</view>
|
|
<view class="one-t bold tc" style="width:320rpx;margin-top: 46rpx;color:#F7E7B2;font-size: 30rpx" v-else>
|
|
获得{{ diceResult['prizeName'] }}一份
|
|
</view>
|
|
</view>
|
|
<image class="btn-result" style="width: 240rpx;height: 68rpx" :src="webUrl+'/20240125205521152611.png'"
|
|
mode="scaleToFill" @click="closeResultModel" v-if="diceResult['isHit']!==0"/>
|
|
</view>
|
|
|
|
<view class="dialog-take flex jc-center" :style="{'backgroundImage':`url(${webUrl}/20240124210904824337.png)`}"
|
|
v-if="showTake">
|
|
<view class="btn-box flex">
|
|
<image style="width: 220rpx;height: 66rpx" :src="webUrl+'/20240124210952306625.png'" mode="scaleToFill"
|
|
@click="navToCoupons"/>
|
|
<image style="width: 220rpx;height: 66rpx;margin-left: 16rpx;" :src="webUrl+'/20240124210928974187.png'"
|
|
mode="scaleToFill" @click="closeTakeModel"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="dice-box">
|
|
<image style="width: 200rpx;height: 200rpx" :src="diceImg" mode="scaleToFill"/>
|
|
</view>
|
|
<view class="btn-submit" @click="onSubmit"/>
|
|
<view class="today-limit">{{ lotteryDetail.todayLimit }}</view>
|
|
|
|
<view class="prize-list">
|
|
<!-- mould 图文 模式 left -->
|
|
<gbro-marquee broadcastType='mould' @changeEvent='navToCoupons' direction="left" :viewHeight="300"
|
|
:broadcastIconIsDisplay="!true" :touchEvent="true" :imgdata='imgData'
|
|
:broadcastStyle='broadcastStyle2' style="width: 100%;margin-top: 20rpx;">
|
|
<block v-for="c in 2" :key="c"> <!--在小程序里遇到一个坑不能使用两个slot 所有统一复制一份做衔接 -->
|
|
<view class="flex flex-0 jc-center ai-center" style="width: 164rpx;height: 164rpx;background-size: 164rpx 164rpx;background-repeat: no-repeat;" :style="{'backgroundImage':`url(${webUrl}/20240122212856857899.png)`}" v-for="(item,index) in imgData" :key="index">
|
|
<image style="width: 120rpx;height: 120rpx" :src="item" mode="scaleToFill"></image>
|
|
</view>
|
|
</block>
|
|
</gbro-marquee>
|
|
|
|
</view>
|
|
|
|
<view class="hit-box flex" @click="navToCoupons">
|
|
<view class="img-first flex jc-center ai-center"
|
|
:style="{'backgroundImage':`url(${webUrl}/20240122212841745175.png)`}"
|
|
v-if="lotteryDetail.todayHitPrizeList.length">
|
|
<image style="width: 128rpx;height: 128rpx" :src="lotteryDetail.todayHitPrizeList['0']['prizeImage']"
|
|
mode="scaleToFill"/>
|
|
</view>
|
|
<image style="width:242rpx;height: 184rpx" :src="webUrl+'/20240122212850627682.png'" mode="scaleToFill"/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getDetail, getPrize, takePrize} from "@/api/lottery";
|
|
import gbroMarquee from "@/components/gbro-marquee/marquee.vue";
|
|
|
|
export default {
|
|
components: {gbroMarquee},
|
|
data() {
|
|
return {
|
|
ready: false,
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
lotteryDetail: {
|
|
diceConfig: {},
|
|
prizeList: [],
|
|
todayHitPrizeList: [],
|
|
todayLimit: 0
|
|
},
|
|
diceImg: '',
|
|
diceResult: {
|
|
prizeName: '',
|
|
prizeImage: '',
|
|
diceImage: '',
|
|
diceValue: 0
|
|
},
|
|
showDialog: false,
|
|
showRules: false,
|
|
showResult: false,
|
|
showTake: false,
|
|
broadcastStyle2: {
|
|
speed: 20,
|
|
font_size: "32", //字体大小(rpx)
|
|
text_color: "#333", //字体颜色
|
|
back_color: "red", //背景色
|
|
},
|
|
imgData: []
|
|
}
|
|
},
|
|
computed: {
|
|
moveDistance: function () {
|
|
const elWidth = this.lotteryDetail['prizeList'].length * 164
|
|
const diff = elWidth > 576 ? elWidth - 576 : 0
|
|
return uni.$u.getPx(diff + 'rpx')
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
getDetail().then(res => {
|
|
if (res.success) {
|
|
this.lotteryDetail = res.data
|
|
this.diceImg = this.lotteryDetail.diceConfig['diceDefaultImage']
|
|
this.ready = true
|
|
setTimeout(()=>{
|
|
this.imgData = res.data['prizeList']?.map(item => item['prizeImage'])
|
|
},1000)
|
|
}
|
|
})
|
|
},
|
|
|
|
onSubmit() {
|
|
getPrize().then(res => {
|
|
if (res.success) {
|
|
this.diceResult = res.data
|
|
const diceIndex = this.lotteryDetail.diceConfig['diceValues'].findIndex(item => item['diceValue'] === this.diceResult.diceValue)
|
|
this.diceImg = this.lotteryDetail.diceConfig['diceValues'][diceIndex]['diceValueGif']
|
|
setTimeout(() => {
|
|
this.showDialog = true
|
|
this.showResult = true
|
|
this.diceImg = this.lotteryDetail.diceConfig['diceValues'][diceIndex]['diceValueImage']
|
|
setTimeout(() => {
|
|
this.init()
|
|
}, 1000)
|
|
}, 2800)
|
|
}
|
|
})
|
|
},
|
|
|
|
navToLog() {
|
|
uni.navigateTo({url: './lottery-log'})
|
|
},
|
|
|
|
navToCoupons() {
|
|
uni.navigateTo({url: '/pkg_user/views/myCoupons'})
|
|
},
|
|
|
|
openRulesModel() {
|
|
this.showDialog = true
|
|
this.showRules = true
|
|
},
|
|
|
|
closeRulesModel() {
|
|
this.showDialog = false
|
|
this.showRules = false
|
|
},
|
|
|
|
onlyClose() {
|
|
this.showResult = false
|
|
this.showDialog = false
|
|
},
|
|
|
|
closeResultModel() {
|
|
if (this.diceResult['prizeType'] === 4) {
|
|
this.showResult = false
|
|
this.showDialog = false
|
|
return
|
|
}
|
|
if (this.diceResult['prizeType'] === 1) {
|
|
this.showResult = false
|
|
this.showDialog = false
|
|
uni.navigateTo({
|
|
url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + this.diceResult['id']
|
|
})
|
|
return
|
|
}
|
|
|
|
takePrize(this.diceResult.id).then(res => {
|
|
if (res.success) {
|
|
this.showResult = false
|
|
this.showTake = true
|
|
}
|
|
})
|
|
},
|
|
|
|
closeTakeModel() {
|
|
this.showTake = false
|
|
this.showDialog = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
image {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.pkg-video-lottery {
|
|
position: relative;
|
|
height: auto;
|
|
}
|
|
|
|
.btn-rules {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 168rpx;
|
|
width: 74rpx;
|
|
height: 170rpx
|
|
}
|
|
|
|
.btn-log {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 342rpx;
|
|
width: 72rpx;
|
|
height: 216rpx;
|
|
}
|
|
|
|
.dialog-mask {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(51, 51, 51, .6);
|
|
z-index: 10;
|
|
}
|
|
|
|
.dialog-rules {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 606rpx;
|
|
height: 760rpx;
|
|
box-sizing: border-box;
|
|
padding: 40rpx 40rpx 120rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 606rpx 724rpx;
|
|
z-index: 20;
|
|
|
|
.btn-know {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
width: 292rpx;
|
|
height: 98rpx;
|
|
}
|
|
}
|
|
|
|
.dialog-result {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 200rpx;
|
|
transform: translate(-50%, 0);
|
|
width: 476rpx;
|
|
height: 856rpx;
|
|
box-sizing: border-box;
|
|
background-repeat: no-repeat;
|
|
background-size: 476rpx 856rpx;
|
|
z-index: 20;
|
|
|
|
.btn-close {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.img-box {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 344rpx;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.btn-result {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translate(-50%, 45%);
|
|
}
|
|
}
|
|
|
|
.dialog-take {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 520rpx;
|
|
height: 428rpx;
|
|
box-sizing: border-box;
|
|
background-repeat: no-repeat;
|
|
background-size: 520rpx 428rpx;
|
|
z-index: 20;
|
|
|
|
.btn-box {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 26rpx;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
.dice-box {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 450rpx;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.btn-submit {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 694rpx;
|
|
transform: translate(-50%, 0);
|
|
width: 280rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.today-limit {
|
|
position: absolute;
|
|
left: 48.5%;
|
|
top: 788rpx;
|
|
transform: translate(-50%, 0);
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.prize-list {
|
|
position: absolute;
|
|
left: 124rpx;
|
|
top: 888rpx;
|
|
width: 576rpx;
|
|
height: 164rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hit-box {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 1176rpx;
|
|
transform: translate(-50%, 0);
|
|
height: 184rpx;
|
|
|
|
.img-first {
|
|
width: 175rpx;
|
|
height: 185rpx;
|
|
margin-right: 24rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 175rpx 185rpx;
|
|
}
|
|
}
|
|
</style> |