H5_module/product/info/info.vue

<template>
	<view>
		<!--pages/userinfo/userinfo.wxml-->
		<view class="list">
			<view class="li">
				<text>头像</text>
				<view class="item" @tap="uploadAvatar">
					<image :src="avatar" mode="aspectFit" class="logo"></image>
				</view>
				<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>
		<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: []
			};
		},

		components: {},
		props: {},
		onLoad: function() {
			let _ts = this;
			QQMapWX.initMap(req.public.mapLBSKEY);
			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.areaAdd) {} else {
						this.city = data.areaAdd
					}
					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);
					req.setStorage('userInfo', data);

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

			uploadAvatar() {
				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]
			},

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

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