chuangte_bike_newxcx/page_fenbao/huiyuan/huiyuanlist.vue

<template>
	<view class="page">
		<u-navbar title="会员中心" :border-bottom="false" :background="bgc" back-icon-color="#111827" title-color='#111827'
			title-size='34' title-bold height='44' id="navbar">
		</u-navbar>
		
        <view class="list">
        	<view class="vip-card" 
				v-for="(item,index) in list" 
				:key="index" 
				@click="btnedit(item.id)"
				:class="getTheme(index, item.price).className"
			>
				<!-- 背景装饰 -->
				<view class="card-bg">
					<view class="bg-circle c1"></view>
					<view class="bg-circle c2"></view>
					<view class="glass-layer"></view>
				</view>

				<!-- 内容区域 -->
				<view class="card-content">
					<!-- 头部：图标+名称+价格 -->
					<view class="card-header">
						<view class="header-left">
							<view class="icon-box">
								<u-icon name="level" size="32" :color="getTheme(index, item.price).iconColor"></u-icon>
							</view>
							<view class="name-box">
								<text class="vip-name">{{item.name}}</text>
								<text class="vip-desc" v-if="item.discountValue">{{item.discountValue}}折优惠</text>
							</view>
						</view>
						<view class="header-right">
							<view class="price-box">
								<text class="symbol">¥</text>
								<text class="price">{{item.price}}</text>
							</view>
						</view>
					</view>

					<!-- 中部：有效期+区域+备注 -->
					<view class="card-middle">
						<view class="info-row">
							<view class="valid-date">
								有效期：{{item.validDays}}天
							</view>
							<view class="area-tag" v-if="item.areaName">
								<u-icon name="map" size="24" color="rgba(255,255,255,0.7)"></u-icon>
								<text>{{item.areaName}}</text>
							</view>
						</view>
					</view>

					<!-- 底部：使用进度/限制 -->
					<view class="card-footer">
						<view class="progress-info">
							<text class="label">可用次数</text>
							<text class="value">{{item.limitTotal}}次</text>
						</view>
						
						<!-- 进度条背景 -->
						<view class="progress-bar-bg">
							<!-- 进度条：计算一天占总进度条的多少，无限制则占满 -->
							<view class="progress-bar-fill" :style="{ width: getProgress(item) }"></view>
						</view>
						
						<view class="limit-text" v-if="item.enableLimit">
							每{{item.limitRound}}天限{{item.limitCount}}次
						</view>
						<view class="limit-text" v-else>
							无使用频率限制
						</view>
					</view>
					<view class="desc-row" style="margin-top:10rpx;color:#ccc" v-if="item.description">
						<text style="font-size: 22rpx; opacity: 0.9;">备注：</text>
						<text style="font-size: 22rpx; opacity: 0.9;">{{item.description}}</text>
					</view>
				</view>
				
				<!-- 右上角装饰徽章 -->
				<view class="decoration-badge">
					<view class="diamond-shape"></view>
				</view>
        	</view>
			
			<u-empty v-if="list.length === 0" mode="coupon" text="暂无会员卡" margin-top="100"></u-empty>
			
			<view class="no-more" v-if="list.length > 0">
				<text>没有更多了</text>
			</view>
        </view>
		<view class="footer-placeholder"></view>
		<!-- 悬浮按钮容器 -->
		<view class="footer-container">
			<view class="add-btn-wrap" @click="btnadd">
				<view class="btn-shadow"></view>
				<view class="btn-content">
					<u-icon name="plus" color="#ffffff" size="36" style="margin-right: 12rpx;"></u-icon>
					<text>新增会员卡</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#F7F8FA", // 还原浅色背景
                },
				list:[],
				areaId:'',
				themes: [
					{ name: 'black-diamond', className: 'theme-black', iconColor: '#FFD700' }, // 黑钻
					{ name: 'platinum', className: 'theme-platinum', iconColor: '#fff' },     // 铂金
					{ name: 'gold', className: 'theme-gold', iconColor: '#fff' },             // 黄金
					{ name: 'silver', className: 'theme-silver', iconColor: '#fff' },         // 白银
					{ name: 'emerald', className: 'theme-emerald', iconColor: '#fff' },       // 翡翠
					{ name: 'ruby', className: 'theme-ruby', iconColor: '#fff' },            // 红宝石
					{ name: 'violet', className: 'theme-violet', iconColor: '#fff' },        // 紫罗兰
					{ name: 'cyan', className: 'theme-cyan', iconColor: '#fff' },              // 青色
					{ name: 'pink', className: 'theme-pink', iconColor: '#fff' },            // 粉红
					{ name: 'normal', className: 'theme-normal', iconColor: '#fff' }          // 普通
				]
			}
		},
		onLoad(option) {
            this.areaId = option.areaId
		},
		onShow() {
			this.getlist()
		},
		methods: {
			getTheme(index, price) {
				// 简单的映射逻辑：前4名分别对应特定主题，之后的都用普通主题
				if (index < this.themes.length) {
					return this.themes[index];
				}
				return this.themes[this.themes.length - 1];
			},
			// 计算进度条宽度
			getProgress(item) {
				// 无限制则全部占满
				if (!item.enableLimit) return '100%';
				
				// 数据容错
				let total = item.limitTotal || 1;
				let round = item.limitRound || 1;
				let count = item.limitCount || 0;
				
				// 计算每天可用次数 (频率限制的日均值)
				let dailyCount = count / round;
				
				// 计算占比：日均可用次数 / 总次数
				let percent = (dailyCount / total) * 100;
				
				// 边界处理
				if (percent > 100) percent = 100;
				if (percent < 1 && percent > 0) percent = 1; // 最小给1%避免完全消失
				
				return percent + '%';
			},
			// 请求会员列表
			getlist(){
				this.$u.get(`/bst/vip/list?pageNum=1&pageSize=999&areaId=${this.areaId}`).then(res =>{
					if(res.code == 200){
						let rows = res.rows || [];
						// 按照价格从大到小排序
						rows.sort((a, b) => b.price - a.price);
						this.list = 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-color: #F7F8FA; // 还原浅色背景
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', sans-serif;
	}
	
	.page {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.list {
		padding: 30rpx 32rpx;
	}

	.vip-card {
		width: 100%;
		height: 340rpx;
		border-radius: 40rpx;
		position: relative;
		margin-bottom: 32rpx;
		overflow: hidden;
		box-shadow: 0 16rpx 32rpx rgba(0,0,0,0.1); // 调整阴影以适应浅色背景
		transition: transform 0.2s;
		
		&:active {
			transform: scale(0.98);
		}

		// 背景层
		.card-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			
			.bg-circle {
				position: absolute;
				border-radius: 50%;
				filter: blur(60rpx);
				opacity: 0.6;
			}
			
			.glass-layer {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
				z-index: 2;
			}
		}

		// 内容层
		.card-content {
			position: relative;
			z-index: 10;
			height: 100%;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #fff;
		}

		// 头部
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			
			.header-left {
				display: flex;
				align-items: center;
				
				.icon-box {
					width: 60rpx;
					height: 60rpx;
					background: rgba(255,255,255,0.2);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					backdrop-filter: blur(10rpx);
				}
				
				.name-box {
					display: flex;
					flex-direction: column;
					
					.vip-name {
						font-size: 36rpx;
						font-weight: bold;
						line-height: 1.2;
						margin-bottom: 4rpx;
						text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
					}
					
					.vip-desc {
						font-size: 22rpx;
						opacity: 0.8;
					}
				}
			}
			
			.header-right {
				.price-box {
					display: flex;
					align-items: baseline;
					
					.symbol {
						font-size: 24rpx;
						margin-right: 4rpx;
						opacity: 0.9;
					}
					
					.price {
						font-size: 36rpx;
						font-weight: bold;
						font-family: 'DIN Alternate', sans-serif;
					}
				}
			}
		}
		
		// 中部信息
		.card-middle {
			margin-top: 10rpx;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			opacity: 0.8;
			
			.info-row {
				display: flex;
				align-items: center;
				margin-bottom: 6rpx;
			}
			
			.valid-date {
				margin-right: 20rpx;
			}
			
			.area-tag {
				display: flex;
				align-items: center;
				background: rgba(0,0,0,0.2);
				padding: 2rpx 10rpx;
				border-radius: 8rpx;
				
				text {
					margin-left: 4rpx;
					font-size: 20rpx;
				}
			}
			
			.desc-row {
				font-size: 22rpx;
				opacity: 0.9;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		// 底部进度条
		.card-footer {
			margin-top: auto;
			
			.progress-info {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				margin-bottom: 12rpx;
				
				.value {
					font-weight: bold;
				}
			}
			
			.progress-bar-bg {
				width: 100%;
				height: 8rpx;
				background: rgba(255,255,255,0.2);
				border-radius: 100rpx;
				overflow: hidden;
				margin-bottom: 12rpx;
				
				.progress-bar-fill {
					height: 100%;
					background: #fff;
					border-radius: 100rpx;
					opacity: 0.9;
					box-shadow: 0 0 10rpx rgba(255,255,255,0.5);
				}
			}
			
			.limit-text {
				font-size: 20rpx;
				opacity: 0.6;
			}
		}
		
		// 装饰徽章
		.decoration-badge {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 150rpx;
			height: 150rpx;
			opacity: 0.8;
			pointer-events: none;
			
			.diamond-shape {
				width: 100%;
				height: 100%;
				background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0) 60%);
				clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
				transform: rotate(15deg);
			}
		}

		// === 主题配色 ===
		
		// 1. 黑钻 (最高级)
		&.theme-black {
			background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%); // 在浅色背景下，黑色卡片稍微浅一点点可能更有质感
			border: 2rpx solid #333;
			
			.vip-name { color: #FFD700; background: linear-gradient(to right, #FFD700, #FDB931); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
			.progress-bar-fill { background: linear-gradient(90deg, #FFD700, #FDB931); }
			.icon-box { background: rgba(255, 215, 0, 0.15); border: 1px solid rgba(255, 215, 0, 0.3); }
			.c1 { background: #FFD700; top: -20%; right: -10%; width: 300rpx; height: 300rpx; opacity: 0.15; }
			.c2 { background: #333; bottom: -20%; left: -10%; width: 200rpx; height: 200rpx; opacity: 0.3; }
		}

		// 2. 铂金 (紫粉)
		&.theme-platinum {
			background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
			box-shadow: 0 16rpx 32rpx rgba(161, 140, 209, 0.3);
			
			.c1 { background: #fff; top: 0; right: 0; width: 400rpx; height: 400rpx; opacity: 0.2; }
			.progress-bar-fill { background: #fff; }
		}

		// 3. 黄金 (橙黄)
		&.theme-gold {
			background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
			box-shadow: 0 16rpx 32rpx rgba(246, 211, 101, 0.3);
			
			.c1 { background: #fff; top: -50rpx; right: -50rpx; width: 300rpx; height: 300rpx; opacity: 0.3; }
		}

		// 4. 白银 (银青)
		&.theme-silver {
			background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
			box-shadow: 0 16rpx 32rpx rgba(144, 163, 194, 0.25);
			
			.card-content { color: #4b6cb7; } // 浅色背景用深色字
			.icon-box { background: rgba(75, 108, 183, 0.1); }
			.progress-bar-bg { background: rgba(75, 108, 183, 0.2); }
			.progress-bar-fill { background: #4b6cb7; }
			.c1 { background: #fff; width: 300rpx; height: 300rpx; opacity: 0.6; right: 0; top: 0;}
			.decoration-badge { opacity: 0.3; }
		}

		// 5. 翡翠 (翠绿)
		&.theme-emerald {
			background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
			box-shadow: 0 16rpx 32rpx rgba(17, 153, 142, 0.3);
			
			.c1 { background: #fff; top: -30%; right: -10%; width: 350rpx; height: 350rpx; opacity: 0.25; }
			.c2 { background: #38ef7d; bottom: -20%; left: -10%; width: 250rpx; height: 250rpx; opacity: 0.2; }
		}

		// 6. 红宝石 (玫瑰红)
		&.theme-ruby {
			background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
			box-shadow: 0 16rpx 32rpx rgba(235, 51, 73, 0.3);
			
			.c1 { background: #fff; top: 0; right: 0; width: 300rpx; height: 300rpx; opacity: 0.2; }
			.c2 { background: #f45c43; bottom: -30%; left: 10%; width: 280rpx; height: 280rpx; opacity: 0.25; }
		}

		// 7. 紫罗兰 (深紫)
		&.theme-violet {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			box-shadow: 0 16rpx 32rpx rgba(102, 126, 234, 0.3);
			
			.c1 { background: #fff; top: -20%; right: -5%; width: 320rpx; height: 320rpx; opacity: 0.2; }
			.c2 { background: #764ba2; bottom: -25%; left: -5%; width: 240rpx; height: 240rpx; opacity: 0.3; }
		}

		// 8. 青色 (青绿)
		&.theme-cyan {
			background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
			box-shadow: 0 16rpx 32rpx rgba(0, 210, 255, 0.3);
			
			.c1 { background: #fff; top: 10%; right: 10%; width: 280rpx; height: 280rpx; opacity: 0.25; }
			.c2 { background: #3a7bd5; bottom: -15%; left: 5%; width: 220rpx; height: 220rpx; opacity: 0.2; }
		}

		// 9. 粉红 (樱花粉)
		&.theme-pink {
			background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
			box-shadow: 0 16rpx 32rpx rgba(240, 147, 251, 0.3);
			
			.c1 { background: #fff; top: -10%; right: 0; width: 300rpx; height: 300rpx; opacity: 0.3; }
			.c2 { background: #f5576c; bottom: -20%; left: 0; width: 260rpx; height: 260rpx; opacity: 0.25; }
		}

		// 10. 普通 (天蓝)
		&.theme-normal {
			background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
			box-shadow: 0 16rpx 32rpx rgba(79, 172, 254, 0.3);
			
			.c1 { background: #fff; top: 10%; right: 10%; width: 200rpx; height: 200rpx; opacity: 0.2; }
		}
	}

	.no-more {
		text-align: center;
		padding: 40rpx 0;
		text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.footer-placeholder {
		height: 180rpx;
	}

	.footer-container {
		position: fixed;
		bottom: 60rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		z-index: 100;
		pointer-events: none;
		
		.add-btn-wrap {
			pointer-events: auto;
			position: relative;
			width: 600rpx;
			height: 100rpx;
			transition: transform 0.2s;
			
			&:active {
				transform: scale(0.96);
			}
			
			.btn-content {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(135deg, #4297F3 0%, #2B76E5 100%); // 还原为蓝色按钮
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF; // 白色字
				font-size: 32rpx;
				font-weight: bold;
				z-index: 2;
				box-shadow: 0 10rpx 20rpx rgba(66, 151, 243, 0.3);
			}
			
			.btn-shadow {
				position: absolute;
				top: 20rpx;
				left: 10%;
				width: 80%;
				height: 100%;
				background: #4297F3;
				filter: blur(20rpx);
				opacity: 0.4;
				border-radius: 100rpx;
				z-index: 1;
			}
		}
	}
</style>