709 lines
14 KiB
Vue
709 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<view class="container">
|
||
<view class="tui-dot" :class="['tui-dot-'+(index+1)]" v-for="(item,index) in circleList" :key="index"></view>
|
||
<view class="tui-container-in">
|
||
<view class="tui-content-out" :class="['tui-award-'+(index+1),index==indexSelect?'tui-awardSelect':'']" v-for="(item,index) in awardList"
|
||
:key="index">
|
||
<image v-if="item.img" class="tui-award-image" :src="item.img"></image>
|
||
<text class="tui-award-text">{{item.name}}</text>
|
||
</view>
|
||
<view class="tui-btn-start" :class="[isRunning?'tui-ative':'']" @tap="startDrawing">立即抽奖</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cishu">
|
||
<ad unit-id="adunit-32d9f5191a24a83a"></ad>
|
||
<view class="head">
|
||
<view class="num">我的抽奖机会：{{choice}}次</view>
|
||
<view @tap="showModal" class="more">更多次数</view>
|
||
</view>
|
||
<view class="tit">抽奖规则</view>
|
||
<view class="text-item" v-for="(item,index) in dayList" :key="index">
|
||
{{(index+1)}}.{{item}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="show-wrap" v-if="isShow">
|
||
<view class="show-model">
|
||
<view class="title">未登录</view>
|
||
<view class="content">请允许微信授权登录</view>
|
||
<view class="btn-group">
|
||
<button @tap="hideIsLogin" class="button-default">取消</button>
|
||
<button class="button-default button-blue getUserInfo" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">确认</button>
|
||
</view>
|
||
</view>
|
||
<view class="show-model-mask">
|
||
</view>
|
||
</view>
|
||
<view class="show-wrap" v-if="isLogin">
|
||
<view class="show-model">
|
||
<view class="title">更多抽奖次数</view>
|
||
<view class="content">
|
||
<view class="text-item" v-for="(item,index) in dayList" :key="index">
|
||
{{(index+1)}}.{{item}}
|
||
</view>
|
||
</view>
|
||
<view class="btn-group">
|
||
<button @tap.stop="close" class="button-default">取消</button>
|
||
<button open-type="share" class="button-default button-blue">确认</button>
|
||
</view>
|
||
</view>
|
||
<view class="show-model-mask" @tap.stop="close">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState,mapMutations } from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
circleList: 24, //圆点
|
||
awardList: [{
|
||
img: "",
|
||
name: "谢谢参与",
|
||
num:0
|
||
}, {
|
||
img: "/static/supprt/xin.png",
|
||
name: "5票",
|
||
num:5
|
||
}, {
|
||
img: "/static/supprt/xin.png",
|
||
name: "10票",
|
||
num:10
|
||
}, {
|
||
img: "/static/supprt/xin.png",
|
||
name: "20票",
|
||
num:20
|
||
}, {
|
||
img: "/static/supprt/xin.png",
|
||
name: "50票",
|
||
num:50
|
||
}, {
|
||
img: "/static/supprt/xin.png",
|
||
name: "66票",
|
||
num:66
|
||
}, {
|
||
img: "/static/supprt/xin.png",
|
||
name: "100票",
|
||
num:100
|
||
}, {
|
||
img: "/static/supprt/xin.png",
|
||
name: "188票",
|
||
num:188
|
||
}], //奖品数组
|
||
indexSelect: 0, //被选中的奖品index
|
||
isRunning: false ,//是否正在抽奖
|
||
dayList:['普通用户每日可有2次抽奖机会','每日零点刷新抽奖机会数量','抽奖次数不累计','每天可邀请4位好友助力，助力成功一次可增加一次抽奖机会'],
|
||
isLogin:false,
|
||
choice:0,
|
||
isShow:false,
|
||
id:''
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['hasLogin','userInfo'])
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id;
|
||
this.getUserInfo();
|
||
},
|
||
onShareAppMessage(){
|
||
if(this.id){
|
||
let userInfo = uni.getStorageSync('userInfo') || '';
|
||
return {
|
||
title:"助力抽奖",
|
||
path:"/pages/support/support?cid="+userInfo.token+'&id='+this.id,
|
||
imageUrl:"/static/nahan.jpg"
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getUserInfo(){
|
||
if(this.hasLogin){
|
||
this.request({
|
||
url:this.path+'/api/xyb/star/customerInfo',
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
this.choice = d.data.chouNum;
|
||
console.log(d)
|
||
}
|
||
})
|
||
}else{
|
||
this.showIsShow();
|
||
}
|
||
},
|
||
wxGetUserInfo(){
|
||
//api/xyb/wechat/wxLogin
|
||
let that = this;
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: loginRes => {//获取用户code
|
||
// if(!that.hasLogin){
|
||
//授权获取用户信息
|
||
uni.getUserInfo({
|
||
provider: 'weixin',
|
||
success: function(infoRes) {
|
||
that.request({
|
||
url: that.path + '/api/xyb/wechat/wxLogin',
|
||
data: {
|
||
code: loginRes.code,
|
||
sex:infoRes.userInfo.gender,
|
||
head:infoRes.userInfo.avatarUrl,
|
||
nick:infoRes.userInfo.nickName,
|
||
},
|
||
success: function(res) {
|
||
let d = res.data;
|
||
infoRes.userInfo.token = d.data.openid;
|
||
that.login(infoRes.userInfo)
|
||
that.hideIsShow();
|
||
}
|
||
});
|
||
|
||
}
|
||
});
|
||
|
||
// }
|
||
}
|
||
});
|
||
},
|
||
hideIsShow(){
|
||
this.isShow = false;
|
||
},
|
||
showIsShow(){
|
||
this.isShow = true;
|
||
},
|
||
showModal(){
|
||
this.isLogin = true;
|
||
},
|
||
close(){
|
||
this.isLogin = false;
|
||
},
|
||
//获取随机数
|
||
getRandom: function(u) {
|
||
let rnd = Math.random() > 0.5 ? "2" : "1";
|
||
u = u || 3;
|
||
for (var i = 0; i < u; i++) {
|
||
rnd += Math.floor(Math.random() * 10);
|
||
}
|
||
return Number(rnd);
|
||
},
|
||
addPiao(num){
|
||
this.request({
|
||
url:this.path+'/api/xyb/star/getMuch',
|
||
data:{
|
||
typeId:1,
|
||
much:num
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
console.log(d)
|
||
this.custChoice();
|
||
}
|
||
})
|
||
},
|
||
custChoice(){
|
||
this.request({
|
||
url:this.path+'/api/xyb/star/customerInfoUpdate',
|
||
data:{
|
||
type:0
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
console.log("抽奖次数减一")
|
||
this.getUserInfo();
|
||
}
|
||
})
|
||
},
|
||
//开始抽奖
|
||
startDrawing: function() {
|
||
if(this.choice>0){
|
||
if (this.isRunning) return
|
||
this.isRunning = true;
|
||
let indexSelect = 0;
|
||
let i = 0;
|
||
let randomNum = this.getRandom(3);
|
||
let timer = setInterval(() => {
|
||
++indexSelect;
|
||
//这里用y=30*x+150函数做的处理.可根据自己的需求改变转盘速度
|
||
indexSelect = indexSelect % 8;
|
||
this.indexSelect = indexSelect;
|
||
i += 40;
|
||
if (i > randomNum) {
|
||
//去除循环
|
||
clearInterval(timer)
|
||
timer = null;
|
||
//获奖提示
|
||
uni.showModal({
|
||
title: '恭喜您',
|
||
content: '获得了【' + this.awardList[indexSelect].name + '】',
|
||
confirmColor: '#5677FC',
|
||
showCancel: false, //去掉取消按钮
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.isRunning = false
|
||
}
|
||
},
|
||
complete: () => {
|
||
let num = this.awardList[indexSelect].num;
|
||
this.addPiao(num)
|
||
}
|
||
})
|
||
}
|
||
}, (70 + i))
|
||
}else{
|
||
uni.showToast({
|
||
title:'抽奖次数不足',
|
||
icon:'none'
|
||
})
|
||
return;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
page{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
/* #ifdef H5 */
|
||
height: calc(100vh - 50px);
|
||
/* #endif */
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
background-color: #FCC8D0;
|
||
}
|
||
.show-wrap{
|
||
border-radius: 10rpx;
|
||
.show-model-mask{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 10;
|
||
background-color: rgba(0,0,0,0.3);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.show-model{
|
||
z-index: 11;
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 80vw;
|
||
height: auto;
|
||
margin: -40vw;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
.title{
|
||
background-color: #4A67D6;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
.content{
|
||
background-color: #FFFFFF;
|
||
font-size: 26rpx;
|
||
padding: 15rpx 15rpx 25rpx;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
.text-item{
|
||
margin-top: 10rpx;
|
||
text-align: left;
|
||
color: rgba(0,0,0,0.8);
|
||
|
||
}
|
||
}
|
||
.btn-group{
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
box-shadow: 0 -4rpx 4rpx #F2F2F2;
|
||
padding: 0 30rpx;
|
||
.button-blue{
|
||
color: #4A67D6;
|
||
}
|
||
.button-default{
|
||
background-color: #FFFFFF;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
flex: 1;
|
||
}
|
||
button{
|
||
width: auto;
|
||
height: auto;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
border-radius: 0;
|
||
line-height: inherit;
|
||
background-color: #FFFFFF;
|
||
display: inline-block;
|
||
}
|
||
button::after{display: none;}
|
||
button + button{
|
||
border-left: 1px solid #F2F2F2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.text-item{
|
||
margin-top: 15rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.head{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.tit{
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
display: flex;
|
||
color: #FE99CE;
|
||
justify-content: center;
|
||
margin: 15rpx auto;
|
||
}
|
||
.cishu{
|
||
width: 560rpx;
|
||
height: auto;
|
||
background-color: #FFFAEF;
|
||
padding: 30rpx;
|
||
margin: 10rpx auto 0;
|
||
border-bottom-left-radius: 30rpx;
|
||
border-bottom-right-radius: 30rpx;
|
||
ad{margin-bottom: 20rpx;}
|
||
}
|
||
.num{
|
||
background-color: #FCC8D0;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
flex: 4;
|
||
}
|
||
.more{
|
||
background-color: #DD524D;
|
||
color: #FFFAEF;
|
||
font-size: 28rpx;
|
||
border-radius: 30rpx;
|
||
padding: 10rpx 20rpx;
|
||
flex: 2;
|
||
margin-left: 30rpx;
|
||
text-align: center;
|
||
}
|
||
.container {
|
||
height: 600rpx;
|
||
width: 650rpx;
|
||
background-color: #fc4034;
|
||
/* margin: auto; */
|
||
border-radius: 40rpx;
|
||
box-shadow: 0 10px 0 #d80014;
|
||
position: relative;
|
||
margin: 100rpx auto 0;
|
||
}
|
||
|
||
.tui-container-in {
|
||
width: 580rpx;
|
||
height: 530rpx;
|
||
background-color: #d80014;
|
||
border-radius: 40rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
/**小圆点 start*/
|
||
|
||
.tui-dot {
|
||
position: absolute;
|
||
display: block;
|
||
border-radius: 50%;
|
||
height: 20rpx;
|
||
width: 20rpx;
|
||
}
|
||
|
||
.tui-dot:nth-child(odd) {
|
||
background: #fff;
|
||
animation: 0.5s odd linear infinite;
|
||
}
|
||
|
||
.tui-dot:nth-child(even) {
|
||
background: #fcf400;
|
||
animation: 0.5s even linear infinite;
|
||
}
|
||
|
||
.tui-dot-1 {
|
||
left: 15rpx;
|
||
top: 15rpx;
|
||
}
|
||
|
||
.tui-dot-2 {
|
||
left: 117.5rpx;
|
||
top: 7.5rpx;
|
||
}
|
||
|
||
.tui-dot-3 {
|
||
left: 220rpx;
|
||
top: 7.5rpx;
|
||
}
|
||
|
||
.tui-dot-4 {
|
||
left: 322.5rpx;
|
||
top: 7.5rpx;
|
||
}
|
||
|
||
.tui-dot-5 {
|
||
left: 425rpx;
|
||
top: 7.5rpx;
|
||
}
|
||
|
||
.tui-dot-6 {
|
||
left: 527.5rpx;
|
||
top: 7.5rpx;
|
||
}
|
||
|
||
.tui-dot-7 {
|
||
left: 620rpx;
|
||
top: 15rpx;
|
||
}
|
||
|
||
.tui-dot-8 {
|
||
left: 622rpx;
|
||
top: 109rpx;
|
||
}
|
||
|
||
.tui-dot-9 {
|
||
left: 622rpx;
|
||
top: 203rpx;
|
||
}
|
||
|
||
.tui-dot-10 {
|
||
left: 622rpx;
|
||
top: 297rpx;
|
||
}
|
||
|
||
.tui-dot-11 {
|
||
left: 622rpx;
|
||
top: 391rpx;
|
||
}
|
||
|
||
.tui-dot-12 {
|
||
left: 622rpx;
|
||
top: 485rpx;
|
||
}
|
||
|
||
.tui-dot-13 {
|
||
left: 620rpx;
|
||
top: 565rpx;
|
||
}
|
||
|
||
.tui-dot-14 {
|
||
left: 517.5rpx;
|
||
top: 572rpx;
|
||
}
|
||
|
||
.tui-dot-15 {
|
||
left: 415rpx;
|
||
top: 572rpx;
|
||
}
|
||
|
||
.tui-dot-16 {
|
||
left: 312.5rpx;
|
||
top: 572rpx;
|
||
}
|
||
|
||
.tui-dot-17 {
|
||
left: 210rpx;
|
||
top: 572rpx;
|
||
}
|
||
|
||
.tui-dot-18 {
|
||
left: 107.5rpx;
|
||
top: 572rpx;
|
||
}
|
||
|
||
.tui-dot-19 {
|
||
left: 15rpx;
|
||
top: 565rpx;
|
||
}
|
||
|
||
.tui-dot-20 {
|
||
left: 7.5rpx;
|
||
top: 471rpx;
|
||
}
|
||
|
||
.tui-dot-21 {
|
||
left: 7.5rpx;
|
||
top: 377rpx;
|
||
}
|
||
|
||
.tui-dot-22 {
|
||
left: 7.5rpx;
|
||
top: 283rpx;
|
||
}
|
||
|
||
.tui-dot-23 {
|
||
left: 7.5rpx;
|
||
top: 189rpx;
|
||
}
|
||
|
||
.tui-dot-24 {
|
||
left: 7.5rpx;
|
||
top: 95rpx;
|
||
}
|
||
|
||
@-webkit-keyframes odd {
|
||
0% {
|
||
background: #fff;
|
||
}
|
||
|
||
100% {
|
||
background: #fcf400;
|
||
}
|
||
}
|
||
|
||
@keyframes odd {
|
||
0% {
|
||
background: #fff;
|
||
}
|
||
|
||
100% {
|
||
background: #fcf400;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes even {
|
||
0% {
|
||
background: #fcf400;
|
||
}
|
||
|
||
100% {
|
||
background: #fff;
|
||
}
|
||
}
|
||
|
||
@keyframes even {
|
||
0% {
|
||
background: #fcf400;
|
||
}
|
||
|
||
100% {
|
||
background: #fff;
|
||
}
|
||
}
|
||
|
||
/**小圆点 end*/
|
||
|
||
.tui-content-out {
|
||
position: absolute;
|
||
height: 150rpx;
|
||
width: 168rpx;
|
||
background-color: #fcecec;
|
||
border-radius: 15rpx;
|
||
box-shadow: 0 4px 0 #fcc8d0;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
/* 580 530 */
|
||
|
||
.tui-award-1 {
|
||
left: 24rpx;
|
||
top: 24rpx;
|
||
}
|
||
|
||
.tui-award-2 {
|
||
left: 206rpx;
|
||
top: 24rpx;
|
||
}
|
||
|
||
.tui-award-3 {
|
||
left: 388rpx;
|
||
top: 24rpx;
|
||
}
|
||
|
||
.tui-award-4 {
|
||
left: 388rpx;
|
||
top: 188rpx;
|
||
}
|
||
|
||
.tui-award-5 {
|
||
left: 388rpx;
|
||
top: 352rpx;
|
||
}
|
||
|
||
.tui-award-6 {
|
||
left: 206rpx;
|
||
top: 352rpx;
|
||
}
|
||
|
||
.tui-award-7 {
|
||
left: 24rpx;
|
||
top: 352rpx;
|
||
}
|
||
|
||
.tui-award-8 {
|
||
left: 24rpx;
|
||
top: 188rpx;
|
||
}
|
||
|
||
/**居中 加粗*/
|
||
|
||
.tui-btn-start {
|
||
position: absolute;
|
||
top: 188rpx;
|
||
left: 206rpx;
|
||
border-radius: 15rpx;
|
||
height: 150rpx;
|
||
width: 168rpx;
|
||
background-color: #fc4034;
|
||
box-shadow: 0 4px 0 #fcc8d0;
|
||
color: #fcf400;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
line-height: 150rpx;
|
||
}
|
||
|
||
.tui-ative {
|
||
opacity: 0.6 !important;
|
||
}
|
||
|
||
.tui-award-image {
|
||
/* position: absolute;
|
||
margin: auto;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0; */
|
||
height: 60rpx;
|
||
width: 60rpx;
|
||
}
|
||
|
||
.tui-award-text{
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
}
|
||
|
||
.tui-awardSelect {
|
||
background-color: #fcf400 !important;
|
||
box-shadow: 0 4px 0 rgb(240, 208, 12) !important;
|
||
}
|
||
</style>
|