pika_shangjia/mine/userinfo/userinfo.vue

<template>
	<view>
		<!--pages/userinfo/userinfo.wxml-->
		<view class="list">
			<view class="li">
				<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>昵称</text>
				<view class="item">
					<input name="nickName" placeholder="请输入昵称" :value="nickName" @input="intNickName"></input>
					<!-- {{nickName?nickName:''}} -->
				</view>
				<!-- <image src="/pages/images/more.png" class="rico"></image> -->
			</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 name="cardNo" placeholder="请输入身份证号码" :value="cardNo" @input="getcardNo"></input>
				</view>
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li">
				<text>手机</text>
				<block v-if="mobile">
					<view class="item active">{{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 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>
		<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");
	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: ''
			};
		},

		components: {},
		props: {},
		onLoad: function() {
			let _ts = this;
			QQMapWX.initMap('3OJBZ-EQEKO-PFNWC-SHHEK-CGWAJ-KRBF7');
			app.globalData.getCheckSessoin(json => {
				_ts.sessionKey = json.session_key;
			});
			this.getInfo();
		},
		methods: {
			getInfo() {
				let that = this;
				let isShowLoading = false;
				if (!isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}
				req.getRequest('/api/user/info', {}, 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 (!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) {
				req.uploadFile('/api/upload', e.detail.avatarUrl, res => {
					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
			},
			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;
			},

			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 (!reg.test(d.realName)) return req.msg("请输入正确真实姓名（至少2位汉字）");
				let isShowLoading = false;
				if (!isShowLoading) {
					req.loadIng('保存中');
					isShowLoading = true;
				}
				req.postRequest('/api/user/save', d, res => {
					// req.msg('保存成功', () => {
					//   this.getInfo()
					//   app.switchTab('pages/user/user')
					// })
					if (isShowLoading) {
						uni.hideLoading();
						this.getInfo();
						app.globalData.switchTab('pages/user/user');
						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 => {
					_ts.getInfo();
				});
			},
			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()
			},

		}
	};
</script>
<style>
	@import "./userinfo.css";
	.ql-editor.ql-blank:before {
		  /* 此处设置 placeholder 样式 */
		  color: #999;
		  font-style: normal;
		}
</style>