renshou/mine/userinfo/userinfo.vue

<template>
	<view>
		<!--pages/userinfo/userinfo.wxml-->
		<view class="list">
			<view class="li">
				<text style="color: red;">*</text>
				<text>头像</text>
				<button open-type="chooseAvatar" hover-class="none" class="item" @chooseavatar="uploadAvatar">
					<image :src="avatar" mode="aspectFit" class="logo"></image>
				</button>
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li">
				<text style="color: red;">*</text>
				<text>昵称</text>
				<view class="item">
					<input type="nickname" name="nickName" placeholder="请输入昵称" :value="nickName" @input="intNickName" @blur="getNickname"></input>
					<!-- {{nickName?nickName:''}} -->
				</view>
				<!-- <image src="/pages/images/more.png" class="rico"></image> -->
			</view>
			<view class="li">
				<text style="color: red;">*</text>
				<text>手机</text>
				<block v-if="mobile">
					<view class="item active">{{handlePhone(mobile)}}</view>
					<image src="/static/pages/images/more.png" class="rico"></image>
				</block>
				<button class="wechat dflex" open-type="getPhoneNumber" @getphonenumber="getphonenumber" v-else>
					<image src="/static/pages/images/wxico.png"></image>立即获取
				</button>
			</view>
			<view class="li">
				<text>真实姓名</text>
				<view class="item">
					<input name="realName" placeholder="请输入真实姓名" :value="realName" @input="intrealName"></input>
				</view>
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li">
				<text>身份证号</text>
				<view class="item">
					<input v-if="cardNoEdit" :focus="cardNoEdit" name="cardNo" placeholder="请输入身份证号码" :value="cardNo" @input="getcardNo" @blur="cardNoBlur"></input>
					<text v-else style="width: 100%;text-align: right;font-size: 30rpx;color: #333;line-height: 36rpx;" @click="cardNoFocus">{{handleIdCard(cardNo)}}</text>
				</view>
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li">
				<text>性别</text>
				<view class="item active">
					<picker @change="bindGender" :value="index" :range="genders">
						<view class="picker">
							{{genders[index]}}
						</view>
					</picker>
				</view>
				<!-- <view class="item active">女</view> -->
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li">
				<text>出生年月</text>
				<view :class="'item ' + (birthday ? 'active' : '')">
					<picker mode="date" :value="birthday" @change="bindDateChange">
						<view class="picker">
							{{birthday ? birthday : '请选择出生年月'}}
						</view>
					</picker>
				</view>
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li">
				<text>地区</text>
				<view :class="['item',(city ? 'active' : '')]">
					<picker mode="region" :value="morCity" @change="bindCity">
						<!-- <view class="uni-input">{{array[index]}}</view> -->
						<view class="picker">
							{{city ? city : '请选择地区'}}
						</view>
					</picker>
				</view>
				<image src="/static/pages/images/more.png" class="rico"></image>
				<!-- <view class="item active">湖南</view>
				<image src="/pages/images/more.png" class="rico"></image> -->
			</view>
			<view class="li">
				<text>详细地址</text>
				<view class="item">
					<input name="realName" placeholder="请输入详细地址" :value="address" @input="bindaddress"></input>
				</view>
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li li-brief">
				<text>个人简介</text>
				<view class="item">
					<editor placeholder="请输入个人简介" v-model="brief" id="editor" @ready="onEditorReadyB" @input="bindBrief" class="textarea brief"></editor>
				</view>
			</view>
			<!-- <view class="li li-brief">
				<text>个人爱好</text>
				<view class="item">
					<editor placeholder="请输入个人爱好" v-model="hobbies" id="editor" @ready="onEditorReadyH" @input="bindHobbies" class="textarea hobbies"></editor>
				</view>
			</view> -->
			<view style="color: red;font-size: 24rpx;padding: 30rpx 30rpx;">*号表示必填项</view>
			<view class="agree dflex" @click="agree" v-if="config.CONFIG_PRIVACY_AGREEMENT">
				<image :src="'../static/images/' + (isAgree ? 'gou1_h.png' : 'gou1.png')" class="gou"></image>
				已阅读并同意
				<text @click.stop="jumpUrl('/pages/web/web?url='+it.url)" v-for="it,idx in JSON.parse(config.CONFIG_PRIVACY_AGREEMENT)"><block v-if="idx!=0">、</block>{{it.name}}</text>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<button class="submit" @tap="confirm">确定</button>
	</view>
