<template>
	<view class="coupon-page">
		<NavCom title="我的优惠券"></NavCom>
		<view class="tab">
			<view class="tab-item" :class="{'active':tabIndex === index}" v-for="(item,index) in tabList" :key="index" @click="tabCk(index)">
				{{item.label}}
				<image src="@/static/mine/tab_bottom.png" mode="" class="tab-img" v-if="tabIndex === index"></image>
			</view>
		</view>
		<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower">
			<view v-if="list.length === 0" style="padding-top: 200rpx;">
				<empty></empty>
			</view>
			<view class="list" v-for="(item,index) in list" :key="index" :style="{backgroundImage:`url(${imgList[tabIndex]})`}">
				<view class="detail">
					<view class="header">
						<view class="name">
							购物满减券
						</view>
						<view class="time">有效期至2024-05-05</view>
					</view>
					<view class="type">
						新人<text class="price">10元</text>大礼包
					</view>
					<view class="tip">新人入门大礼包，满30减10元，申购指定商品可用</view>
				</view>
				<view class="status">{{tabList[tabIndex].label}}</view>
			</view>
		</scroll-view>
		<view class="footer" @click="moreCoupon">更多优惠券</view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import NavCom from '@/pages/components/nav.vue'
	export default{
	mixins: [myMixins],
		data(){
			return{
				tabList:[
					{label:"未使用",value:""},
					{label:"已使用",value:""},
					{label:"已失效",value:""},
				],
				tabIndex:0,
				type:'',
				list:[
					{},{},{},{},{},{}
				],
				imgList:{
					"0":'../../static/sign/qsy.png',
					"1":'../../static/sign/ysy.png',
					"2":'../../static/sign/ysx.png'
				}
			}
		},
		components:{NavCom},
		mounted() {
			
		},
		methods:{
			tabCk(index){
				this.tabIndex = index
			},
			moreCoupon(){
				uni.navigateTo({
					url:`/pages/mine/moreCoupon`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.coupon-page{
		.tab{
			width: 100%;
			display: flex;
			align-items: center;
			padding: 130rpx 22rpx 30rpx 22rpx;
			.tab-item{
				width: 250rpx;
				text-align: center;
				font-size: 32rpx;
				color: #999;
				position: relative;
				// border: 1px solid red;
				.tab-img{
					position: absolute;
					left: 70rpx;
					bottom: 6rpx;
					width: 77rpx;
					height: 11rpx;
				}
			}
			.active{
				color: #000000;
				font-weight: bold;
			}
		}
		.scroll-list-view{
			height: calc(100vh - 200rpx);
			box-sizing: border-box;
			padding-bottom: 160rpx;
			.list{
				width: 726rpx;
				height: 274rpx;
				display: flex;
				justify-content: space-between;
				background-repeat: no-repeat;
				background-size: 100%;
				.detail{
					width: 644rpx;
					.header{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 76rpx 0 89rpx;
						padding-top: 32rpx;
						.name{
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
						}
						.time{
							font-weight: 300;
							font-size: 24rpx;
							color: #333333;
						}
					}
					.type{
						font-weight: bold;
						font-size: 40rpx;
						color: #333333;
						margin-top: 33rpx;
						margin-left: 52rpx;
						.price{
							color: #F05248;
						}
					}
					.tip{
						margin-top: 21rpx;
						margin-left: 52rpx;
						font-weight: 300;
						font-size: 24rpx;
						color: #888888;
					}
				}
				.status{
					width: 24rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					height: 274rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-right: 30rpx;
				}
			}
		}
		.footer{
			position: fixed;
			bottom: 76rpx;
			left: 22rpx;
			width: 706rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>