renshou/components/update-userinfonew/index.vue

<template>
	<view>
		<view class="ceng"></view>
		<view class="update-pop" :style="'bottom:'+updateBottom">
			<view class="update-close1" @click="closeUpdate(true)">
				<image src="../../static/pages/images/close1.png"></image>
			</view>
			<block v-if="updateInfo">
				<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:'/static/images/update_userimg.png'" class="update-avatars" style="border-radius: 50%;"></image>
						<view class="update-pic ddflex">
							<image :src="'/static/images/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 dflex">
					<image :src="'../../static/pages/images/'+(isAgree?'gou_h.png':'gou.png')" @click="agree()"></image>
					<view class="ddflex fflex">我已阅读并同意
					<block v-if="config.CONFIG_PRIVACY_AGREEMENT">
						<navigator :url="'/pages/web/web?url='+it.url" hover-class="none" class="xieyi" v-for="it,idx in JSON.parse(config.CONFIG_PRIVACY_AGREEMENT)"><block v-if="idx!=0">、</block>{{it.name}}</navigator>
					</block>
					</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"></image>
				<view class="update-tip">{{config.CONFIG_PROJECT_TITLE}}<view>更多服务，请{{isBind ? '绑定手机号':'授权登录'}}</view></view>
				<view class="ment dflex">
					<image :src="'../../static/pages/images/'+(isAgree?'gou_h.png':'gou.png')" @click="agree()"></image>
					<view class="ddflex fflex">我已阅读并同意
						<block v-if="config.CONFIG_PRIVACY_AGREEMENT">
							<navigator :url="'/pages/web/web?url='+it.url" hover-class="none" class="xieyi" v-for="it,idx in JSON.parse(config.CONFIG_PRIVACY_AGREEMENT)"><block v-if="idx!=0">、</block>{{it.name}}</navigator>
						</block>
					</view>
				</view>
				<button class="update-btn ddflex" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="margin-top: 80rpx !important;" v-if="isAgree"><image src="/static/images/bind_m.png"></image>{{isBind ? '绑定手机号':'一键登录'}}</button>
				<view class="update-btn ddflex" style="margin-top: 80rpx !important;" @click="checkAgree" v-else><image src="/static/images/bind_m.png"></image>{{isBind ? '绑定手机号':'一键登录'}}</view>
				<view class="zanbu" @click="closeUpdate">暂不{{isBind ? '绑定':'登录'}}</view>
			</view>
		</view>
	</view>
</template>

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

export default {
	data() {
		return {
			config: '',
			avatar: '',
			nickName: '',
			isAgree: false,
			updateBottom: '-100%',
			isBind:true
		};
	},

	components: {},
	props: {
		updateInfo: {
			type: Boolean,
			default: false
		},
		updateMobile: {
			type: Boolean,
			default: false
		},
		isUpdate: {
			type: Boolean,
			default: false
		}
	},
	watch: {},
	created() {
		console.log('----readymounted----');
	},
	async mounted() {
		app.globalData.getCheckSessoin(json => {
			this.sessionKey = json.session_key;
		});
		this.config = await req.getsysConfig()
		// console.log('isUpdateInfo==',this.updateInfo)
		// console.log('isUpdateMobile==',this.updateMobile)
		this.updateBottom = '0'
		// this.avatar = req.getStorage('userInfo').avatar;
		// this.nickName = req.getStorage('userInfo').nickName;
	},

	methods: {
		uploadAvatar(e) {
			uni.showLoading({
				title: '头像上传中'
			});
			req.uploadFile('/api/nocheck/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();
		},
		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();
				}
				req.removeStorage('isShowUpdateInfo')
			},isShow);
		},
		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);
						that.closeUpdate();
					}
				});
			} else {
			}
		},
		closeUpdate(back) {
			// if(back){
			// 	uni.exitMiniProgram({
			// 		success: function() {
			// 			console.log('退出小程序成功');
			// 		},
			// 		fail: function(err) {
			// 			console.log('退出小程序失败', err);
			// 		}
			// 	})
			// }
			this.updateBottom = '-100%'
			this.$emit('closeUpdate');
			if(this.isUpdate) this.$emit('updateMobileInfo')
		},
		checkAgree(){
		    if(!this.isAgree) return req.msg('请先同意用户协议');
		},
	}
};
</script>

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