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.phone}}</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 { computed, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import useUser from '@/hooks/useUser'
import userAvatar from '/static/images/user-avatar.png'
import wx from '@/business/wx-login.vue'

const userInfo = ref('')
onShow(() => {
	userInfo.value = useUser()
})

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>