<template>
	<view class="">
		<view class="" style="background-color: #3c9cff;height: 160rpx;width: 100%;"></view>
		<view class="o-plr-24" style="margin-top: -80rpx;">
			<view class="l-flex-between l-boxShadow o-mb-40 c-bg-f o-plr-20 o-ptb-10 c-radius-10">
				<view @click="setAvatarNick" class="l-flex-RC">
					<view class="headImg o-mr-28">
						<u--image width="200rpx" height="200rpx" shape="circle" :src="$S_mine_avatarNick.avatarUrl">
							<view slot="error" style="font-size: 24rpx;">个人头像加载失败</view>
						</u--image>
					</view>
					<view class="">
						<view class="c-text-18 c-text-b">{{ $S_mine_avatarNick.nickName ? $S_mine_avatarNick.nickName : '暂无昵称' }}</view>
					</view>
				</view>
				<view class="l-flex-RC">
					<u-icon name="integral-fill" size="16"></u-icon>
					<text class="c-color-8">{{ GETT_loginInfos.integral || 0 }}积分</text>
				</view>
			</view>
			<view class="c-bg-f l-boxShadow c-radius-10">
				<u-cell-group :border="false">
					<u-cell v-for="item in mineCellList" :key="item.id" :icon="item.icon" :title="item.title" :isLink="item.isLink" :url="item.url"></u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
// 引入辅助函数
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			// 导航列表
			mineCellList: [
				{
					icon: 'order',
					title: '订单记录',
					isLink: true,
					url: '/otherPages/mine/orderRecord/index',
					id: 1
				},
				{
					icon: 'bag',
					title: '我要开店',
					isLink: true,
					url: '/otherPages/mine/opneShop/index',
					id: 2
				},
				{
					icon: 'account',
					title: '关于我们',
					isLink: true,
					url: '/otherPages/mine/aboutUs/index',
					id: 3
				},
				{
					icon: 'coupon',
					title: '我的优惠券',
					isLink: true,
					url: '/otherPages/mine/coupon/index',
					id: 4
				},
			]
		};
	},
	computed: {
		// 使用辅助函数
		...mapGetters(['GETT_loginInfos']),
		// 获取vuex中储存的个人信息
		$S_mine_avatarNick() {
			return this.$M_GS('common', '$S_mine_avatarNick');
		}
	},
	methods: {
		// 去搜集个人头像和昵称的页面
		setAvatarNick() {
			this.$M_Go('/otherPages/mine/collectPersonInfo/index');
		}
	}
};
</script>
