<template>
<view class="content">
<!-- <view class="wrap">
<image src="../../static/img/xcbg.png" mode="" class="bg"></image>
<view class="data-wrap">
<image src="../../static/img/cg-bg-t.png" mode=""></image>
<view class="cg-tit">
第{{current == 1 ? '一': (current == 2) ? '二': (current == 3? '三': '四')}}关
</view>
<view class="data">
<image src="../../static/img/yuanhuan.png" mode=""></image>
<view class="val" v-if="current == 1">
{{pool.one_pool_sum || '0'}}
</view>
<view class="val" v-if="current == 2">
{{pool.two_pool_sum || '0'}}
</view>
<view class="val" v-if="current == 3">
{{pool.three_pool_sum || '0'}}
</view>
<view class="val" v-if="current == 4">
{{pool.for_pool_sum || '0'}}
</view>
</view>
<view class="data-tit" v-if="current == 1">
当前推荐人数共 <text
style="color: #FF5F36;font-weight: bold;padding: 0 10rpx;">{{pool.one_pool_sum}}</text> 人
</view>
<view class="data-tit" v-if="current == 2">
排单号：<text class="num">{{pool.two_pool}}</text>，距离下一个出局需等待<text
class="num">{{pool.two_pool - pool.two_pool_out -1}}</text>位
</view>
<view class="data-tit" v-if="current == 3">
排单号：<text class="num">{{pool.three_pool}}</text>，距离下一个出局需等待<text
class="num">{{pool.three_pool - pool.three_pool_out -1}}</text>位
</view>
<view class="data-tit" v-if="current == 4">
排单号：<text class="num">{{pool.for_pool}}</text>，距离下一个出局需等待<text
class="num">{{pool.for_pool - pool.for_pool_out -1}}</text>位
</view>
<view class="next" @click="goNest" v-if="current == 1 && pool.two_pool > 0">
下一关
</view>
<view class="next" @click="goNest" v-if="current == 2 && pool.three_pool > 0">
下一关
</view>
<view class="next" @click="goNest" v-if="current == 3 && pool.for_pool > 0">
下一关
</view>
</view>
</view> -->
<swiper style="position: absolute;width: 100%;height: 100%;" :current="current" @change="changee">
<swiper-item>
<view class="tab1" >
<view class="tit">
第一关
</view>
<view class="status">
{{pool.one_pool_order_sum >= 4 ? '已激活': '未激活'}}
</view>
<view class="val-wrap">
{{pool.one_pool_order_sum || '0'}}<text>单</text>
</view>
</view>
</swiper-item>
<swiper-item >
<view class="tab1 tab2" >
<view class="tip">
{{pool.two_pool_my && pool.two_pool_my.length > 0 ? '恭喜进入': '未进入'}}
</view>
<view class="tit">
第二关
</view>
<view class="btn-list">
<view class="btn" v-if="pool.two_pool_my && pool.two_pool_my.length > 0">
{{pool.two_pool_my[0].no}}
</view>
</view>
<view class="val" v-if="pool.two_pool_my && pool.two_pool_my.length > 0">
当前排队共<text class="num">{{pool.two_pool_all.totel_count}}</text>组，前方等待出局<text
class="num">{{pool.two_pool_my_out}}</text>组
</view>
<view class="val" v-else>
当前暂未进入第二关
</view>
</view>
</swiper-item>
<swiper-item >
<view class="tab1 tab2 tab3" >
<view class="tip">
{{pool.three_pool_my && pool.three_pool_my.length > 0 ? '恭喜进入': '未进入'}}
</view>
<view class="tit">
第三关
</view>
<view class="btn-list">
<view class="btn" v-if="pool.three_pool_my && pool.three_pool_my.length > 0">
{{pool.three_pool_my[0].no}}
</view>
</view>
<view class="val" v-if="pool.three_pool> 0">
当前排队共<text class="num">{{pool.three_pool_all.totel_count}}</text>组，前方等待出局<text
class="num">{{pool.three_pool_my_out}}</text>组
</view>
<view class="val" v-else>
当前暂未进入第二关
</view>
</view>
</swiper-item>
<swiper-item >
<view class="tab1 tab2 tab4" >
<view class="tip">
{{pool.for_pool_my && pool.for_pool_my.length > 0 ? '恭喜进入': '未进入'}}
</view>
<view class="tit">
第四关
</view>
<view class="btn-list">
<view class="btn" v-if="pool.for_pool_my && pool.for_pool_my.length > 0">
{{pool.for_pool_my[0].no}}
</view>
</view>
<view class="val" v-if="pool.for_pool_my && pool.for_pool_my.length > 0">
当前排队共<text class="num">{{pool.for_pool_all.totel_count}}</text>组，前方等待出局<text
class="num">{{pool.for_pool_my_out}}</text>组
</view>
<view class="val" v-else>
当前暂未进入第四关
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
import {
getUserInfo,
userPool
} from '@/api/user.js';
export default {
data() {
return {
current: 0,
pool: {}
}
},
onShow() {
this.userPool()
},
computed: {
...mapState('user', ['userInfo'])
},
methods: {
changee(res) {
console.log(res);
this.current = res.detail.current
},
userPool() {
userPool().then(res => {
console.log(res);
this.pool = res.data
})
},
goNest() {
++this.current
}
}
}
</script>
<style lang="scss" scoped>
page {
height: auto;
min-height: 100%;
}
.wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.bg {
width: 100%;
height: 100%;
vertical-align: middle;
}
.data-wrap {
width: 750rpx;
height: 603rpx;
position: absolute;
bottom: 10%;
image {
width: 100%;
height: 100%;
}
.cg-tit {
width: 100%;
font-size: 36rpx;
font-family: Source Han Sans SC;
font-weight: bold;
color: #FFFFFF;
line-height: 66rpx;
text-align: center;
position: absolute;
top: 0;
}
.data {
position: absolute;
top: 126rpx;
left: 0;
right: 0;
margin: auto;
width: 222rpx;
height: 222rpx;
image {
width: 100%;
height: 100%;
}
.val {
position: absolute;
width: 222rpx;
height: 222rpx;
top: 0;
left: 0;
text-align: center;
line-height: 222rpx;
font-size: 48rpx;
font-weight: bold;
background-image: linear-gradient(to bottom, yellow, red, yellow, red);
color: transparent;
-webkit-background-clip: text;
}
}
.data-tit {
font-size: 32rpx;
font-weight: 500;
color: #333333;
position: absolute;
width: 100%;
bottom: 194rpx;
text-align: center;
}
.next {
width: 372rpx;
height: 83rpx;
background: linear-gradient(0deg, #FF5138 0%, #FF9F2D 100%);
border: 4px solid #eabb72;
border-radius: 41rpx;
font-size: 40rpx;
font-weight: 800;
color: #FFFFFF;
text-align: center;
margin: auto;
}
}
}
.num {
color: #FF5F36;
font-weight: bold;
padding: 0 10rpx;
}
.tab1 {
background-color: #f36c34;
// position: absolute;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
align-items: center;
.tit {
padding-top: 189rpx;
font-size: 124rpx;
font-weight: bold;
letter-spacing:20rpx;
}
.status {
display: inline-block;
margin: auto;
padding-top: 69rpx;
font-size: 66rpx;
padding-bottom: 30rpx;
border-bottom: 2px solid #fff;
}
.val-wrap {
width: 290rpx;
height: 290rpx;
border-radius: 50%;
border: 5px solid #fff;
font-size: 96rpx;
line-height: 290rpx;
margin:92rpx auto 0;
text {
font-size: 52rpx;
}
}
}
.tab2 {
background-color: #ede1a7;
color: #2543c7;
.tip {
font-size: 64rpx;
padding: 90rpx 0 110rpx;
}
.tit {
padding-top: 0;
}
.btn-list {
padding-top: 100rpx;
padding-bottom: 110rpx;
.btn {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border: 2px solid #2543c7;
line-height: 120rpx;
font-size: 62rpx;
font-weight: bold;
margin:0 auto 15rpx;
}
}
.val {
font-size: 40rpx;
color: #333333;
text {
color: #2543c7;
}
}
}
.tab3 {
background-color: #030e8a;
color: #dbe045;
.btn-list {
.btn {
border-color: #dbe045;
}
}
.val {
font-size: 40rpx;
color: #fff;
text {
color: #dbe045;
}
}
}
.tab4 {
background-color:#ff310e;
color: #fff;
.btn-list {
.btn {
border-color: #fff;
}
}
.val {
font-size: 40rpx;
color: #fff;
text {
color: #fff;
}
}
}
</style>