faiz
/
Huanyuyuehui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Huanyuyuehui/components/treasureBox/index.vue

302 lines
7.2 KiB
Vue
Raw Permalink Blame History

<template>
<view class="content">
<view class="bg">
<view class="top">
<view class="iconfont icon-guanbi2" style="position: absolute;right: 20px;top:50px;font-size: 30px;color: white;" @click="close"></view>
</view>
<view class="lucky-draw">
<image src="https://store.tropjoin.com/images/box.png" mode="aspectFit" style="width: 220px;height: 220px;position: relative;top: 12px;right: 16px;" v-if="!gifShow&&!popShow"></image>
<image src="https://store.tropjoin.com/images/box.gif" mode="aspectFit" style="width: 350px;height: 350px;" v-else-if="gifShow"></image>
<image src="https://store.tropjoin.com/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="con" v-if="blind">
<view class="contents">
<image src="@/static/images/jf.png" style="width: 48px;height:48px;" mode=""></image>
<view class="text-black">恭喜您获得</view>
<view class="text-red">{{drawInfo.text}}铸源星</view>
<view class="btn" @click="confirm" v-if="!drawInfo.wheel">开心收下</view>
<view class="btn" @click="goBlind" v-else>继续开盲盒</view>
</view>
<view class='iconfont icon-guanbi3' @click="popShow = false"></view>
</view>
<view class="con" v-else>
<view class="contents">
<image src="https://store.tropjoin.com/images/notBlind.png" style="width: 80px;height: 80px;" mode=""></image>
<view class="text-black">谢谢参与</view>
<view class="text-red">期待您下次再来</view>
<view class="btn" @click="confirm" v-if="!drawInfo.wheel">我知道了</view>
<view class="btn" @click="goBlind" v-else>继续开盲盒</view>
</view>
<view class='iconfont icon-guanbi3' @click="popShow = false"></view>
</view>
</view>
<blindBox v-if="blindShow" @cloneblindBox='close'></blindBox>
</view>
</template>
<script>
import {getWhellNumber,getWhellConfig,getWhellAction,getWhellList,setSignIntegral,setBlind} from '@/api/user.js';
import blindBox from '@/components/blindBox/blindBox.vue';
export default {
components: {
blindBox
},
data() {
return {
wheel:0,
popShow:false,
gifShow:false,
blindShow:false,
integral:'',
list:[],
blind:true,
drawInfo:{
img:'',
text:'',
wheel:0,
}
}
},
onLoad() {
},
methods: {
confirm(){
this.popShow = false;
this.blind=false;
this.close();
},
openBox(){ ;
setSignIntegral().then(res=>{
this.drawInfo.text = res.data.integral;
this.drawInfo.wheel=res.data.wheel;
this.gifShow=true;
this.blind=!!res.data.integral;
setTimeout(()=>{
this.gifShow=false;
this.popShow=true;
},1500)
}).catch(err=>{
// this.close();
return this.$util.Tips({title:err})
});
},
goBlind(){
this.blindShow=true;
this.popShow=false;
},
close(){
this.$emit('closeTreasureBox')
}
}
}
</script>
<style lang="less" scoped>
.content {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
z-index: 996;
padding-top: 200rpx;
background-color: rgba(0,0,0,1);
.coupon_popups{
z-index: 997;
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: 48%;
transform: translate(-50%,-50%);
width: 680rpx;
height: 900rpx;
background-size: 100% 700rpx;
background-repeat: no-repeat;
display: flex;
justify-content: center;
.contents{
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: 860rpx;
// 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('https://store.tropjoin.com/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('https://store.tropjoin.com/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('https://store.tropjoin.com/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>
Reference in New Issue View Git Blame Copy Permalink