safetyHome_wxapp/pages/mine/myInfo.vue

<!-- 个人资料 -->
<template>
	<view class="">
		<view style="width: 100%;border-bottom:2rpx solid rgba(247,247,247,1);height:88rpx;margin-top: 30rpx;overflow: hidden;">
			<view class="item" @tap="changeHeadPhoto">
				<view class="left">头像</view>
				<view class="right">
					<image :src="headImg" style="width: 72rpx;height: 72rpx;border-radius: 50%;margin-right: 20rpx;"></image>
					<image src="../../static/icon_more@2x.png" style="width: 15rpx;height: 23rpx;margin-bottom:30rpx ;"></image>
				</view>
			</view>
		</view>
		<!-- 昵称 -->
		<view style="width: 100%;border-bottom:2rpx solid rgba(247,247,247,1);height:88rpx;margin-top: 30rpx;overflow: hidden;">
			<view class="item">
				<view class="left">昵称</view>
				<view class="right" style="width:500rpx;position: relative;">
					<input type="text" @blur="changeName" v-model="userName" style="max-width: 400rpx;height: 40rpx;text-align: right;position: absolute;right: 37rpx;top: 10rpx;color:rgba(153,153,153,1);">
					<image src="../../static/icon_more@2x.png" style="width: 15rpx;height: 23rpx;position: absolute;right: 0;bottom:35rpx ;"></image>
				</view>
			</view>
		</view>
		<!-- 手机号 -->
		<view style="width: 100%;border-bottom:2rpx solid rgba(247,247,247,1);height:88rpx;margin-top: 30rpx;overflow: hidden;">
			<view class="item">
				<view class="left" style="width: 98rpx;">手机号</view>
				<view class="right" style="width:500rpx;position: relative;">
					<input type="number" @blur="changePhone" v-model="phone" style="max-width: 400rpx;height: 40rpx;text-align: right;position: absolute;right: 37rpx;top: 10rpx;color:rgba(153,153,153,1);">
					<image src="../../static/icon_more@2x.png" style="width: 15rpx;height: 23rpx;position: absolute;right: 0;bottom:35rpx ;"></image>
				</view>
			</view>
		</view>
		<!-- 微信 -->
		<view style="width: 100%;border-bottom:2rpx solid rgba(247,247,247,1);height:88rpx;margin-top: 30rpx;overflow: hidden;">
			<view class="item" @tap="wxLogin">
				<view class="left" style="width: 98rpx;">微信</view>
				<view class="right" style="width:500rpx;position: relative;">
					<text style="max-width: 400rpx;height: 40rpx;text-align: right;position: absolute;right: 37rpx;top: 10rpx;color:rgba(153,153,153,1);">已绑定</text>
					<image src="../../static/icon_more@2x.png" style="width: 15rpx;height: 23rpx;position: absolute;right: 0;bottom:35rpx ;"></image>
				</view>
			</view>
		</view>
		<!-- 人脸模板 -->
		<view style="width: 100%;border-bottom:2rpx solid rgba(247,247,247,1);height:300rpx;margin-top: 30rpx;overflow: hidden;">
			<view class="item" style="height: 100%;">
				<view class="left" style="width: 132rpx;margin-top: 128rpx;">人脸模板</view>
				<view class="right" style="width:500rpx;position: relative;" @tap="changeFacePhoto">
					<image src="../../static/care_family.png" style="width: 256rpx;height:256rpx;position: absolute;right: 37rpx;color:rgba(153,153,153,1);"></image>
					<image src="../../static/icon_more@2x.png" style="width: 15rpx;height: 23rpx;position: absolute;right: 0;bottom:142rpx ;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '呵呵', //昵称
				phone: 15855391987, //手机号
				headImg: '', //头像
				photo: '', //人脸
			}
		},
		methods: {
			// 修改信息方法
			updateInfo() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.http.httpRequest('/wxapplet/ownersid/update/user', 'post', {
					CardNo: uni.getStorageSync('idNumber'),
					userId: uni.getStorageSync('userId'),
					loginName: this.userName,
					avatar: this.headImg,
					facePic: this.photo,
					ComtyId: uni.getStorageSync('comtyId'),
				}, true).then((res) => {
					if (res.code == 0) {
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							'icon': 'none'
						})
					}
				}).catch((res) => {
					uni.hideLoading()
				})
			},
			// 修改头像
			changeHeadPhoto() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						wx.uploadFile({
							filePath: res.tempFiles[0].path,
							url: 'https://www.szdeao.com/wxapplet/upload/imgPhoto ', //仅为示例，非真实的接口地址
							name: 'photo',
							method: 'post',
							success: (res) => {
								let data = JSON.parse(res.data)
								let reg = /,$/gi;
								this.headImg = data.data.imagesPath.replace(reg, "");
								console.log(this.headImg)
								this.updateInfo()
							}
						})
					}
				})
			},
			// 修改人脸图片
			changeFacePhoto() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						wx.getFileSystemManager().readFile({
							filePath: res.tempFiles[0].path, //微信小程序图片默认路径
							encoding: 'base64', //编码格式
							success: (res) => {
								this.photo = res.data
								this.updateInfo()
							},
							fail() {

							}
						})
					}
				});
			},
			//微信授权登录
			wxLogin() {
				// uni.navigateTo({
				// 	url:"../login/authorization"
				// })
			},
			// 修改昵称
			changeName() {
				this.updateInfo()
			},
			//修改手机号
			changePhone() {
				let phoneReg = /^1[3|4|5|7|8][0-9]{9}$/; //手机号正则校验
				if (!phoneReg.test(this.phone)) {
					uni.showToast({
						'icon': 'none',
						title: "手机号码格式不正确"
					})
				} else {
					this.updateInfo()
				}
			}

		}
	}
</script>

<style>
	.item {
		width: 698rpx;
		height: 88rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

	}

	.left {
		width: 64rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 22rpx;
		opacity: 1;
	}

	.right {
		width: 110rpx;
		margin-top: 10rpx;
	}
</style>