<template>
	<view class="mg-lr-24">
		<view class="tab-list u-f u-f-jcc u-f-aic mg-bot-24">
			<view class="list-item" v-for="(item, index) in tabList" :key="item.id">
				<common-tab :acitve-tab="activeTab" :item="item" @tab-item="handleTabItem"></common-tab>
			</view>
		</view>
		
		<view v-if="activeTab=='tingche'">
			<view class="jifen-card mg-bot-46">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-18">
					<view class="u-f u-f-jcfs u-f-aic">
						<!-- <image style="width: 76rpx;height: 76rpx;" src="../.././static/demo/avatar.png" class="mg-right-10"></image> -->
						<text class="fs28 fw400 white-color">旅行的小七仔</text>
					</view>
				</view>
				<view class="jifen-card-content u-f u-f-jcsb u-f-aifs">
					<view class="u-f u-f-fdc u-f-aifs">
						<view class="u-f u-f-jcfs u-f-aic mg-bot-12">
							<text class="mg-right-10 fs24 fw400">当前可用积分</text>
							<text class="wenhao"></text>
						</view>
						<view class="fw700 light-black fs36 mg-bot-30">5,000</view>
						<view class="u-f u-f-jcfs u-f-aic fs24">
							<text class="light-gray mg-right-16">即将过期</text>
							<text class="light-black">5,000</text>
						</view>
					</view>
					<view class="u-f u-f-aic u-f-jcfe">
						<!-- <image style="width: 290rpx;height: 162rpx;" :mode="'widthFix'" src="../.././static/common/chejifen.png"></image> -->
					</view>
				</view>
			</view>
			
			<view class="mg-bot-20">
				<common-title :msg="'兑换积分'"></common-title>
			</view>
			
			<view class="white-bg-wrap mg-bot-36">
				<view class="form-input">
					<input class="uni-input my-input" placeholder="请输入要兑换的积分" />
				</view>
			</view>
			
			<view class="mg-bot-20">
				<common-title :msg="'兑换说明'"></common-title>
			</view>
			
			<view class="white-bg-wrap mg-bot-56">
				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
					<text class="fl-1">有效日期</text>
					<text class="fl-3">购买后30天有效</text>
				</view>
				
				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
					<text class="fl-1">使用时间</text>
					<text class="fl-3">营业时间内可用</text>
				</view>
				
				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-38">
					<text class="fl-1">适用规则</text>
					<text class='fl-3'>适用规则适用规则适用规则 适用规则适用规则适用规则</text>
				</view>
			</view>
			
			<view class="line-gradient-btn" style="padding: 24rpx;" @click="sureDuHuan">
				确认兑换
			</view>
		</view>
		
		<view v-else>
			<view class="jifen-card mg-bot-46">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-18">
					<view class="u-f u-f-jcfs u-f-aic">
						<!-- <image style="width: 76rpx;height: 76rpx;" src="../.././static/demo/avatar.png" class="mg-right-10"></image> -->
						<text class="fs28 fw400 white-color">旅行的小七仔</text>
					</view>
				</view>
				<view class="jifen-card-content u-f u-f-jcsb u-f-aifs">
					<view class="u-f u-f-fdc u-f-aifs">
						<view class="u-f u-f-jcfs u-f-aic mg-bot-12">
							<text class="mg-right-10 fs24 fw400">当前可用积分</text>
							<text class="wenhao"></text>
						</view>
						<view class="fw700 light-black fs36 mg-bot-30">5,000</view>
						<view class="u-f u-f-jcfs u-f-aic fs24">
							<text class="light-gray mg-right-16">即将过期</text>
							<text class="light-black">5,000</text>
						</view>
					</view>
					<view class="u-f u-f-aic u-f-jcfe">
						<!-- <image style="width: 144rpx;height: 144rpx;" :mode="'widthFix'" src="../.././static/common/jifen.png"></image> -->
					</view>
				</view>
			</view>
			
			<view class="white-bg-wrap mg-bot-36">
				<view class="fs30 fw700 light-black mg-bot-14">已连续签到3天</view>
				<view class="light-gray fs24 mg-bot-24">在连续签到4天，多获得10积分</view>
				<view class="u-f u-f-jcfs u-f-aic">
					<view class="card u-f u-f-fdc">
						<view class="gray-card u-f u-f-fdc u-f-aic mg-bot-30">
							<text class="fs24 main-color mg-bot-8">+2</text>
							<text class="check"></text>
						</view>
						<view class="fs24 light-gray u-f u-f-jcc u-f-aic">
							周一
						</view>
					</view>
					<view class="card u-f u-f-fdc">
						<view class="gray-card u-f u-f-fdc u-f-aic mg-bot-30">
							<text class="fs24 main-color mg-bot-8">+2</text>
							<!-- <text class="check"></text> -->
							<text class="light-gray fs24">7.18</text>
						</view>
						<view class="fs24 light-gray u-f u-f-jcc u-f-aic">
							周一
						</view>
					</view>
					<view class="card u-f u-f-fdc">
						<view class="gray-card highlight-card u-f u-f-fdc u-f-aic mg-bot-30">
							<text class="fs24 main-color mg-bot-8">+2</text>
							<!-- <text class="check"></text> -->
							<text class="light-gray fs24">7.18</text>
						</view>
						<view class="fs24 light-gray u-f u-f-jcc u-f-aic">
							周一
						</view>
					</view>
				</view>
			</view>
			
			<view class="line-gradient-btn mg-bot-40" style="padding: 24rpx;" @click="quickSign">
				立即签到
			</view>
			
			<view class="mg-bot-20">
				<common-title :msg="'签到说明'"></common-title>
			</view>
			
			<view class="white-bg-wrap mg-bot-56">
				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
					<text class="fl-1">有效日期</text>
					<text class="fl-3">购买后30天有效</text>
				</view>
				
				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
					<text class="fl-1">使用时间</text>
					<text class="fl-3">营业时间内可用</text>
				</view>
				
				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-38">
					<text class="fl-1">适用规则</text>
					<text class='fl-3'>适用规则适用规则适用规则 适用规则适用规则适用规则</text>
				</view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import commonTab from "../../components/common-tab/common-tab.vue"
	import commonTitle from "../.././components/common-title/common-title.vue"
	export default {
		components: {
			commonTab,
			commonTitle
		},
		data() {
			return {
				activeTab: 'meiri',
				tabList: [{
						name: "停车积分",
						id: "tingche"
					},
					{
						name: "每日签到",
						id: "meiri"
					}
				],
			}
		},
		methods: {
			handleTabItem(item) {
				this.activeTab = item.id
			},
			quickSign() {
				uni.showToast({
					icon: "none",
					title: "签到成功",
					duration: 500
				})
			},
			sureDuHuan() {
				uni.showToast({
					icon: "none",
					title: "兑换成功",
					duration: 500
				})
			}
		}
	}
