第一次上传
This commit is contained in:
@@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<view class="member-benefits-page">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
||||
<text class="nav-title">会员权益</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 会员权益卡片 -->
|
||||
<view class="benefits-card">
|
||||
<!-- 顶部装饰 -->
|
||||
<view class="card-header">
|
||||
<text class="ri-vip-crown-fill header-icon"></text>
|
||||
<text class="header-title">会员尊享权益</text>
|
||||
</view>
|
||||
|
||||
<!-- 权益内容 -->
|
||||
<view class="benefits-content">
|
||||
<!-- 权益条目 -->
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-coin-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">积分赠送</text>
|
||||
<text class="benefit-desc">到店消费无积分抵扣或未使用优惠券，将获得平台赠送积分。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-coupon-3-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">专属优惠券</text>
|
||||
<text class="benefit-desc">会员专享优惠券，享受更多折扣优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-bank-card-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">联盟卡权益</text>
|
||||
<text class="benefit-desc">兑换联盟卡，可获得积分或优惠券，享受联盟平台抵扣优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-percent-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">积分抵扣</text>
|
||||
<text class="benefit-desc">结账时自动使用积分抵扣，1积分抵1元</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-calendar-check-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">优先活动</text>
|
||||
<text class="benefit-desc">优先参与平台活动，提前享受优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 等级说明 -->
|
||||
<!-- <view class="level-section">
|
||||
<view class="level-title">
|
||||
<text class="ri-medal-line level-icon"></text>
|
||||
<text class="title-text">会员等级</text>
|
||||
</view>
|
||||
<view class="level-list">
|
||||
<view class="level-item">
|
||||
<view class="level-badge gold">
|
||||
<text class="ri-vip-crown-fill level-icon-mini"></text>
|
||||
<text class="level-name">黄金会员</text>
|
||||
</view>
|
||||
<text class="level-desc">累计消费满1000元升级</text>
|
||||
</view>
|
||||
<view class="level-item">
|
||||
<view class="level-badge platinum">
|
||||
<text class="ri-vip-diamond-fill level-icon-mini"></text>
|
||||
<text class="level-name">铂金会员</text>
|
||||
</view>
|
||||
<text class="level-desc">累计消费满5000元升级</text>
|
||||
</view>
|
||||
<view class="level-item">
|
||||
<view class="level-badge diamond">
|
||||
<text class="ri-sparkling-fill level-icon-mini"></text>
|
||||
<text class="level-name">钻石会员</text>
|
||||
</view>
|
||||
<text class="level-desc">累计消费满10000元升级</text>
|
||||
</view>
|
||||
</view>
|
||||
</view -->
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
|
||||
<view class="tips-box">
|
||||
<view class="tips-header">
|
||||
<text class="ri-error-warning-line tips-icon"></text>
|
||||
<text class="tips-title">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-content">
|
||||
<text class="tips-item">• 会员权益最终解释权归平台所有</text>
|
||||
<text class="tips-item">• 更多权益敬请期待</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.member-benefits-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding:60rpx 24rpx 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 32rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 权益卡片 */
|
||||
.benefits-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* 卡片头部 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 40rpx;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 2rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 48rpx;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
/* 权益内容 */
|
||||
.benefits-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.benefit-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.benefit-badge {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 107, 0, 0.25);
|
||||
}
|
||||
|
||||
.badge-icon {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.benefit-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.benefit-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.benefit-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.divider {
|
||||
height: 2rpx;
|
||||
background: linear-gradient(90deg, transparent, #E0E0E0, transparent);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
/* 等级说明区域 */
|
||||
.level-section {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.level-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.level-icon {
|
||||
font-size: 32rpx;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.level-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.level-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.level-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.level-badge.gold {
|
||||
background: linear-gradient(135deg, #FFF9C4, #FFF176);
|
||||
border: 2rpx solid #FDD835;
|
||||
}
|
||||
|
||||
.level-badge.platinum {
|
||||
background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
|
||||
border: 2rpx solid #42A5F5;
|
||||
}
|
||||
|
||||
.level-badge.diamond {
|
||||
background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
|
||||
border: 2rpx solid #AB47BC;
|
||||
}
|
||||
|
||||
.level-icon-mini {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.level-name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.level-desc {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 温馨提示 */
|
||||
.tips-box {
|
||||
background: #FFF9F0;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
border-left: 4rpx solid #FF9800;
|
||||
}
|
||||
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.tips-icon {
|
||||
font-size: 28rpx;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user