jdrh_xcx/pageA/my/profile.vue

<template>
	<view class="container">
		<u-loading-page :loading="loading"></u-loading-page>
		
		
		<view class="forms" v-if="!loading">
						 	<u--form :rules="rules"
								labelPosition="left"
								:model="pInfo" labelWidth="120"
								ref="uForm">
							<u-form-item
									label="微信头像"
									prop="avatar"
									borderBottom
									ref="item1">
								<view style="text-align: left;display: inline-block;display: grid;grid-template-columns: 50px calc(100% - 50px);">
									<button v-if="!userInfo.avatar" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
									<image class="avatarInfo" v-else  mode="widthFix" :src="userInfo.avatar"></image>
								</view>
							</u-form-item>
								
							<u-form-item
									label="个人姓名"
									prop="name"
									borderBottom
									ref="item1">
								<u--input
										v-model="pInfo.name"
										placeholder="个人姓名"
										border="none"
								></u--input>
							</u-form-item>
							
							<u-form-item
									label="公民身份号码"
									prop="sfzh"
									borderBottom
									ref="item1">
								<u--input
										v-model="pInfo.sfzh"
										placeholder="请输入公民身份号码"
										border="none"
								></u--input>
							</u-form-item>
							
						
							
							<u-form-item
									label="联系电话"
									prop="phone"
									borderBottom
									ref="item1">
								<u--input
										v-model="pInfo.phone"
										placeholder="请输入联系电话"
										border="none"
								></u--input>
							</u-form-item>
							
							
						
							
							<u-form-item
									label="现居住地"
									prop="deptId"
									borderBottom
									ref="item1">
								<uni-data-picker  placeholder="请选择现居住地" popup-title="请选择现居住地所属区域" :localdata="dataTreepcs" v-model="pInfo.deptId"
									@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
								</uni-data-picker>
							</u-form-item>
							
							
							<u-form-item
									label="详细地址"
									prop="dz"
									borderBottom
									ref="item1">
								<u--input
										v-model="pInfo.dz"
										placeholder="请输入详细地址"
										border="none"
								></u--input>
							</u-form-item>
						</u--form>
						
						<view @click="dengji" class="djbutton">保存信息</view>
		</view>
	</view>
</template>

<script>
	import { updateinfos } from "@/api/user.js"
	import { putfiles,getQx} from "@/api/my.js"
	import { baseurl } from "../../common/setting"
	export default {
		  data(){
			  return{
				  loading:true,
				  avatarUrl:'',
				  dataTree:[],
				  dataTreepcs:[],
				  show: true,
				  fileList1: [],
				  avatarInfo:'',
				  deaultIcon:"",
				  pInfo:{name:''},
				  rules:{
				  	'name': {
				  		type: 'string',
				  		required: true,
				  		message: '请填写姓名',
				  		trigger: ['blur', 'change']
				  	},
				  	'sfzh': {
				  		type: 'string',
				  		required: true,
				  		message: '请填写公民身份证号码',
				  		trigger: ['blur', 'change']
				  	},
				  	'phone': [
						{
							required: true,
							message: '请填写手机号码',
							trigger: ['blur', 'change']
						},
					],
					'deptId': {
				  		type: 'string',
				  		required: true,
				  		message: '请填写所属区县',
				  		trigger: ['blur', 'change']
				  	},
					'dz': {
						type: 'string',
						required: true,
						message: '请填写信息详细地址',
						trigger: ['blur', 'change']
					}
				  }
			  }
		  },
		  onLoad() {
			this.pInfo = {
				name:this.userInfo.detail.name,
				sfzh:this.userInfo.detail.sfzh,
				phone:this.userInfo.detail.phone,
				deptId:this.userInfo.dept_id,
				dz:this.userInfo.detail.dz
			}
		  	getQx(null).then(res=>{
				this.dataTreepcs = res.data
				this.loading = false
			})
		  },
	
		  methods:{
			  onChooseAvatar(e) {
			  	const { avatarUrl } = e.detail 
			  	this.avatarInfo=avatarUrl 
				//对临时图片链接进行base64编码
				//var avatarUrl_base64 = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(this.avatarInfo, 'base64')
				 uni.compressImage({
					src: avatarUrl,
					quality: 80,
					success: res => {
					  this.uploadFile(res.tempFilePath);
					}
				  })
			  },
			  
			  /* 上传头像 */
			 uploadFile(fileUrl){
			    uni.uploadFile({
			      url:  baseurl+'/blade-resource/oss/endpoint/put-file' ,
			      filePath: fileUrl,
			      name: 'file',
			      success: (res) => {
					  let datalink = JSON.parse(res.data)
					  if(datalink.code == 200) {
					  this.$set(this.pInfo,'avatar',datalink.data.link)
					  this.$u.vuex('userInfo.avatar', datalink.data.link)
					this.$u.func.showToast({title:'头像上传成功'})
					   
					  }
			      },
			      fail: e => {
			        uni.showToast({
			          title: '上传失败',
			          duration: 2000,
			          icon: "fail"
			        });
			      }
			    });
			  },
			  
				
			  dengji(){
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/      //正则表达式定义手机号正确格式
				if (!this.pInfo.phone) {      //判断如果手机号（this.tele）为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				        return
				}
				
				if (!reg.test(this.pInfo.phone)) {        //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				let reg1 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ 
				
				if (!this.pInfo.sfzh) {      //判断如果身份证号（this.card)num）为空，提示用户输入身份证号
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
					return
				}
				
				if (!reg1.test(this.pInfo.sfzh)) {      //判断身份证号格式时候正确
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
				        })
				return
				}
				  
			  	this.$refs.uForm.validate().then(res => {
			  		uni.showLoading({
			  			title: '加载中'
			  		});
			  		this.$u.api.updateinfos(this.pInfo).then(res=>{
			  			uni.showToast({
			  				title:'保存成功',
							icon:'success'
			  			})
						uni.hideLoading()
			  		   this.$u.func.updateInfos(this.pInfo, this.redirect)
			  		}).finally(()=>{
			  			uni.hideLoading()
			  		})
			  	}).catch(errors => {
			  		
			  	})
			  
			  },
			  onnodeclick(e){
				  console.log(e);
				
			  },
			  onpopupopened(e) {
			  	console.log('popupopened');
			  },
			  onpopupclosed(e) {
			  	console.log('popupclosed');
			  },
			  onchange(e) {
				  this.pInfo.sqmc = e.text
			  	console.log('onchange:', e);
			  },
		  }
	}
</script>

<style lang="scss" scoped>
	.avatar-wrapper{
		background: url('data:image/png;base64,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') no-repeat center;
		border: 0px !important;
		outline: none;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-size: 100%;
		position: relative;
		top: -3px;
		&:after {
				display: none;
			}
	}
	/deep/ .input-value{
		padding-left: 0 !important;
	}
	.container{
		height: 100vh;
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;
		background: #F8F8F8;
		
		.avatarInfo{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	.forms{
			width: 100%;
			margin: auto;
			background: #FFF;
			border-radius: 15px;
			padding:24rpx;
			box-sizing: border-box;
			height: calc(100vh - 72rpx);
		}
		.djbutton{
			height: 88rpx;
			background: linear-gradient( to top, #65CBFF 0%, #0260FE 100%);
			border-radius: 44rpx;
			opacity: 0.5;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			margin-top: 48rpx;
		}
		/deep/ .input-value-border{
		 border: 0 !important;
	}
</style>