585 lines
15 KiB
Vue
585 lines
15 KiB
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> |