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

<template>
	<view>
		<fs-avatar src="/static/images/my-bg.png" shape="square" width="100%" height="288rpx"></fs-avatar>
		<view class="my-box">
			<view class="layout-box radius-lg top-box">
				<view class="user-info" v-if="userInfo.name">
					<fs-avatar size="140rpx" border :src="userInfo.photo" v-if="userInfo.photo"></fs-avatar>
					<fs-wx-avatar v-else></fs-wx-avatar>
					
					<view class="top-box-content">
						<text class="vm title" style="margin-right: 10rpx;">{{userInfo.name}}</text>
						<fs-icon type="icon-sex-male" color="#2285FF" v-if="userInfo.sex === '1'"></fs-icon>
						<fs-icon type="icon-sex-female" colorType="error" v-if="userInfo.sex === '2'"></fs-icon>
					</view>
					
					<fs-icon
						class="top-box-edit"
						type="icon-edit"
						size="40rpx"
						link="./userInfo">
					</fs-icon>
				</view>
				<view v-else class="user-info">
					<fs-avatar size="140rpx" link="../login/login4" border>去登录</fs-avatar>
				</view>
				
				<view :style="{'margin-top': userInfo.name ? '80rpx' : '20rpx'}">
					<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>
			</view>
		</view>
		
		<fs-card gutter :titleStyle="{padding: '0'}">
			<template #title>
				<view class="title-hd" >常用工具</view>
			</template>
			<fs-grid :columnNum="4">
				<fs-grid-item>
					<fs-avatar src="/static/images/invoice.png" size="80rpx"></fs-avatar>
					<view class="content">我的发票</view>
				</fs-grid-item>
				<fs-grid-item>
					<fs-avatar src="/static/images/invoice.png" size="80rpx"></fs-avatar>
					<view class="content">我的发票</view>
				</fs-grid-item>
				<fs-grid-item>
					<fs-avatar src="/static/images/invoice.png" size="80rpx"></fs-avatar>
					<view class="content">我的发票</view>
				</fs-grid-item>
				<fs-grid-item>
					<fs-avatar src="/static/images/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="./licensePlate/list" value="车辆管理">
				<template #title>
					<fs-icon type="icon-car" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="./address/list" value="地址管理">
				<template #title>
					<fs-icon type="icon-location" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="./org" value="组织架构">
				<template #title>
					<fs-icon type="icon-org" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="./addrbook/list" value="通讯录">
				<template #title>
					<fs-icon type="icon-tongxunlu" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
		</fs-cell-group>
		
		<fs-cell-group arrow border>
			<fs-cell link="./notice" value="我的消息">
				<template #title>
					<fs-icon type="icon-notice" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="./feedback" value="意见反馈">
				<template #title>
					<fs-icon type="icon-feedback" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
			<fs-cell link="./version" value="版本记录">
				<template #title>
					<fs-icon type="icon-version" colorType="primary"></fs-icon>
				</template>
			</fs-cell>
		</fs-cell-group>
		
		<fs-gutter height="120rpx"></fs-gutter>
		<fs-button round block @click="handleLogout">退出登录</fs-button>
		<fs-gutter height="60rpx"></fs-gutter>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const userInfo = computed(() => store.state.userInfo)

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

const handleLogout = () => {
	store.dispatch('logout').then(res => {
		console.log('logout')
	})
}
</script>

<style lang="scss" scoped>
.my-box{
	padding: var(--gutter);
	margin-top: -200rpx;
	z-index: 100;
	position: relative;
}
.top-box{
	position: relative;
	
	&-edit{
		position: absolute;
		top: 64rpx;
		right: 0rpx;
	}
	
	&-hd{
		font-size: 23px;
		font-weight: bold;
	}
	
	&-content{
		padding: 10rpx 0;
	}
}
.user-info{
	position: absolute;
	z-index: 10;
	left: 50%;
	top: -70rpx;
	transform: translateX(-50%);
	text-align: center;
}
</style>