<template>
	<view class="content">

		<view class="userInfo">
			<uv-image src="../../static/avatar.png" width="120rpx" height="120rpx" shape="circle" />
			<view class="right">
				<h3 class="nickName">{{ userInfo?.nickName }}</h3>
				<!-- todo 这里仓库信息暂时没有 所以写死 -->
				<p class="tag">电网仓储公司</p>
			</view>

		</view>

		<view style="margin-top: 24rpx;">
			<uni-list>
				<uni-list-item v-for="(item, index) in menuList" :key="item.id" :title="item.title" :thumb="item.thumb"
					thumb-size="sm" link @click="item.click" clickable />
			</uni-list>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";

const userInfo = ref(null)
const menuList = [
	{
		id: 1,
		title: '用户协议',
		thumb: '../../static/userAgreement.svg',
		click: () => {
			console.log('用户协议')
		}
	},
	{
		id: 2,
		title: '发布交易信息',
		thumb: '../../static/postTradeInfo.svg',
		click: () => {
			console.log('发布交易信息')
		}
	},
	{
		id: 3,
		title: '退出登录',
		thumb: '../../static/exit.svg',
		click: () => {
			console.log('退出登录')
		}
	}
]

// 获取缓存内的用户信息
const getUserInfo = () => {
	uni.getStorage({
		key: 'app_user',
		success: ({ data }) => {
			userInfo.value = data
		},
		fail: (error) => { }
	})
}
getUserInfo();

</script>

<style lang="scss" scoped>
.userInfo {
	background-color: #fff;
	padding: 36rpx;
	display: flex;
	align-items: center;

	.right {
		margin-left: 48rpx;
	}

	.tag {
		margin-top: 36rpx;
		padding: 6rpx 16rpx;
		font-size: 12px;
		color: #fff;
		border-radius: 8px;
		background-color: #4682B4;
	}
}
</style>
