Huanyuyuehui/pages/users/user_luckyDraw/index.vue

386 lines
8.3 KiB
Vue
Raw Normal View History

2024-04-02 19:42:57 +08:00
<template>
<view class="content">
<view class="bg">
<view class="rule">
<text>活动规则</text>
</view>
<view class="top">
</view>
<view class="lucky-draw">
<view class="title">
恭喜你获得 {{wheel}} 次抽奖机会
</view>
<LuckyWheel ref="myLucky" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes"
:buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" :defaultConfig="defaultConfig" />
</view>
<view class="lucky-draw-info">
<view class="title">
- 抽奖纪录 -
</view>
<view class="list">
<view class="item" v-for="item in list">
<view>{{item.create_time}}</view>
<view>{{item.title}}</view>
</view>
</view>
</view>
</view>
<view class="coupon_popups" v-if="popShow">
<view class="bg2"></view>
<view class="con" >
<view class="content">
<image :src="drawInfo.img" mode=""></image>
<view class="text-black">恭喜您获得</view>
<view class="text-red">{{drawInfo.text}}</view>
<view class="btn" @click="popShow = false">开心收下</view>
</view>
<view class='iconfont icon-guanbi3' @click="popShow = false"></view>
</view>
</view>
</view>
</template>
<script>
import {getWhellNumber,getWhellConfig,getWhellAction,getWhellList} from '@/api/user.js'
import LuckyWheel from 'uni-luck-draw/lucky-wheel'
export default {
components: {
LuckyWheel
},
data() {
return {
wheel:0,
blocks: [{
padding: '4px',
imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/9bcfea91fd2ebc06cc9eea5de95d624e.png', width: '100%',
height: '100%'}]
},{
padding:'14px',
imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/db41a1225c12cfb7a0d429fab8397fe5.png', width: '100%',
height: '100%'}]
}],
prizes: [{
fonts: [{
text: '0',
top: '40%'
}],
background: '#faf7d5',
imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/de991ebf4c190afcc5de692a910949f4.png',width:'25px',height:'25px',top:'10%'}]
},
{
fonts: [{
text: '1',
top: '10%'
}],
background: '#FC3E8F'
},
{
fonts: [{
text: '2',
top: '10%'
}],
background: '#faf7d5'
},
{
fonts: [{
text: '3',
top: '10%'
}],
background: '#FC3E8F'
},
{
fonts: [{
text: '4',
top: '10%'
}],
background: '#faf7d5'
},
{
fonts: [{
text: '5',
top: '10%'
}],
background: '#FC3E8F'
},
],
buttons: [{
radius: '50px',
// background: '#e81c47',
imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/25da054fc2f6c52349bb193ee4919e6c.png',width: '100%',
top: '-190%'}],
// pointer: true,
},
{
radius: '45px',
background: '#faf7d5'
},
{
radius: '40px',
imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/1e1ce5f047e6282554200f316b975c06.png',width: '100%',
top: '-100%'}],
// background: linear-gradient( #F8A059 0%, #E22B70 100%)',
// background: '#ec4656',
// pointer: true,
fonts: [{
text: '开始\n抽奖',
top: '-20px',
fontColor:'#fff',
}]
},
],
defaultConfig: {
gutter: '5px',
speed: 60,
stopRange:'0.95'
},
popShow:false,
list:[],
drawInfo:{
img:'',
text:'',
}
}
},
onLoad() {
this.init()
},
methods: {
init(){
getWhellNumber().then((res)=>{
if(res){
this.wheel=res.data.userInfo.wheel;
}
})
getWhellConfig().then((res)=>{
let ary=res.data;
this.prizes.map((e,index)=>{
ary.map((e2,index2)=>{
if(index==index2){
e.fonts[0].text=e2.value.title;
e.fonts[0].top='40%';
e.fonts[0].fontSize='14px';
e.imgs=[];
e.imgs.push({src:e2.value.icon,width:'25px',height:'25px',top:'10%'})
}
})
})
})
getWhellList().then((res)=>{
if(res){
this.list=res.data.list;
}
})
},
// 点击抽奖按钮触发回调
async startCallBack() {
if(this.wheel>0){
// 先开始旋转
this.$refs.myLucky.play()
await getWhellAction().then((res)=>{
if(res){
this.drawInfo.img=res.data.win.value.icon;
this.drawInfo.text=res.data.win.value.title;
// 使用定时器来模拟请求接口
const index = res.data.win.winKey;
setTimeout(() => {
// 假设后端返回的中奖索引是0
// 调用stop停止旋转并传递中奖索引
this.$refs.myLucky.stop(index)
},5000)
}
})
}
},
// 抽奖结束触发回调
endCallBack(prize) {
setTimeout(()=>{
this.popShow=true;
},2000)
// 奖品详情
console.log(prize)
}
}
}
</script>
<style lang="less" scoped>
.content {
width: 100%;
height: 100vh;
.coupon_popups{
z-index: 999;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
.bg2{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
.con{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 680rpx;
height: 900rpx;
background-size: 100% 700rpx;
background-repeat: no-repeat;
.content{
width: 500rpx;
height: 520rpx;
border-radius: 20rpx;
margin: 0 auto;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
grid-gap: 40rpx;
image{
width: 300rpx;
height: 200rpx;
margin-top: 50rpx;
}
.text-black{
font-size: 32rpx;
font-weight: bold;
}
.text-red{
font-size: 28rpx;
color: #FC3C70;
}
.btn{
color: white;
margin-bottom: 40rpx;
width: 328rpx;
height: 68rpx;
line-height: 68rpx;
padding: 4rpx 0;
border-radius: 60rpx;
background: linear-gradient(136deg, #D753FC 0%, #FC276C 53%, #FC3E8F 100%);
}
}
.text{
width: 600rpx;
margin: 30rpx auto 0;
font-size: 20rpx;
color: #ffffff;
}
.icon-guanbi3{
color: #ffffff;
font-size: 70rpx;
position: absolute;
bottom: 250rpx;
left: 310rpx;
}
}
}
.bg {
width: 100%;
// height: 100vh;
background-image: url('https://plus.hwms.shop/uploads/def/20240402/de991ebf4c190afcc5de692a910949f4.png');
background-size: 100% 100%;
position: relative;
padding-bottom: 40rpx;
.rule {
width: 80rpx;
height: 120rpx;
background-image: url(@/static/images/right-btn.png);
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
right: 0;
top: 320rpx;
// text-align: center;
display: flex;
align-items: center;
justify-content: center;
text {
width: 56rpx;
height: 80rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #DC3424;
line-height: 36rpx;
}
}
.top{
height: 330rpx;
}
.lucky-draw{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.title{
position: relative;
bottom: 20rpx;
width:60%;
height: 50rpx;
font-family: PingFang SC;
font-weight: 400;
font-size: 32rpx;
color: #FFFFFF;
margin: 20rpx 0;
line-height: 54rpx;
text-align: center;
background: url('@/static/images/font-bg.png') no-repeat 100%;
background-position: center;
}
}
.lucky-draw-info{
margin: 80rpx auto;
width: 680rpx;
height: 440rpx;
background-color: white;
display: flex;
flex-direction: column;
border-radius: 32rpx;
.title{
text-align: center;
font-size: 36rpx;
color: #FC3C70;
line-height: 72rpx;
}
.list{
flex: 1;
overflow: scroll;
display: flex;
flex-direction: column;
grid-gap: 20rpx;
.item{
font-size: 32rpx;
font-weight: bold;
padding: 10rpx 20rpx;
width: 100%;
display: flex;
justify-content: space-between;
}
}
}
}
}
</style>