min-shenze-applet-master/otherPages/mine/collectPersonInfo/index.vue

<template>
	<view class="collectPersonInfoIdx o-w o-h c-bg-f">
		<view class="headerCon l-flex-center o-mt-30">
			<button style="width: 200rpx;height: 200rpx;border-radius: 50%;padding: 0;" open-type="chooseAvatar"
				@chooseavatar="onChooseAvatar">
				<image style="width: 200rpx;height: 200rpx;border-radius: 50%;" :src="avatarNick.avatarUrl"></image>
			</button>
		</view>
		<view class="l-flex-RC o-plr-24 o-mtb-30"
			style="height: 100rpx;border-top: 1px solid #eee;border-bottom: 1px solid #eee;">
			<text class="o-mr-40">昵称</text>
			<input @blur="nickNameBlur" v-model="avatarNick.nickName" type="nickname" placeholder="请输入昵称" />
		</view>
		<view class="o-plr-24 o-mtb-30">
			<button @click="saveAvatarNick" type="primary"
				style="width: 100%;height: 100rpx;border-radius: 10rpx;line-height: 100rpx;background-color: #3c9cff;">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarNick: {
					avatarUrl: '',
					nickName: ''
				},
			};
		},
		onLoad() {
			const {
				avatarUrl,
				nickName
			} = this.$store.state.common.$S_mine_avatarNick;
			this.avatarNick = {
				avatarUrl,
				nickName,
			}
		},
		methods: {
			// 解决获取input的获取nickname时没触发赋值问题
			nickNameBlur(e) {
				this.avatarNick.nickName = e.detail.value;
			},
			// 选择微信头像
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.avatarNick.avatarUrl = avatarUrl;
			},
			// 保存信息
			saveAvatarNick() {
				const {
					nickName
				} = this.avatarNick;
				if (!nickName || nickName == '暂无昵称') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return;
				}
				this.$store.commit('MUTA_AVATARNICK', this.avatarNick);
				uni.navigateBack();
			}
		}
	};
</script>