bigdata_WX/pages/my/user-info/user-info.vue

<template>
	<view class="user-info">
		<view class="info-item">
			<text class="tit">头像</text>
			<view class="avater" @click="gainimg">
				<image :src="userinfos.image" mode="aspectFill"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="tit">用户名</text>
			<text class="val">{{userinfos.username}}</text>
			<!-- <input type="text" v-model="userinfos.username" :class="compileTF?'valinput valinput2':'valinput'" :disabled="!compileTF"
			 maxlength='8' /> -->
		</view>
		<view class="info-item">
			<text class="tit">用户身份</text>
			<text class="val">管理员</text>
		</view>
		<view class="info-item">
			<text class="tit">用户电话</text>
			<input type="text" v-model="userinfos.mobile" :class="compileTF?'valinput valinput2':'valinput'" :disabled="!compileTF"
			 @blur="verifyphone" />
			<p class="hint" v-if="phonehint">手机号格式不正确</p>
		</view>
		<view class="info-item">
			<text class="tit">E-mail</text>
			<input type="text" v-model="userinfos.email" :class="compileTF?'valinput valinput2':'valinput'" :disabled="!compileTF"
			 @blur="verifyemail" />
			<p class="hint" v-if="emailhint">邮箱格式不正确</p>
		</view>
		<view class="info-item">
			<text class="tit">我的地址</text>
			<input type="text" v-model="location" :class="compileTF?'valinput valinput2':'valinput'"
			 :disabled="!compileTF" @click="cutticy"/>
		</view>
		<view class="compile">
			<p @click="compile" v-if="!compileTF">编辑</p>
			<p @click="submit" v-else>提交</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfos: {
					image:"",
					image2:""
				},
				location:'',
				imageList: '',
				compileTF: false,
				phonehint: false,
				emailhint: false
			}
		},
		methods: {
			gainimg() { //添加图片
				if (this.compileTF) {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: (res) => {
							console.log(JSON.stringify(res))
							this.userinfos.image2 = JSON.stringify(res)
							uni.uploadFile({
								url: 'https://wx.hnyfwlw.com/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[0],
								name: 'img_file',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes)
									this.userinfos.image = JSON.parse(uploadFileRes.data).data.src
									this.$forceUpdate() //强制刷新视图
								},
								fail(res) {
									this.userinfos.image = JSON.stringify(res)
									console.log(55555555555)
								}
							});
						}
					})
				}
			}, //
			async postusers() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=home.homes.personal_center',
					data: {
						ret: 'change',
						username: this.userinfos.username,
						mobile: this.userinfos.mobile,
						province:  this.userinfos.province,
						city:  this.userinfos.city,
						district:  this.userinfos.district,
						image: this.userinfos.image,
						email: this.userinfos.email
					}
				})
				console.log(res)
				if(!res){
					this.compileTF = false
					uni.removeStorage({
						key: "location",
					})
					uni.navigateBack({
						delta:1
					})
				}
			},
			compile() { //编辑按钮
				this.compileTF = true
			},
			submit() {//提交按钮
				if(this.phonehint == false &&this.emailhint == false){
					this.userinfos.province = this.location.slice(0,this.location.indexOf("省")+1)
					this.userinfos.city = this.location.slice(this.location.indexOf("省")+1,this.location.indexOf("市")+1)
					this.userinfos.district = this.location.slice(this.location.indexOf("市")+1)
					this.postusers()
				}
			},
			verifyphone() { //手机号验证
				var reg = /^1[356789]\d{9}$/;
				if (!reg.test(this.userinfos.mobile)) {
					this.phonehint = true
				} else {
					this.phonehint = false
				}
			},
			verifyemail() { //邮箱验证
				var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				if (!reg.test(this.userinfos.email)) {
					this.emailhint = true
				} else {
					this.emailhint = false
				}
			},
			cutticy(){
				if(this.compileTF){
					uni.navigateTo({
						url: "../../fourBase/city"
					})
				}
			},
			selectaddress(lng, lat) { //获取分布位置
				uni.request({
					type: "GET",
					url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," + lat +
						"&key=78ce288400f4fc6d9458989875c833c2&radius=1000&extensions=all",
					dataType: "json",
					complete: ress => {
						// console.log(ress)
						if (ress.data.regeocode.formatted_address.length == 0) {
							this.location = "--"
						} else {
							this.location = ress.data.regeocode.formatted_address
						}
					}
				});
			},
		},
		onShow(){
			uni.getStorage({
				key: "location",
				success: (res) => {
					var lat = res.data[1]
					var lng = res.data[0]
					this.selectaddress(lng, lat)
				}
			})
		},
		onLoad(option) {
			this.userinfos = JSON.parse(option.data)
			this.location = this.userinfos.province+this.userinfos.city+this.userinfos.district
			console.log(this.userinfos)
		}

	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;

		.user-info {
			background: #fff;
			padding: 0 40rpx;

			.info-item {
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;
				position: relative;

				.avater {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.tit {
					font-size: 14px
				}

				.val {
					font-size: 12px;
					color: #666;
				}

				.valinput {
					margin-top: 24rpx;
					text-align: right;
					font-size: 12px;
					color: #666;
					padding: 10rpx 0;
					width: 360rpx;
				}

				.valinput2 {
					background-color: #e1e5ee;
				}

				.hint {
					position: absolute;
					top: 40rpx;
					right: 220rpx;
					font-size: 24rpx;
					color: #ff0000;
				}
			}

			.compile {
				width: 100%;
				margin-top: 40rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #58C77A;
				border-radius: 30rpx;
				color: #FFFFFF;
			}
		}
	}
</style>