523 lines
11 KiB
Vue
523 lines
11 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="t-bg" style="">
|
||
<image class="t-wan" src="./luck/wenan.png"></image>
|
||
<image class="t-wan-lp" src="./luck/hengfu.png"></image>
|
||
<view class="t-choujiang t-flex-row" style="background-image:url('./luck/BJ.png')">
|
||
<choujiangcanvas v-if="list.length" ref="lucky" startText="开始" :wIndex="0" :luckyList="list"
|
||
@onReadyStart="onReadyStart" @lotteryData="getLotterData"></choujiangcanvas>
|
||
</view>
|
||
</view>
|
||
<!-- 规则部分 -->
|
||
<view class="t-bottom">
|
||
<view class="t-luck-wrapper">
|
||
<view class="t-jh t-flex-row" style="background-image:url('./luck/anniu.png')">
|
||
剩余免费抽奖{{luckDrawTimes}}次
|
||
</view>
|
||
<!-- <view class="t-fuhuo-text t-flex-row">{{freeNumDay}}</view> -->
|
||
<view class="t-fh-fs t-flex-row-sb">
|
||
<view class="t-flex-row" @tap='goUrl("/pages/me/withdraw/index")' hover-class="t-click-class">红包 {{totalMoney}}</view>
|
||
<button open-type="share" @tap='goUrl("/pages/task/prizeList?source=2")' class="t-share t-flex-row t-plain-btn"
|
||
hover-class="t-click-class">我的奖品</button>
|
||
</view>
|
||
<view class="t-line"></view>
|
||
<view class="t-r-title t-flex-row">活动规则</view>
|
||
<view class="t-rule">
|
||
<text>1.抽奖细则：每日前{{ freeNumDay }}次付款均可获得抽奖机会</text>
|
||
<text>2.奖励说明：红包奖励将自动发放到红包余额，已绑定支付宝账号将会自动发起提现。其余奖品则需联系客服领取。</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 抽奖结束弹窗 -->
|
||
<kevy-mask :show="isShowAwd" @click="toConfirmAwd">
|
||
<view class="t-full t-flex-row">
|
||
<view class="t-tk-modal">
|
||
<view class="t-tk-bg t-bg-full" style="background-image:url('./luck/tankuang.png')">
|
||
<view v-if="drawIdx!=null && drawIdx == 0" class="t-xxcy t-flex-col-s">
|
||
<image src="./luck/xiexiecanyu.png"></image>
|
||
<view class="t-xxcy-ts t-flex-row">再努力努力肯定就会中哦~</view>
|
||
</view>
|
||
<view v-if="drawIdx!=null && drawIdx > 0" class="t-tk-zj t-flex-col-s">
|
||
<image class="t-tk-zj-tip" src="./luck/wenzi.png"></image>
|
||
<view class="t-tk-zj-desc t-flex-col">
|
||
<image class="t-zj-jp" :src="'./luck/'+drawIdx+'.png'"></image>
|
||
<view class="t-zj-jp-desc">某某公司提供的能量动力
|
||
{{drawIdx==5?"探亲礼包":(drawIdx==4?"加油卡":(drawIdx==3?"鸡腿":(drawIdx==2?"方便面":"矿泉水")))}}，同等价值{{drawIdx==5?"888":(drawIdx==4?"100":(drawIdx==3?"10":(drawIdx==2?"5":"2")))}}元现金已到账微信零钱
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view @click="toConfirmAwd" class="t-tk-btn t-bg-full"
|
||
style="background-image:url('./luck/xiaoanniu.png')">
|
||
{{drawIdx > 0?"领取":"确定"}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</kevy-mask>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
drawCount,
|
||
selectUserMoney,
|
||
selectDiscSpinning,
|
||
discSpinningdraw
|
||
} from '@/api/index/index.js';
|
||
import choujiangcanvas from './choujiangcanvas.vue'
|
||
var animation = uni.createAnimation({
|
||
duration: 4000,
|
||
timingFunction: 'ease-out'
|
||
});
|
||
import kevyMask from './kevy-mask.vue';
|
||
export default {
|
||
components: {
|
||
kevyMask,
|
||
choujiangcanvas
|
||
},
|
||
data() {
|
||
return {
|
||
totalMoney: 0, //红包
|
||
rotate: 0, //度数-抽奖动画
|
||
turning: false, //转盘是否正在转
|
||
luckDrawTimes: 0, //抽奖机会，5代表可以抽5次
|
||
isShowAwd: false, //是否显示奖品弹框，抽奖后提示，要么中奖奖品，要么谢谢参与
|
||
drawIdx: null, //抽到的奖品下标，用于指定中奖奖品并旋转转盘到对应奖品处。例如共5个奖品，下标3代表第4个奖品，下标从0开始
|
||
// 每天免费抽奖次数
|
||
freeNumDay: 0,
|
||
list: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getRedPack();
|
||
this.getCount();
|
||
this.getPrizeList();
|
||
},
|
||
methods: {
|
||
goUrl(url){
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
},
|
||
async onReadyStart() {
|
||
// 后台处理获得开奖数据
|
||
const res = await discSpinningdraw({
|
||
source: 1
|
||
});
|
||
console.log(res, 'debug')
|
||
this.wIndex = 2
|
||
// this.$refs.lucky.o n S t a r t()
|
||
this.$refs.lucky.onStart() // 官方大大把这个过滤掉了o.n.S.t.a.r.t()
|
||
},
|
||
getLotterData(data) {
|
||
console.log(data, 'debugger')
|
||
},
|
||
// 抽奖次数
|
||
async getCount() {
|
||
const res = await drawCount({
|
||
source: 1
|
||
});
|
||
// this.luckDrawTimes = 10;
|
||
this.luckDrawTimes = res.count || 0;
|
||
this.freeNumDay = res.sum || 0;
|
||
},
|
||
// 红包
|
||
async getRedPack() {
|
||
const res = await selectUserMoney();
|
||
this.totalMoney = res.amount;
|
||
},
|
||
// 获取奖品列表
|
||
async getPrizeList() {
|
||
const res = await selectDiscSpinning({
|
||
source: 1
|
||
});
|
||
this.list = res.records
|
||
},
|
||
|
||
/**
|
||
* 确认奖品按钮点击事件
|
||
*/
|
||
toConfirmAwd() {
|
||
//这里中奖信息关闭弹框
|
||
this.isShowAwd = false;
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.content {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.t-bg {
|
||
background-image:url('./luck/DZP_BJ.png');
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
height: 1200rpx;
|
||
padding-top: 345rpx;
|
||
/* margin-top: 40rpx; */
|
||
}
|
||
|
||
.t-overlay {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9999;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
transition: all 0.5s;
|
||
}
|
||
|
||
.t-wan {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 283rpx;
|
||
top: 12rpx;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.t-wan-lp {
|
||
position: absolute;
|
||
width: 370rpx;
|
||
height: 130rpx;
|
||
top: 223rpx;
|
||
z-index: 0;
|
||
left: calc(50% - 185rpx);
|
||
}
|
||
|
||
.t-choujiang {
|
||
width: 630rpx;
|
||
height: 630rpx;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
margin: 0rpx auto;
|
||
position: relative;
|
||
}
|
||
|
||
.t-zp {
|
||
width: 577rpx;
|
||
height: 577rpx;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
transform-origin: 0% 100%;
|
||
}
|
||
|
||
.t-start {
|
||
width: 146rpx;
|
||
height: 171rpx;
|
||
position: absolute;
|
||
z-index: 1;
|
||
}
|
||
|
||
.t-jh {
|
||
width: 456rpx;
|
||
height: 120rpx;
|
||
margin: 0 auto;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
font-size: 40rpx;
|
||
color: #980100;
|
||
}
|
||
|
||
.t-fuhuo-text {
|
||
font-size: 30rpx;
|
||
color: #980100;
|
||
width: 100%;
|
||
height: 42rpx;
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.t-fh-fs {
|
||
width: 580rpx;
|
||
height: 100rpx;
|
||
margin: 20rpx auto 0rpx;
|
||
}
|
||
|
||
.t-fh-fs view {
|
||
width: 250rpx;
|
||
height: 100rpx;
|
||
background-image: linear-gradient(180deg, #DF0236 0%, #DD0227 100%);
|
||
border-radius: 10rpx;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.t-share {
|
||
width: 250rpx;
|
||
height: 100rpx;
|
||
background-image: linear-gradient(180deg, #DF0236 0%, #DD0227 100%);
|
||
border-radius: 10rpx;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.t-bottom {
|
||
position: relative;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
opacity: 0.99;
|
||
background: #FDC469;
|
||
}
|
||
|
||
.t-luck-wrapper {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
top: -219rpx;
|
||
}
|
||
|
||
.t-line {
|
||
width: 580rpx;
|
||
height: 1rpx;
|
||
margin: 50rpx auto 0rpx;
|
||
background: #980100;
|
||
}
|
||
|
||
.t-r-title {
|
||
font-size: 28rpx;
|
||
color: #980100;
|
||
height: 40rpx;
|
||
width: 100%;
|
||
margin: 30rpx auto 0rpx;
|
||
width: 585rpx;
|
||
}
|
||
|
||
.t-rule {
|
||
margin: 10rpx auto 0rpx;
|
||
width: 585rpx;
|
||
}
|
||
|
||
.t-rule text {
|
||
font-size: 28rpx;
|
||
color: #980100;
|
||
text-align: justify;
|
||
display: block;
|
||
}
|
||
|
||
.t-wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
top: 0rpx;
|
||
}
|
||
|
||
.t-video-con {
|
||
width: 100%;
|
||
height: 422rpx;
|
||
background: #fff;
|
||
position: relative;
|
||
}
|
||
|
||
.t-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.t-close {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 0rpx;
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
padding: 30rpx;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.t-nocice {
|
||
position: fixed;
|
||
left: 0rpx;
|
||
top: 0rpx;
|
||
z-index: 999;
|
||
width: 100%;
|
||
height: 40rpx !important;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.t-tk-modal {
|
||
width: 632rpx;
|
||
height: 588rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.t-tk-bg {
|
||
width: 100%;
|
||
height: 528rpx;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.t-tk-btn {
|
||
width: 336rpx;
|
||
height: 120rpx;
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
left: calc(50% - 168rpx);
|
||
font-size: 40rpx;
|
||
color: #980100;
|
||
line-height: 120rpx;
|
||
text-align: center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.t-flex-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-flex-row-sa {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-flex-row-sb {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-flex-row-s {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-flex-row-s-s {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.t-flex-row-s-e {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.t-flex-row-e {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.t-flex-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-flex-col-sa {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-flex-col-sb {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-flex-col-s {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-flex-col-s-s {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.t-flex-col-s-e {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.t-flex-col-e {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.t-xxcy image {
|
||
width: 400rpx;
|
||
height: 148rpx;
|
||
margin-top: 139rpx;
|
||
}
|
||
|
||
.t-xxcy-ts {
|
||
width: 510rpx;
|
||
height: 100rpx;
|
||
background: #FEF2CD;
|
||
border-radius: 20rpx;
|
||
font-size: 30rpx;
|
||
color: #D93637;
|
||
margin-top: 43rpx;
|
||
}
|
||
|
||
.t-tk-zj {}
|
||
|
||
.t-tk-zj-tip {
|
||
width: 347rpx;
|
||
height: 106rpx;
|
||
margin-top: 44rpx;
|
||
}
|
||
|
||
.t-tk-zj-desc {
|
||
width: 474rpx;
|
||
height: 281rpx;
|
||
background: #FEF2CD;
|
||
border-radius: 20rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.t-zj-jp {
|
||
width: 264rpx;
|
||
height: 157rpx;
|
||
}
|
||
|
||
.t-zj-jp-desc {
|
||
font-size: 24rpx;
|
||
color: #D93637;
|
||
text-align: justify;
|
||
width: 420rpx;
|
||
}
|
||
|
||
.t-click-class {
|
||
opacity: 0.7;
|
||
}
|
||
</style> |