You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
9.4 KiB
400 lines
9.4 KiB
<template>
|
|
<view class="almost-lottery">
|
|
<!-- head -->
|
|
<image src="../static/head.jpg" mode="widthFix" class="width100"></image>
|
|
<view class="almost-lottery__wheel">
|
|
<AlmostLottery :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize"
|
|
:ring-count="2" :duration="5" :prize-list="prizeList" :prize-index="prizeIndex"
|
|
@reset-index="prizeIndex = -1" @draw-start="handleDrawStart" @draw-end="handleDrawEnd"
|
|
@finish="handleDrawFinish" v-if="prizeList.length" />
|
|
</view>
|
|
<view class="almost-lottery__rule">
|
|
<view class="_notice">
|
|
<swiper class="_swiper tc" indicator-dots="false" autoplay="true" :interval="interval" circular="true"
|
|
display-multiple-items="2" :duration="duration">
|
|
<swiper-item>
|
|
<view class="swiper-item uni-bg-red"></view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="swiper-item uni-bg-red"></view>
|
|
</swiper-item>
|
|
<swiper-item v-for="(item,index) in list" :key="index">
|
|
<view class="swiper-item uni-bg-red">恭喜{{item.phone}}获得{{item.awardName}}</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="font14 fotct mart10 marb10">拥有{{ LotteryNum }}次抽奖机会</view>
|
|
<view class="rule-head">
|
|
<view class="line"></view>
|
|
<text class="title">活动规则</text>
|
|
<view class="line"></view>
|
|
</view>
|
|
<view class="rule-body">
|
|
<view class="item">
|
|
<rich-text class="text font14" :nodes="activityInfo"></rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AlmostLottery from '../../uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
|
|
import {
|
|
getActivityByCoupon,
|
|
userLottery,
|
|
getUserLotteryNum,
|
|
getWinLotteryList
|
|
} from '../../Utils/Api.js';
|
|
let app = getApp();
|
|
export default {
|
|
name: 'Home',
|
|
components: {
|
|
AlmostLottery
|
|
},
|
|
data() {
|
|
return {
|
|
imageUrl: app.globalData.imgUrl,
|
|
//活动id
|
|
activityId : '',
|
|
//获取中间参数
|
|
userLotteryId:'',
|
|
//抽奖次数
|
|
LotteryNum:'',
|
|
//活动描述
|
|
activityInfo:'',
|
|
//卡券id
|
|
couponId:'',
|
|
// 开启调试模式
|
|
isDev: true,
|
|
background: ['color1', 'color2', 'color3'],
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 2000,
|
|
duration: 500,
|
|
// 以下是转盘配置相关数据
|
|
lotteryConfig: {
|
|
// 抽奖转盘的整体尺寸，单位rpx
|
|
lotterySize: 600,
|
|
// 抽奖按钮的尺寸，单位rpx
|
|
actionSize: 200
|
|
},
|
|
|
|
// 以下是转盘 UI 配置
|
|
// 转盘外环图
|
|
lotteryBg: 'https://raw.githubusercontent.com/ialmost/almost-components_uniapp/dev/Lottery/almost-lottery_sample/static/lottery-bg.png',
|
|
// 抽奖按钮图
|
|
actionBg: 'https://raw.githubusercontent.com/ialmost/almost-components_uniapp/dev/Lottery/almost-lottery_sample/static/action-bg.png',
|
|
|
|
// 以下是奖品配置数据
|
|
// 奖品数据
|
|
prizeList: [],
|
|
// 奖品是否设有库存
|
|
onStock: true,
|
|
// 中奖下标
|
|
prizeIndex: -1,
|
|
|
|
// 是否正在抽奖中，避免重复触发
|
|
prizeing: false,
|
|
|
|
// 以下为中奖概率有关数据
|
|
// 是否由前端控制概率，默认不开启，强烈建议由后端控制
|
|
onFrontend: false,
|
|
// 权重随机数的最大值
|
|
prizeWeightMax: 0,
|
|
// 权重数组
|
|
prizeWeightArr: [],
|
|
|
|
// 以下为业务需求有关示例数据
|
|
// 金币余额
|
|
goldCoin: 600,
|
|
// 当日免费抽奖次数余额
|
|
freeNum: 3,
|
|
// 每次消耗的金币数
|
|
goldNum: 20,
|
|
// 每天免费抽奖次数
|
|
freeNumDay: 3,
|
|
interval: 3000,
|
|
duration: 12000,
|
|
list: []
|
|
}
|
|
},
|
|
computed: {
|
|
isApple() {
|
|
return uni.getSystemInfoSync().platform === 'ios'
|
|
}
|
|
},
|
|
methods: {
|
|
changeIndicatorDots(e) {
|
|
this.indicatorDots = !this.indicatorDots
|
|
},
|
|
changeAutoplay(e) {
|
|
this.autoplay = !this.autoplay
|
|
},
|
|
intervalChange(e) {
|
|
this.interval = e.target.value
|
|
},
|
|
durationChange(e) {
|
|
this.duration = e.target.value
|
|
},
|
|
// 重新生成
|
|
handleInitCanvas() {
|
|
this.prizeList = []
|
|
this.getActivityByCoupon()
|
|
},
|
|
// 获取中奖奖品
|
|
userLottery() {
|
|
let params = {
|
|
activityId: this.activityId
|
|
}
|
|
userLottery(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.userLotteryId = res.return_data.activityAwardId;
|
|
this.remoteGetPrizeIndex();
|
|
}
|
|
});
|
|
},
|
|
//中奖次数
|
|
getUserLotteryNum(){
|
|
let params = {
|
|
activityId: this.activityId
|
|
}
|
|
getUserLotteryNum(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.LotteryNum = res.return_data;
|
|
}
|
|
});
|
|
},
|
|
//中奖名单
|
|
getWinLotteryList(){
|
|
let params = {
|
|
activityId: this.activityId
|
|
}
|
|
getWinLotteryList(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.list = res.return_data;
|
|
}
|
|
});
|
|
},
|
|
// 获取奖品列表
|
|
getActivityByCoupon() {
|
|
uni.showLoading({
|
|
title: '奖品准备中...'
|
|
})
|
|
let params = {
|
|
couponId: this.couponId
|
|
}
|
|
getActivityByCoupon(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
let prizeLists = res.return_data.activityAward;
|
|
this.activityId = res.return_data.activityInfo.id;
|
|
let prizesList = [];
|
|
|
|
prizeLists.map((r) => {
|
|
const pris = new prizeListNew();
|
|
pris.prizeId = r.id;
|
|
pris.prizeImage = this.imageUrl + r.img;
|
|
pris.prizeName = r.name;
|
|
prizesList.push(pris);
|
|
})
|
|
this.activityInfo = this.transform(res.return_data.activityInfo.content);
|
|
this.prizeList = prizesList;
|
|
this.getUserLotteryNum();
|
|
this.getWinLotteryList();
|
|
}
|
|
});
|
|
},
|
|
//换行
|
|
transform(value){
|
|
value = value.replace(/\r\n/g, '<br/>');
|
|
value = value.replace(/\n/g, '<br/>');
|
|
return value;
|
|
},
|
|
// 本次抽奖开始
|
|
handleDrawStart() {
|
|
if(this.LotteryNum <= 0){
|
|
uni.showToast({
|
|
title: '当前抽奖次数不足',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return;
|
|
}
|
|
this.userLottery();
|
|
},
|
|
// 远程请求接口获取中奖下标
|
|
// 大哥，这里只是模拟，别告诉我你不会对接自己的接口
|
|
remoteGetPrizeIndex() {
|
|
console.warn('###当前处于模拟的请求接口，并返回了中奖信息###')
|
|
// 模拟请求接口获取中奖信息
|
|
let stoTimer = setTimeout(() => {
|
|
clearTimeout(stoTimer)
|
|
stoTimer = null
|
|
let list = [...this.prizeList]
|
|
// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
|
|
let prizeId = this.userLotteryId;
|
|
// 拿到后端返回的 prizeId 后，开始循环比对得出那个中奖的数据
|
|
for (let i = 0; i < list.length; i++) {
|
|
let item = list[i]
|
|
if (item.prizeId === prizeId) {
|
|
// 中奖下标
|
|
this.prizeIndex = i
|
|
break
|
|
}
|
|
}
|
|
}, 200)
|
|
},
|
|
// 本次抽奖结束
|
|
handleDrawEnd() {
|
|
console.log('旋转结束，执行拿到结果后到逻辑')
|
|
// 旋转结束后，开始处理拿到结果后的逻辑
|
|
this.prizeing = false
|
|
let prizeName = this.prizeList[this.prizeIndex].prizeName
|
|
let tipContent = ''
|
|
// if (prizeName === '参与奖') {
|
|
// tipContent = '很遗憾，没有中奖，请再接再厉！'
|
|
// } else {
|
|
tipContent = `恭喜您，获得 "${prizeName} "！`
|
|
// }
|
|
this.getUserLotteryNum();
|
|
this.getWinLotteryList();
|
|
uni.showModal({
|
|
content: tipContent,
|
|
showCancel: false
|
|
})
|
|
},
|
|
// 抽奖转盘绘制完成
|
|
handleDrawFinish(res) {
|
|
console.log('抽奖转盘绘制完成', res)
|
|
|
|
uni.showToast({
|
|
title: res.msg,
|
|
mask: true,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.couponId = options.id
|
|
this.handleInitCanvas()
|
|
},
|
|
onUnload() {
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
export class prizeListNew {
|
|
prizeId = ''
|
|
prizeName = ''
|
|
prizeImage = ''
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
._notice {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
/* #ifdef H5 */
|
|
top: 88upx;
|
|
/* #endif */
|
|
z-index: 9;
|
|
width: 100%;
|
|
background: rgba(72, 1, 1, 0.3);
|
|
font-size: 20upx;
|
|
height: 44upx;
|
|
color: #ffffff;
|
|
border-radius: 6upx;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
._swiper {
|
|
line-height: 44upx;
|
|
}
|
|
|
|
.almost-lottery {
|
|
flex: 1;
|
|
background-color: #FF893F;
|
|
}
|
|
|
|
.almost-lottery__wheel {
|
|
margin-top: 30rpx;
|
|
text-align: center;
|
|
|
|
.almost-lottery__count {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.text {
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.almost-lottery__rule {
|
|
padding: 0 28rpx;
|
|
color: #FFF8CB;
|
|
|
|
.rule-head {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin: 40rpx 0;
|
|
|
|
.line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background-color: #FFF3A5;
|
|
}
|
|
|
|
.title {
|
|
width: 280rpx;
|
|
color: #F63857;
|
|
line-height: 70rpx;
|
|
text-align: center;
|
|
margin: 0 20rpx;
|
|
border-radius: 8rpx;
|
|
background-image: linear-gradient(0deg, rgba(255, 242, 158, 1), rgba(255, 244, 168, 1));
|
|
}
|
|
}
|
|
|
|
.rule-body {
|
|
color: #FFF8CB;
|
|
font-size: 24rpx;
|
|
padding: 10rpx 0 40rpx;
|
|
|
|
.item {
|
|
display: flex;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.number {
|
|
position: relative;
|
|
top: 4rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.text {
|
|
flex: 1;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.item-rule .text {
|
|
display: flex;
|
|
margin-top: 1px;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|