fenleixinxi/uniapp/pages/mine/index.vue

<template>
	<view class="mine fc-page">
		<!-- 用户信息头 -->
		<view class="mine__header">
			<view class="mine__status" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="mine__user" @click="goLogin">
				<view class="mine__avatar">
					<text>{{ nick.slice(0, 1) }}</text>
				</view>
				<view class="mine__user-info">
					<view class="mine__user-name-row">
						<text class="mine__user-name">{{ nick }}</text>
						<text v-if="isBusiness" class="mine__badge">商家</text>
						<text v-else class="mine__badge mine__badge--person">个人</text>
					</view>
					<text class="mine__user-sub">{{ userInfo.phone || '点击登录 / 绑定手机号' }}</text>
				</view>
				<text class="mine__arrow">›</text>
			</view>

			<!-- 资产 -->
			<view class="mine__assets">
				<view class="mine__asset" @click="go('/pages/member/index')">
					<text class="mine__asset-num">{{ assets.balance != null ? assets.balance : '0.00' }}</text>
					<text class="mine__asset-label">余额(元)</text>
				</view>
				<view class="mine__asset" @click="go('/pages/member/index')">
					<text class="mine__asset-num">{{ assets.points || 0 }}</text>
					<text class="mine__asset-label">积分</text>
				</view>
				<view class="mine__asset" @click="go('/pages/member/index')">
					<text class="mine__asset-num">{{ couponCount }}</text>
					<text class="mine__asset-label">优惠券</text>
				</view>
			</view>
		</view>

		<!-- 会员卡 -->
		<view class="mine__vip" @click="go('/pages/member/index')">
			<view class="mine__vip-left">
				<image class="fc-icon fc-icon--md" :src="iconUrl('crown')" mode="aspectFit" />
				<view class="mine__vip-texts">
					<text class="mine__vip-title">{{ isMember ? (userInfo.memberLevel || '会员') : '开通会员' }}</text>
					<text class="mine__vip-sub">{{ isMember ? '有效期至 ' + expireText : '免费查看 / 发布折扣 / 专属标识' }}</text>
				</view>
			</view>
			<view class="mine__vip-btn">{{ isMember ? '会员中心' : '去开通' }}</view>
		</view>

		<!-- 功能入口 -->
		<view class="fc-card mine__grid">
			<view v-for="e in entries" :key="e.text" class="mine__entry" @click="go(e.url)">
				<view class="mine__entry-icon">
					<image class="fc-icon--badge" :src="iconUrl(e.iconKey)" mode="aspectFit" />
				</view>
				<text class="mine__entry-text">{{ e.text }}</text>
			</view>
		</view>

		<!-- 列表菜单 -->
		<view class="fc-card mine__menu">
			<view v-for="m in menus" :key="m.text" class="mine__menu-item" @click="go(m.url)">
				<image class="fc-icon--badge-sm mine__menu-icon" :src="iconUrl(m.iconKey)" mode="aspectFit" />
				<text class="mine__menu-text">{{ m.text }}</text>
				<text class="mine__menu-arrow">›</text>
			</view>
		</view>

		<view class="mine__version">同城分类信息 v1.1.0</view>

		<view class="mine__tabbar-space"></view>
		<fc-tabbar :current="3" />
	</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 } from '@/common/store/ui.js'
import { formatTime } from '@/common/utils/format.js'

export default {
	components: { FcTabbar },
	data() {
		return {
			statusBarHeight: 20,
			assets: {},
			entries: [
				{ iconKey: 'mine-post', text: '我的发布', url: '/pages/post/mine' },
				{ iconKey: 'mine-order', text: '我的订单', url: '/pages/member/orders' },
				{ iconKey: 'bar-fav-on', text: '我的收藏', url: '/pages/favorite/index' },
				{ iconKey: 'link-recharge', text: '余额充值', url: '/pages/member/recharge' },
				{ iconKey: 'mine-dist', text: '分销中心', url: '/pages/distribution/index' },
				{ iconKey: 'mine-vip', text: '会员中心', url: '/pages/member/index' },
			],
			menus: [
				{ iconKey: 'mine-draft', text: '草稿箱', url: '/pages/post/create' },
				{ iconKey: 'mine-history', text: '搜索记录', url: '/pages/search/index' },
				{ iconKey: 'mine-setting', text: 'LOGO 与图标设置', url: '/pages/admin/setting' },
				{ iconKey: 'mine-about', text: '关于我们', url: '' },
			],
		}
	},
	computed: {
		userInfo() {
			try {
				return useUserStore().state.userInfo || {}
			} catch (e) {
				return {}
			}
		},
		nick() {
			return this.userInfo.nickname || '未登录'
		},
		isMember() {
			try {
				return useUserStore().isMember.value
			} catch (e) {
				return false
			}
		},
		isBusiness() {
			try {
				return useUserStore().isBusiness.value
			} catch (e) {
				return false
			}
		},
		expireText() {
			return this.userInfo.memberExpireAt ? formatTime(this.userInfo.memberExpireAt).slice(0, 10) : '--'
		},
		/** 我的资产优惠券数量（契约：/member/assets 的 couponCount，兼容旧字段 coupons） */
		couponCount() {
			if (this.assets.couponCount != null) return this.assets.couponCount
			return (this.assets.coupons || []).length
		},
	},
	onLoad() {
		try {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 20
		} catch (e) {}
		loadUiConfig()
		this.fetchAssets()
		this.fetchProfile()
	},
	methods: {
		iconUrl,
		async fetchAssets() {
			try {
				this.assets = await memberApi.assets()
			} catch (e) {
				this.assets = { balance: 0, points: 0, coupons: [] }
			}
		},
		async fetchProfile() {
			try {
				await useUserStore().fetchProfile()
			} catch (e) {}
		},
		go(url) {
			if (!url) return uni.showToast({ title: '功能建设中', icon: 'none' })
			uni.navigateTo({ url })
		},
		goLogin() {
			const store = useUserStore()
			if (!store.isLogin.value) uni.navigateTo({ url: '/pages/auth/login' })
		},
	},
}
</script>

