fs-uni-template/pages/my/my.vue

<template>
	<view>
		<view class="my-top">
			<view class="status-bar"></view>
			<view class="radius-lg top-box">
				<view class="user-info" v-if="userInfo.name">
					<fs-avatar link="./userInfo" size="130rpx" :src="userInfo.photo || userAvatar"></fs-avatar>

					<view class="top-box-content">
						<view class="top-box-title">{{ userInfo.name }}</view>
						<view>{{ userInfo.mobile }}</view>
					</view>
				</view>
				<view v-else class="text-center">
					<fs-avatar size="140rpx" link="/modules/common/login/login" border>去登录</fs-avatar>
				</view>
			</view>
		</view>

		<view class="short-list">
			<fs-divide-list :list="shortcutList">
				<template #default="{item}">
					<view class="top-box-hd">{{ item.num || 0 }}</view>
					<view class="content">{{ item.title }}</view>
				</template>
			</fs-divide-list>
		</view>

		<fs-card gutter :titleStyle="{ padding: '0' }">
			<template #title>
				<view class="title-hd">常用工具</view>
			</template>
			<fs-grid :columnNum="4">
				<fs-grid-item v-for="(item, index) in 4" :key="index">
					<fs-avatar src="/static/images/my/invoice.png" size="80rpx"></fs-avatar>
					<view class="content">我的发票</view>
				</fs-grid-item>
			</fs-grid>
		</fs-card>

		<fs-cell-group arrow border gutter>
			<fs-cell link="/modules/common/licensePlate/list" value="车辆管理">
				<template #title>
					<fs-icon type="icon-car" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="/modules/common/address/list" value="地址管理">
				<template #title>
					<fs-icon type="icon-location" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="/modules/common/org" value="组织架构">
				<template #title>
					<fs-icon type="icon-org" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="/modules/common/addrbook/list" value="通讯录">
				<template #title>
					<fs-icon type="icon-tongxunlu" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="/modules/common/notice" value="我的消息">
				<template #title>
					<fs-icon type="icon-notice" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="/modules/common/feedback" value="意见反馈">
				<template #title>
					<fs-icon type="icon-feedback" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="/modules/common/version" value="版本记录">
				<template #title>
					<fs-icon type="icon-version" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="/modules/common/setting" value="设置">
				<template #title>
					<fs-icon type="icon-setting" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
		</fs-cell-group>
		<wx v-model="showLogin"></wx>
	</view>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import userAvatar from '/static/images/user-avatar.png'
import wx from '@/business/wx-login.vue'

const user = useUserStore()
const userInfo = computed(() => user.userInfo)

const shortcutList = ref([
	{
		title: '我的访客',
		num: 10
	},
	{
		title: '我的访客',
		num: 10
	}
])

const showLogin = ref(false)
</script>

<style lang="scss" scoped>
.status-bar {
	height: var(--status-bar-height);
}
.my-top {
	background-color: var(--primary);
	padding: 60rpx var(--gutter) 0;
	margin-bottom: var(--gutter);
}
.top-box {
	position: relative;
	padding: 60rpx 0;
	color: #fff;

	&-hd {
		font-size: 23px;
		font-weight: bold;
	}
	&-title {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	&-content {
		padding: 10rpx 0;
		margin-left: 20rpx;
	}
}
.short-list {
	margin-top: -80rpx;
	padding: var(--gutter);
}
.user-info {
	display: flex;
}
</style>