H5_module/components/update-userinfo/index.vue

<template>
	<view>
		<view class="ceng"></view>
		<view class="update-pop" :style="'bottom:'+updateBottom">
			<view class="update-close1" @click="closeUpdate">
				<image src="../../static/pages/images/close1.png"></image>
			</view>
			<block v-if="updateInfo">
				<!-- <image :src="picUrlss+'update_info.png'" class="update-img"></image> -->
				<view class="project ddflex">
					<!-- <image :src="config.CONFIG_PROJECT_LOGO" mode="aspectFill"></image> -->
					<!-- {{config.CONFIG_PROJECT_TITLE}}<text>申请</text> -->
					<view class="fflex">
						<view>建议完善头像与昵称</view>
						<text>便于更好地为您提供服务</text>
					</view>
				</view>
				<!-- <view class="huoqu-text">获取你的昵称、头像</view> -->
				<!-- <view class="update-tip">完善头像/昵称信息</view> -->
				<view class="update-form">
					<button open-type="chooseAvatar" hover-class="none" class="update-avatar ddflex fflex" @chooseavatar="uploadAvatar">
						<image :src="avatar?avatar:picUrlss+'update_userimg.png'" class="update-avatars" style="border-radius: 50%;"></image>
						<!-- <image :src="picUrlss + 'upload_avatar.png'" class="update-avatars" v-else></image> -->
						<view class="update-pic ddflex">
							<image :src="picUrlss + 'upload_white.png'"></image>
						</view>
					</button>
					<input type="nickname" v-model="nickName" placeholder="获取微信昵称" placeholder-class="update-placeholder" class="update-ipt fflex" @blur="getNickname" />
				</view>
				<view class="ment ddflex">
					<image :src="'../../static/pages/images/'+(isAgree?'gou_h.png':'gou.png')" @click="agree()"></image>
					<view class="ddflex">我已阅读并同意<navigator url="/mine/page/page?title=用户协议&isXieyi=true" hover-class="none" class="xieyi">用户协议</navigator>，<navigator url="/mine/page/page?title=隐私声明&isYinsi=true" hover-class="none" class="xieyi">隐私声明</navigator></view>
				</view>
				<view class="update-btn" @click="updateInfos">保存并继续使用</view>
				<!-- <view class="update-btns ddflex">
					<view class="update-btn-jj" @click="closeUpdate()">拒绝</view>
					<view class="update-btn-yx" @click="updateInfos()">允许</view>
				</view> -->
			</block>

			<view class="bind-mobile" v-if="updateMobile && !updateInfo">
				<image :src="config.CONFIG_PROJECT_LOGO" mode="aspectFill" class="pro-logo" v-if="config.CONFIG_PROJECT_LOGO"></image>
				<!-- <image :src="picUrlss + 'blue/update_phone.png'" class="update-img"></image> -->
				<view class="update-tip">{{config.CONFIG_PROJECT_TITLE}}<view>更多服务，请{{isBind ? '绑定手机号':'授权登录'}}</view></view>
				<view class="ment ddflex">
					<image :src="'../../static/pages/images/'+(isAgree?'gou_h.png':'gou.png')" @click="agree()"></image>
					<view class="ddflex">我已阅读并同意<navigator url="/mine/page/page?title=用户协议&isXieyi=true" hover-class="none" class="xieyi">用户协议</navigator>，<navigator url="/mine/page/page?title=隐私声明&isYinsi=true" hover-class="none" class="xieyi">隐私声明</navigator></view>
				</view>
				<button class="update-btn ddflex" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="margin-top: 80rpx !important;" v-if="isAgree"><image :src="picUrlss+'bind_m.png'"></image>{{isBind ? '绑定手机号':'一键登录'}}</button>
				<view class="update-btn ddflex" style="margin-top: 80rpx !important;" @click="checkAgree" v-else><image :src="picUrlss+'bind_m.png'"></image>{{isBind ? '绑定手机号':'一键登录'}}</view>
				<view class="zanbu" @click="closeUpdate">暂不{{isBind ? '绑定':'登录'}}</view>
			</view>
			<!-- <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,
			config: '',
			avatar: '',
			nickName: '',
			isAgree: false,
			updateBottom: '-100%'
		};
	},

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

	mounted() {
		// console.log('ready');
		// console.log('isUpdateInfo==',this.updateInfo)
		// console.log('isUpdateMobile==',this.updateMobile)
		this.config = JSON.parse(req.getStorage('configRes'));
		this.updateBottom = 0
		// this.avatar = req.getStorage('userInfo').avatar;
		// this.nickName = req.getStorage('userInfo').nickName;
	},

	methods: {
		uploadAvatar(e) {
			uni.showLoading({
				title: '头像上传中'
			});
			req.uploadFile('/api/upload', e.detail.avatarUrl, res => {
				this.avatar = res.src;
				this.confirm(false,false);
				uni.hideLoading();
			});
		},

		getNickname: function(e) {
			this.nickName = e.detail.value;
			if(e.detail.value) this.confirm(false,false);
		},
		agree(){
			this.isAgree = !this.isAgree;
		},
		updateInfos() {
			let that = this;
			if(!this.isAgree) return req.msg('请先同意用户协议');
			if (!this.avatar) return req.msg('请点击获取你的微信头像');
			if (!this.nickName) return req.msg('请输入昵称');
			// this.confirm(true,true);
			that.closeUpdate(1);
		},
		confirm(isShow,isClose) {
			let that = this;
			let d = {};
			if(that.avatar) d.avatar = that.avatar;
			if(that.nickName) d.nickName = that.nickName;
			req.postRequest('/api/user/save',d,res => {
				let userInfo = req.getStorage('userInfo');
				if(that.avatar) userInfo.avatar = that.avatar;
				if(that.nickName) userInfo.nickName = that.nickName;
				req.setStorage('userInfo', userInfo);
				if(isClose){
					this.closeUpdate(2);
				}
				req.removeStorage('isShowUpdateInfo')
			},isShow);
		},
		checkAgree(){
			if(!this.isAgree) return req.msg('请先同意用户协议');
		},
		getPhoneNumber(e) {
			let that = this;
			let sessionKey = '';
			app.globalData.getCheckSessoin(json => {
				sessionKey = json.session_key;
				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);
							that.closeUpdate();
							req.removeStorage('isShowUpdateMobile')
						}
					});
				} else {
				}
			});
		},
		closeUpdate(type) {
			this.updateBottom = '-100%'
			this.$emit('closeUpdate');
			if(this.isUpdate) this.$emit('updateMobileInfo',type)
		}
	}
};
</script>

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