mrr.sj.front/pages/lottery/index.vue

656 lines
16 KiB
Vue
Raw Normal View History

2026-03-24 11:45:13 +08:00
<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>