create-koa-boot 1.0.0

package/templates/example/uniapp/pages/mine/index.vue

@@ -0,0 +1,351 @@
+<template>
+	<view class="page-mine">
+		<!-- ===== 渐变头部 + 门店信息 ===== -->
+		<view class="mine-header">
+			<uv-status-bar></uv-status-bar>
+
+			<!-- 门店信息 -->
+			<view class="store-info">
+				<view class="avatar-wrap" @click="onEditProfile">
+					<uv-avatar :text="user.name ? user.name.substring(0, 1) : '店'" fontSize="40rpx"
+						bgColor="#ffffff" color="#1F7A45" size="130rpx"></uv-avatar>
+				</view>
+				<view class="store-text">
+					<text class="store-name">{{ orgName || store.name }}</text>
+					<text class="store-manager">{{ user.name || store.manager }}</text>
+					<text class="store-phone">{{ user.phone || store.phone }}</text>
+				</view>
+				<view class="store-tag">
+					<view v-if="primaryRoleName" class="role-badge">
+						<uv-tags :text="primaryRoleName" type="success" plainFill shape="circle" size="mini"></uv-tags>
+					</view>
+				<view v-if="!isAdmin && subRoleNames.length" class="role-badge role-badge--sub">
+					<uv-tags v-for="role in subRoleNames" :key="role" :text="role" type="warning" plain plainFill
+						shape="circle" size="mini"></uv-tags>
+				</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- ===== 常用功能菜单 ===== -->
+		<view class="menu-card">
+			<uv-cell-group :border="false">
+			<uv-cell v-for="item in visibleMenuList" :key="item.label" :title="item.label" :label="item.desc"
+				:border="true" isLink @click="onMenuClick(item)">
+					<template v-slot:icon>
+						<view class="menu-icon">
+							<uv-badge v-if="item.badge" :value="item.badge" absolute :offset="[-8, -8]"></uv-badge>
+							<uv-icon :name="item.icon" color="#1F7A45" size="40rpx"></uv-icon>
+						</view>
+					</template>
+				</uv-cell>
+			</uv-cell-group>
+
+			<!-- 退出登录 -->
+			<view class="logout-btn" @click="onLogout">
+				<text class="logout-text">退出登录</text>
+			</view>
+		</view>
+
+		<view class="bottom-gap"></view>
+		<tab-bar :active="3"></tab-bar>
+	</view>
+</template>
+
+<script>
+import TabBar from '@/components/TabBar.vue'
+import { useUserStore } from '@/stores/user'
+import { messageApi } from '@/services/modules/message'
+import { getPrimaryRoleName, getRoleNames } from '@/config/roleMenus'
+
+export default {
+	components: { TabBar },
+	computed: {
+		/** 主角色显示名 */
+		primaryRoleName() {
+			return getPrimaryRoleName(this.userStore.roles)
+		},
+		/** 全部角色显示名 */
+		roleNames() {
+			return getRoleNames(this.userStore.roles)
+		},
+		/** 副角色显示名（排除主角色，避免重复展示） */
+		subRoleNames() {
+			return this.roleNames.filter(name => name !== this.primaryRoleName)
+		},
+		/** 是否总部管理员 */
+		isAdmin() {
+			return this.userStore.roleCodes.includes('admin')
+		},
+		/** 机构名称：按角色取第一个机构（优先级 门店 > 前置仓 > 总仓），无则空字符串 */
+		orgName() {
+			const orgs = this.userStore.orgs
+			const store = orgs?.stores?.[0]
+			if (store) return store.storeName
+			const branch = orgs?.branchWarehouses?.[0]
+			if (branch) return branch.warehouseName
+			const central = orgs?.centralWarehouses?.[0]
+			if (central) return central.warehouseName
+			return ''
+		},
+		/** 常用功能菜单（按角色过滤：未声明 roles 的菜单对所有角色可见） */
+		visibleMenuList() {
+			const roleCodes = this.userStore.roleCodes
+			return this.menuList
+				.filter(item => !item.roles || item.roles.some(r => roleCodes.includes(r)))
+				.map(item => item.isMessage ? { ...item, badge: this.unreadCount } : item)
+		}
+	},
+	data() {
+		return {
+			keyword: '',
+			userStore: useUserStore(),
+			user: useUserStore().userInfo || {},
+			// 门店信息（mock，后端门店接口就绪后替换）
+			store: {
+				name: '总部',
+				manager: '管理员',
+				phone: '138 0000 2026',
+				typeName: '总部'
+			},
+			// 未读消息数（消息中心红点）
+			unreadCount: 0,
+			// 常用功能菜单（roles：仅指定角色可见，缺省则所有角色可见）
+			menuList: [
+				{ label: 'AI助手', icon: 'kefu-ermai', page: '/pages/mine/help/index' },
+				{ label: '消息中心', icon: 'bell', page: '/pages/message/index', isMessage: true },
+				{ label: '个人资料', icon: 'account', page: '/pages/mine/profile/index' },
+				{ label: '账号安全', icon: 'lock', page: '/pages/mine/security/index' },
+				{ label: '联系客服', icon: 'server-man', page: '' },
+				{ label: '关于我们', icon: 'info-circle', page: '/pages/mine/about/index' }
+			]
+		}
+	},
+	onLoad () {
+		console.log('onload', this.userStore.orgs.stores[0])
+	},
+	onShow() {
+		// 进入页面时刷新未读消息数（静默失败，不影响页面展示）
+		this.refreshUnread()
+	},
+	methods: {
+		/** 拉取未读消息数（静默，失败不影响页面） */
+		async refreshUnread() {
+			try {
+				const res = await messageApi.getUnreadCount({ silent: true })
+				this.unreadCount = (res.data && res.data.count) || 0
+			} catch (e) {
+				// 静默失败
+			}
+		},
+		onEditProfile() {
+			uni.navigateTo({ url: '/pages/mine/profile/index' })
+		},
+		onMenuClick(item) {
+			if (item.page) {
+				uni.navigateTo({ url: item.page })
+			} else {
+				uni.showToast({ title: item.label + '开发中', icon: 'none' })
+			}
+		},
+		/** 退出登录 — 真正清除状态 */
+		onLogout() {
+			uni.showModal({
+				title: '提示',
+				content: '确定退出登录吗？',
+				success: async (res) => {
+					if (res.confirm) {
+						try {
+							const userStore = useUserStore()
+							await userStore.logout()
+							uni.reLaunch({ url: '/pages/login/index' })
+						} catch {
+							// 即使 logout API 失败也强制跳转
+							uni.reLaunch({ url: '/pages/login/index' })
+						}
+					}
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+$primary: #1F7A45;
+
+.page-mine {
+	min-height: 100vh;
+	background-color: #F7F8F3;
+	padding-bottom: 160rpx;
+}
+
+/* ========== 头部 ========== */
+.mine-header {
+	background: linear-gradient(150deg, #14532D 0%, #1F7A45 50%, #7BC15E 100%);
+	padding: 0 28rpx 80rpx;
+	color: #ffffff;
+}
+
+/* ========== 门店信息 ========== */
+.store-info {
+	display: flex;
+	align-items: center;
+	padding-top: 40rpx;
+}
+
+.avatar-wrap {
+	margin-right: 24rpx;
+	flex-shrink: 0;
+}
+
+.store-text {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	overflow: hidden;
+}
+
+.store-name {
+	font-size: 42rpx;
+	font-weight: 800;
+}
+
+.store-manager {
+	font-size: 28rpx;
+	opacity: 0.92;
+	margin-top: 8rpx;
+}
+
+.store-phone {
+	font-size: 28rpx;
+	opacity: 0.85;
+	margin-top: 6rpx;
+}
+
+.store-tag {
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 10rpx;
+}
+
+.role-badge {
+	/* 主角色标签（实心） */
+	&--sub {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: 8rpx;
+	}
+}
+
+/* ========== 搜索栏 ========== */
+.search-box {
+	margin-top: 28rpx;
+	border-radius: 100rpx;
+	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
+}
+
+/* ========== 业务管理（角色动态菜单） ========== */
+.biz-card {
+	margin: -48rpx 24rpx 0;
+	position: relative;
+	z-index: 2;
+	background: #ffffff;
+	border-radius: 24rpx;
+	padding: 28rpx 16rpx 20rpx;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+}
+
+.section-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 12rpx 20rpx;
+}
+
+.section-title-wrap {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+}
+
+.section-dot {
+	width: 8rpx;
+	height: 28rpx;
+	border-radius: 8rpx;
+	background: linear-gradient(180deg, #2f9e5f, #1f7a45);
+}
+
+.section-title {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #1a1a1a;
+}
+
+.section-sub {
+	font-size: 22rpx;
+	color: #999999;
+}
+
+.biz-icon {
+	width: 88rpx;
+	height: 88rpx;
+	border-radius: 24rpx;
+	background: rgba(31, 122, 69, 0.08);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 12rpx;
+}
+
+.biz-label {
+	font-size: 24rpx;
+	color: #333333;
+	text-align: center;
+	white-space: nowrap;
+}
+
+/* ========== 菜单卡片 ========== */
+.menu-card {
+	margin: 24rpx 24rpx 0;
+	background: #ffffff;
+	border-radius: 24rpx;
+	padding: 8rpx 8rpx 0;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+	overflow: hidden;
+}
+
+.menu-icon {
+	position: relative;
+	width: 56rpx;
+	height: 56rpx;
+	border: 3rpx solid $primary;
+	border-radius: 12rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 20rpx;
+}
+
+/* ========== 退出登录 ========== */
+.logout-btn {
+	height: 100rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-top: 1rpx solid #F3F4F6;
+}
+
+.logout-text {
+	font-size: 30rpx;
+	color: #6B7280;
+}
+
+.bottom-gap {
+	height: 40rpx;
+}
+</style>