<style lang="scss" scoped>
.mine__header {
	background: $fc-gradient-hero;
	padding-bottom: 120rpx;
	border-radius: 0 0 40rpx 40rpx;
}
.mine__user {
	display: flex;
	align-items: center;
	padding: 20rpx 32rpx 0;
}
.mine__avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
	font-size: 52rpx;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mine__user-info {
	flex: 1;
	margin-left: 24rpx;
}
.mine__user-name-row {
	display: flex;
	align-items: center;
}
.mine__user-name {
	color: #ffffff;
	font-size: 40rpx;
	font-weight: 700;
}
.mine__badge {
	margin-left: 14rpx;
	padding: 2rpx 14rpx;
	border-radius: $fc-radius-pill;
	background: #ffffff;
	color: $fc-primary-text;
	font-size: 20rpx;
	font-weight: 600;
	&--person {
		background: rgba(255, 255, 255, 0.3);
		color: #ffffff;
	}
}
.mine__user-sub {
	display: block;
	margin-top: 10rpx;
	color: rgba(255, 255, 255, 0.9);
	font-size: $fc-font-sm;
}
.mine__arrow {
	color: #ffffff;
	font-size: 44rpx;
}
.mine__assets {
	display: flex;
	margin: 36rpx 32rpx 0;
}
.mine__asset {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mine__asset-num {
	color: #ffffff;
	font-size: 40rpx;
	font-weight: 700;
}
.mine__asset-label {
	margin-top: 6rpx;
	color: rgba(255, 255, 255, 0.85);
	font-size: $fc-font-xs;
}
.mine__vip {
	margin: -80rpx 24rpx 0;
	padding: 26rpx 28rpx;
	border-radius: $fc-radius-lg;
	background: $fc-gradient-warm;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: $fc-shadow-lg;
}
.mine__vip-left {
	display: flex;
	align-items: center;
}
.mine__vip-texts {
	display: flex;
	flex-direction: column;
	margin-left: 18rpx;
}
.mine__vip-title {
	display: block;
	color: #ffffff;
	font-size: $fc-font-lg;
	font-weight: 700;
}
.mine__vip-sub {
	display: block;
	margin-top: 6rpx;
	color: rgba(255, 255, 255, 0.9);
	font-size: $fc-font-xs;
}
.mine__vip-btn {
	padding: 12rpx 28rpx;
	border-radius: $fc-radius-pill;
	background: #ffffff;
	color: $fc-primary-text;
	font-size: $fc-font-sm;
	font-weight: 700;
}
.mine__grid {
	display: flex;
	flex-wrap: wrap;
}
.mine__entry {
	width: 33.33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 8rpx;
}
.mine__entry-icon {
	width: 96rpx;
	height: 96rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mine__entry-text {
	margin-top: 12rpx;
	font-size: $fc-font-sm;
	color: $fc-text-regular;
}
.mine__menu {
	padding: 8rpx 28rpx;
}
.mine__menu-item {
	display: flex;
	align-items: center;
	height: 96rpx;
	border-bottom: 2rpx solid $fc-border;
	&:last-child {
		border-bottom: none;
	}
}
.mine__menu-icon {
	width: 76rpx;
	height: 76rpx;
	margin-right: 20rpx;
}
.mine__menu-text {
	flex: 1;
	font-size: $fc-font;
	color: $fc-text;
}
.mine__menu-arrow {
	color: $fc-text-placeholder;
	font-size: 34rpx;
}
.mine__version {
	text-align: center;
	padding: 40rpx 0;
	font-size: $fc-font-xs;
	color: $fc-text-placeholder;
}
.mine__tabbar-space {
	height: 130rpx;
}
</style>