341 lines
8.4 KiB
Vue
341 lines
8.4 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: 40rpx;" :src="diceResult['diceImage']"
|
|
mode="scaleToFill"/>
|
|
<view class="one-t bold" style="width:300rpx;margin-top: 40rpx;color:#F7E7B2">
|
|
获得{{ diceResult['prizeName'] }}一份
|
|
</view>
|
|
</view>
|
|
<image class="btn-result" style="width: 240rpx;height: 68rpx" :src="webUrl+'/20240125205521152611.png'"
|
|
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="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>
|
|
|
|
<scroll-view class="prize-list flex" scroll-x="true" enable-flex="true">
|
|
<view class="item flex flex-0 jc-center ai-center"
|
|
:style="{'backgroundImage':`url(${webUrl}/20240122212856857899.png)`}"
|
|
v-for="(item,index) in lotteryDetail.prizeList" :key="index">
|
|
<image style="width: 120rpx;height: 120rpx" :src="item['prizeImage']" mode="scaleToFill"/>
|
|
</view>
|
|
</scroll-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 setup>
|
|
import {onMounted, ref} from '@vue/composition-api'
|
|
import {VUE_APP_RESOURCES_URL as webUrl} from '../../config/index'
|
|
import {getDetail, getPrize, takePrize} from "@/api/lottery";
|
|
|
|
onMounted(() => {
|
|
init()
|
|
})
|
|
|
|
const showDialog = ref(false)
|
|
const showRules = ref(false)
|
|
const showResult = ref(false)
|
|
const showTake = ref(false)
|
|
|
|
const ready = ref(false)
|
|
const lotteryDetail = ref({
|
|
diceConfig: {},
|
|
prizeList: [],
|
|
todayHitPrizeList: [],
|
|
todayLimit: 0
|
|
})
|
|
|
|
const navToLog = () => {
|
|
uni.navigateTo({url: './lottery-log'})
|
|
}
|
|
|
|
|
|
const openRulesModel = () => {
|
|
showDialog.value = true
|
|
showRules.value = true
|
|
}
|
|
const closeRulesModel = () => {
|
|
showDialog.value = false
|
|
showRules.value = false
|
|
}
|
|
|
|
const init = async () => {
|
|
const res = await getDetail()
|
|
if (res.success) {
|
|
lotteryDetail.value = res.data
|
|
diceImg.value = lotteryDetail.value.diceConfig['diceDefaultImage']
|
|
ready.value = true
|
|
}
|
|
}
|
|
|
|
const diceIndex = ref(0)
|
|
const diceImg = ref('')
|
|
const onSubmit = async () => {
|
|
const res = await getPrize()
|
|
if (res.success) diceResult.value = res.data
|
|
|
|
diceIndex.value = lotteryDetail.value.diceConfig['diceValues'].findIndex(item => item['diceValue'] === diceResult.value.diceValue)
|
|
diceImg.value = lotteryDetail.value.diceConfig['diceValues'][diceIndex.value]['diceValueGif']
|
|
setTimeout(() => {
|
|
diceImg.value = lotteryDetail.value.diceConfig['diceValues'][diceIndex.value]['diceValueImage']
|
|
setTimeout(() => {
|
|
init()
|
|
showDialog.value = true
|
|
showResult.value = true
|
|
}, 1000)
|
|
}, 3000)
|
|
}
|
|
|
|
const diceResult = ref({
|
|
prizeName: '',
|
|
prizeImage: '',
|
|
diceImage: '',
|
|
diceValue: 0
|
|
})
|
|
|
|
const navToCoupons = () => {
|
|
uni.navigateTo({url: '/pkg_user/views/myCoupons'})
|
|
}
|
|
|
|
const onlyClose = () => {
|
|
showResult.value = false
|
|
showDialog.value = false
|
|
}
|
|
|
|
const closeResultModel = async () => {
|
|
if (diceResult.value['prizeType'] === 4) {
|
|
showResult.value = false
|
|
showDialog.value = false
|
|
return
|
|
}
|
|
if (diceResult.value['prizeType'] === 1) {
|
|
showResult.value = false
|
|
showDialog.value = false
|
|
uni.navigateTo({
|
|
url: '/pages/order/OrderSubmission/index?lotteryRecordId=' + diceResult.value['id']
|
|
})
|
|
return
|
|
}
|
|
|
|
const res = await takePrize(diceResult.value.id)
|
|
if (res.success) {
|
|
showResult.value = false
|
|
showTake.value = true
|
|
}
|
|
}
|
|
|
|
const closeTakeModel = () => {
|
|
showTake.value = false
|
|
showDialog.value = 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: 50%;
|
|
transform: translate(-50%, -50%);
|
|
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: 345rpx;
|
|
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;
|
|
|
|
.item {
|
|
width: 164rpx;
|
|
height: 164rpx;
|
|
background-size: 164rpx 164rpx;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.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> |