uniapp抽奖功能
<template><view class="conbox"><uni-nav-barbackgroundColor="#131723"><view class="vir-navtit">{{$t('index.cjllusaxhf')}}</view><view class="vir-navleft" slot="left" @c
·
<template>
<view class="conbox">
<uni-nav-bar backgroundColor="#131723">
<view class="vir-navtit">{{$t('index.cjllusaxhf')}}</view>
<view class="vir-navleft" slot="left" @click="back">
<view class="demo16">
</view>
</view>
<view class="vir-navright" slot="right" @click="cuncdeali">{{$t('index.choujianjlu')}}</view>
</uni-nav-bar>
<view class="container">
<!-- 背景 -->
<image src="../../../static/img/bg.png" class="cont" mode=""></image>
<image src="../../../static/img/caidai.png" class="caidai" mode=""></image>
<view class="main" style="padding-top: 50upx;">
<view class="canvas-container">
<view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
<view class="canvas-line">
<view class="canvas-litem" v-for="(item,index) in list" :key="index" :style="{transform:'rotate('+(index * width + width / 2)+'deg)'}"></view>
</view>
<view class="canvas-list">
<view class="canvas-item" :style="{transform: 'rotate('+(index * width)+'deg)', zIndex:index, }" v-for="(iteml,index) in list"
:key="index">
<view class="canvas-item-text" :style="'transform:rotate('+(index )+')'">
<text class="b" style="font-size: 35rpx;">{{iteml.name}}</text>
<!-- <text class="icon-awrad iconfont " :class="iteml.icon">{{iteml.value}}</text> -->
<view class="iconhs icon-awrad iconfont">
<image src="../../../static/img/sot/1.png" style="width: 100%;height: 100%;" mode=""></image>
</view>
</view>
</view>
</view>
</view>
<view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始 </view>
</view>
</view>
<!-- 规则 -->
<view class="guize" style="margin-top: 100upx;">
<view class="title">
规则说明
</view>
<view class="g_item">
1.每次抽奖花费 {{sotyue}} SOT
</view>
<view class="g_item">
2.用户获得的奖品，可点击 <text style="color: #0062CC;margin-left: 10rpx;"> 查看奖品</text>
</view>
<!-- <view class="g_item">
3.用户获得的奖品，可在我的道具里查看
</view> -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
sotyue: '1',
list: [
{
"name": "1000万",
"value": "0",
icon: 'icondazhe text-danger',
},
{
"name": "100元",
"value": "1",
icon: 'icondazhe text-danger',
},
{
"name": "200元",
"value": "2",
icon: 'icondazhe text-danger',
},
{
"name": "500元",
"value": "3",
icon: 'icondazhe text-danger',
},
{
"name": "10万",
"value": "4",
icon: 'icondazhe text-danger',
},
{
"name": "感谢参与",
"value": "5",
icon: 'iconfangqi1 text-master',
isNoPrize: true, // 是否未中奖
}
],
width: 0,
animationData: {},
btnDisabled: '',
}
},
onLoad: function() {
this.listdata();
// 获取奖品列表
},
methods: {
// 获取列表数据
listdata() {
this.sothttp.post('接口').then(res => {
console.log(res.data.data.list)
console.log(this.list)
// this.list = res.data.data.list
this.width = 360 / this.list.length
})
},
// 抽奖记录
cuncdeali() {
uni.showToast({
title:'抽奖记录',
icon:'none'
})
},
back() {
uni.navigateBack({
delta: 1
})
},
animation(index, duration) {
//中奖index
var list = this.list;
// var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
var runNum = 4; //旋转8周
// 旋转角度
this.runDeg = this.runDeg || 0;
this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - index * (360 / list.length)) + 1
//创建动画
var animationRun = uni.createAnimation({
duration: duration,
timingFunction: 'ease'
})
animationRun.rotate(this.runDeg).step();
this.animationData = animationRun.export();
this.btnDisabled = 'disabled';
},
//发起抽奖
playReward() {
var that = this
// that.sothttp.post('').then(res => {
// console.log(res)
// })
let index = 5,
duration = 4000
this.animation(index, duration)
setTimeout(() => {
uni.showModal({
content: this.list[index].isNoPrize ? '抱歉，您未中奖' : '恭喜，中奖'
})
this.btnDisabled = '';
// document.getElementById('zhuanpano').style=''
}, duration + 1000)
},
}
}
</script>
<style scoped>
.vir-navright {
font-size: 30rpx;
color: #adb2c5;
white-space: nowrap;
padding-right: 80rpx;
padding-top: 10rpx;
}
.demo16 {
width: 20rpx;
height: 20rpx;
border-left: 3rpx solid #fff;
border-top: 3rpx solid #fff;
transform: rotate(-45deg);
margin-left: 20rpx;
}
page {
background-color: #131723;
}
.vir-navleft {
padding-left: 20rpx;
}
.vir-navtit {
font-size: 36rpx;
padding: 30rpx 0;
color: #fff;
}
.iconhs{
border-radius: 20rpx;
width: 50rpx;
height: 50rpx;
}
.icon-awrad {
font-size: 60upx !important;
}
.conbox {
width: 750upx;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
.container,
image.cont {
width: 750upx;
min-height: 100vh;
height: auto;
position: relative;
}
image.cont {
height: 100%;
position: absolute;
z-index: 0;
}
image.caidai {
position: absolute;
top: 0;
left: 0;
width: 750upx;
height: 1024upx;
}
.header-title>view {
padding: 8upx 16upx;
border: 1px solid #d89720;
color: #d89720;
font-size: 28upx;
border-radius: 26upx;
}
/* 转盘 */
.canvas-container {
margin: 0 auto;
position: relative;
width: 600upx;
height: 600upx;
background: url(../../../static/img/circle.png) no-repeat;
background-size: cover;
border-radius: 50%;
}
.canvas-content {
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: block;
width: 600upx;
height: 600upx;
border-radius: inherit;
/* background-clip: padding-box; */
/* background-color: #ffcb3f; */
}
.canvas-list {
position: absolute;
left: 0;
top: 0;
width: inherit;
height: inherit;
z-index: 9999;
}
.canvas-item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #e4370e;
/* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
}
.canvas-item-text {
position: relative;
display: block;
padding-top: 40upx;
margin: 0 auto;
text-align: center;
-webkit-transform-origin: 50% 300upx;
transform-origin: 50% 300upx;
display: flex;
flex-direction: column;
align-items: center;
color: #FB778B;
}
.canvas-item-text text {
font-size: 30upx;
}
/* 分隔线 */
.canvas-line {
position: absolute;
left: 0;
top: 0;
width: inherit;
height: inherit;
z-index: 99;
}
.canvas-litem {
position: absolute;
left: 300upx;
top: 0;
width: 3upx;
height: 300upx;
background-color: rgba(228, 55, 14, 0.4);
overflow: hidden;
-webkit-transform-origin: 50% 300upx;
transform-origin: 50% 300upx;
}
/**
* 抽奖按钮
*/
.canvas-btn {
position: absolute;
left: 260upx;
top: 260upx;
z-index: 400;
width: 80upx;
height: 80upx;
border-radius: 50%;
color: #f4e9cc;
background-color: #e44025;
line-height: 80upx;
text-align: center;
font-size: 26upx;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
text-decoration: none;
}
.canvas-btn::after {
position: absolute;
display: block;
content: ' ';
left: 12upx;
top: -44upx;
width: 0;
height: 0;
overflow: hidden;
border-width: 30upx;
border-style: solid;
border-color: transparent;
border-bottom-color: #e44025;
}
.canvas-btn.disabled {
pointer-events: none;
background: #b07a7b;
color: #ccc;
}
.canvas-btn.disabled::after {
border-bottom-color: #b07a7b;
}
.typecheckbox view {
border: 1px solid #FF3637;
background: transparent;
color: #FF3637;
display: flex;
height: 60upx;
width: 140upx;
border-radius: 50upx;
align-items: center;
justify-content: center;
display: flex;
margin-left: 20upx;
}
.guize {
width: 502upx;
min-height: 300upx;
display: flex;
flex-direction: column;
position: relative;
z-index: 3;
background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
border: 18upx solid #E4431A;
border-radius: 16px;
margin: 0 auto;
margin-top: -104upx;
padding: 48upx;
/* box-sizing: border-box; */
color: #fff;
}
.guize .title {
font-size: 35rpx;
text-align: center;
margin-bottom: 26upx;
}
.guize .g_item {
font-family: PingFang-SC-Medium;
font-size: 28rpx;
color: #FFFFFF;
letter-spacing: 0.5px;
text-align: justify;
}
.myrewards .title {
font-family: PingFang-SC-Bold;
font-size: 35rpx;
color: #E4431A;
letter-spacing: 0.57px;
display: flex;
padding-top: 36upx;
justify-content: center;
}
</style>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)