<template>
	<view class="">
		<view class="theretowcontent flex-between">
			<view class="theretowcontent_item flex-colum" v-for="(item,index) in list" :key="index"
				@click="clickmemberinfos(item)">
				<view :class="index == 0?'theretowcontent_item_one':'theretowcontent_item_ones'">
					{{item.title}}
				</view>
				<view :class="index == 0?'theretowcontent_item_tow':'theretowcontent_item_tows'">
					￥{{item.price}}/<text>{{item.frequ}}次</text>
				</view>
				<view :class="index == 0?'theretowcontent_item_there':'theretowcontent_item_theres'">
					({{item.show}})
				</view>
				<view :class="index == 0?'theretowcontent_item_box':'theretowcontent_item_boxs'">
					{{item.is_user_sec == '0'?'购买':'加购'}}
				</view>
				<image class="theretowcontent_item_image" :src="item.img" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			data: {
				type: Number,
				default: 0
			},

		},
		methods: {
			clickmemberinfos(e) { //购买会员卡
				if (e.is_user_sec == 0) {
					uni.pro.navigateTo('my/member/memberinfos', {
						id: e.id,
					})
					// async toworder() { //会员卡
					// let res = await this.api.userreceivebalancecar({
					// 	store_id: uni.cache.get('store_id') // 判断显示哪家的作品
					// })
					// uni.showToast({
					// 	title: '领取成功',
					// 	icon: 'none'
					// });
					// setTimeout(() => {
					// 	uni.pro.navigateTo('my/member/index')
					// }, 1500);
					// },
				} else {
					uni.pro.navigateTo('my/member/memberinfo', {
						id: e.id,
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	.theretowcontent {
		width: 100%;
		padding: 24rpx 32rpx;

		.theretowcontent_item {
			padding: 16rpx;
			width: 48%;
			border-radius: 10rpx;
			justify-content: flex-start;
			align-items: flex-start;
			position: relative;
			z-index: 10;

			.theretowcontent_item_one {
				width: 55%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

			.theretowcontent_item_ones {
				width: 55%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #422A07;
			}

			.theretowcontent_item_tow {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-family: Roboto-Regular, Roboto;
				font-weight: 400;
				color: #FFFFFF;

				text {
					font-size: 20rpx;
				}
			}

			.theretowcontent_item_tows {
				margin-top: 20rpx;
				font-family: Roboto-Regular, Roboto;
				font-weight: 400;
				color: #422A07;
				font-size: 28rpx;

				text {
					font-size: 20rpx;
				}
			}

			.theretowcontent_item_there {
				margin-top: 6rpx;
				font-size: 20rpx;
				width: 100%;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #D1CECE;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.theretowcontent_item_theres {
				margin-top: 6rpx;
				font-size: 20rpx;
				overflow: hidden;
				width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #422A07;
			}

			.theretowcontent_item_box {
				position: absolute;
				top: 20rpx;
				right: 16rpx;
				padding: 6rpx 26rpx;
				font-size: 24rpx;
				font-family: Roboto-Bold, Roboto;
				font-weight: bold;
				color: #FFFFFF;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.73) 0%, rgba(128, 128, 128, 0.73) 100%);
				box-shadow: 0px 6px 12rpx 2rpx rgba(49, 47, 47, 0.85);
				border-radius: 20rpx;
			}

			.theretowcontent_item_boxs {
				position: absolute;
				top: 20rpx;
				right: 16rpx;
				padding: 6rpx 26rpx;
				font-size: 24rpx;
				font-family: Roboto-Bold, Roboto;
				font-weight: bold;
				color: #F6AE5B;
				background: linear-gradient(180deg, #F9F9F9 0%, #FADAB5 100%);
				box-shadow: 0px 6rpx 12rpx 2px rgba(226, 172, 110, 0.55);
				border-radius: 20rpx;
			}

			.theretowcontent_item_image {
				border-radius: 16rpx;
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				z-index: -1;
				height: 100%;
			}
		}
	}
</style>