This commit is contained in:
2026-07-23 14:00:03 +08:00
committed by charles
parent 553543b5b3
commit 4b7334d278
3 changed files with 112 additions and 95 deletions
+111 -94
View File
@@ -1,24 +1,38 @@
<template>
<view class="lottery-page">
<view class="back" style="width:100rpx;height:100rpx;" @click="jumpMine">
<up-image src="/static/common/left_b.png" width="22" height="22" bgColor="#f1f6ff00"></up-image>
<view class="back" style="width: 100rpx; height: 100rpx" @click="jumpMine">
<up-image
src="/static/common/left_b.png"
width="22"
height="22"
bgColor="#f1f6ff00"
></up-image>
</view>
<!-- 中奖记录 -->
<view class="history" @click="jumpWinningRecord">中奖记录
</view>
<view class="history" @click="jumpWinningRecord">中奖记录 </view>
<view class="remain-count"> 剩余抽奖次数: {{ prizesObj.times }} </view>
<!-- 九宫格抽奖组件 -->
<LotteryGrid :prizesObj="prizesObj" :remainCount="prizesObj.times" :is-disabled="isRotating"
@start="handleStartLottery" @complete="handleLotteryComplete" />
<view class="notice-view">
<view class="notice-li">
<u-notice-bar :text="noticeList" color="#fff" icon="" justifyContent="center"
direction="column" bgColor="rgba(0,0,0,0)"></u-notice-bar>
</view>
</view>
<!-- <LotteryGrid
:prizesObj="prizesObj"
:remainCount="prizesObj.times"
:is-disabled="isRotating"
@start="handleStartLottery"
@complete="handleLotteryComplete"
/> -->
<view class="notice-view">
<view class="notice-li">
<u-notice-bar
:text="noticeList"
color="#fff"
icon=""
justifyContent="center"
direction="column"
bgColor="rgba(0,0,0,0)"
></u-notice-bar>
</view>
</view>
<!-- 规则 -->
<view class="rule">
<view class="rule-title"> 活动规则</view>
@@ -26,24 +40,26 @@
</view>
<!-- 中奖结果弹窗 -->
<ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" />
<!-- #ifdef APP-PLUS -->
<!-- <ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" /> -->
<!-- #endif -->
</view>
</template>
<script>
import LotteryGrid from './components/LotteryGrid.vue'
import ResultModal from './components/ResultModal.vue'
import { getActivityList, raffleExecute,getCommonRaffle } from '@/api/raffle.js';
// import LotteryGrid from "./components/LotteryGrid.vue";
// import ResultModal from './components/ResultModal.vue'
import { getActivityList, getCommonRaffle } from "@/api/raffle.js";
export default {
components: {
LotteryGrid,
ResultModal
// LotteryGrid,
// ResultModal
},
data() {
return {
// 奖品配置数据
noticeList:[],
noticeList: [],
prizesObj: {
prizes: [],
},
@@ -51,45 +67,44 @@ export default {
// 状态管理
isRotating: false, // 是否正在抽奖
showResult: false, // 是否显示结果弹窗
currentPrize: [],// 当前中奖奖品
currentPrize: [], // 当前中奖奖品
backPath: null,
}
},
onLoad(option) {
const backPath = option.backPath;
console.log("option backPath", backPath);
if (backPath && backPath !== 'null') {
this.backPath = backPath;
}
this.getCommon();
};
},
// onLoad(option) {
// const backPath = option.backPath;
// console.log("option backPath", backPath);
// if (backPath && backPath !== "null") {
// this.backPath = backPath;
// }
// this.getCommon();
// },
mounted() {
this.getActivityList();
},
methods: {
getCommon(){
getCommonRaffle().then(res=>{
let tmpArr = res.data && res.data.length ? res.data : [];
this.noticeList = [];
tmpArr.forEach(item=>{
if(item.type == 'quicken'){
item.text = `恭喜 ${item.user} 获得${item.parValue}个${item.prizeName}`;
}else if(item.type == 'balance'){
item.text = `恭喜 ${item.user} 获得${item.parValue}元${item.prizeName}`;
}else if(item.type == 'redpacket'){
item.text = `恭喜 ${item.user} 获得${item.parValue}${item.prizeName}`;
}
this.noticeList.push(item.text);
})
console.log('getCommonRaffle',res)
})
},
getCommon() {
getCommonRaffle().then((res) => {
let tmpArr = res.data && res.data.length ? res.data : [];
this.noticeList = [];
tmpArr.forEach((item) => {
if (item.type == "quicken") {
item.text = `恭喜 ${item.user} 获得${item.parValue}个${item.prizeName}`;
} else if (item.type == "balance") {
item.text = `恭喜 ${item.user} 获得${item.parValue}元${item.prizeName}`;
} else if (item.type == "redpacket") {
item.text = `恭喜 ${item.user} 获得${item.parValue}${item.prizeName}`;
}
this.noticeList.push(item.text);
});
console.log("getCommonRaffle", res);
});
},
/**
* 查询活动详情
*/
* 查询活动详情
*/
async getActivityList() {
const { bizcode, data } = await getActivityList();
if (bizcode === 100) {
@@ -103,17 +118,11 @@ export default {
* 处理开始抽奖事件
*/
async handleStartLottery(num, currentPrize) {
this.currentPrize = currentPrize;
// 减少抽奖次数并标记为正在抽奖
this.isRotating = true
this.isRotating = true;
const total = this.prizesObj.times;
this.prizesObj.times = total - num;// 减去次数
this.prizesObj.times = total - num; // 减去次数
},
/**
@@ -121,8 +130,8 @@ export default {
* @param {Object} prize - 中奖奖品
*/
handleLotteryComplete() {
this.isRotating = false
this.showResult = true
this.isRotating = false;
this.showResult = true;
},
/**
@@ -130,8 +139,8 @@ export default {
*/
jumpWinningRecord() {
uni.navigateTo({
url: '/pages/mine_package/mine_winning_record/mine_winning_record',
})
url: "/pages/mine_package/mine_winning_record/mine_winning_record",
});
},
jumpMine() {
@@ -139,35 +148,40 @@ export default {
console.log("backPath", backPath);
if (backPath) {
uni.switchTab({
url: '/pages/home/home',
})
url: "/pages/home/home",
});
} else {
uni.switchTab({
url: '/pages/mine/mine',
})
url: "/pages/mine/mine",
});
}
},
}
}
},
};
</script>
<style scoped>
.notice-view{
width:100%;
min-height:64rpx;
display: flex;
padding: 0 40rpx;
margin-top:30rpx;
box-sizing: border-box;
.notice-li{
width:100%;
height:100%;
display: flex;
border-radius: 32rpx;
background: linear-gradient( 180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);
}
}
.notice-view {
width: 100%;
min-height: 64rpx;
display: flex;
padding: 0 40rpx;
margin-top: 30rpx;
box-sizing: border-box;
.notice-li {
width: 100%;
height: 100%;
display: flex;
border-radius: 32rpx;
background: linear-gradient(
180deg,
#ff8876 0%,
#ff3d36 17%,
#ff4646 85%,
#ff8978 100%
);
}
}
.lottery-page {
display: flex;
flex-direction: column;
@@ -181,33 +195,36 @@ export default {
.remain-count {
font-size: 30rpx;
color: #FFFAE3;
color: #fffae3;
border-radius: 20rpx;
margin-top: 430rpx;
width: 340rpx;
height: 44rpx;
text-align: center;
line-height: 44rpx;
background: linear-gradient(180deg, #F33838 0%, #FF4F28 100%);
background: linear-gradient(180deg, #f33838 0%, #ff4f28 100%);
}
.rule {
width: 670rpx;
background: linear-gradient(180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);
background: linear-gradient(
180deg,
#ff8876 0%,
#ff3d36 17%,
#ff4646 85%,
#ff8978 100%
);
border-radius: 24rpx;
padding: 50rpx 24rpx;
margin: 30rpx auto 0;
font-size: 34rpx;
color: #FFFAE3;
color: #fffae3;
line-height: 54rpx;
.rule-title {
text-align: center;
margin-bottom: 30rpx;
}
}
.history {
@@ -219,7 +236,7 @@ export default {
border-bottom-left-radius: 100rpx;
opacity: 0.4;
font-size: 26rpx;
color: #FFFFFF;
color: #ffffff;
position: absolute;
right: 0;
top: 80rpx;
@@ -231,4 +248,4 @@ export default {
left: 40rpx;
top: 40rpx;
}
</style>
</style>