/** * 我的 */
<template>
  <view class="mine">
    <TabBar></TabBar>
		<view class="image-area">
			<u-avatar :src="img" size='80'></u-avatar>
		</view>
		
		<view class="title">我的账号</view>
		
		<view class="content" v-for="item in list" :key="item.id">
			<text class="title">{{item.name}}</text>
			<text class="value">{{item.value}}</text>
		</view>
		
		<view class="title">账号设置</view>
		<button class="changeImg" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">修改图片</button>
  </view>
</template>

<script>
import TabBar from '@/components/tabBar/tabBar.vue';
import { updateImg } from '@/api/mine.js';
export default {
  components: {
    TabBar,
  },
  data() {
    return {
      img: '', //头像
			id: '', //用户id
			list: [
				{
					id: 'number',
					name: '员工号',
					value: '111'
				},
				{
					id: 'name',
					name: '员工姓名',
					value: '张三'
				},
				{
					id: 'type',
					name: '员工类型',
					value: '111'
				},
				{
					id: 'phone',
					name: '手机号',
					value: '111'
				},
			]
    }
  },
	mounted() {
		const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
		this.img = userInfo.avatar;
		this.id = userInfo.id;
		this.list[0].value = userInfo.account;
		this.list[1].value = userInfo.name;
		this.list[2].value = userInfo.salt;  //物业人员0，安保人员1，正式员工2
		this.list[3].value = userInfo.phone;
	},
  onShow() {
    let pages = getCurrentPages()
    const curPage = pages[pages.length - 1]
    this.currentPagePath = curPage.route
    uni.setStorageSync('currentPagePath', this.currentPagePath);
  },
  methods: {
    onChooseAvatar(e) {
			this.img = e.detail.avatarUrl;
			updateImg(this.img, this.id);
		}
  },
}
</script>

<style scoped lang="scss">
	.mine {
		padding: 52rpx;
		.image-area {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 100rpx;
		}
		.title {
			font-size: 38rpx;
			font-weight: 600;
			margin: 30rpx 0;
		}
		.changeImg {
			background-color: #fff;
			border-color: #fff;
			color: #c5000a;
			// margin-top: 120rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		.content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 34rpx;
			font-weight: 400;
			.title {
				font-size: 34rpx;
				font-weight: 400;
			}
		}
	}
</style>
<style lang="scss">
	.mine {
		.button {
		  justify-content: center !important;
		  background-color: #fff !important;
		  border-color: #fff !important;
		  color: #c5000a !important;
		  // margin-top: 120rpx;
		  font-weight: 600;
		}
	}
</style>