<template>
	<view class="page">
		<view class="navbox">
			<view class="navitem" :class="sel==1?'selactive':''" data-id="1" @click="selnav">
				礼卷领取
			</view>
			<view class="navitem" :class="sel==2?'selactive':''" data-id="2" @click="selnav">
				我的礼卷
			</view>
		</view>
		
		
			<view class="quanbox" v-if="sel==1">
				<!-- <view class="xnavbox navboxk">
					<view class="xnavitem" :class="is_get==1?'xactive':''" @click="selli" :data-id="1">
						已领取
					</view>
					<view class="xnavitem" :class="is_get==2?'xactive':''" @click="selli" :data-id="2">
						未领取
					</view>
				</view> -->
				<view class="nodata" v-if="couponlist.length==0">暂无数据</view>
				<view class="boxa" v-else>
					<view class="aitem" v-for="(item,index) in couponlist" :key="index">
						<view class="left">
							<view class="name">{{item.name}}</view>
							<view class="time">有效期至{{item.pasttime}}</view>
						</view>
						<view class="btn" v-if="item.is_get==2">领取</view>
						<view class="btn activeA" v-if="item.is_get==1">已领取</view>
					</view>
					<!-- <view class="aitem">
						<view class="left">
							<view class="name">满90减50优惠券</view>
							<view class="time">有效期至2019-10-10 19:30:30</view>
						</view>
						<view class="btn activeA">已领取</view>
					</view> -->
				</view>
			</view>
			<view class="boxb" v-else>
				<view class="xnavbox">
					<view class="xnavitem" :class="status==1?'xactive':''" @click="selcoupon" :data-id="1">
						待使用
					</view>
					<view class="xnavitem" :class="status==2?'xactive':''" @click="selcoupon" :data-id="2">
						已使用
					</view>
					<view class="xnavitem" :class="status==3?'xactive':''" @click="selcoupon" :data-id="3">
						已过期
					</view>
				</view>
				<view class="nodata" v-if="couponlist.length==0">暂无数据</view>
				
				<view class="container" v-else>
					<view class="bitem" :class="item.status!=1?'borderactive':''" v-for="(item,index) in couponlist" :key="index">
						<view class="top">
							<view class="price">￥{{item.price}}</view>
							<view class="right">
								<view class="bname">
									<text v-if="item.type==2">抵用券</text>
									<text v-else>{{item.name}}</text>
									<text v-if="item.status==1">待使用</text>
									<text v-if="item.status==2">已使用</text>
									<text v-if="item.status==3">已过期</text>
								</view>
								<view class="tips">满{{item.fill_price}}元可用</view>
							</view>
						</view>
						<view class="btime">
							有效期至：{{item.pasttime}}
						</view>
					</view>
					<!-- <view class="bitem borderactive">
						<view class="top">
							<view class="price wordacticve">￥1</view>
							<view class="right">
								<view class="bname">
									<text class="wordacticve">抵用卷</text>
									<text>待使用</text>
								</view>
								<view class="tips wordacticve">满6元可用</view>
							</view>
						</view>
						<view class="btime wordacticve">
							有效期至：2019-10-10 19:30:30
						</view>
					</view>
				 -->
				</view>
			</view>
				
		
		
	
	</view>
</template>
<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				sel: 1,
				is_get:"",
				status:"",
				type:1,
				page:1,
				couponlist:[]
			}
		},
		onLoad() {
			this.getcoupon()
		},
		methods: {
			selnav(e) {
				this.sel = e.currentTarget.dataset.id;
				this.page=1;
				this.couponlist=[];
				if(this.sel==1){
					this.getcoupon()
				}else{
					this.getmycoupon()
				}
			},
			// 是否领取礼券
			selli(e){
				this.is_get=e.currentTarget.dataset.id;
			},
			selcoupon(e){
				console.log(48344834)
				this.status=e.currentTarget.dataset.id;
				this.page=1;
				this.couponlist=[];
				this.getmycoupon();
			},
			// 礼券领取
			getcoupon() {
				let that = this;
				var url = 'user_ticket/get_user_ticket';
				var params = {
					page:that.page,
					pageNum:10
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.couponlist=that.couponlist.concat(res.data.data);
					console.log(that.couponlist)
					

				}).catch((err) => {

				})
			},
			
			// 获取我的礼券
			getmycoupon(){
				let that = this;
				var url = 'user_ticket/get_user_ticket';
				var params = {
					is_get:1,
					status:that.status,
					page:that.page,
					pageNum:10
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.couponlist=that.couponlist.concat(res.data.data);
					console.log(that.couponlist)
					
				
				}).catch((err) => {
				
				})
			},
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}
	.navboxk{
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.quanbox {
		margin-top: 20rpx;
	}

	.navbox {
		height: 88rpx;
		background: #fff;
		display: flex;
	}

	.navitem {
		width: 50%;
		height: 100%;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(35, 35, 35, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selactive {
		color: #FF9417;
		font-weight: bold;
	}

	.boxa {
		margin-top: 16rpx;
		background: #fff;
		overflow: hidden;
		padding: 0 36rpx;
		box-sizing: border-box;
	}

	.aitem {
		height: 150rpx;
		border-bottom: 1px solid #FEFEFE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left {
		width: 340rpx;
	}

	.left .name {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(35, 35, 35, 1);
	}

	.left .time {
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(91, 94, 100, 1);
		margin-top: 8rpx;
	}

	.btn {
		width: 160rpx;
		height: 64rpx;
		border-radius: 8rpx;
		border: 1px solid rgba(255, 148, 23, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 148, 23, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.activeA {
		color: #BDC4CE;
		border-color: #BDC4CE;
	}

	.boxb {
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.xnavbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;
	}

	.xnavitem {
		width: 212rpx;
		height: 62rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(61, 69, 76, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
	}

	.xactive {
		background: #C29445;
		color: #fff;
	}

	.container {
		margin-top: 12rpx;
	}

	.bitem {
		margin-top: 16rpx;
		border-left: 8rpx solid #C29445;
		padding: 40rpx 32rpx 20rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.top {
		height: 156rpx;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}

	.price {
		font-size: 72rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(194, 148, 69, 1);
		margin-right: 32rpx;
	}

	.right {
		width: 100%;
	}

	.bname {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(91, 94, 100, 1);
	}

	.bname text:first-child {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: rgba(6, 18, 32, 1);
	}

	.tips {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(61, 68, 76, 1);
		margin-top: 16rpx;
	}

	.btime {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(61, 69, 76, 1);
		margin-top: 40rpx;
	}

	.borderactive {
		border-color: #BDC4CE;
	}

	.wordacticve {
		font-weight: 500 !important;
		color: rgba(189, 196, 206, 1) !important;
	}
</style>