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="headPhoto" 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);">{{data.status==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="facePhoto" 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: '', //人脸
				status:0,
				facePhoto:'',
				headPhoto:''
			}
		},
		onLoad() {
			this.getUserData()
		},
		methods: {
			// 获取用户数据
			  getUserData(){
				  uni.showLoading({
				  	title:'加载中',
					'icon':'none'
				  })
				this.http.httpRequest('/wxapplet/ownersid/getUser','get',{
					userId:uni.getStorageSync('userId')
				},true).then((res)=>{
					console.log(res)
					if(res.code==0){
						// 判断当前返回值是否是网络路径图片
						if(res.data.avatar.indexOf('https://')==-1){
							this.headPhoto=this.getBase64ImageUrl(res.data.avatar)
							uni.setStorageSync("headImg",this.headPhoto)
							this.headImg=res.data.avatar
						}else{
							 this.getImageToBase64(res.data.avatar)
							 this.headPhoto=res.data.avatar
							 uni.setStorageSync("headImg",res.data.avatar)
						}
						this.phone=res.data.phoneNum
						this.userName=res.data.loginName
						uni.setStorageSync('userName',res.data.loginName)
						uni.setStorageSync('userPhone',res.data.phoneNum)
						this.status=res.data.status
						this.photo=res.data.facePhoto
						this.facePhoto=this.getBase64ImageUrl(res.data.facePhoto)
						uni.hideLoading()
					}else{
						uni.hideLoading()
						uni.showToast({
							title:res.msg,
							'icon':'none'
						})
					}
					
				}).catch(()=>{
					uni.hideLoading()
				})
			  },
			  // 网络图片转base64
			  getImageToBase64(img){
				   uni.downloadFile({
					    url: img,
						success:(res)=>{
							console.log(res)
							wx.getFileSystemManager().readFile({
								filePath:res.tempFilePath, //微信小程序图片默认路径
								encoding: 'base64', //编码格式
								success: (res) => {
									this.headImg=res.data
								},
								fail() {
							
								}
							})
						}
				   })
			  },
			  //把base64转换成图片
			   getBase64ImageUrl(data) {
			       /// 获取到base64Data
			       var base64Data = data;
			       /// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
			       base64Data = uni.arrayBufferToBase64(uni.base64ToArrayBuffer(base64Data))  
			       /// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
			       const base64ImgUrl = "data:image/png;base64," + base64Data;
			       // 刷新数据
				  return base64ImgUrl
			   },
			// 修改信息方法
			updateInfo() {
				this.http.httpRequest('/wxapplet/ownersid/update/user', 'post', {
					CardNo: uni.getStorageSync('idNumber'),
					userId: String(uni.getStorageSync('userId')),
					loginName: this.userName,
					avatar: this.headImg,
					facePic: this.photo,
					ComtyId: uni.getStorageSync('comtyId'),
				}, true).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title:'修改成功',
							'icon':'success'
						})
						setTimeout(()=>{
							this.getUserData()
						},500)
						
					} else {
						uni.showToast({
							title: res.msg,
							'icon': 'none'
						})
					}
				}).catch((res) => {
					
				})
			},
			// 修改头像
			changeHeadPhoto() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						this.headPhoto=res.tempFiles[0].path
						wx.getFileSystemManager().readFile({
							filePath: res.tempFiles[0].path, //微信小程序图片默认路径
							encoding: 'base64', //编码格式
							success: (res) => {
								this.headImg = res.data
								this.updateInfo()
							},
							fail() {
						
							}
						})
					
					}
				})
			},
			// 修改人脸图片
			changeFacePhoto() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({
							mask:true,
							title:'上传中'
						})
						this.facePhoto=res.tempFiles[0].path
						wx.getFileSystemManager().readFile({
							filePath: res.tempFiles[0].path, //微信小程序图片默认路径
							encoding: 'base64', //编码格式
							success: (res) => {
								this.photo = res.data
								uni.hideLoading()
								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>