</template>

<script>
	// pages/userinfo/userinfo.js
	const app = getApp();
	const req = require("../../utils/request.js");
	const requsetmessage = require('../../utils/requestmessage.js');
	var QQMapWX = require("../../utils/qqmap.js");
	export default {
		data() {
			return {
				genders: ['男', '女'],
				index: 0,
				avatar: "",
				nickName: "",
				realName: "",
				cardNo: "",
				mobile: "",
				birthday: "",
				city: "",
				address: "",
				cityCode: '',
				morCity: [],
				brief: '',
				hobbies: '',
				isAgree:false,
				config:{},
				cardNoEdit:true
			};
		},

		components: {},
		props: {},
		onLoad:async function() {
			let _ts = this;
			QQMapWX.initMap('3OJBZ-EQEKO-PFNWC-SHHEK-CGWAJ-KRBF7');
			app.globalData.getCheckSessoin(json => {
				_ts.sessionKey = json.session_key;
			});
			this.getInfo();
			this.config = await req.getsysConfig()
			if(!this.config.CONFIG_PRIVACY_AGREEMENT) this.isAgree = true
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			cardNoBlur(){
				if(this.cardNo) this.cardNoEdit = false
			},
			cardNoFocus(){
				this.cardNoEdit = true
			},
			getInfo() {
				let that = this;
				let isShowLoading = false;
				if (!isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}
				req.getRequest('/api/user/myInfo', {}, data => {
					// console.log(data);
					if (!data.district) {} else {
						this.cityCode = data.district
						this.morCity = (data.district.substring(0, 2) + "0000," + data.district.substring(0, 4) +
							"00," + data.district).split(",")
					}
					this.setData(data);
					
					if(this.cardNo) this.cardNoEdit = false
					
					if (!data.areaAdd) {} else {
						this.city = data.areaAdd
					}
					req.setStorage('userInfo', data);

					if (data.gender == 2) {
						that.setData({
							index: 1
						});
					} else {
						that.setData({
							index: 0
						});
					}
					if (isShowLoading) {
						uni.hideLoading();
						isShowLoading = false;
					}
					that.onEditorReadyB();
					that.onEditorReadyH();
				});
			},

			uploadAvatar(e) {
				uni.showLoading({
					title:'上传中'
				})
				req.uploadFile('/api/nocheck/upload', e.detail.avatarUrl, res => {
					uni.hideLoading()
					this.avatar = res.src
				});
				// let that = this;
				// uni.chooseImage({
				// 	count: 1,
				// 	sizeType: ['original', 'compressed'],
				// 	sourceType: ['album', 'camera'],

				// 	success(res) {
				// 		// console.log(res.tempFilePaths);
				// 		req.uploadFile('/api/upload', res.tempFilePaths[0], res => {
				// 			req.msg('图片上传成功');
				// 			that.setData({
				// 				avatar: res.src
				// 			});
				// 		});
				// 	}

				// });
			},
			intNickName(e) {
				this.nickName = e.detail.value
			},
			getNickname: function(e) {
				this.nickName = e.detail.value;
			},
			intrealName(e) {
				this.setData({
					realName: e.detail.value
				});
			},
			bindaddress(e) {
				this.address = e.detail.value
			},

			getcardNo(e) {
				this.setData({
					cardNo: e.detail.value
				});
			},

			intMobile(e) {
				this.setData({
					mobile: e.detail.value
				});
			},

			bindGender: function(e) {
				this.setData({
					index: e.detail.value
				});
			},
			bindDateChange: function(e) {
				this.setData({
					birthday: e.detail.value
				});
			},
			bindCity: function(e) {
				this.morCity = e.detail.code
				this.city = e.detail.value.join().replace(/[,]/g, "")
				this.cityCode = e.detail.code[2]
			},
			bindBrief(e) {
				this.brief = e.detail.html;
			},
			bindHobbies(e) {
				this.hobbies = e.detail.html;
			},

			async confirm() {
				let that = this;
				let d = {
					avatar: that.avatar,
					nickName: that.nickName,
					realName: that.realName,
					mobile: that.mobile,
					cardNo: that.cardNo,
					gender: that.index == 0 ? 1 : 2,
					birthday: that.birthday,
					district: that.cityCode,
					areaAdd: that.city,
					address: that.address,
					brief: that.brief,
					hobbies: that.hobbies,
				};
				let reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
				// console.log(reg.test(d.realName));
				if(!d.avatar) return req.msg("请上传头像");
				if(!d.nickName) return req.msg("请填写用户昵称");
				// if(!d.realName) return req.msg("请填写真实姓名");
				// if (!reg.test(d.realName)) return req.msg("请输入正确真实姓名（至少2位汉字）");
				// if(!d.cardNo) return req.msg("请填写身份证号");
				if(!d.mobile) return req.msg("请填写手机号");
				var re = /^\d{17}(\d|x)$/i;
				if (d.cardNo && !re.test(d.cardNo)) {
					return req.msg("请填写正确的身份证号");
				}
				// if(!d.birthday) return req.msg("请选择出生日期");
				// if(!d.district) return req.msg("请选择地区");
				// if(!d.address) return req.msg("请填写详细地址");
				if(!this.isAgree) return req.msg("请阅读并同意以下协议");
				let isShowLoading = false;
				if (!isShowLoading) {
					req.loadIng('保存中');
					isShowLoading = true;
				}
				// await requsetmessage.remindIntegral().then(res => {});
				req.postRequest('/api/user/save', d, res => {
					// req.msg('保存成功', () => {
					//   this.getInfo()
					//   app.switchTab('pages/user/user')
					// })
					req.getRequest('/api/user/myInfo', {}, data => {
						req.setStorage('userInfo', data);
						if (isShowLoading) {
							uni.hideLoading();
							this.getInfo();
							uni.navigateBack()
							isShowLoading = false;
						}
					});
				});
			},

			getphonenumber(event) {
				const detail = event.detail;

				const _ts = this;

				if (!detail || !detail.encryptedData || !detail.iv) return false;
				req.postRequest('/api/weixin/mobile', {
					encryptedData: detail.encryptedData,
					iv: detail.iv,
					sessionKey: this.sessionKey
				}, res => {
					req.getRequest('/api/user/myInfo', {}, data => {
						req.setStorage('userInfo', data);
						this.mobile = data.mobile
					});
				});
			},
			onEditorReadyB() {
				var that = this;
				uni.createSelectorQuery().select('.brief').context((res) => {
					this.editorCtx = res.context;
					this.editorCtx.setContents({//赋值
						  html:that.brief
					 });
				}).exec()
			},
			onEditorReadyH() {
				var that = this;
				uni.createSelectorQuery().select('.hobbies').context((res) => {
					this.editorCtx = res.context;
					this.editorCtx.setContents({//赋值
						  html:that.hobbies
					 });
				}).exec()
			},
			agree(){
				this.isAgree = !this.isAgree
			},
			handleIdCard(cardId) {
				var re = /^\d{17}(\d|x)$/i;
				if (re.test(cardId)) {
					return cardId.replace(/^(.{4})(?:\d+)(.{4})$/, "$1**********$2");
				}else{
					return cardId
				}
			},
			handlePhone (phone) {
				return phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
			},
		}
	};
</script>
<style>
	@import "./userinfo.css";
	.ql-editor.ql-blank:before {
		  /* 此处设置 placeholder 样式 */
		  color: #999;
		  font-style: normal;
		}
</style>