</script>


<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss" scoped>
	.tab-list {
		.list-item {
			font-size: 30rpx;
			margin-right: 88rpx;
	
			&:last-child {
				margin-right: 0;
			}
		}
	}
	
	.jifen-card {
		padding: 18rpx 12rpx 12rpx 12rpx;
		background: linear-gradient( 92deg, #FF4502 0%, #FF8903 100%);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		.jifen-card-content {
			background-color: #FFF6EE;
			padding: 20rpx 18rpx 38rpx 18rpx;
			border-radius: 10rpx;
		}
	}
	
	.form-input {
		.my-input {
			width: 100%;
			height: 100%;
			background-color: #ffffff;
		}
	}
	
	.fl-1 {
		flex: 1;
	}
	.fl-3 {
		flex: 3;
	}
	
	.check {
		width: 36rpx;
		height: 36rpx;
		// background: url(../.././static/common/check.png) no-repeat center center;
		background-size: 100%;
	}
	
	.card {
		flex: calc(100% / 7 - 7rpx);
		max-width: calc(100% / 7 - 7rpx);
		margin-right: 7rpx;
		&:last-child {
			margin-right: 0;
		}
		.gray-card {
			padding-top: 24rpx;
			width: 100%;
			background: #FAFBFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.top-text {
				color: #333333;
			}
			.bottom-text {
				color: #999999;
			}
			&.highlight-card {
				background-color: #FFF6EA;
				.top-text {
					color: #FF8903;
				}
				
			}
		}
	}
	

</style>
