H5_module/mine/userinfo/userinfo.vue

<template>
	<view>
		<!--pages/userinfo/userinfo.wxml-->
		<view class="list">
			<view class="li">
				<text>头像</text>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="chooseAvatar" hover-class="none" class="item" @chooseavatar="uploadAvatar">
					<image :src="avatar?avatar:'../../static/pages/images/userimg.png'" mode="aspectFit" class="logo">
					</image>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="item" @tap="uploadImgAvatar">
					<image :src="avatar?avatar:'../../static/pages/images/userimg.png'" mode="aspectFit" class="logo">
					</image>
				</view>
				<!-- #endif -->
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li">
				<text>昵称</text>
				<view class="item">
					<!-- #ifdef MP-WEIXIN -->
					<input type="nickname" name="nickName" placeholder="请输入昵称" v-model="nickName" @input="intNickName"
						@blur="getNickname" />
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<input name="nickName" placeholder="请输入昵称" v-model="nickName" @input="intNickName"></input>
					<!-- #endif -->
					<!-- {{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" maxlength="18" type="idcard" placeholder="请输入身份证号码" :value="cardNo"
						@input="getcardNo"></input>
				</view>
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li">
				<text>手机</text>
				<!-- #ifdef MP-WEIXIN -->
				<block v-if="mobile&&isMobile()">
					<view class="item active">{{mobile}}</view>
					<image src="/static/pages/images/more.png" class="rico"></image>
				</block>
				<button v-else class="wechat dflex" open-type="getPhoneNumber" @getphonenumber="getphonenumber">
					<image src="/static/pages/images/wxico.png"></image>立即获取
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="item">
					<input name="mobile" maxlength="11" type="number" placeholder="请输入手机号绑定" v-model="mobile"></input>
				</view>
				<!-- #endif -->
			</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' : '')]">
					<!-- #ifdef MP-WEIXIN -->
					<picker mode="region" :value="morCity" @change="bindCity">
						<!-- <view class="uni-input">{{array[index]}}</view> -->
						<view class="picker">
							{{city ? city : '请选择地区'}}
						</view>
					</picker>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<pickerAddress @change="bindAddressChange">
						<view class="picker">{{ city ? city : '请选择地区' }}</view>
					</pickerAddress>
					<!-- #endif -->
				</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>
		<button class="submit" @tap="confirm">确定</button>
	</view>
</template>

<script>
	// pages/userinfo/userinfo.js
	const app = getApp();
	import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue';
	const req = require("../../utils/request.js");
	const util = require("../../utils/util.js");
	var QQMapWX = require("../../utils/qqmap.js");
	export default {
		data() {
			return {
				genders: ['男', '女'],
				index: 0,
				avatar: "",
				nickName: "",
				realName: "",
				cardNo: "",
				mobile: "",
				birthday: "",
				city: "",
				address: "",
				cityCode: '',
				morCity: []
			};
		},

		components: {
			pickerAddress
		},
		props: {},
		onLoad: function() {
			let _ts = this;
			QQMapWX.initMap(req.public.mapLBSKEY);
			app.globalData.getCheckSessoin(json => {
				_ts.sessionKey = json.session_key;
			});
			this.getInfo(true);
		},
		methods: {
			getInfo(isLoad) {
				let that = this;
				let isShowLoading = false;
				if (!isShowLoading && isLoad) {
					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;
					}
				});
			},


			uploadImgAvatar() {
				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
							});
						});
					}

				});
			},


			uploadAvatar(e) {
				uni.showLoading({
					title: '头像上传中'
				})
				req.uploadFile('/api/upload', e.detail.avatarUrl, res => {
					this.avatar = res.src;
					uni.hideLoading();
				});
				// 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(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]
			},

			bindAddressChange(data) {
				// this.region = data.data;
				// this.addIds = data.ids;
				this.morCity = data.ids
				this.city = data.data[0] + data.data[1] + data.data[2]
				this.cityCode = data.ids[2]
			},

			isMobile() {
				return util.isMobile(this.mobile);
			},

			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
				};
				let reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
				// console.log(reg.test(d.realName));
				if (!reg.test(d.realName)) return req.msg("请输入正确真实姓名（至少2位汉字）");
				if (that.mobile) {
					if (!that.isMobile()) {
						return req.msg("请输入有效的手机号");
					}
				}

				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();
						req.msg('保存成功');
						isShowLoading = false;
						setTimeout(s => {
							this.getInfo(false);
						}, 300)
					}
				});
			},

			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: _ts.sessionKey
				}, res => {
					if (res.mobile) {
						let userInfo = req.getStorage('userInfo');
						userInfo.mobile = res.mobile;
						req.setStorage('userInfo', userInfo);
					}
					_ts.getInfo();
				});
			}

		}
	};
</script>
<style>
	@import "./userinfo.css";
</style>