第一次上传

This commit is contained in:
Ls
2026-03-09 16:39:03 +08:00
commit 3d9efaf15c
924 changed files with 326227 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

View File

@@ -0,0 +1,221 @@
<template>
<view class="page">
<!-- 设置列表 -->
<view class="settings-list">
<!-- 账户安全 -->
<view class="settings-section">
<view class="section-title">账户安全</view>
<view @click="Service.GoPage(accountItem.path)" v-for="(accountItem,accountIndex) in account" :key="accountIndex" class="section-item">
<view class="" style="display: flex; align-items: center;">
<view class="icon" style=" ">
<img class="icon-img" :src="Service.GetIconImg(accountItem.icon)" alt="" />
</view>
<text style="margin-left: 14rpx; font-weight: 500; ">{{accountItem.name}}</text>
</view>
<view class="" style="display: flex; align-items: baseline; font-size: 24rpx; color: #9CA3AF; ">
<text v-if="accountItem.name=='实名认证'" style="margin-right: 10rpx;">未认证</text>
<up-icon name="arrow-right" size="12"></up-icon>
</view>
</view>
</view>
<!-- 支持与帮助 -->
<view class="settings-section">
<view class="section-title">支持与帮助</view>
<view v-for="(helpItem,helpIndex) in help" :key="helpIndex" class="section-item">
<view class="" style="display: flex; align-items: center;">
<view class="icon" style=" ">
<img class="icon-img" :src="Service.GetIconImg(helpItem.icon)" alt="" />
</view>
<text style="margin-left: 14rpx; font-weight: 500; ">{{helpItem.name}}</text>
</view>
<view class="" style="display: flex; align-items: baseline; font-size: 24rpx; color: #9CA3AF; ">
<up-icon name="arrow-right" size="12"></up-icon>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Service } from '@/Service/Service'
const account = ref([
{
name: '绑定手机号',
icon: '/static/userFunc/set/security.png',
path:'/pages/userFunc/bind'
}, {
name: '修改支付密码',
icon: '/static/userFunc/set/password.png',
path:'/pages/userFunc/password'
}
])
const help = ref([
{
name: '用户协议',
icon: '/static/userFunc/set/agreement.png'
},
{
name: '隐私政策',
icon: '/static/userFunc/set/privacy.png'
},
{
name: '联系客服',
icon: '/static/userFunc/set/service.png'
}
])
</script>
<style scoped lang="scss">
.page {
background-color: #f5f5f5;
overflow: hidden;
height: 100vh;
}
// 图标
.icon {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background-color: #FFEDD5;
display: flex;
align-items: center;
justify-content: center;
}
.icon-img {
width: 32rpx;
height: 32rpx;
}
/* 用户信息卡片 */
.user-card {
margin: 30rpx;
border-radius: 20rpx;
background: linear-gradient(to right, #F97316, #FB923C);
padding: 40rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
}
.user-avatar {
background-color: #FFFFFF;
padding: 10rpx;
}
.user-info {
margin-left: 30rpx;
flex: 1;
}
.user-name {
font-size: 32rpx;
color: #FFFFFF;
font-weight: 500;
margin-bottom: 10rpx;
display: block;
}
.user-level {
width: fit-content;
font-size: 18rpx;
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
padding: 4rpx 20rpx;
border-radius: 24rpx;
}
/* 设置列表 */
.settings-list {
padding: 0 30rpx;
}
.settings-section {
background-color: #FFFFFF;
border-radius: 20rpx;
margin-bottom: 30rpx;
overflow: hidden;
padding: 30rpx;
margin-top: 20rpx;
}
.section-title {
font-size: 28rpx;
color: #6B7280;
font-weight: 600;
}
.section-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
border-bottom: 1rpx solid #e2e2e2;
// &:last-child{
// border-bottom: none;
// }
}
.u-cell {
height: 100rpx;
font-size: 32rpx;
--u-cell-value-color: #999999;
--u-cell-title-color: #333333;
--u-cell-arrow-size: 40rpx;
}
/* 版本信息 */
.version-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
background-color: #FFFFFF;
border-radius: 20rpx;
margin-bottom: 60rpx;
}
.version-text {
font-size: 28rpx;
color: #333333;
}
.version-number {
font-size: 28rpx;
color: #999999;
margin-right: 10rpx;
}
.check-update {
font-size: 24rpx;
color: #FF6600;
background-color: #FFF7ED;
display: flex;
align-items: center;
justify-content: center;
padding: 6rpx 16rpx;
border-radius: 15rpx;
}
/* 退出登录按钮 */
.logout-btn {
margin: 0 30rpx;
}
</style>

View File

@@ -0,0 +1,378 @@
<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="Service.GoPageBack()" 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">
<up-icon name="rmb-circle" color="#ffffff" :bold="true" size="20"></up-icon>
</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">
<up-icon name="coupon" color="#ffffff" :bold="true" size="20"></up-icon>
</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">
<up-icon name="tags" color="#ffffff" :bold="true" size="20"></up-icon>
</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">
<up-icon name="bag" color="#ffffff" :bold="true" size="20"></up-icon>
</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">
<up-icon name="calendar" color="#ffffff" :bold="true" size="20"></up-icon>
</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 lang="ts">
import { Service } from "@/Service/Service"
</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>