<template>
|
<view class="layout">
|
<!-- 获取更多机会按钮 - 右上角悬浮 -->
|
<view class="floating-more-btn" @tap="showMoreChances">
|
<text class="floating-btn-icon">🎁</text>
|
</view>
|
|
<!-- 剩余抽奖次数 -->
|
<view class="remaining-times">
|
<text class="times-label">剩余抽奖次数:</text>
|
<text class="times-count">{{ remainingTimes }}</text>
|
</view>
|
|
<!-- 转盘抽奖 -->
|
<l-dialer :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer" />
|
|
<!-- 奖品展示 -->
|
<view class="prize-section">
|
<view class="section-title">奖品池</view>
|
<view class="prize-grid">
|
<view class="prize-item" v-for="(prize, index) in prizeList" :key="prize.id">
|
<image :src="prize.img" class="prize-img" />
|
<text class="prize-name">{{ prize.name }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 最近中奖信息 -->
|
<view class="winners-section">
|
<view class="section-title">最近中奖</view>
|
<scroll-view scroll-y="true" class="winners-list" :scroll-top="scrollTop">
|
<view class="winner-item" v-for="(winner, index) in recentWinners" :key="index">
|
<text class="winner-name">{{ winner.nickname }}</text>
|
<text class="winner-prize">获得 {{ winner.prizeName }}</text>
|
<text class="winner-time">{{ winner.time }}</text>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 自定义中奖弹窗 -->
|
<view class="prize-modal" v-if="showPrizeModal" @tap="closePrizeModal">
|
<view class="prize-modal-content" @tap.stop>
|
<view class="modal-close" @tap="closePrizeModal">×</view>
|
|
<view class="congratulations-text" v-if="currentPrize.id !== 'thanks'">
|
🎉 恭喜您 🎉
|
</view>
|
<view class="sorry-text" v-else>
|
😔 很遗憾 😔
|
</view>
|
|
<view class="prize-display">
|
<image :src="currentPrize.img" class="modal-prize-img" />
|
<text class="modal-prize-name">{{ currentPrize.name }}</text>
|
</view>
|
|
<view class="prize-result-text" v-if="currentPrize.id !== 'thanks'">
|
获得了 {{ currentPrize.name }}
|
</view>
|
<view class="prize-result-text" v-else>
|
{{ currentPrize.name }}，再接再厉！
|
</view>
|
|
<view class="modal-buttons">
|
<button class="confirm-btn" @tap="closePrizeModal">确定</button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 获取更多抽奖机会弹窗 -->
|
<view class="more-chances-modal" v-if="showMoreChancesModal" @tap="closeMoreChancesModal">
|
<view class="more-chances-modal-content" @tap.stop>
|
<view class="modal-close" @tap="closeMoreChancesModal">×</view>
|
|
<view class="modal-title">
|
<text class="title-icon">🎯</text>
|
<text class="title-text">获取更多抽奖机会</text>
|
</view>
|
|
<view class="chances-grid">
|
<button class="chance-item" open-type="share">
|
<view class="chance-icon">👥</view>
|
<text class="chance-title">分享好友</text>
|
<text class="chance-subtitle">+1次机会</text>
|
</button>
|
<!-- <view class="chance-item" @tap="shareToTimeline">
|
<view class="chance-icon">🌐</view>
|
<text class="chance-title">分享朋友圈</text>
|
<text class="chance-subtitle">+1次机会</text>
|
</view> -->
|
<view class="chance-item" @tap="watchVideo">
|
<view class="chance-icon">🎬</view>
|
<text class="chance-title">浏览视频</text>
|
<text class="chance-subtitle">+1次机会</text>
|
</view>
|
<view class="chance-item" @tap="browseProduct">
|
<view class="chance-icon">🛍️</view>
|
<text class="chance-title">浏览商品</text>
|
<text class="chance-subtitle">+1次机会</text>
|
</view>
|
<view class="chance-item " @tap="goShopping">
|
<view class="chance-icon">🛒</view>
|
<text class="chance-title">去购物</text>
|
<text class="chance-subtitle">享受购物乐趣</text>
|
</view>
|
</view>
|
|
<view class="modal-tip">
|
<text class="tip-text">💡 完成任务即可获得额外抽奖机会</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</template>
|
<script>
|
import bgConfig from '@/pages/prize/PrizeDetail/prize-bgConfig.js'
|
import {
|
prizeInfo,
|
prizeNum,
|
prize,
|
grantRecord
|
} from '@/api/prize.js'
|
export default {
|
data() {
|
return {
|
bg: bgConfig.bg,
|
// 剩余抽奖次数
|
remainingTimes: 0,
|
// 弹窗控制
|
showPrizeModal: false,
|
showMoreChancesModal: false,
|
currentPrize: {},
|
// 自动滚动控制
|
scrollTimer: null,
|
scrollTop: 0,
|
activityId: '',
|
// 最近中奖信息
|
originalWinners: [],
|
// 奖品列表，
|
prizeList: [],
|
// 分享朋友圈尝试标记
|
shareTimelineAttempt: false,
|
activityCover:'',
|
activityName:''
|
};
|
},
|
computed: {
|
recentWinners() {
|
// 将原始数据重复3次，确保无缝循环
|
return [...this.originalWinners]
|
}
|
},
|
async onLoad(option) {
|
const pages = getCurrentPages()
|
console.log('================pages ',pages)
|
this.activityId = option.id
|
const prize = await prizeInfo(this.activityId);
|
this.activityCover = prize.data.data.activityCover
|
this.activityName = prize.data.data.activityName
|
console.log(prize.data)
|
this.prizeList = prize.data.data.prizeInfoVOS.map(item => {
|
return {
|
id: item.id,
|
name: item.prizeName,
|
img: item.prizeImg
|
}
|
})
|
this.prizeList = [...this.prizeList]
|
this.prizeList.push({
|
id: 'notWIn',
|
name: "谢谢参与"
|
})
|
await this.getUnmber(this.activityId)
|
await this.getGrantRecord(this.activityId)
|
},
|
// onShareTimeline(e) {
|
// console.log('------------------>', e)
|
// // 如果用户尝试过分享朋友圈，给予奖励
|
// if (this.shareTimelineAttempt) {
|
// this.remainingTimes++;
|
// this.shareTimelineAttempt = false;
|
// uni.showToast({
|
// title: '获得1次抽奖机会',
|
// icon: 'success'
|
// });
|
// }
|
// return {
|
// title: '快来参与抽奖活动吧！',
|
// path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId
|
// }
|
// },
|
//可能会使用到
|
mounted() {
|
// this.startAutoScroll()
|
},
|
onShareAppMessage() {
|
return{
|
title: this.activityName,
|
path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId,
|
imageUrl:this.activityCover,
|
success(e) {
|
console.log("分享成功",e)
|
},fail(e) {
|
console.log('分享失败',e)
|
}
|
}
|
},
|
beforeDestroy() {
|
this.stopAutoScroll()
|
},
|
methods: {
|
async getUnmber(id) {
|
const prizeNums = await prizeNum(id);
|
this.remainingTimes = prizeNums.data.data
|
},
|
async getGrantRecord(id) {
|
const record = await grantRecord(id);
|
this.originalWinners = record.data.data || []
|
console.log('-------------->', record.data.data)
|
|
},
|
startAutoScroll() {
|
this.scrollTimer = setInterval(() => {
|
this.scrollTop += 1
|
// 每个item约80rpx高度，当滚动到第二组数据的中间位置时，重置到第一组对应位置
|
const itemHeight = 80
|
const originalLength = this.originalWinners.length
|
const oneSetHeight = originalLength * itemHeight
|
|
// 当滚动到第二组数据时，无缝重置到第一组对应位置
|
if (this.scrollTop >= oneSetHeight) {
|
this.scrollTop = 0
|
}
|
}, 50)
|
},
|
stopAutoScroll() {
|
if (this.scrollTimer) {
|
clearInterval(this.scrollTimer)
|
this.scrollTimer = null
|
}
|
},
|
onDone(index) {
|
const prize = this.prizeList[index]
|
this.currentPrize = prize
|
this.showPrizeModal = true
|
},
|
closePrizeModal() {
|
this.showPrizeModal = false
|
this.currentPrize = {}
|
},
|
// 显示获取更多机会弹窗
|
showMoreChances() {
|
this.showMoreChancesModal = true
|
},
|
// 关闭获取更多机会弹窗
|
closeMoreChancesModal() {
|
this.showMoreChancesModal = false
|
},
|
// 分享到微信好友
|
shareToFriend() {
|
uni.showShareMenu({
|
menus: ['weixin'],
|
success: (res) => {
|
console.log('分享菜单显示成功', res);
|
// 增加抽奖次数
|
this.remainingTimes++;
|
// 关闭弹窗
|
this.closeMoreChancesModal();
|
uni.showToast({
|
title: '获得1次抽奖机会',
|
icon: 'success'
|
});
|
},
|
fail: (err) => {
|
console.log('分享菜单显示失败', err);
|
uni.showToast({
|
title: '分享失败',
|
icon: 'none'
|
});
|
}
|
});
|
},
|
// 分享到朋友圈
|
shareToTimeline() {
|
// 由于uni-app的限制，朋友圈分享需要在onShareTimeline中处理
|
// 这里我们先显示提示，然后通过右上角分享到朋友圈
|
this.closeMoreChancesModal();
|
uni.showModal({
|
title: '分享到朋友圈',
|
content: '请点击右上角的分享按钮，选择"分享到朋友圈"',
|
showCancel: false,
|
success: () => {
|
// 标记用户已尝试分享朋友圈
|
this.shareTimelineAttempt = true;
|
}
|
});
|
},
|
// 浏览视频
|
watchVideo() {
|
// 这里可以跳转到视频页面或弹出视频播放器
|
this.closeMoreChancesModal();
|
uni.showModal({
|
title: '浏览视频',
|
content: '即将跳转到视频页面',
|
success: (res) => {
|
if (res.confirm) {
|
// 模拟观看视频完成，增加抽奖次数
|
// 这里可以添加跳转到具体视频页面的逻辑
|
uni.navigateTo({
|
url: '/pages/tabbar/index/home'
|
});
|
}
|
}
|
});
|
},
|
// 浏览商品
|
browseProduct() {
|
// 跳转到商品页面
|
this.closeMoreChancesModal();
|
uni.showModal({
|
title: '浏览商品',
|
content: '即将跳转到商品广场',
|
success: (res) => {
|
if (res.confirm) {
|
// 这里可以添加跳转到具体商品页面的逻辑
|
uni.navigateTo({
|
url: '/pages/commodity-square/commoditySquare'
|
});
|
}
|
}
|
});
|
},
|
// 去购物
|
goShopping() {
|
this.closeMoreChancesModal();
|
uni.showModal({
|
title: '去购物',
|
content: '即将跳转到购物车',
|
success: (res) => {
|
if (res.confirm) {
|
// 或者跳转到购物车
|
uni.navigateTo({
|
url: '/pages/cusbar/cart/cartList'
|
});
|
}
|
}
|
});
|
},
|
async onClick() {
|
// 检查剩余次数
|
if (this.remainingTimes <= 0) {
|
uni.showToast({
|
title: '抽奖次数已用完',
|
icon: 'none'
|
})
|
return
|
}
|
const prizeDraw = await prize(this.activityId);
|
let winId = 'notWIn'
|
if (prizeDraw.data.code == 200) {
|
winId = prizeDraw.data.data.id
|
}
|
const findInfo = this.prizeList.findIndex(item => {
|
return item.id == winId
|
})
|
// 减少剩余次数
|
this.remainingTimes--
|
|
// 奖品的索引
|
this.$refs.dialer.run(findInfo)
|
await this.getGrantRecord(this.activityId)
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.layout {
|
width: 100%;
|
min-height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
background: #f5f5f5;
|
padding: 20rpx;
|
}
|
|
/* 剩余抽奖次数 */
|
.remaining-times {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-bottom: 40rpx;
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
padding: 20rpx 40rpx;
|
border-radius: 50rpx;
|
box-shadow: 0 4rpx 20rpx rgba(255, 107, 107, 0.3);
|
}
|
|
.times-label {
|
color: white;
|
font-size: 28rpx;
|
font-weight: 500;
|
margin-right: 10rpx;
|
}
|
|
.times-count {
|
color: white;
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
|
/* 右上角悬浮获取更多机会按钮 */
|
.floating-more-btn {
|
position: fixed;
|
top: 30rpx;
|
right: 30rpx;
|
width: 100rpx;
|
height: 100rpx;
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
|
z-index: 999;
|
transition: all 0.3s ease;
|
}
|
|
.floating-more-btn::before {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
opacity: 0.8;
|
animation: pulse 2s infinite;
|
}
|
|
@keyframes pulse {
|
0% {
|
transform: scale(1);
|
opacity: 0.8;
|
}
|
|
50% {
|
transform: scale(1.1);
|
opacity: 0.4;
|
}
|
|
100% {
|
transform: scale(1);
|
opacity: 0.8;
|
}
|
}
|
|
.floating-more-btn:active {
|
transform: scale(0.95);
|
box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.5);
|
}
|
|
.floating-btn-icon {
|
font-size: 36rpx;
|
color: white;
|
z-index: 1;
|
position: relative;
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
|
}
|
|
/* 奖品展示 */
|
.prize-section {
|
width: 100%;
|
margin-top: 40rpx;
|
background: white;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.section-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
text-align: center;
|
margin-bottom: 20rpx;
|
}
|
|
.prize-grid {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: flex-start;
|
}
|
.prize-item:nth-child(n+1){
|
margin-left: 15rpx;
|
}
|
.prize-item {
|
width: 22%;
|
margin-bottom: 20rpx;
|
text-align: center;
|
background: #f8f9ff;
|
border-radius: 15rpx;
|
padding: 15rpx;
|
box-sizing: border-box;
|
}
|
|
.prize-img {
|
width: 60rpx;
|
height: 60rpx;
|
border-radius: 10rpx;
|
}
|
|
.prize-name {
|
display: block;
|
font-size: 22rpx;
|
color: #666;
|
margin-top: 8rpx;
|
white-space: normal;
|
word-break: break-all;
|
line-height: 1.2;
|
}
|
|
/* 最近中奖信息 */
|
.winners-section {
|
width: 100%;
|
margin-top: 40rpx;
|
background: white;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.winners-list {
|
max-height: 320rpx;
|
overflow-y: scroll;
|
-webkit-overflow-scrolling: touch;
|
}
|
|
.winners-list::-webkit-scrollbar {
|
width: 4rpx;
|
}
|
|
.winners-list::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 2rpx;
|
}
|
|
.winners-list::-webkit-scrollbar-thumb {
|
background: #ff6b6b;
|
border-radius: 2rpx;
|
}
|
|
.winners-list::-webkit-scrollbar-thumb:hover {
|
background: #e55555;
|
}
|
|
.winner-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 0;
|
height: 80rpx;
|
min-height: 80rpx;
|
border-bottom: 1px solid #f0f0f0;
|
box-sizing: border-box;
|
}
|
|
.winner-item:last-child {
|
border-bottom: none;
|
}
|
|
.winner-name {
|
font-size: 26rpx;
|
color: #333;
|
font-weight: 500;
|
flex: 1;
|
}
|
|
.winner-prize {
|
font-size: 26rpx;
|
color: #ff6b6b;
|
font-weight: bold;
|
flex: 2;
|
text-align: center;
|
}
|
|
.winner-time {
|
font-size: 22rpx;
|
color: #999;
|
flex: 1;
|
text-align: right;
|
}
|
|
/* 中奖弹窗样式 */
|
.prize-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.6);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 9999;
|
}
|
|
.prize-modal-content {
|
background: white;
|
border-radius: 30rpx;
|
width: 80%;
|
max-width: 500rpx;
|
padding: 40rpx;
|
text-align: center;
|
position: relative;
|
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
}
|
|
.modal-close {
|
position: absolute;
|
top: 20rpx;
|
right: 30rpx;
|
font-size: 40rpx;
|
color: #999;
|
font-weight: bold;
|
width: 50rpx;
|
height: 50rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.congratulations-text {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #ff6b6b;
|
margin-bottom: 30rpx;
|
}
|
|
.sorry-text {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #666;
|
margin-bottom: 30rpx;
|
}
|
|
.prize-display {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin: 30rpx 0;
|
}
|
|
.modal-prize-img {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 15rpx;
|
margin-bottom: 20rpx;
|
border: 3rpx solid #ff6b6b;
|
}
|
|
.modal-prize-name {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.prize-result-text {
|
font-size: 28rpx;
|
color: #666;
|
margin: 20rpx 0 30rpx;
|
line-height: 1.4;
|
}
|
|
.modal-buttons {
|
margin-top: 30rpx;
|
}
|
|
.confirm-btn {
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
color: white;
|
font-size: 30rpx;
|
border: none;
|
border-radius: 50rpx;
|
padding: 20rpx 60rpx;
|
font-weight: bold;
|
}
|
|
.confirm-btn::after {
|
border: none;
|
}
|
|
/* 获取更多机会弹窗样式 */
|
.more-chances-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.6);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 9999;
|
}
|
|
.more-chances-modal-content {
|
background: white;
|
border-radius: 30rpx;
|
width: 90%;
|
max-width: 600rpx;
|
max-height: 80vh;
|
padding: 40rpx;
|
position: relative;
|
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
overflow-y: auto;
|
}
|
|
.modal-title {
|
text-align: center;
|
margin-bottom: 40rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.title-icon {
|
font-size: 50rpx;
|
margin-bottom: 15rpx;
|
display: block;
|
}
|
|
.title-text {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.chances-grid {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
gap: 20rpx;
|
margin-bottom: 30rpx;
|
}
|
.chances-grid button{
|
padding: 25rpx 15rpx;
|
margin: 0;
|
line-height: normal;
|
border: none;
|
}
|
.chances-grid button::after{
|
border: none;
|
}
|
.chance-item {
|
width: 45%;
|
background: linear-gradient(45deg, #ff6b6b, #feca57);
|
border-radius: 15rpx;
|
padding: 25rpx 15rpx;
|
text-align: center;
|
position: relative;
|
overflow: hidden;
|
transition: all 0.3s ease;
|
box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.3);
|
}
|
|
.chance-item::before {
|
content: '';
|
position: absolute;
|
top: -50%;
|
left: -50%;
|
width: 200%;
|
height: 200%;
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
transform: rotate(45deg);
|
transition: all 0.6s ease;
|
opacity: 0;
|
}
|
|
.chance-item:active::before {
|
opacity: 1;
|
transform: translateX(100%) translateY(100%) rotate(45deg);
|
}
|
|
.chance-item:active {
|
transform: scale(0.98);
|
box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.4);
|
}
|
|
.chance-item-large {
|
width: 100%;
|
background: linear-gradient(45deg, #feca57, #ff9ff3);
|
box-shadow: 0 4rpx 20rpx rgba(254, 202, 87, 0.3);
|
}
|
|
.chance-item-large:active {
|
box-shadow: 0 2rpx 15rpx rgba(254, 202, 87, 0.4);
|
}
|
|
.chance-icon {
|
font-size: 40rpx;
|
margin-bottom: 10rpx;
|
display: block;
|
filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
|
}
|
|
.chance-title {
|
display: block;
|
color: white;
|
font-size: 28rpx;
|
font-weight: bold;
|
margin-bottom: 5rpx;
|
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
|
}
|
|
.chance-subtitle {
|
display: block;
|
color: rgba(255, 255, 255, 0.95);
|
font-size: 22rpx;
|
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.modal-tip {
|
text-align: center;
|
padding: 20rpx;
|
background: linear-gradient(45deg, #f8f9ff, #e3f2fd);
|
border-radius: 15rpx;
|
border: 2rpx dashed #667eea;
|
}
|
|
.tip-text {
|
color: #667eea;
|
font-size: 26rpx;
|
font-weight: 500;
|
}
|
</style>
|
