PartsInquiry/frontend/pages/my/index.vue

<template>
	<view class="me">
		<view class="card user">
			<image class="avatar" :src="avatarUrl" mode="aspectFill" @error="onAvatarError" />
			<view class="meta">
				<text class="name">{{ shopName }}</text>
				<text class="phone">{{ mobileDisplay }}</text>
				<text class="role">老板</text>
			</view>
		</view>

		<view class="group">
			<view class="group-title">会员与订单</view>
			<view class="cell" @click="goVip">
				<text>VIP会员</text>
				<text class="arrow">›</text>
			</view>
			<view class="cell" @click="goMyOrders">
				<text>我的订单</text>
				<text class="arrow">›</text>
			</view>
		</view>

		<view class="group">
			<view class="group-title">基础管理</view>
			<view class="cell" @click="goSupplier">
				<text>供应商管理</text>
				<text class="arrow">›</text>
			</view>
			<view class="cell" @click="goCustomer">
				<text>客户管理</text>
				<text class="arrow">›</text>
			</view>
			<view class="cell" @click="goCustomerQuote">
				<text>客户报价</text>
				<text class="arrow">›</text>
			</view>
			<view class="cell" @click="goShop">
				<text>店铺管理</text>
				<text class="arrow">›</text>
			</view>
		</view>

		<view class="group">
			<view class="group-title">设置中心</view>
			<view class="cell" @click="editProfile">
				<text>账号与安全</text>
				<text class="desc">修改头像、姓名、密码</text>
				<text class="arrow">›</text>
			</view>
			<view class="cell" @click="goProductSettings">
				<text>商品设置</text>
				<text class="arrow">›</text>
			</view>
			<view class="cell" @click="goSystemParams">
				<text>系统参数</text>
				<text class="desc">低价提示、默认收款、单行折扣等</text>
				<text class="arrow">›</text>
			</view>
			<view class="cell" @click="goAbout">
				<text>关于与协议</text>
				<text class="arrow">›</text>
			</view>
			<view class="cell danger" @click="logout">
				<text>退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
import { get } from '../../common/http.js'

export default {
	data() {
		return {
			avatarUrl: '/static/logo.png',
			shopName: '我的店铺',
			mobile: ''
		}
	},
	onLoad() {
		this.fetchProfile()
	},
	computed: {
		mobileDisplay() {
			const m = String(this.mobile || '')
			return m.length === 11 ? m.slice(0,3) + '****' + m.slice(7) : (m || '未绑定手机号')
		}
	},
	methods: {
		async fetchProfile() {
			// 后端暂无专门店铺/用户信息接口，先使用概览接口作为在线性检测与占位数据来源
			try { await get('/api/dashboard/overview') } catch(e) {}
			// 读取本地可能保存的店铺名与头像
			try {
				const storeName = uni.getStorageSync('SHOP_NAME') || ''
				const avatar = uni.getStorageSync('USER_AVATAR') || ''
				const phone = uni.getStorageSync('USER_MOBILE') || ''
				if (storeName) this.shopName = storeName
				if (avatar) this.avatarUrl = avatar
				this.mobile = phone
			} catch(e) {}
		},
		onAvatarError() {
			this.avatarUrl = '/static/logo.png'
		},
		goVip() { uni.showToast({ title: 'VIP会员（开发中）', icon: 'none' }) },
		goMyOrders() { uni.switchTab({ url: '/pages/detail/index' }) },
		goSupplier() { uni.navigateTo({ url: '/pages/supplier/select' }) },
		goCustomer() { uni.navigateTo({ url: '/pages/customer/select' }) },
		goCustomerQuote() { uni.showToast({ title: '客户报价（开发中）', icon: 'none' }) },
		goShop() { uni.showToast({ title: '店铺管理（开发中）', icon: 'none' }) },
		editProfile() { uni.showToast({ title: '账号与安全（开发中）', icon: 'none' }) },
		goProductSettings() { uni.navigateTo({ url: '/pages/product/settings' }) },
		goSystemParams() { uni.showToast({ title: '系统参数（开发中）', icon: 'none' }) },
		goAbout() { uni.navigateTo({ url: '/pages/my/about' }) },
		logout() {
			try {
				uni.removeStorageSync('TOKEN')
				uni.removeStorageSync('USER_AVATAR')
				uni.removeStorageSync('USER_NAME')
				uni.removeStorageSync('USER_MOBILE')
				uni.removeStorageSync('SHOP_NAME')
				uni.showToast({ title: '已退出', icon: 'none' })
				setTimeout(() => { uni.reLaunch({ url: '/pages/index/index' }) }, 300)
			} catch(e) {
				uni.reLaunch({ url: '/pages/index/index' })
			}
		}
	}
}
</script>

<style lang="scss">
.me { padding: 24rpx; }
.card.user { display: flex; gap: 18rpx; padding: 22rpx; background: $uni-bg-color-grey; border-radius: 16rpx; box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.16); align-items: center; }
.avatar { width: 120rpx; height: 120rpx; border-radius: 60rpx; background: $uni-bg-color-hover; }
.meta { display: flex; flex-direction: column; gap: 6rpx; }
.name { font-size: 34rpx; font-weight: 700; color: $uni-text-color; }
.phone { font-size: 26rpx; color: $uni-text-color-grey; }
.role { font-size: 22rpx; color: $uni-text-color-grey; }

.group { margin-top: 24rpx; background: $uni-bg-color-grey; border-radius: 16rpx; overflow: hidden; }
.group-title { padding: 18rpx 22rpx; font-size: 26rpx; color: $uni-text-color-grey; background: $uni-bg-color-hover; }
.cell { display: flex; align-items: center; padding: 26rpx 22rpx; border-top: 1rpx solid $uni-border-color; color: $uni-text-color; }
.cell .desc { margin-left: auto; margin-right: 8rpx; font-size: 22rpx; color: $uni-text-color-grey; }
.cell .arrow { margin-left: auto; color: #99a2b3; }
.cell.danger { color: #dd524d; justify-content: center; font-weight: 700; }
</style>