283 lines
6.2 KiB
Vue
283 lines
6.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="bg">
|
|
<view class="top">
|
|
<view class="iconfont icon-guanbi2" style="position: absolute;right: 20px;top:-40px;font-size: 30px;color: white;" @click="close"></view>
|
|
</view>
|
|
<view class="lucky-draw">
|
|
|
|
<image src="@/static/images/box.png" mode="aspectFit" style="width: 220px;height: 220px;position: relative;top: 12px;right: 16px;" v-if="!gifShow&&!popShow"></image>
|
|
<image src="@/static/images/box.gif" mode="aspectFit" style="width: 350px;height: 350px;" v-else-if="gifShow"></image>
|
|
<image src="@/static/images/box2.png" mode="aspectFit" style="width: 350px;height: 350px;position: relative;top: 10px;right: 10px;" v-else-if="!gifShow&&popShow"></image>
|
|
</view>
|
|
<view class="btn" @click="openBox">
|
|
立刻开启
|
|
</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="confirm">开心收下</view>
|
|
</view>
|
|
<view class='iconfont icon-guanbi3' @click="popShow = false"></view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {getWhellNumber,getWhellConfig,getWhellAction,getWhellList,setSignIntegral} from '@/api/user.js';
|
|
import blindBox from '@/components/blindBox/blindBox.vue';
|
|
export default {
|
|
components: {
|
|
blindBox
|
|
},
|
|
data() {
|
|
return {
|
|
wheel:0,
|
|
popShow:false,
|
|
gifShow:false,
|
|
integral:'',
|
|
list:[],
|
|
drawInfo:{
|
|
img:'',
|
|
text:'',
|
|
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
},
|
|
methods: {
|
|
confirm(){
|
|
this.popShow = false;
|
|
this.close();
|
|
},
|
|
async openBox(){
|
|
await setSignIntegral().then(res=>{
|
|
this.drawInfo.text = res.data.integral;
|
|
this.gifShow=true;
|
|
setTimeout(()=>{
|
|
this.gifShow=false;
|
|
this.popShow=true;
|
|
},1500)
|
|
}).catch(err=>{
|
|
this.close();
|
|
return this.$util.Tips({title:err})
|
|
});
|
|
|
|
},
|
|
close(){
|
|
this.$emit('closeTreasureBox')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 1000;
|
|
padding-top: 200rpx;
|
|
background-color: rgba(0,0,0,1);
|
|
.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,.8);
|
|
}
|
|
|
|
.con{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 680rpx;
|
|
height: 900rpx;
|
|
background-size: 100% 700rpx;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
justify-content: center;
|
|
.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;
|
|
|
|
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{
|
|
width: 488rpx;
|
|
height: 140rpx;
|
|
background-image: url('@/static/images/box-title.png');
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.lucky-draw{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 670rpx;
|
|
height: 670rpx;
|
|
margin: 0 auto;
|
|
// background-image: url('@/static/images/box.png');
|
|
background-size: 100% 100%;
|
|
.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;
|
|
}
|
|
}
|
|
.btn{
|
|
width: 460rpx;
|
|
height: 100rpx;
|
|
background: linear-gradient(180deg, #FEFD65 0%, #F3C936 100%);
|
|
border-radius: 60rpx;
|
|
border: 4rpx solid #FFFFFF;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #530115;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
top: 160rpx;
|
|
}
|
|
.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> |