<template>
	<view class="page">
		<u-navbar title="会员中心" :border-bottom="false" :background="bgc" back-icon-color="#333333" title-color='#333333'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <view class="list">
        	<view class="list_item" v-for="(item,index) in list" :key="index" @click="btnedit(item.id)">
        		<view class="lt">
        			<text class="discount">{{item.discountValue}}折</text>
        			<view class="decoration">
        				<view class="circle circle1"></view>
        				<view class="circle circle2"></view>
        				<view class="circle circle3"></view>
        			</view>
					<view class="cz" @click="show = true">
						<text class="price">￥{{item.price}}</text>
					</view>
        		</view>
				<view class="rt">
					<view class="bd">
						<view class="name">
							{{item.name}} <text v-if="item.status == 1">上架</text><text v-else>下架</text>
						</view>
						<view class="qixian">
							有效期{{item.validDays}}天
						</view>
						<view class="qixian" v-if="item.enableLimit">
							每{{item.limitRound}}天频率限制{{item.limitCount}}次,共可用{{item.limitTotal}}次
						</view>
						<view class="qixian" v-else>
							共可用{{item.limitTotal}}次
						</view>
						<view class="qixian">
							仅限{{item.areaName}}使用
						</view>
					</view>
				</view>
        	</view>
        </view>
		<view class="anniu">
			<view class="" @click="btnadd">
				新增
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#F7F8FA",
                },
				list:[]
			}
		},
		onLoad() {

		},
		onShow() {
			this.getlist()
		},
		methods: {
			// 请求会员列表
			getlist(){
				this.$u.get("/bst/vip/list?pageNum=1&pageSize=999").then(res =>{
					if(res.code == 200){
						this.list = res.rows
					}
				})
			},
			// 点击新增
			btnadd(){
				uni.navigateTo({
					url:'/page_fenbao/huiyuan/huiyuanadd'
				})
			},
			// 点击编辑
			btnedit(id){
				uni.navigateTo({
					url:'/page_fenbao/huiyuan/huiyuanadd?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
		padding-bottom: 250rpx;
		box-sizing: border-box;
	}
	.anniu{
		width: 100%;
		height: 200rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		z-index: 9;
		padding-top: 30rpx;
		box-sizing: border-box;
		view{
			width: 680rpx;
			height: 120rpx;
			background-color: #4297F3;
			color: #fff;
			text-align: center;
			line-height: 120rpx;
			border-radius: 50rpx;
			margin: auto;
			font-size: 36rpx;
			font-weight: 600;
		}
	}
	.buy_box {
	    padding: 0 46rpx;
	    position: fixed;
	    bottom: 0rpx;
		left: 0rpx;
	    width: 750rpx;
	    height: 780rpx !important;
	    background: #FFFFFF;
	    border-radius: 40rpx 40rpx 0 0;
	    z-index: 101;
	    box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
	    
	    .tit_txt {
	        padding-top: 114rpx;
	        font-weight: 600;
	        font-size: 32rpx;
	        color: #333333;
	        overflow: hidden;
	    }
	
	    .text {
	        margin-top: 20rpx;
	        font-weight: 400;
	        font-size: 28rpx;
	        color: #666666;
	        line-height: 1.6;
	    }
	
	    .taocan {
	        padding: 46rpx 40rpx;
	        position: absolute;
	        top: -140rpx;
	        left: 36rpx;
	        width: 680rpx;
	        height: 204rpx;
	        background: #FFFFFF;
	        border-radius: 30rpx;
	        z-index: 102;
	        box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.12);
	
	        .top {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	
	            .tit1 {
	                font-weight: 600;
	                font-size: 36rpx;
	                color: #333333;
	            }
	
	            .tit2 {
	                font-weight: 600;
	                font-size: 44rpx;
	                color: #FF4D4F;
	            }
	        }
	
	        .bot_left {
	            margin-top: 24rpx;
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	
	            .txt3 {
	                padding: 6rpx 16rpx;
	                background: linear-gradient(90deg, rgba(255, 77, 79, 0.1) 0%, rgba(255, 77, 79, 0) 100%);
	                border-radius: 8rpx;
	                font-weight: 500;
	                font-size: 26rpx;
	                color: #FF4D4F;
	            }
	
	            .txt4 {
	                font-weight: 500;
	                font-size: 26rpx;
	                color: #999999;
	            }
	        }
	    }
	
	    .btns_box {
			display: flex;
			flex-wrap: nowrap;
			padding: 30rpx 46rpx;
			justify-content: space-between;
	        position: absolute;
	        bottom: 0;
	        left: 0;
	        width: 750rpx;
	        height: 184rpx;
	        background: #FFFFFF;
	        box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
	        z-index: 200;
			
			.btn1{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 320rpx;
				height: 90rpx;
				border-radius: 45rpx;
				border: 2rpx solid #DDDDDD;
				font-weight: 600;
				font-size: 32rpx;
				color: #999999;
				transition: all 0.3s ease;
				
				&:active {
					background: #F5F5F5;
				}
			}
			
			.btn2{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 320rpx;
				height: 90rpx;
				background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
				border-radius: 45rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				box-shadow: 0 8rpx 16rpx rgba(255, 77, 79, 0.3);
				transition: all 0.3s ease;
				
				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 4rpx 8rpx rgba(255, 77, 79, 0.3);
				}
			}
	    }
	}
	
	.list{
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		
		.list_item{
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.98);
			}
			
			.lt{
				width: 230rpx;
				height: 230rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 230rpx;
				background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
				color: #FFFFFF;
				font-size: 48rpx;
				font-weight: 600;
				position: relative;
				overflow: hidden;
				box-shadow: 0 8rpx 16rpx rgba(255, 77, 79, 0.2);
				border-right: 1px dashed #F7F8FA;
				.discount {
					position: relative;
					z-index: 2;
				}
				.cz{
					color: #FFFFFF;					
					.price {
						font-size: 28rpx;
					}
					height: 60rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 100rpx;
				}
				.decoration {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					
					.circle {
						position: absolute;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.1);
					}
					
					.circle1 {
						width: 60rpx;
						height: 60rpx;
						top: 20rpx;
						left: 20rpx;
					}
					
					.circle2 {
						width: 40rpx;
						height: 40rpx;
						bottom: 30rpx;
						right: 30rpx;
					}
					
					.circle3 {
						width: 30rpx;
						height: 30rpx;
						bottom: 20rpx;
						left: 40rpx;
					}
				}
			}
			
			.rt{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 230rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				padding: 24rpx;
				box-sizing: border-box;
				box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.06);
				
				.bd{
					width: 100%;
					.name{
						font-size: 34rpx;
						font-weight: 600;
						color: #333333;
						margin-bottom: 12rpx;
						display: flex;
						align-items: center;
						display: flex;
						justify-content: space-between;
						text{
							font-weight: 400;
							font-size: 26rpx;
						}
						.hot-tag {
							margin-left: 12rpx;
							font-size: 22rpx;
							color: #FF4D4F;
							background: rgba(255, 77, 79, 0.1);
							padding: 2rpx 12rpx;
							border-radius: 12rpx;
						}
					}
					.qixian{
						color: #666666;
						font-size: 26rpx;
						margin-top: 12rpx;
						display: flex;
						align-items: center;
						
						.icon {
							margin-right: 8rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>