<template>
	<view class="profile">
		<u-cell-group :border="false">
			<u-cell title="头像" :isLink="false" :border="false" @click="avatarChange()">
				<u--image slot="value" :showLoading="true" :src="avatarSrc" width="80rpx"
					height="80rpx" shape="circle"></u--image>
			</u-cell>
			<u-cell title="姓名" value="请输入" :isLink="true" arrow-direction="right" :border="false"></u-cell>
			<u-cell title="身份证" value="请输入" :isLink="true" arrow-direction="right" :border="false"></u-cell>
			<u-cell title="性别" value="请选择" :isLink="true" arrow-direction="right" :border="false"></u-cell>
			<u-cell title="年龄" value="请选择" :isLink="true" arrow-direction="right" :border="false"></u-cell>
			<u-cell title="手机号" value="请输入" :isLink="true" arrow-direction="right" :border="false"></u-cell>
			<u-cell title="职业" value="请输入" :isLink="true" arrow-direction="right" :border="false"></u-cell>
			<u-cell title="常在地区" value="请输入" :isLink="true" arrow-direction="right" :border="false"></u-cell>
			<u-cell title="用户星级" :border="false">
				<u-rate slot="value" active-color="#fca237" inactive-color="#b2b2b2" gutter="1" :count="3" :value="3"
					:minCount="3"></u-rate>
			</u-cell>
		</u-cell-group>
		<view class="submit">
			<u-button class="submit-btn" type="primary" :loading="false" loadingText="加载中" shape="10">确认修改</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarSrc: 'https://cdn.uviewui.com/uview/album/1.jpg'
			}
		},
		methods: {
			avatarChange() {
				uni.chooseImage({
					count: 1,
					sizeType: "compressed",
					success: (res) => {
						console.log(res)
						this.avatarSrc = res.tempFilePaths[0]
						uni.showToast({
							icon: "success",
							title: "修改成功！"
						})
					},
					fail: (res) => {
						console.log('用户取消操作')
					}
				})
			}
		}
	}

</script>

<style lang="scss" scoped>
	.profile {
		margin: 40rpx 60rpx;

		.submit {
			padding: 20rpx 0;
		}
	}

	/deep/ .u-cell {
		margin: 10rpx 0rpx;
		.u-cell__body  {
			padding-left: 0;
			padding-right: 0;
		}
	}

	/deep/ .u-button--primary {
		background-color: $uni-color-primary !important;
		border-color: $uni-color-primary !important;
	}
</style>
