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"  @bulr="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;">
					  <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:'',//头像
			}
		},
		methods:{
			// 修改头像
			changeHeadPhoto(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res)=> {
				       this.headImg=res.tempFiles[0].path
				    }
				});
			},
			//微信授权登录
			wxLogin(){
				uni.navigateTo({
					url:"../login/authorization"
				})
			},
			// 修改昵称
			changeName(){
				
			},
			//修改手机号
			changePhone(){
					let phoneReg = /^1[3|4|5|7|8][0-9]{9}$/; //手机号正则校验
					if(!phoneReg.test(this.phone)){
						uni.showToast({
							'icon':'none',
							title:"手机号码格式不正确"
						})
					}else{
						
					}
			}
			
		}
	}
</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>