<template>
	<view>
		<view class="page">
			<view class="w100 h-180 relative">
				<uni-nav-bar left-icon="back" title="循环补贴" :border="false" backgroundColor="transparent" class="fw-b" color="#fff" @clickLeft="$tools.goBack()"></uni-nav-bar>
			</view>
			<view class="w100 rows rowsm mt-20 pl-20">
				<view class="rows rowsm">
					<view class="w-164 h-164 br-24 mr-20" style="border: 4rpx solid #fff;">
						<image class="w100 h100 br-24" :src="$tools.oss(infor.avatar)" mode="aspectFill"></image>
					</view>
					<view class="h-164 rows rowsl rowsb">
						<view class="rows rowsm">
							<view class="fs-36 fw-b colfff mr-20 one_overflow" style="max-width: 400rpx;">{{infor.nickname}}</view>
							<view class="pl-10 pr-10 bgff rows rowsc rowsm h-38 col fs-24 fw-b br-100" v-if="infor.level==1">酒鬼</view>
							<view class="pl-10 pr-10 bgff rows rowsc rowsm h-38 col fs-24 fw-b br-100" v-if="infor.level==2">酒圣</view>
							<view class="pl-10 pr-10 bgff rows rowsc rowsm h-38 col fs-24 fw-b br-100" v-if="infor.level==3">酒王</view>
							<view class="pl-10 pr-10 bgff rows rowsc rowsm h-38 col fs-24 fw-b br-100" v-if="infor.level==4">酒仙</view>
							<view class="pl-10 pr-10 bgff rows rowsc rowsm h-38 col fs-24 fw-b br-100" v-if="infor.level==5">酒神</view>
							<view class="pl-10 pr-10 bgff rows rowsc rowsm h-38 col fs-24 fw-b br-100" v-if="infor.level==6">酒佛</view>
						</view>
						<view class="rows rowsc rowsm w-160 br-10 h-40 colfff fs-26 fw-b" style="border: 2rpx solid #fff;">ID：{{infor.invitation||''}}</view>
						<text class="fs-28 fw-b colfff">{{infor.mobile}}</text>
					</view>
				</view>
			</view>
			<view class="w100 rows rowsm rowsa mt-20">
				<view class="rows rowsm rowsa" style="width: 60%;">
					<view class="rows rowsm colfff">
						<view :class="index==select?'box fs-26 br-20 w-146 h-74 rows rowsm rowsc':'fs-26 w-146 h-74 rows rowsm rowsc'" 
						v-for="(item,index) in type" :key="index" @click="onSel(index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="rows rowsl rowsm colfff" style="width: 40%;">
					<text class="fs-44 fw-b">{{prams.price||0.00}}</text>
					<text class="fs-26 mt-10">循环累计补贴</text>
				</view>
			</view>
			<view class="w100 rows rowsc mt-20">
				<view class="w-694 h-90 bg br-100 colfff rows rowsm rowsc fs-30 fw-b">
					消费额度{{prams.price_limit||0.00}}
				</view>
			</view>
		</view>
		<view class="w100 rows rowsm rowsl" v-if="list.length>0">
			<view class="w-702 rows rowsl p-all-20 bgff br-20 mb-20" v-for="(item,index) in list" :key="index">
				<text class="fs-26 fw-b">订单流水号：{{item.order_sn||''}}</text>
				<text class="fs-26 col mt-20">订单积分：{{item.price||''}}</text>
				<text class="fs-26 col mt-20">待补贴积分：{{item.quota||''}}</text>
				<text class="fs-26 mt-20">当前全国排名：{{item.sequence||''}}-{{item.unit||''}}</text>
			</view>
		</view>
		<view class="w100 rows rowsc h-600 rowsm" v-else>
			<image class="w-436 h-366" src="/static/other/5.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:[{id:1,name:'排队中'},{id:2,name:'已完成'}],
				select:0,
				infor:{},
				list:[],
				prams:{}
			}
		},
		onShow() {
			this.index()
			this.circulation()
		},
		methods: {
			onSel(index){
				this.select = index
				this.circulation()
			},
			index(){
				this.$tools.axiosFrom("POST","user/index").then(res => {
					this.infor = res.data
				})
			},
			circulation(){
				this.$tools.axiosFromToken("POST","promotion/circulation",{
					type:this.type[this.select].id
				}).then(res => {
					this.list = res.data.list
					this.prams = res.data.info
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F6FA;
	}
	.page{
		width: 750rpx;
		height: 616rpx;
		background: linear-gradient( 180deg, #E73232 0%, rgba(231,50,50,0.94) 30.45%, rgba(231,50,50,0.91) 53.88%, rgba(231,50,50,0.8) 69.29%, rgba(231,50,50,0.54) 81.67%, rgba(231,50,50,0.26) 90.37%, rgba(231,50,50,0) 100%);
	}
	.box{
		background-color: rgba(255, 255, 255, .1);
	}
</style>