<template>
	<view class="">
		<!-- 个人中心个人信息：头像，名称，箭头 -->
		<view class="flex align-center justify-between padding" style="background-color: #F7F8F9; padding-top: 94rpx;">
			<view class="flex" @tap="jumpSingleInfo()">
				<view class="">
					<view class="" style="margin-left: 53rpx;">
						<image src="../../../static/avatar_icon.png" class="user-icon" mode="" v-if="!userInfo.avatar">
						</image>
						<!-- <image src="../../../static/avatar_icon.png" class="user-icon" mode="" v -else="!userInfo.avatar">
						</image> -->
					</view>
				</view>
				<view class="flex align-center" style="margin-left: 35rpx;">
					<view class="user_name">
						{{userInfo.nikeName}}
					</view>
				</view>
			</view>
		</view>
		<!-- 我的地址，我的评价，联系平台客服，我要成为服务商 -->
		<view class="" style="background-color: #F7F8F9;">
			<view class=""
				style="background-color: #FFFFFF; border-top-left-radius: 30rpx; border-top-right-radius: 30rpx;padding: 0 30rpx;">
				<view class="flex align-center justify-between padding" style="border-bottom: 1rpx solid #eee;"
					@tap="jumpUserAddress()">
					<view class="flex">
						<view class="">
							<image src="../../../static/address2x.png" mode="" class="address_icon"></image>
						</view>
						<view class="margin-left-sm ">
							我的地址
						</view>
					</view>

					<view class="">
						<u-icon name='arrow-right' class="right_icon"> </u-icon>
					</view>
				</view>
				<view class="flex align-center justify-between padding" style="border-bottom: 1rpx solid #eee;"
					@tap="jumpUserInfo()">
					<view class="flex">
						<view class="">
							<image src="../../../static/review2x.png" mode="" class="address_icon"></image>
						</view>
						<view class="margin-left-sm ">
							我的评价
						</view>
					</view>

					<view class="">
						<u-icon name='arrow-right' class="right_icon"> </u-icon>
					</view>
				</view>
				<view class="flex align-center justify-between padding" style="border-bottom: 1rpx solid #eee;">
					<view class="flex">
						<view class="">
							<image src="../../../static/contactLiner2x.png" mode="" class="address_icon"></image>
						</view>
						<view class="margin-left-sm ">
							联系平台客服
						</view>
					</view>

					<view class="">
						<u-link href="http://jzkf.uxianxin.com/s/66424vv38">
							<u-icon name='arrow-right' class="right_icon"> </u-icon>
						</u-link>
					</view>
				</view>
				<view class="flex align-center justify-between padding">
					<view class="flex">
						<view class="">
							<image src="../../../static/serviceProvider2x.png" mode="" class="address_icon"></image>
						</view>
						<view class="margin-left-sm ">
							我要成为服务商
						</view>
					</view>

					<view class="flex ">
						<view class="" style="font-size: 28rpx; color: #999999; margin-top: 5rpx; margin-right: 10rpx;">
							去申请
						</view>
						<view class="">
							<u-icon name='arrow-right' class="right_icon" style=""> </u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				memberId: uni.getStorageSync('userInfo').memberId
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$u.api.getUserInfo(this.memberId).then(res => {
					if (res.code === 200) {
						this.userInfo = res.data
					}
				})
			},
			///进入我的个人信息
			jumpSingleInfo() {
				uni.navigateTo({
					url: "/pages/mine/minePage/myAccount",
				});
			},
			///进入我的评价
			jumpUserInfo() {
				///switchTab 是Tab列表中的，navigateTo是非Tab上的
				uni.navigateTo({
					url: "/pages/mine/minePage/remarkPage",
				});
			},
			///进入我的地址
			jumpUserAddress() {
				uni.navigateTo({
					url: "/pages/mine/minePage/myAddress",
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>


<style lang="scss" scoped>
	.right_icon {
		color: #999999;
		width: 14px;
		height: 26px;
	}

	.user-icon {
		width: 110rpx;
		height: 110rpx;
		border-radius: 100rpx;
	}

	.user_name {

		font-weight: bold;
		color: black;
		font-size: 34rpx;
	}

	.icon_address {
		width: 14rpx;
		height: 26rpx;
	}

	.address_icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>
