<template>
	<view style="display: flex;flex-direction: column;height: 100%;">

		<view style="display: flex;flex-direction: column;align-items: center; padding-bottom: 50px;">
			<view v-for="(item,index) in data"
				style="display: flex;flex-direction: column;border:  1px solid #e29a68;width: 90%;border-radius: 20rpx;margin-top: 8px;">

				<view class="use" :style="{'background':item.showBtn?'#ce644e':'#999999'}" style="">
					<view style="flex: 1;display: flex;flex-direction: column;">
						<view style="font-size: 15px;padding: 2px;padding-left: 5px;">{{item.name}}</view>
						<view style="font-size: 13px;padding-left: 5px;padding-bottom: 2px;">{{item.time}}</view>
					</view>

					<view v-if="item.showBtn" style="flex-shrink: 0;padding: 5px;font-size: 14px;">预约提货</view>
				</view>
				<view style="width: 100%;text-align: center;margin-top: 10px;margin-bottom: 10px;">{{item.state}}</view>
			</view>
		</view>
		<view
			style="bottom: 0;z-index: 1;position: fixed;background: #f1f2f3;width: 100%;height: 35px;line-height: 35px;text-align: center;color: red;">
			绑定新卡</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [{
					showBtn: true,
					time: "2023.10.20-2025.10.20",
					name: "卡号:123456789",
					state: "已失效",
					sid: ""
				}, {
					showBtn: false,
					time: "2023.10.20-2025.10.30",
					name: "卡号:1234567809",
					state: "已失效1"
				}, {
					showBtn: false,
					time: "2023.10.20-2025.10.30",
					name: "卡号:1234567809",
					state: "已失效1"
				}, {
					showBtn: false,
					time: "2023.10.20-2025.10.30",
					name: "卡号:1234567809",
					state: "已失效1"
				}, {
					showBtn: false,
					time: "2023.10.20-2025.10.30",
					name: "卡号:1234567809",
					state: "已失效1"
				}, {
					showBtn: false,
					time: "2023.10.20-2025.10.30",
					name: "卡号:1234567809",
					state: "已失效1"
				}, {
					showBtn: false,
					time: "2023.10.20-2025.10.30",
					name: "卡号:1234567809",
					state: "已失效1"
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.use {
		display: flex;
		flex-direction: row;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		color: #FFF;
		align-items: center;
	}

	uni-page-body,
	page {
		width: 100%;
		height: 100%;
	}
</style>