diff --git a/api/raffle.js b/api/raffle.js
index 89cf4b7..15a6fd6 100644
--- a/api/raffle.js
+++ b/api/raffle.js
@@ -5,9 +5,9 @@ import request from '@/utils/request.js'; // 引入封装的方法
export function getActivityList(data) {
// return request.post('/common/getSmsCode',qs.stringify(params));
return request({
- url: "/raffle/getActivityList",
- method: "get",
- data,
+ url: "/raffle/getActivityList",
+ method: "get",
+ data,
});
}
@@ -17,19 +17,19 @@ export function getActivityList(data) {
*/
export function raffleExecute(params) {
return request({
- url: "/raffle/execute",
- method: "post",
- data:params,
- isShowLoading:false,
+ url: "/raffle/execute",
+ method: "post",
+ data: params,
+ isShowLoading: false,
});
}
// 查询中奖记录
export function getWinningList(data) {
return request({
- url: "/raffle/getWinningList",
- method: "get",
- data,
+ url: "/raffle/getWinningList",
+ method: "get",
+ data,
});
}
/**
@@ -38,17 +38,17 @@ export function getWinningList(data) {
*/
export function takeGoods(params) {
return request({
- url: "/raffle/takeGoods",
- method: "post",
- data:params,
+ url: "/raffle/takeGoods",
+ method: "post",
+ data: params,
});
}
// 查询抽奖加速次数
export function getQuickenTimes(data) {
return request({
- url: "/raffle/getQuickenTimes",
- method: "get",
- data,
+ url: "/raffle/getQuickenTimes",
+ method: "get",
+ data,
});
}
\ No newline at end of file
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 9b778f1..acb80ca 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -407,8 +407,11 @@ export default {
})
},
jumpTurntable() {
+ // uni.navigateTo({
+ // url: '/pages/other_package/turntable/turntable?backPath=home',
+ // })
uni.navigateTo({
- url: '/pages/other_package/turntable/turntable?backPath=home',
+ url: '/pages/other_package/nine-grid/nine-grid?backPath=home',
})
},
jumpPrdference() {
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index da63a4a..02b5c45 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -218,7 +218,7 @@ export default {
id: 2,
title: "抽奖",
url: 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/apply_prize.png',
- path: "/pages/other_package/turntable/turntable"
+ path: "/pages/other_package/nine-grid/nine-grid"
},
{
id: 4,
diff --git a/pages/other_package/nine-grid/components/LotteryGrid.vue b/pages/other_package/nine-grid/components/LotteryGrid.vue
index 310f6d9..1b1b8cb 100644
--- a/pages/other_package/nine-grid/components/LotteryGrid.vue
+++ b/pages/other_package/nine-grid/components/LotteryGrid.vue
@@ -12,15 +12,14 @@
-
- {{ isRotating ? '抽奖中...' : '开始抽奖' }}
-
+
-
- {{ prizes[index].name }}
+
+ {{ prizesObj.prizes[index]?.name }}
@@ -30,15 +29,20 @@
export default {
props: {
// 奖品数据数组
- prizes: {
- type: Array,
+ prizesObj: {
+ type: Object,
required: true,
- default: () => []
+ default: () => ({ prizes: [] })
},
// 是否禁用抽奖
isDisabled: {
type: Boolean,
default: false
+ },
+ // 指定停止的位置索引 (0-7)
+ targetIndex: {
+ type: Number,
+ default: null
}
},
data() {
@@ -66,8 +70,8 @@ export default {
moveHighlight(index) {
const row = Math.floor(index / 3) // 计算行
const col = index % 3 // 计算列
- this.highlightTop = `${row * 200}rpx`
- this.highlightLeft = `${col * 200}rpx`
+ this.highlightTop = `${row * 202}rpx`
+ this.highlightLeft = `${col * 202}rpx`
},
/**
* 执行抽奖动画
@@ -113,7 +117,7 @@ export default {
this.isRotating = false
this.animationTimer = null
// 触发抽奖完成事件，返回中奖奖品
- this.$emit('complete', this.prizes[this.LOTTERY_PATH[nextStep]])
+ this.$emit('complete', this.prizesObj.prizes[this.LOTTERY_PATH[nextStep]])
return
}
@@ -128,6 +132,18 @@ export default {
})
}, nextSpeed)
},
+ /**
+ * 获取目标位置
+ * @returns {number} 目标位置索引
+ */
+ getTargetStep() {
+ // 如果传入了targetIndex，则使用传入的值
+ if (this.targetIndex !== null && this.targetIndex >= 0 && this.targetIndex < this.LOTTERY_PATH.length) {
+ return this.targetIndex
+ }
+ // 否则随机生成目标位置（带权重）
+ return this.getRandomTarget()
+ },
/**
* 随机生成目标位置（带权重）
* @returns {number} 目标位置索引
@@ -158,7 +174,7 @@ export default {
}
// 通知父组件开始抽奖
- this.$emit('start')
+ this.$emit('start', 1)
// 开始抽奖动画（无论父组件做了什么处理）
this.startLotteryAnimation()
@@ -177,7 +193,7 @@ export default {
this.runAnimation({
currentStep: 0,
speed: this.INITIAL_SPEED,
- targetStep: this.getRandomTarget(),
+ targetStep: this.getTargetStep(),
cycleCount: 0,
totalSteps: 0
})
@@ -195,34 +211,36 @@ export default {
\ No newline at end of file
diff --git a/pages/other_package/nine-grid/components/ResultModal.vue b/pages/other_package/nine-grid/components/ResultModal.vue
index ba7ba97..469db09 100644
--- a/pages/other_package/nine-grid/components/ResultModal.vue
+++ b/pages/other_package/nine-grid/components/ResultModal.vue
@@ -2,10 +2,16 @@
- 恭喜您获得
-
- {{ prize.name || '未知奖品' }}
-
+
+
+
+ ¥ {{ item.parValue }}
+
+ {{ item.prizeName }}
+
+
+
+ 立即领取
@@ -20,10 +26,20 @@ export default {
},
// 中奖奖品信息
prize: {
- type: Object,
- default: () => ({})
+ type: Array,
+ default: () => ([
+
+ ])
}
- }
+ },
+ methods: {
+ jumpGetFun(item) {
+ this.$emit('close')
+ // uni.navigateTo({
+ // url: '/pages/other_package/get_prize/get_prize?id=' + item.id,
+ // })
+ },
+ },
}
@@ -42,63 +58,69 @@ export default {
}
.modal-content {
- width: 500rpx;
- background-color: #fff;
- border-radius: 20rpx;
- padding: 40rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- /* 添加弹窗动画 */
- animation: popup 0.3s ease-out;
-}
+ width: 650rpx;
+ height: 1000rpx;
-@keyframes popup {
- 0% {
- transform: scale(0.8);
- opacity: 0;
+ background: url('https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/lottery-pop.png') no-repeat center center;
+ background-size: 100% auto;
+ position: relative;
+
+ .confirm-btn {
+ width: 436rpx;
+ height: 76rpx;
+ background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%);
+ box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
+ border-radius: 38rpx;
+ font-weight: 500;
+ font-size: 32rpx;
+ color: #FFFFFF;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ bottom: 230rpx;
+ left: 50%;
+ transform: translateX(-50%);
}
- 100% {
- transform: scale(1);
- opacity: 1;
+ .modal-content-result {
+ position: absolute;
+ bottom: 450rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 420rpx;
+ display: flex;
+ justify-content: space-around;
+
+ .modal-content-result-item {
+
+ .par-value {
+ font-weight: bold;
+ font-size: 42rpx;
+ color: #D0010D;
+ text-align: center;
+
+ .moeny {
+ font-size: 28rpx;
+ }
+ }
+
+ .prize-name {
+ font-size: 36rpx;
+ color: #000000;
+ text-align: center;
+ margin-top: 15rpx;
+ }
+ }
}
-}
-.result-title {
- font-size: 36rpx;
- color: #e63946;
- font-weight: bold;
- margin-bottom: 30rpx;
-}
+ .close {
+ width: 120rpx;
+ height: 120rpx;
+ position: absolute;
+ top: 130rpx;
+ right: 40rpx;
+ }
-.result-img {
- width: 150rpx;
- height: 150rpx;
- margin-bottom: 30rpx;
- object-fit: contain;
-}
-
-.result-desc {
- font-size: 32rpx;
- color: #333;
- margin-bottom: 40rpx;
- font-weight: bold;
-}
-
-.confirm-btn {
- width: 300rpx;
- height: 80rpx;
- line-height: 80rpx;
- background-color: #e63946;
- color: #fff;
- border-radius: 40rpx;
- font-size: 32rpx;
- border: none;
- transition: background-color 0.2s;
-}
-
-.confirm-btn:active {
- background-color: #c72c3a;
}
\ No newline at end of file
diff --git a/pages/other_package/nine-grid/nine-grid.vue b/pages/other_package/nine-grid/nine-grid.vue
index f7b72ba..4aea247 100644
--- a/pages/other_package/nine-grid/nine-grid.vue
+++ b/pages/other_package/nine-grid/nine-grid.vue
@@ -1,12 +1,30 @@
- 幸运九宫格抽奖
+
+
+
+
+ 中奖记录
+
+
+ 剩余抽奖次数: {{ prizesObj.times }}
+
- 剩余抽奖次数: {{ remainCount }}
-
+
+
+ 连续抽奖10次
+
+
+
+
+ 活动规则
+
+
+
+
@@ -26,64 +44,118 @@ export default {
data() {
return {
// 奖品配置数据
- prizes: [
- { name: '10元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/logo.png' },
- { name: '20积分', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/teacher.png' },
- { name: '50元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/student.png' },
- { name: '谢谢参与', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/recommend.png' },
- { name: '', img: '' }, // 中间按钮位置，不使用
- { name: '100积分', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/uncollection.png' },
- { name: '2元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-mn.png' },
- { name: '50积分', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png' },
- { name: '8元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png' }
- ],
+ prizesObj: {
+ prizes: [],
+ },
+
// 状态管理
remainCount: 3, // 剩余抽奖次数
isRotating: false, // 是否正在抽奖
showResult: false, // 是否显示结果弹窗
- currentPrize: {} // 当前中奖奖品
+ currentPrize: [],// 当前中奖奖品
+
+ targetIndex: 0,
+ backPath: null,
+ }
+ },
+ onLoad(option) {
+ const backPath = option.backPath;
+ console.log("option backPath", backPath);
+ if (backPath && backPath !== 'null') {
+ this.backPath = backPath;
}
},
mounted() {
this.getActivityList();
},
methods: {
- //
+
/**
* 查询活动详情
*/
- async getActivityList() {
+ async getActivityList() {
const { bizcode, data } = await getActivityList();
- if (bizcode === 100) {
- this.prizes = data.prizes || [];
- this.prizes.split(4, 1, { iconUrl:'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png',})
- }
- },
+ if (bizcode === 100) {
+ this.prizesObj = data || { prizes: [] };
+ console.log('查询活动详情-1', this.prizesObj)
+ this.prizesObj.prizes.splice(4, 0, { iconUrl: 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/activity-button.png', })
+
+ }
+ },
/**
* 处理开始抽奖事件
*/
- handleStartLottery() {
- if (this.remainCount <= 0) {
- uni.showToast({ title: '没有抽奖次数了', icon: 'none' })
- return false
+ async handleStartLottery(num) {
+ if (this.prizesObj.times <= 0) {
+ uni.showToast({
+ title: `您当前未获取到抽奖次数，快去获取吧～`,
+ icon: 'none'
+ });
+ return;
+ }
+
+ if (this.prizesObj.times < num) {
+ return;
+ }
+
+
+ const params = {
+ id: this.prizesObj.id,
+ times: num,
+ }
+ const result = await raffleExecute(params);
+ let runCount = null;
+ if (result && result.bizcode === 100) {
+
+ this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === result.data[0].id);
+
+ this.currentPrize = result.data;
+ console.log("0------", this.currentPrize)
+
+ // 减少抽奖次数并标记为正在抽奖
+
+ this.isRotating = true
+
+ const total = this.prizesObj.times;
+ const data = result.data;
+ this.lotteryList = data;// 中奖列表
+ this.prizesObj.times = total - num;// 减去次数
+
}
- // 减少抽奖次数并标记为正在抽奖
- this.remainCount--
- this.isRotating = true
- this.showResult = false
- return true
},
/**
* 处理抽奖完成事件
* @param {Object} prize - 中奖奖品
*/
- handleLotteryComplete(prize) {
+ handleLotteryComplete() {
this.isRotating = false
- this.currentPrize = prize
this.showResult = true
- }
+ },
+
+ /**
+ * 跳转到中奖记录
+ */
+ jumpWinningRecord() {
+ uni.navigateTo({
+ url: '/pages/mine_package/mine_winning_record/mine_winning_record',
+ })
+ },
+
+ jumpMine() {
+ const backPath = this.backPath;
+ console.log("backPath", backPath);
+ if (backPath) {
+ uni.switchTab({
+ url: '/pages/home/home',
+ })
+ } else {
+ uni.switchTab({
+ url: '/pages/mine/mine',
+ })
+ }
+ },
}
}
@@ -93,24 +165,78 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
- padding: 30rpx;
- background-color: #f8f9fa;
- min-height: 100vh;
-}
-
-.lottery-title {
- font-size: 40rpx;
- font-weight: bold;
- color: #e63946;
- margin-bottom: 20rpx;
+ width: 100vw;
+ height: 1927rpx;
+ background: url('https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/activity-bg.png') no-repeat center center;
+ background-size: 100% auto;
+ position: relative;
}
.remain-count {
font-size: 30rpx;
- color: #666;
- margin-bottom: 30rpx;
- padding: 10rpx 20rpx;
- background-color: #fff;
+ 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%);
+
+}
+
+.coiled-lottery {
+ width: 670rpx;
+ height: 88rpx;
+ background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%);
+ box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
+ border-radius: 44rpx;
+ margin: 120rpx auto 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ font-size: 32rpx;
+ color: #FFFFFF;
+}
+
+.rule {
+ width: 670rpx;
+ background: linear-gradient(180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);
+ border-radius: 24rpx;
+ padding: 50rpx 24rpx;
+ margin: 50rpx auto 0;
+ font-size: 34rpx;
+ color: #FFFAE3;
+ line-height: 54rpx;
+
+ .rule-title {
+ text-align: center;
+ margin-bottom: 30rpx;
+ }
+
+
+}
+
+.history {
+ width: 130rpx;
+ height: 64rpx;
+ line-height: 64rpx;
+ background: #000000;
+ border-top-left-radius: 100rpx;
+ border-bottom-left-radius: 100rpx;
+ opacity: 0.4;
+ font-size: 26rpx;
+ color: #FFFFFF;
+ position: absolute;
+ right: 0;
+ top: 80rpx;
+ text-align: end;
+}
+
+.back {
+ position: absolute;
+ left: 40rpx;
+ top: 40rpx;
}
\ No newline at end of file