MiAn
02fc28613a
1. App.vue 启动时立即预加载 uiConfig，杜绝首屏网络延时导致瞬间闪现付费会员入口 2. 会员中心 (member/index.vue)：在提审防审模式下直接展示纯净【便民服务指南】卡片，杜绝任何 VIP 皇冠、会员标价、折扣与充值入口 3. 个人中心 (mine/index.vue)：提审防审模式下彻底隐藏会员卡片与我的余额，紧凑上移卡片布局 4. 订单明细、充值页与消息中心增加防审合规兼容，避免误触发任何虚拟支付诱导
1007 行
23 KiB
Vue
1007 行
23 KiB
Vue
<template>
|
||
<view class="mine fc-page">
|
||
<!-- 沉浸式顶部头部 -->
|
||
<view class="mine__header">
|
||
<view class="mine__status" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
<view class="mine__nav" :style="{ height: navBarHeight + 'px' }">
|
||
<text class="mine__nav-title">个人中心</text>
|
||
</view>
|
||
|
||
<!-- 用户信息 -->
|
||
<view class="mine__user" @click="handleUserClick">
|
||
<view class="mine__avatar">
|
||
<image v-if="avatarDisplay" class="mine__avatar-img" :src="avatarDisplay" mode="aspectFill" />
|
||
<text v-else class="mine__avatar-char">{{ avatarChar }}</text>
|
||
</view>
|
||
<view class="mine__user-info">
|
||
<view class="mine__user-row">
|
||
<text class="mine__user-name">{{ isLogin ? nick : '点击登录' }}</text>
|
||
<text v-if="isLogin && isMember && !isAudit" class="mine__badge mine__badge--vip" @click.stop="go('/pages/member/index')">VIP</text>
|
||
<view
|
||
v-if="isLogin && merchantTagText"
|
||
class="mine__badge"
|
||
:class="'mine__badge--' + merchantTagType"
|
||
@click.stop="goMerchant"
|
||
>
|
||
<image v-if="isBusiness" class="mine__badge-icon" :src="iconUrl('check')" mode="aspectFit" />
|
||
<text>{{ merchantTagText }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="mine__user-sub">
|
||
<text class="mine__user-phone">{{ isLogin ? displayPhone : '登录享受完整服务' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="mine__arrow-right mine__arrow-right--white"></view>
|
||
</view>
|
||
|
||
<!-- 核心资产（3项数字，简洁通透） -->
|
||
<view class="mine__assets">
|
||
<view class="mine__asset-item" @click="goAsset(isAudit ? 'posts' : 'balance')">
|
||
<text class="mine__asset-num">{{ isAudit ? (assets.postCount || 0) : formattedBalance }}</text>
|
||
<text class="mine__asset-label">{{ isAudit ? '我的发布' : '余额(元)' }}</text>
|
||
</view>
|
||
<view class="mine__asset-item" @click="goAsset('points')">
|
||
<text class="mine__asset-num">{{ assets.points || 0 }}</text>
|
||
<text class="mine__asset-label">积分</text>
|
||
</view>
|
||
<view class="mine__asset-item" @click="goAsset('coupons')">
|
||
<text class="mine__asset-num">{{ couponCount }}</text>
|
||
<text class="mine__asset-label">优惠券</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 会员卡片（提审防审模式下彻底隐藏） -->
|
||
<view
|
||
v-if="!isAudit"
|
||
class="mine__vip"
|
||
@click="handleVipCardClick"
|
||
>
|
||
<view class="mine__vip-left">
|
||
<image class="mine__vip-icon" :src="iconUrl('crown')" mode="aspectFit" />
|
||
<view class="mine__vip-texts">
|
||
<text class="mine__vip-title">{{ isMember ? (userInfo.memberLevel || 'VIP会员') : '开通会员' }}</text>
|
||
<text class="mine__vip-sub">{{ vipSubText }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="mine__vip-btn">{{ isMember ? '会员中心' : '去开通' }}</view>
|
||
</view>
|
||
|
||
<!-- 核心功能网格（4列紧凑精致布局，共8项，饱满规整） -->
|
||
<view class="fc-card mine__card" :class="{ 'mine__card--audit': isAudit }">
|
||
<view class="mine__grid">
|
||
<view
|
||
v-for="item in gridEntries"
|
||
:key="item.text"
|
||
class="mine__grid-item"
|
||
@click="handleGridClick(item)"
|
||
>
|
||
<view class="mine__grid-icon">
|
||
<image class="mine__grid-img" :src="iconUrl(item.iconKey)" mode="aspectFit" />
|
||
</view>
|
||
<text class="mine__grid-label">{{ item.text }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 列表功能菜单（左侧图标+名称，右侧纯净箭头，已移除系统设置等管理项） -->
|
||
<view class="fc-card mine__card mine__menu">
|
||
<view
|
||
v-for="m in menuItems"
|
||
:key="m.text"
|
||
class="mine__menu-item"
|
||
@click="handleMenuClick(m)"
|
||
>
|
||
<view class="mine__menu-left">
|
||
<image class="mine__menu-icon" :src="iconUrl(m.iconKey)" mode="aspectFit" />
|
||
<text class="mine__menu-text">{{ m.text }}</text>
|
||
</view>
|
||
<view class="mine__arrow-right"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退出登录按钮（仅登录状态展示） -->
|
||
<view v-if="isLogin" class="mine__logout" @click="handleLogout">
|
||
<text class="mine__logout-text">退出登录</text>
|
||
</view>
|
||
|
||
<!-- 底部版本信息（连续点击5次可唤起管理员快捷设置彩蛋） -->
|
||
<view class="mine__version" @click="handleVersionClick">{{ siteName }} v1.1.0</view>
|
||
|
||
<view class="mine__tabbar-space"></view>
|
||
<fc-tabbar :current="4" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import FcTabbar from '@/components/fc-tabbar/fc-tabbar.vue'
|
||
import memberApi from '@/common/api/member.js'
|
||
import { useUserStore } from '@/common/store/index.js'
|
||
import { iconUrl, loadUiConfig, uiState } from '@/common/store/ui.js'
|
||
import { formatTime, maskPhone, assetUrl } from '@/common/utils/format.js'
|
||
import { getNavMetrics } from '@/common/utils/navbar.js'
|
||
|
||
export default {
|
||
components: { FcTabbar },
|
||
data() {
|
||
return {
|
||
statusBarHeight: 20,
|
||
navBarHeight: 44,
|
||
capsulePadding: 0,
|
||
assets: { balance: 0, points: 0, couponCount: 0, coupons: [] },
|
||
// 版本号点击计数器与计时器（用于管理员隐藏彩蛋）
|
||
versionClickCount: 0,
|
||
versionClickTimer: null,
|
||
// 底部常用列表菜单（4项纯净服务）
|
||
menuItems: [
|
||
{ iconKey: 'edit', text: '编辑个人资料', url: '/pages/mine/profile' },
|
||
{ iconKey: 'shield', text: '商家认证与信息', action: 'merchant' },
|
||
{ iconKey: 'mine-service', text: '联系客服', action: 'support' },
|
||
{ iconKey: 'mine-about', text: '关于我们', action: 'about' },
|
||
],
|
||
}
|
||
},
|
||
computed: {
|
||
/** 小程序名称（后台「小程序配置」下发） */
|
||
siteName() {
|
||
return uiState.siteName || uiState.appName || '同城分类信息'
|
||
},
|
||
/**
|
||
* 商家身份标签文案（展示在个人信息区，替代原独立商家卡片）
|
||
* @returns {string} 无商家身份时返回空串
|
||
*/
|
||
merchantTagText() {
|
||
if (this.isBusiness) return '商家'
|
||
if (this.merchantAuditStatus === 0) return '审核中'
|
||
if (this.merchantAuditStatus === 2) return '未通过'
|
||
return ''
|
||
},
|
||
|
||
/**
|
||
* 商家身份标签样式类型
|
||
* @returns {'merchant'|'pending'|'rejected'}
|
||
*/
|
||
merchantTagType() {
|
||
if (this.isBusiness) return 'merchant'
|
||
if (this.merchantAuditStatus === 2) return 'rejected'
|
||
return 'pending'
|
||
},
|
||
|
||
/**
|
||
* 核心功能网格数据（4列精致排布，共8项，两排各4个）
|
||
* 涵盖：我的发布、我的订单、我的收藏、草稿箱、余额充值、分销中心、浏览搜索、商家入驻/我的店铺
|
||
* @returns {Array}
|
||
*/
|
||
gridEntries() {
|
||
const bizText = this.isBusiness ? '我的店铺' : (this.merchantAuditStatus === 0 ? '商家审核' : '商家入驻')
|
||
return [
|
||
{ iconKey: 'mine-post', text: '我的发布', url: '/pages/post/mine' },
|
||
{ iconKey: 'mine-draft', text: '草稿箱', url: '/pages/post/drafts' },
|
||
{ iconKey: 'bar-fav-on', text: '我的收藏', url: '/pages/favorite/index' },
|
||
{ iconKey: 'mine-follow', text: '我的关注', url: '/pages/favorite/follows' },
|
||
{ iconKey: 'mine-order', text: '我的订单', url: '/pages/member/orders' },
|
||
...(this.isAudit ? [] : [{ iconKey: 'link-recharge', text: '我的余额', url: '/pages/member/recharge' }]),
|
||
{ iconKey: 'mine-dist', text: '分销中心', url: '/pages/distribution/index' },
|
||
{ iconKey: 'shield', text: bizText, action: 'merchant' },
|
||
]
|
||
},
|
||
|
||
/**
|
||
* 商家审核状态
|
||
* @returns {number} -1未申请, 0待审, 1通过, 2驳回
|
||
*/
|
||
merchantAuditStatus() {
|
||
if (this.userInfo && this.userInfo.merchantStatus != null) {
|
||
return Number(this.userInfo.merchantStatus)
|
||
}
|
||
return -1
|
||
},
|
||
|
||
/**
|
||
* 获取全局用户信息
|
||
* @returns {Object}
|
||
*/
|
||
userInfo() {
|
||
try {
|
||
return useUserStore().state.userInfo || {}
|
||
} catch (e) {
|
||
return {}
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 检查当前登录状态
|
||
* @returns {boolean}
|
||
*/
|
||
isLogin() {
|
||
try {
|
||
return useUserStore().isLogin.value
|
||
} catch (e) {
|
||
return false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 用户昵称
|
||
* @returns {string}
|
||
*/
|
||
isAudit() {
|
||
// #ifdef MP-WEIXIN
|
||
return uiState.virtualPayAudit !== false
|
||
// #endif
|
||
return false
|
||
},
|
||
nick() {
|
||
return this.userInfo.nickname || (this.isLogin ? '同城居民' : '未登录')
|
||
},
|
||
|
||
/**
|
||
* 是否为会员
|
||
* @returns {boolean}
|
||
*/
|
||
isMember() {
|
||
try {
|
||
return useUserStore().isMember.value
|
||
} catch (e) {
|
||
return false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 是否为商家
|
||
* @returns {boolean}
|
||
*/
|
||
isBusiness() {
|
||
try {
|
||
return useUserStore().isBusiness.value
|
||
} catch (e) {
|
||
return false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 用户真实头像地址解析
|
||
* @returns {string}
|
||
*/
|
||
avatarDisplay() {
|
||
if (this.userInfo && this.userInfo.avatar) {
|
||
return assetUrl(this.userInfo.avatar)
|
||
}
|
||
return ''
|
||
},
|
||
|
||
/**
|
||
* 用户首字兜底（无头像时显示）
|
||
* @returns {string}
|
||
*/
|
||
avatarChar() {
|
||
if (!this.isLogin) return '登'
|
||
const n = this.nick.trim()
|
||
return n ? n.slice(0, 1) : '用'
|
||
},
|
||
|
||
/**
|
||
* 脱敏手机号显示
|
||
* @returns {string}
|
||
*/
|
||
displayPhone() {
|
||
if (this.userInfo && this.userInfo.phone) {
|
||
return maskPhone(this.userInfo.phone)
|
||
}
|
||
return '点击绑定手机号'
|
||
},
|
||
|
||
/**
|
||
* 会员卡辅助描述文案
|
||
* @returns {string}
|
||
*/
|
||
vipSubText() {
|
||
if (this.isMember) {
|
||
const date = this.userInfo.memberExpireAt ? formatTime(this.userInfo.memberExpireAt).slice(0, 10) : '长期有效'
|
||
return '有效期至 ' + date
|
||
}
|
||
return '免费查看 · 发布折扣 · 专属标识'
|
||
},
|
||
|
||
/**
|
||
* 优惠券数量
|
||
* @returns {number}
|
||
*/
|
||
couponCount() {
|
||
if (this.assets.couponCount != null) return this.assets.couponCount
|
||
return (this.assets.coupons || []).length
|
||
},
|
||
|
||
/**
|
||
* 余额格式化
|
||
* @returns {string}
|
||
*/
|
||
formattedBalance() {
|
||
const b = this.assets.balance != null ? Number(this.assets.balance) : 0
|
||
return isNaN(b) ? '0.00' : b.toFixed(2)
|
||
},
|
||
},
|
||
|
||
/**
|
||
* 页面加载生命周期
|
||
*/
|
||
onLoad() {
|
||
try {
|
||
const m = getNavMetrics()
|
||
this.statusBarHeight = m.statusBarHeight
|
||
this.navBarHeight = m.navBarHeight
|
||
this.capsulePadding = m.capsulePadding
|
||
} catch (e) {}
|
||
loadUiConfig()
|
||
},
|
||
|
||
/**
|
||
* 页面展示生命周期
|
||
*/
|
||
onShow() {
|
||
try {
|
||
if (typeof uni !== 'undefined' && uni.setNavigationBarColor) {
|
||
uni.setNavigationBarColor({ frontColor: '#000000', backgroundColor: '#d6f7e5' })
|
||
}
|
||
} catch (e) {}
|
||
this.fetchData()
|
||
},
|
||
|
||
/**
|
||
* 下拉刷新生命周期
|
||
*/
|
||
async onPullDownRefresh() {
|
||
try {
|
||
await Promise.all([loadUiConfig(true), this.fetchData()])
|
||
} catch (e) {
|
||
} finally {
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* 点击会员卡片 / 提审便民专区卡片
|
||
*/
|
||
handleVipCardClick() {
|
||
// 跳转便民权益中心 / 会员中心（页面内部针对提审防审模式已做全量脱敏合规展示）
|
||
this.go('/pages/member/index')
|
||
},
|
||
iconUrl,
|
||
|
||
/**
|
||
* 跳转商家认证/商家信息页面
|
||
*/
|
||
goMerchant() {
|
||
if (!this.isLogin) {
|
||
this.goLogin()
|
||
return
|
||
}
|
||
uni.navigateTo({ url: '/pages/merchant/info' })
|
||
},
|
||
|
||
/**
|
||
* 核心功能网格点击分发
|
||
* @param {Object} item 选中的功能项
|
||
*/
|
||
handleGridClick(item) {
|
||
if (item.action === 'merchant') {
|
||
this.goMerchant()
|
||
return
|
||
}
|
||
if (item.url) {
|
||
this.go(item.url)
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取用户资产与资料
|
||
*/
|
||
async fetchData() {
|
||
if (this.isLogin) {
|
||
await Promise.all([this.fetchProfile(), this.fetchAssets()])
|
||
} else {
|
||
this.assets = { balance: 0, points: 0, couponCount: 0, coupons: [] }
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 拉取资产数据
|
||
*/
|
||
async fetchAssets() {
|
||
try {
|
||
const res = await memberApi.assets()
|
||
this.assets = res || { balance: 0, points: 0, couponCount: 0, coupons: [] }
|
||
} catch (e) {
|
||
this.assets = { balance: 0, points: 0, couponCount: 0, coupons: [] }
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 拉取用户个人资料
|
||
*/
|
||
async fetchProfile() {
|
||
try {
|
||
await useUserStore().fetchProfile()
|
||
} catch (e) {}
|
||
},
|
||
|
||
/**
|
||
* 点击用户区域处理
|
||
*/
|
||
handleUserClick() {
|
||
if (!this.isLogin) {
|
||
this.goLogin()
|
||
} else {
|
||
uni.navigateTo({ url: '/pages/mine/profile' })
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 点击资产跳转
|
||
* @param {'balance'|'points'|'coupons'} type 资产类型
|
||
*/
|
||
goAsset(type) {
|
||
if (!this.isLogin) {
|
||
this.goLogin()
|
||
return
|
||
}
|
||
if (type === 'posts') {
|
||
uni.navigateTo({ url: '/pages/member/posts' })
|
||
return
|
||
}
|
||
if (type === 'balance') {
|
||
uni.navigateTo({ url: '/pages/member/recharge' })
|
||
} else if (type === 'coupons') {
|
||
uni.navigateTo({ url: '/pages/member/coupons' })
|
||
} else {
|
||
uni.navigateTo({ url: '/pages/member/index' })
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 列表功能点击处理
|
||
* @param {Object} m 菜单项配置
|
||
*/
|
||
handleMenuClick(m) {
|
||
if (m.action === 'merchant') {
|
||
this.goMerchant()
|
||
} else if (m.action === 'support') {
|
||
this.handleSupport()
|
||
} else if (m.action === 'about') {
|
||
this.handleAbout()
|
||
} else if (m.url) {
|
||
this.go(m.url)
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 在线客服处理
|
||
*/
|
||
handleSupport() {
|
||
// 客服电话来自后台「系统设置 → 系统配置 → 小程序配置」，留空时用内置兜底
|
||
const phone = (uiState.servicePhone || '400-888-6688').trim()
|
||
const dial = phone.replace(/[^\d]/g, '') || '4008886688'
|
||
uni.showModal({
|
||
title: '平台客服',
|
||
content: `客服电话：${phone}\n服务时间：09:00 - 21:00`,
|
||
confirmText: '拨打电话',
|
||
cancelText: '取消',
|
||
confirmColor: '#04874a',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.makePhoneCall({ phoneNumber: dial, fail: () => {} })
|
||
}
|
||
},
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 关于我们弹窗
|
||
*/
|
||
handleAbout() {
|
||
// 名称 / 关于我们均来自后台「系统配置 → 小程序配置」
|
||
const name = uiState.siteName || uiState.appName || '同城分类信息'
|
||
const about = uiState.aboutUs || '致力于为本地居民和商家提供真实、便捷、高效的便民信息服务平台。'
|
||
uni.showModal({
|
||
title: `关于${name}`,
|
||
content: about,
|
||
showCancel: false,
|
||
confirmText: '我知道了',
|
||
confirmColor: '#04874a',
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 版本号连续快速点击彩蛋（连续点击5次唤出管理员快捷设置入口）
|
||
*/
|
||
handleVersionClick() {
|
||
this.versionClickCount++
|
||
if (this.versionClickTimer) {
|
||
clearTimeout(this.versionClickTimer)
|
||
}
|
||
this.versionClickTimer = setTimeout(() => {
|
||
this.versionClickCount = 0
|
||
}, 2000)
|
||
|
||
if (this.versionClickCount >= 5) {
|
||
this.versionClickCount = 0
|
||
clearTimeout(this.versionClickTimer)
|
||
uni.showModal({
|
||
title: '管理入口',
|
||
content: '检测到连续触发，是否前往 LOGO 与图标设置？',
|
||
confirmText: '前往设置',
|
||
cancelText: '取消',
|
||
confirmColor: '#04874a',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: '/pages/admin/setting' })
|
||
}
|
||
},
|
||
})
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 页面跳转（未登录自动拦截敏感功能）
|
||
* @param {string} url 目标路径
|
||
*/
|
||
go(url) {
|
||
if (!url) return
|
||
const needAuth = ['/pages/post/mine', '/pages/favorite/index', '/pages/favorite/follows', '/pages/member/orders', '/pages/member/recharge', '/pages/member/flows', '/pages/distribution/index', '/pages/post/create', '/pages/post/drafts']
|
||
if (needAuth.includes(url) && !this.isLogin) {
|
||
this.goLogin()
|
||
return
|
||
}
|
||
uni.navigateTo({ url })
|
||
},
|
||
|
||
/**
|
||
* 跳转登录页
|
||
*/
|
||
goLogin() {
|
||
uni.navigateTo({ url: '/pages/auth/login' })
|
||
},
|
||
|
||
/**
|
||
* 退出登录处理
|
||
*/
|
||
handleLogout() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要退出登录吗？',
|
||
confirmText: '退出',
|
||
cancelText: '取消',
|
||
confirmColor: '#e5484d',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
useUserStore().logout()
|
||
this.assets = { balance: 0, points: 0, couponCount: 0, coupons: [] }
|
||
uni.showToast({ title: '已退出登录', icon: 'none' })
|
||
}
|
||
},
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* ==================== 顶部绿色背景区域 ==================== */
|
||
.mine__header {
|
||
background: $fc-gradient-hero;
|
||
padding-bottom: 110rpx;
|
||
border-radius: 0 0 40rpx 40rpx;
|
||
}
|
||
|
||
.mine__nav {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.mine__nav-title {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
color: $fc-text;
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0.5rpx;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ==================== 用户信息 ==================== */
|
||
.mine__user {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 32rpx 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mine__avatar {
|
||
width: 116rpx;
|
||
height: 116rpx;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.25);
|
||
border: 3rpx solid rgba(255, 255, 255, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.mine__avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.mine__avatar-char {
|
||
color: #ffffff;
|
||
font-size: 48rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.mine__user-info {
|
||
flex: 1;
|
||
margin-left: 24rpx;
|
||
min-width: 0;
|
||
}
|
||
|
||
.mine__user-row {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
.mine__user-name {
|
||
color: $fc-text;
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
max-width: 300rpx;
|
||
flex-shrink: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.mine__badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-left: 14rpx;
|
||
padding: 5rpx 16rpx;
|
||
border-radius: $fc-radius-pill;
|
||
font-size: 20rpx;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
flex-shrink: 0;
|
||
|
||
&:active {
|
||
opacity: 0.78;
|
||
}
|
||
|
||
&--vip {
|
||
background: #ffd56b;
|
||
color: #3f2600;
|
||
}
|
||
|
||
/* 已认证商家：白底绿字（4.6:1） */
|
||
&--merchant {
|
||
background: #ffffff;
|
||
color: $fc-primary-text;
|
||
}
|
||
|
||
/* 商家资质审核中：通透白描边，不抢会员金色 */
|
||
&--pending {
|
||
background: rgba(255, 255, 255, 0.22);
|
||
color: #ffffff;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
||
padding: 4rpx 15rpx;
|
||
}
|
||
|
||
/* 商家认证未通过 */
|
||
&--rejected {
|
||
background: #ffe3e3;
|
||
color: #a3262b;
|
||
}
|
||
}
|
||
|
||
.mine__badge-icon {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 6rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.mine__user-sub {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.mine__user-phone {
|
||
color: $fc-text-secondary;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* ==================== 资产看板（3列） ==================== */
|
||
.mine__assets {
|
||
display: flex;
|
||
margin: 36rpx 24rpx 0;
|
||
}
|
||
|
||
.mine__asset-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: opacity 0.15s ease;
|
||
|
||
&:active {
|
||
opacity: 0.75;
|
||
}
|
||
}
|
||
|
||
.mine__asset-num {
|
||
color: $fc-text;
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.mine__asset-label {
|
||
margin-top: 8rpx;
|
||
color: $fc-text-secondary;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ==================== 会员卡片 ==================== */
|
||
.mine__vip--audit {
|
||
background: linear-gradient(135deg, #00D26A 0%, #00A854 100%) !important;
|
||
box-shadow: 0 10rpx 28rpx rgba(0, 168, 84, 0.22) !important;
|
||
|
||
.mine__vip-title {
|
||
color: #FFFFFF !important;
|
||
}
|
||
|
||
.mine__vip-sub {
|
||
color: rgba(255, 255, 255, 0.92) !important;
|
||
}
|
||
|
||
.mine__vip-btn {
|
||
background: #FFFFFF !important;
|
||
color: #04301E !important;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08) !important;
|
||
}
|
||
}
|
||
|
||
.mine__vip {
|
||
margin: -72rpx 28rpx 0;
|
||
padding: 24rpx 28rpx;
|
||
border-radius: 20rpx;
|
||
background: linear-gradient(135deg, #ffd372 0%, #f5a623 55%, #df8b06 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-shadow: 0 8rpx 24rpx rgba(223, 139, 6, 0.25);
|
||
cursor: pointer;
|
||
transition: transform 0.15s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
|
||
.mine__vip-left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
min-width: 0;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.mine__vip-icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.mine__vip-texts {
|
||
margin-left: 18rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.mine__vip-title {
|
||
color: #4a2600; /* 深褐黑金字 */
|
||
font-size: 30rpx;
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.mine__vip-sub {
|
||
margin-top: 4rpx;
|
||
color: #7a4600; /* 高清晰深暖金副标题 */
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.mine__vip-btn {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
padding: 10rpx 26rpx;
|
||
border-radius: $fc-radius-pill;
|
||
background: #ffffff;
|
||
color: #4a2600;
|
||
font-size: 24rpx;
|
||
font-weight: 800;
|
||
box-shadow: 0 4rpx 12rpx rgba(74, 38, 0, 0.12);
|
||
}
|
||
|
||
/* ==================== 卡片容器 ==================== */
|
||
.mine__card--audit {
|
||
margin-top: -36rpx !important;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.mine__card {
|
||
margin: 24rpx 28rpx 0;
|
||
}
|
||
|
||
/* ==================== 常用功能宫格（4列紧凑精致） ==================== */
|
||
.mine__grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 18rpx 6rpx 10rpx;
|
||
}
|
||
|
||
.mine__grid-item {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 16rpx 0;
|
||
cursor: pointer;
|
||
border-radius: 16rpx;
|
||
transition: all 0.15s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.92);
|
||
background-color: #f5fbf7;
|
||
}
|
||
}
|
||
|
||
.mine__grid-icon {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.mine__grid-img {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
.mine__grid-label {
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: $fc-text;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ==================== 列表菜单 ==================== */
|
||
.mine__menu {
|
||
padding: 0 28rpx;
|
||
}
|
||
|
||
.mine__menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 100rpx;
|
||
border-bottom: 1rpx solid #f1f6f3;
|
||
cursor: pointer;
|
||
transition: background-color 0.15s ease;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:active {
|
||
background-color: #f8faf9;
|
||
}
|
||
}
|
||
|
||
.mine__menu-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.mine__menu-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-right: 22rpx;
|
||
}
|
||
|
||
.mine__menu-text {
|
||
font-size: 28rpx;
|
||
color: $fc-text;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ==================== 纯 CSS 优雅细箭头 ==================== */
|
||
.mine__arrow-right {
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
border-top: 3rpx solid #b6ccbf;
|
||
border-right: 3rpx solid #b6ccbf;
|
||
transform: rotate(45deg);
|
||
margin-right: 6rpx;
|
||
|
||
&--white {
|
||
border-top-color: $fc-text-secondary;
|
||
border-right-color: $fc-text-secondary;
|
||
}
|
||
}
|
||
|
||
/* ==================== 退出登录 ==================== */
|
||
.mine__logout {
|
||
margin: 36rpx 28rpx 0;
|
||
height: 84rpx;
|
||
background: #ffffff;
|
||
border-radius: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1rpx solid rgba(229, 72, 77, 0.2);
|
||
cursor: pointer;
|
||
transition: all 0.15s ease;
|
||
|
||
&:active {
|
||
background: #fff8f8;
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
|
||
.mine__logout-text {
|
||
color: #e5484d;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ==================== 底部版本号 ==================== */
|
||
.mine__version {
|
||
text-align: center;
|
||
padding: 40rpx 0 20rpx;
|
||
font-size: 22rpx;
|
||
color: $fc-text-placeholder;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mine__tabbar-space {
|
||
height: 130rpx;
|
||
}
|
||
</style>
|