656 lines
16 KiB
Vue
656 lines
16 KiB
Vue
<template>
|
|
<view class="lottery-page">
|
|
<custom-navbar title="活动页面" :showUser="true" backgroundColor="#fff" borderBottom="none"></custom-navbar>
|
|
<view class="content" :style="{backgroundImage: `url(${activityDetails.back_img})` }">
|
|
<image class="lottery-rule" src="/static/images/icons/lottery-rule.png" @click="openRule"></image>
|
|
<view class="lottery">
|
|
<image :src="activityDetails.lottery_img" class="lottery-bj"></image>
|
|
<view class="lottery-card">
|
|
<dengbo-lotteryGrid ref="lottery" @lottery-end="onLotteryEnd" :prizes="prizes" v-if="prizes.length">
|
|
<template slot="centerButton">
|
|
<view class="lottery-card-center">
|
|
<view class="lottery-card-center-text" style="padding-top: 40rpx;">
|
|
剩余{{ activityDetails.user_num }}次</view>
|
|
<view class="lottery-card-center-text">抽奖机会</view>
|
|
</view>
|
|
</template>
|
|
</dengbo-lotteryGrid>
|
|
</view>
|
|
<view class="lottery-button" @click="startLottery"></view>
|
|
</view>
|
|
|
|
|
|
<view class="lottery-method" v-if="activityMethod && activityMethod.length">
|
|
<view class="lottery-method-header">
|
|
<image class="lottery-method-header" src="/static/images/background/lotteryBj13.png"
|
|
mode="widthFix"></image>
|
|
</view>
|
|
<view class="lottery-method-content">
|
|
<view class="lottery-method-content-item" v-for="(item,index) in activityMethod" :key="index">
|
|
{{ item.text }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="award-winning">
|
|
<view class="winning-heard">
|
|
<image class="winning-heard" src="/static/images/background/lotteryBj3.png"></image>
|
|
</view>
|
|
<view class="winning-content" v-if="recordList && recordList.length">
|
|
|
|
<view class="winning-item flex-row-center-between" v-for="(item,index) in recordList" :key="index">
|
|
<view class="flex-row-center">
|
|
<view class="winning-item-left">
|
|
<image class="winning-item-left-img" :src="item.prize_img " mode="aspectFill"></image>
|
|
</view>
|
|
<view class="winning-item-center">
|
|
<view class="winning-item-center-text1">{{ item.prize_name }}</view>
|
|
<view class="winning-item-center-text2">{{ item.lottery_time }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="winning-item-right flex-row-center-center" @click="goDetail(item.id)">去查看</view>
|
|
</view>
|
|
</view>
|
|
<view class="winning-content flex-row-center-center" v-else>
|
|
<view class="winning-item-no ">
|
|
<image src="/static/images/shop/noPrize.png" class="winning-item-no-img"></image>
|
|
<view class="winning-item-no-text">暂无中奖记录哟~</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="winning-footer">
|
|
<image class="winning-footer" src="/static/images/background/lotteryBj3-footer.png"></image>
|
|
<image class="winning-more" v-if="recordList && recordList.length" @click="goList"
|
|
src="/static/images/background/lottery-more.png">
|
|
</image>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<uv-popup ref="popup1" bgColor="transparent">
|
|
<view class="popup1-close" @click="closeRule">
|
|
<image class="popup1-close-img" src="/static/images/icons/lottery-close.png"></image>
|
|
</view>
|
|
<view class="popup1-content">
|
|
<scroll-view scroll-y class="popup1-content-scroll">
|
|
<uv-parse :content="activityDetails.rule_text"></uv-parse>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
</uv-popup>
|
|
|
|
<uv-popup ref="popup2" bgColor="transparent">
|
|
<view class="popup2-noWin" :class="{popup2NoWin2:activityDetails.user_num==0}" v-if="drawResule.type==1">
|
|
<view class="popup2-noWin-btn" @click="noWinClick"></view>
|
|
</view>
|
|
<view class="popup2-content" v-else>
|
|
<view class="popup2-content-title">恭喜你获得</view>
|
|
<view class="popup2-content-card">
|
|
<image class="popup2-content-card-img" :src="drawResule.simple_img"></image>
|
|
<view class="popup2-content-card-texts">
|
|
<view class="popup2-content-card-text1">{{ drawResule.show_text }}</view>
|
|
<view class="popup2-content-card-text2">兑换方式：{{ drawResule.type==2?"线上 ":"邮寄"}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="popup2-content-time">请在{{ drawResule.claim_deadline }}前兑换</view>
|
|
<view class="popup2-content-btn flex-row-center-center" v-if="activityDetails.user_num==0"
|
|
@click="goDetail(drawResule.record_id)">去领奖</view>
|
|
<view class="popup2-content-btn flex-row-center-center" v-else @click="continueDraw">继续抽奖</view>
|
|
<view class="popup2-content-go flex-row-center-center" @click="goList">
|
|
<text>查看礼品</text>
|
|
<image class="popup2-content-go-cion" src="/static/images/icons/lottery-right.png"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="popup2-close" @click="close">
|
|
<image class="popup2-close-img" src="/static/images/icons/lottery-close.png"></image>
|
|
</view>
|
|
</uv-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "@/utils/request";
|
|
import transferMoney from "./components/transferMoney.vue";
|
|
import dengboLotteryGrid from "@/components/dengbo-lotteryGrid/components/dengbo-lotteryGrid/dengbo-lotteryGrid.vue";
|
|
export default {
|
|
components: {
|
|
transferMoney,
|
|
dengboLotteryGrid
|
|
},
|
|
name: "LotteryIndex",
|
|
data() {
|
|
return {
|
|
isSubmit: false,
|
|
activity_id: 1, //活动id
|
|
recordList: [], //中奖列表
|
|
activityDetails: {},
|
|
prizeItemStyle: {
|
|
borderRadius: '10rpx',
|
|
fontWeight: '500',
|
|
fontSize: '23rpx',
|
|
color: '#E26E30',
|
|
},
|
|
prizes: [],
|
|
drawResule: {},
|
|
activityMethod: []
|
|
}
|
|
},
|
|
async onLoad(options) {
|
|
if (options.activity_id) {
|
|
this.activity_id = options.activity_id
|
|
}
|
|
this.getActivityDetails()
|
|
this.getActivityMethod()
|
|
this.record()
|
|
},
|
|
methods: {
|
|
goDetail(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/lottery/winDetail?id=${id}`
|
|
});
|
|
this.close()
|
|
},
|
|
goList() {
|
|
uni.navigateTo({
|
|
url: `/pages/lottery/list?activity_id=${this.activity_id}`
|
|
});
|
|
this.close()
|
|
},
|
|
close() {
|
|
this.$refs.popup2.close();
|
|
},
|
|
open() {
|
|
this.$refs.popup2.open('center');
|
|
},
|
|
closeRule() {
|
|
this.$refs.popup1.close();
|
|
},
|
|
openRule() {
|
|
this.$refs.popup1.open('bottom');
|
|
},
|
|
async getActivityDetails() {
|
|
await request.post("/user/lottery/getActivityDetails", {
|
|
id: this.activity_id
|
|
}).then(async (res) => {
|
|
if (res.code == 200) {
|
|
this.activityDetails = res.data
|
|
this.prizes = res.data.prize_list
|
|
this.activityDetails.back_img = await this.getImagePath(res.data.back_img)
|
|
this.activityDetails.lottery_img = await this.getImagePath(res.data.lottery_img)
|
|
await this.activityDetails.prize_list.forEach(async (item)=>{
|
|
item.simple_img = await this.getImagePath(item.simple_img)
|
|
})
|
|
}
|
|
});
|
|
},
|
|
async getActivityMethod() {
|
|
await request.post("/user/lottery/getActivityMethod", {
|
|
activity_id: this.activity_id
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
this.activityMethod = res.data.list
|
|
}
|
|
});
|
|
},
|
|
async record() {
|
|
await request.post("/user/lottery/record", {
|
|
activity_id: this.activity_id,
|
|
page: 1,
|
|
limit: 5,
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
this.recordList = res.data.list
|
|
}
|
|
});
|
|
},
|
|
noWinClick() {
|
|
if (this.activityDetails.user_num > 0) {
|
|
this.continueDraw()
|
|
} else {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
},
|
|
//继续抽奖
|
|
continueDraw() {
|
|
this.close()
|
|
this.startLottery()
|
|
},
|
|
startLottery() {
|
|
if (this.isSubmit && this.prizes.length > 0) {
|
|
return
|
|
}
|
|
console.log("开始抽奖")
|
|
this.isSubmit = true
|
|
request.post("/user/lottery/draw", {
|
|
id: this.activity_id,
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.data?.id) {
|
|
// // 开始抽奖
|
|
// this.isLotteryRunning = true;
|
|
this.drawResule = res.data
|
|
this.$refs.lottery.startLottery(res.data.id);
|
|
} else {
|
|
uni.showToast({
|
|
title: "抽奖错误",
|
|
icon: "none",
|
|
});
|
|
}
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
this.isSubmit = false
|
|
}
|
|
}).catch((err) => {
|
|
this.isSubmit = false
|
|
})
|
|
|
|
},
|
|
onLotteryEnd(prize) {
|
|
setTimeout(() => {
|
|
this.isSubmit = false
|
|
}, 100)
|
|
|
|
if (this.activityDetails.user_num >= 1) {
|
|
this.activityDetails.user_num = this.activityDetails.user_num - 1
|
|
}
|
|
setTimeout(() => {
|
|
this.open()
|
|
this.record()
|
|
this.$refs.lottery.clearLotteryState();
|
|
}, 300)
|
|
|
|
|
|
console.log(prize)
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.lottery-page {
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-size: 100% auto;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
padding-bottom: 58rpx;
|
|
position: relative;
|
|
|
|
.lottery-rule {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 218rpx;
|
|
width: 133rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.lottery {
|
|
margin-top: 264rpx;
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 703rpx;
|
|
height: 780rpx;
|
|
|
|
.lottery-bj {
|
|
width: 703rpx;
|
|
height: 780rpx;
|
|
}
|
|
|
|
.lottery-card {
|
|
width: 450rpx;
|
|
height: 450rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-52%, -51%);
|
|
|
|
.lottery-card-center {
|
|
width: 142rpx;
|
|
height: 142rpx;
|
|
background-image: url("/static/images/background/lotteryBj5.png");
|
|
background-size: cover;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
|
|
.lottery-card-center-text {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FAE1D2;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lottery-button {
|
|
width: 310rpx;
|
|
height: 135rpx;
|
|
position: absolute;
|
|
bottom: 14rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.lottery-method {
|
|
width: 689rpx;
|
|
margin: 0 auto;
|
|
margin-top: 64rpx;
|
|
|
|
.lottery-method-header {
|
|
width: 689rpx;
|
|
height: 99rpx;
|
|
}
|
|
|
|
.lottery-method-content {
|
|
border-radius: 0 0 30rpx 30rpx;
|
|
background: #FCF0E2;
|
|
|
|
.lottery-method-content-item {
|
|
padding: 30rpx 0rpx;
|
|
margin: 0rpx 24rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #343433;
|
|
line-height: 40rpx;
|
|
border-bottom: 1rpx solid #E5D9CA;
|
|
}
|
|
}
|
|
}
|
|
|
|
.award-winning {
|
|
width: 689rpx;
|
|
margin-top: 40rpx;
|
|
|
|
.winning-heard {
|
|
width: 689rpx;
|
|
height: 125rpx;
|
|
}
|
|
|
|
.winning-footer {
|
|
width: 689rpx;
|
|
height: 109rpx;
|
|
position: relative;
|
|
|
|
.winning-more {
|
|
position: absolute;
|
|
width: 160rpx;
|
|
height: 48rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.winning-content {
|
|
background: #fcf0e2;
|
|
width: 689rpx;
|
|
min-height: 100rpx;
|
|
padding: 0 22rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
gap: 21rpx;
|
|
flex-wrap: wrap;
|
|
|
|
.winning-item-no {
|
|
.winning-item-no-img {
|
|
width: 290rpx;
|
|
height: 192rpx;
|
|
}
|
|
|
|
.winning-item-no-text {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #908981;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.winning-item {
|
|
width: 634rpx;
|
|
padding: 26rpx 20rpx;
|
|
box-sizing: border-box;
|
|
background: #FEE9CE;
|
|
border-radius: 20rpx;
|
|
border: 1px solid #FEDEBE;
|
|
|
|
.winning-item-left {
|
|
width: 89rpx;
|
|
height: 89rpx;
|
|
background: #FCF0E2;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
overflow: auto;
|
|
|
|
.winning-item-left-img {
|
|
width: 68rpx;
|
|
height: 72rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.winning-item-center {
|
|
margin-left: 19rpx;
|
|
max-width: 320rpx;
|
|
.winning-item-center-text1 {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #76200A;
|
|
}
|
|
|
|
.winning-item-center-text2 {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #A86A4A;
|
|
}
|
|
}
|
|
|
|
.winning-item-right {
|
|
width: 140rpx;
|
|
height: 58rpx;
|
|
background-image: url("/static/images/background/lotteryBj6.png");
|
|
background-size: cover;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.popup1-close {
|
|
height: 67rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.popup1-close-img {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-right: 40rpx;
|
|
}
|
|
}
|
|
|
|
.popup1-content {
|
|
background-image: url("/static/images/background/lotteryBj7.png");
|
|
background-size: 100% auto;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
width: 750rpx;
|
|
height: 1250rpx;
|
|
max-height: 80vh;
|
|
|
|
.popup1-content-scroll {
|
|
padding: 263rpx 40rpx 0 40rpx;
|
|
box-sizing: border-box;
|
|
height: 1250rpx;
|
|
max-height: 80vh;
|
|
}
|
|
}
|
|
|
|
.popup2-close {
|
|
height: 61rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 58rpx;
|
|
|
|
.popup2-close-img {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.popup2-noWin {
|
|
background-image: url("/static/images/background/lotteryBj12.png");
|
|
background-size: 100% auto;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
width: 644rpx;
|
|
height: 845rpx;
|
|
position: relative;
|
|
|
|
.popup2-noWin-btn {
|
|
width: 322rpx;
|
|
height: 107rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 46rpx;
|
|
}
|
|
}
|
|
|
|
.popup2NoWin2 {
|
|
background-image: url("/static/images/background/lotteryBj11.png");
|
|
}
|
|
|
|
.popup2-content {
|
|
background-image: url("/static/images/background/lotteryBj8.png");
|
|
background-size: 100% auto;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
width: 644rpx;
|
|
height: 907rpx;
|
|
|
|
.popup2-content-title {
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #831903;
|
|
line-height: 42rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding-top: 373rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.popup2-content-card {
|
|
background-image: url("/static/images/background/lotteryBj9.png");
|
|
background-size: cover;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
width: 562rpx;
|
|
height: 152rpx;
|
|
margin: 14rpx 41rpx 0 41rpx;
|
|
position: relative;
|
|
|
|
.popup2-content-card-img {
|
|
width: 107rpx;
|
|
height: 107rpx;
|
|
position: absolute;
|
|
left: 28rpx;
|
|
top: 28rpx;
|
|
border-radius: 10rpx;
|
|
// background: red;
|
|
}
|
|
|
|
.popup2-content-card-texts {
|
|
position: absolute;
|
|
left: 268rpx;
|
|
top: 32rpx;
|
|
|
|
.popup2-content-card-text1 {
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
line-height: 50rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-left: 15rpx;
|
|
}
|
|
|
|
.popup2-content-card-text2 {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #FDF1F1;
|
|
line-height: 37rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.popup2-content-time {
|
|
margin-top: 20rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #B37760;
|
|
line-height: 37rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
.popup2-content-btn {
|
|
margin: 0 auto;
|
|
background-image: url("/static/images/background/lotteryBj10.png");
|
|
background-size: cover;
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
width: 322rpx;
|
|
height: 107rpx;
|
|
font-weight: 500;
|
|
font-size: 42rpx;
|
|
color: #FFFFFF;
|
|
text-shadow: 0px 2px 7px rgba(0, 0, 0, 0.25);
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.popup2-content-go {
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #814B2D;
|
|
text-align: center;
|
|
font-style: normal;
|
|
|
|
.popup2-content-go-cion {
|
|
width: 10rpx;
|
|
height: 20rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |