renshou/components/update-userinfo/index.vue

<template>
	<view>
		<view class="ceng"></view>
		<view class="update-pop">
			<block v-if="updateInfo">
				<!-- <image :src="picUrlss+'update_info.png'" class="update-img"></image> -->
				<view class="update-tip">完善头像/昵称信息</view>
				<button open-type="chooseAvatar" hover-class="none" class="update-avatar" @chooseavatar="uploadAvatar">
					<image :src="avatar" class="update-avatars" v-if="avatar"></image>
					<image :src="picUrlss + 'upload_avatar.png'" v-else></image>
				</button>
				<view class="update-form ddflex">
					<view class="update-label">昵称</view>
					<input type="nickname" v-model="nickName" placeholder="请输入昵称" placeholder-class="update-placeholder" class="update-ipt fflex" @blur="getNickname" />
				</view>
				<view class="update-btn" @click="updateInfos()">确定</view>
			</block>
			<block v-if="updateMobile&&!updateInfo">
			<image :src="picUrlss+'update_phone.png'" class="update-img"></image>
			<view class="update-tip">授权手机号</view>
			<button class="update-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即绑定</button>
			</block>
			<image :src="picUrlss+'update_close.png'" class="update-close" @click="closeUpdate"></image>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				avatar: '',
				nickName: '',
				sessionKey:''
			};
		},

		components: {},
		props: {
			updateInfo: {
				type: Boolean,
				default: false
			},
			updateMobile: {
				type: Boolean,
				default: false
			},
		},
		watch: {},

		mounted() {
			// console.log('ready');
			// console.log('isUpdateInfo==',this.updateInfo)
			// console.log('isUpdateMobile==',this.updateMobile)
			app.globalData.getCheckSessoin(json => {
				this.sessionKey = json.session_key;
			});
		},

		methods: {
			uploadAvatar(e) {
				uni.showLoading({
					title: '头像上传中'
				});
				req.uploadFile('/api/nocheck/upload', e.detail.avatarUrl, res => {
					this.avatar = res.src;
					uni.hideLoading();
				});
			},
			
			getNickname: function(e) {
				this.nickName = e.detail.value;
			},
			updateInfos() {
				if (!this.avatar) return req.msg('请上传头像');
				console.log('this.nickName>>>>', this.nickName);
				if (!this.nickName) return req.msg('请输入昵称');
				this.confirm();
			},
			confirm() {
				let that = this;
				let d = {
					avatar: that.avatar,
					nickName: that.nickName
				};
				// let isShowLoading = false;
				// if (!isShowLoading) {
				// 	req.loadIng('中');
				// 	isShowLoading = true;
				// }
				req.postRequest(
					'/api/user/save',
					d,
					res => {
						// if (isShowLoading) {
						// 	uni.hideLoading();
						let userInfo = req.getStorage('userInfo');
						userInfo.avatar = this.avatar;
						userInfo.nickName = this.nickName;
						req.setStorage('userInfo', userInfo);
						this.$emit('updateInfo', false);
						this.closeUpdate();
						// 	isShowLoading = false;
						// }
					},
					true
				);
			},
			getPhoneNumber(e) {
				let that = this;
				let sessionKey = this.sessionKey;
				let _params = {
					sessionKey: sessionKey,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				};
				if (req.getStorage('pidCode')) {
					_params.parentId = req.getStorage('pidCode');
				}
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					req.postRequest('/api/weixin/mobile', _params, json => {
						if (json.mobile) {
							var userInfo = req.getStorage('userInfo');
							userInfo.mobile = json.mobile;
							req.setStorage('userInfo', userInfo);
							this.$emit('updateMobile', true);
							this.closeUpdate();
						}
					});
				} else {}
			},
			closeUpdate(){
				this.$emit('closeUpdate');
			},
		}
	};
</script>

<style>
	@import "./index.css";
</style>