406 lines
11 KiB
Vue
406 lines
11 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>
|
||
<!-- fix bug#972: 抽奖抽中优惠券，优惠券直接自动领取并保存在优惠券卡包，不需要再通过抽奖记录进行领取 -->
|
||
<image
|
||
v-if="diceResult['isHit'] === 1 && diceResult.prizeType !== 3"
|
||
:src="webUrl+'/20240125205521152611.png'"
|
||
class="btn-result"
|
||
style="width: 240rpx;height: 68rpx"
|
||
mode="scaleToFill"
|
||
@click="closeResultModel"
|
||
/>
|
||
</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="navToPoint"/>
|
||
<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, getLotteryShareInfo } from '@/api/lottery'
|
||
import gbroMarquee from '../components/gbro-marquee/marquee.vue'
|
||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||
|
||
export default {
|
||
components: { gbroMarquee },
|
||
mixins: [pageListenMixins],
|
||
data() {
|
||
return {
|
||
ready: false,
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
lotteryDetail: {
|
||
diceConfig: {},
|
||
prizeList: [],
|
||
todayHitPrizeList: [],
|
||
todayLimit: 0
|
||
},
|
||
diceImg: '',
|
||
diceResult: {
|
||
prizeType: '', // 1-商城商品,2-积分,3-优惠券,4-谢谢参与
|
||
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: [],
|
||
shareAppImg: '',
|
||
pageKeyId: Object.freeze('lotteryIndex'),
|
||
isDisabled: false
|
||
}
|
||
},
|
||
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()
|
||
},
|
||
onShareAppMessage() {
|
||
uni.updateShareMenu({
|
||
isPrivateMessage: false,
|
||
withShareTicket: false
|
||
})
|
||
return {
|
||
title: '探寻有趣有味的生活方式',
|
||
path: '/pkg-video/views/lottery',
|
||
imageUrl: this.shareAppImg
|
||
}
|
||
},
|
||
methods: {
|
||
navToPoint() {
|
||
uni.navigateTo({url: '/pages/user/Points/index'})
|
||
},
|
||
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)
|
||
}
|
||
})
|
||
getLotteryShareInfo().then(res => {
|
||
this.shareAppImg = res.data || ''
|
||
})
|
||
},
|
||
|
||
onSubmit() {
|
||
if(this.isDisabled) return
|
||
this.isDisabled = true
|
||
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.isDisabled = false
|
||
this.diceImg = this.lotteryDetail.diceConfig['diceValues'][diceIndex]['diceValueImage']
|
||
setTimeout(() => {
|
||
this.init()
|
||
}, 1000)
|
||
}, 2800)
|
||
}
|
||
}).catch(() => {
|
||
this.isDisabled = false
|
||
})
|
||
},
|
||
|
||
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> |