yichael_zhongchuang_front_2/components/user/selfInfo.vue

<template>
	<!-- 个人信息 -->
	<view class="user-full">
		<view class="user-right-self01 df aic jcc user-full" v-show="showIndex_userInfo==0">
			<view class="df fdc aic">
				<view class="df">
					<img src="../../assets/user/pic_user_01.png"></img>
				</view>
				<view class="user-right-01-tip">还没有个人信息,去添加 ！</view>
				<view class="self-btn01 df jcc aic" @click="onClick_p1_add">点击添加</view>
			</view>
		</view>
		<view class="user-full" v-show="showIndex_userInfo==1">
			<view class="box1 df fdr aic">
				<view class="self-avatar df">
					<img :src="userInfo.avatarSrc"></img>
				</view>
				<view class="self-btn02 df jcc aic" @click="onUploadAvatar">上传头像</view>
			</view>
			<view class="box2 df ">
				<view class="box2-content">
					<view class="title df fdr aic">
						<view class="df">
							<img src="../../assets/user/pic_user_02.png"></img>
						</view>
						<view class="title-text">个人认证信息</view>
					</view>
					<view class="box2-table-box df fdr">
						<view class="box2-table-box-left df fdc aic ">
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">姓名</view>
								<input class="form-input" name="input" placeholder="输入姓名" v-model="model.Name" />
							</view>
							<!-- <view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">性别</view>
								<picker @change="bindPickerChange_sex" :value="sexIndex" :range="array_sex">
									<view class="form-input df fdr aic jcsb">
										<view>{{array_sex[sexIndex]}}</view>
										<view>
											<img src="../../assets/user/pic_user_03.png" />
										</view>
									</view>
								</picker>
							</view> -->
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">政治面貌</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.PoliticsStatus" />
							</view>
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">证件类型</view>
								<picker @change="bindPickerChange_zj" :value="zjIndex" :range="array_zj">
									<view class="form-input df fdr aic jcsb">
										<view>{{array_zj[zjIndex]}}</view>
										<view>
											<img src="../../assets/user/pic_user_03.png" />
										</view>
									</view>
								</picker>
							</view>
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">证件号码</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.CertificateNum" />
							</view>
						</view>
						<view class="box2-table-box-right">
							<!-- <view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">生日</view>
								<input class="form-input" name="input" placeholder="例：2020-01-23" />
							</view> -->
							<!-- <view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">民族</view>
								<picker @change="bindPickerChange_mz()" :value="mzIndex" :range="array_mz">
									<view class="form-input df fdr aic jcsb">
										<view>{{array_mz[mzIndex]}}</view>
										<view>
											<img src="../../assets/user/pic_user_03.png" />
										</view>
									</view>
								</picker>
							</view> -->
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">民族</view>
								<picker @change="bindPickerChange_mz" :value="mzIndex" :range="array_mz">
									<view class="form-input df fdr aic jcsb">
										<view>{{array_mz[mzIndex]}}</view>
										<view>
											<img src="../../assets/user/pic_user_03.png" />
										</view>
									</view>
								</picker>
							</view>
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">籍贯</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.NativePlace" />
							</view>
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">手机</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.PhoneNum" />
							</view>
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">邮箱</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.Email" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box3 df ">
				<view class="box2-content">
					<view class="title df fdr aic">
						<view class="df">
							<img src="../../assets/user/pic_user_02.png"></img>
						</view>
						<view class="title-text">学校认证信息</view>
					</view>
					<view class="box2-table-box df fdr">
						<view class="box2-table-box-left df fdc aic ">
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">学校</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.School" />
							</view>
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">专业</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.Profession" />
							</view>
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">班级</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.Class" />
							</view>
							<!-- <view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">职务</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.Post" />
							</view> -->
						</view>
						<view class="box2-table-box-right">
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">学号</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.StudentID" />
							</view>
							<view class="box2-table-box-left-item df fdr aic jcsb">
								<view class="table-title">院系</view>
								<input class="form-input" name="input" placeholder="请输入" v-model="model.Department" />
							</view>
						</view>
					</view>
					<view class="btn-box df fdr aic jcc">
						<view class="btn-submit df aic jcc" @click="onClick_commit">提交</view>
						<!-- <view class="btn-cancel df aic jcc">取消</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {

		},
		onLoad() {

		},
		data() {
			return {
				//0添加1个人
				showIndex_userInfo: 0,
				sexIndex: 0,
				zjIndex: 0,
				mzIndex: 0,
				userInfo: mydata_userInfo,
				model: {
					"UserID": '', //设置用户
					"SetUserID": '', //被设置用户ID
					"Name": "", //姓名
					"School": "", //学校
					"Department": "", //院系
					"Profession": "", //专业
					"Class": "", //班级
					"StudentID": null, //学号
					"Post": '', //职务
					"PhoneNum": null, //电话
					"Email": "", //邮箱
					"Nation": "汉族", //民族 
					"PoliticsStatus": "", //政治面貌
					"NativePlace": "", //籍贯
					"Certificate": "身份证", //证件类型
					"CertificateNum": null //证件号码
				},
				model2: {
					"UserID": mydata_userInfo.UserID, //设置用户
					"SetUserID": mydata_userInfo.UserID, //被设置用户ID
					"Name": "成3", //姓名
					"School": "传媒大学", //学校
					"Department": "计算机学院", //院系
					"Profession": "计算机", //专业
					"Class": "0550", //班级
					"StudentID": 16123, //学号
					"Post": mydata_userInfo.role, //职务
					"PhoneNum": 16584562045, //电话
					"Email": "15324565@qq.com", //邮箱
					"Nation": "汉", //民族 
					"PoliticsStatus": "群众", //政治面貌
					"NativePlace": "江西", //籍贯
					"Certificate": "身份证", //证件类型
					"CertificateNum": 12345678910 //证件号码

				},

				array_sex: ['男', '女'],
				array_zj: ['身份证', '护照'],
				array_mz: ['汉族', '少数民族'],
			}
		},
		methods: {
			//点击添加个人信息
			onClick_p1_add() {
				this.showIndex_userInfo = 1;
			},
			//性别
			bindPickerChange_sex: function(e) {
				console.log('picker发送选择改变,携带值为', e.target.value)
				this.sexIndex = e.target.value
				// this.model.se
			},
			//证件类型
			bindPickerChange_zj: function(e) {
				console.log("证件类型", e);
				this.zjIndex = e.target.value
				this.model.Certificate = this.array_zj[this.zjIndex]
			},
			//民族
			bindPickerChange_mz: function(e) {
				console.log("民族", e);
				this.mzIndex = e.target.value
				this.model.Nation = this.array_mz[this.mzIndex]
			},
			onClick_commit() {
				let url = this.$Api + "/user/setuserinfo";
				console.log("请求提交", mydata_userInfo, this.model);
				//强制转换到数字类型,要不然提交不成功
				this.model.StudentID = Number(this.model.StudentID);
				this.model.PhoneNum = Number(this.model.PhoneNum);
				this.model.CertificateNum = Number(this.model.CertificateNum);

				// let model3 = {
				// 	"UserID": '69145935-e1ec-4a04-8133-43f351bde42c', //设置用户
				// 	"SetUserID": '69145935-e1ec-4a04-8133-43f351bde42c', //被设置用户ID
				// 	"Name": "xxx", //姓名
				// 	"School": "传媒大学", //学校
				// 	"Department": "计算机学院", //院系
				// 	"Profession": "计算机", //专业
				// 	"Class": "0550", //班级
				// 	"StudentID": 16123, //学号
				// 	"Post": "学生", //职务
				// 	"PhoneNum": 16584562045, //电话
				// 	"Email": "15324565@qq.com", //邮箱
				// 	"Nation": "汉", //民族 
				// 	"PoliticsStatus": "群众", //政治面貌
				// 	"NativePlace": "江西", //籍贯
				// 	"Certificate": "身份证", //证件类型
				// 	"CertificateNum": 12345678910 //证件号码
				// }
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: url,
					method: 'POST',
					// data: model3,
					data: this.model,
					dataType: 'json',
					success: (res) => {
						let data = res.data;
						//100成功
						if (data.Code == 100) {
							console.log("请求成功100");
							alert('提交成功！')
						}
						//200失败
						else {

						}
						console.log("success+++**+*", res)
					},
					fail: (res) => {
						console.log("fail+**+*", res)
					}
				});
			},
			updateInfo(data) {
				// this.model=model;
				this.showIndex_userInfo = 1;

				this.model.UserID = mydata_userInfo.UserID;
				this.model.SetUserID = mydata_userInfo.UserID;
				this.model.Post = mydata_userInfo.role;

				this.model.Name = data.Name;
				this.model.School = data.School;
				this.model.Department = data.Department;
				this.model.Profession = data.Profession;
				this.model.Class = data.Class;
				this.model.StudentID = data.StudentID;
				// this.model.Post=data.Post;
				this.model.PhoneNum = data.PhoneNum;
				this.model.Email = data.Email;
				this.model.Nation = data.Nation ? data.Nation : this.model.Nation;
				this.model.PoliticsStatus = data.PoliticsStatus;
				this.model.NativePlace = data.NativePlace;
				this.model.Certificate = data.Certificate ? data.Certificate : this.model.Certificate;
				this.model.CertificateNum = data.CertificateNum;
			}
		},
		onUploadAvatar(){
			console.log("点我了吗")
			uni.chooseFile({
			    success: (chooseFileRes) => {
			        const tempFilePaths = chooseFileRes.tempFilePaths;
			        uni.uploadFile({
			            url: this.$Api + "/user/uploaduserheadimage", //仅为示例，非真实的接口地址
			            filePath: tempFilePaths[0],
			            name: 'file',
			            formData: {
							'UserID':this.$UserId,                // 创建用户 id
			            },
			            success: (uploadFileRes) => {
			                console.log('upload ok=',uploadFileRes.data);
							//刷新avatar
							uni.request({
								header: {
									'Content-Type': 'application/json;charset=UTF-8'
								},
							    url: this.$Api + "/user/getuserinfo", //仅为示例，非真实的接口地址
								method: 'POST',
								data: {
									'UserID':this.$UserId,
								},
								dataType: 'json',
								success: (res) => {
									this.userInfo.avatarSrc = res.data.User.HeadImageURL;
								},
								fail: (res) => {
									console.log("fail+**+*", res)
								}
							});
			            }
			        });
			    }
			});
		}
	}
</script>

<style lang="scss">
	.user-full {
		width: 100%;
		height: 100%;
	}

	.user-right-box {
		// background: #FFFFFF;
		background: #F4F4F4;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
		flex: 1;
		margin-left: px2vw(10);
	}

	.user-right-01-tip {
		font-size: px2vw(22);
		color: #FF7373;
		line-height: px2vw(29);
		margin-top: px2vw(37);
	}

	.self-btn01 {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-top: px2vw(94);
	}

	.user-right-self01 {
		background: #FFFFFF;
	}

	.box1 {
		height: px2vw(200);
		background: #FFFFFF;
	}

	.self-avatar {
		margin-left: px2vw(227);
	}

	.self-avatar img {
		width: px2vw(120);
	}

	.self-btn02 {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-left: px2vw(57);
	}

	.box2 {
		// height: px2vw(553);
		background: #FFFFFF;
		margin-top: px2vw(10);
	}

	.box2-content {
		margin-left: px2vw(71);
		margin-top: px2vw(31);
		margin-bottom: px2vw(57);
	}

	.form-input {
		width: px2vw(355);
		height: px2vw(54);
		padding: px2vw(14) px2vw(20);

		font-size: px2vw(20);
		color: #070707;
		line-height: px2vw(26);

		background: #FFFFFF;
		border-radius: px2vw(4);
		border: 1px solid #B4B4B4;
	}

	.title-text {
		margin-left: px2vw(16);
	}

	.box2-table-box {
		// margin-top: px2vw(44);
		// margin-bottom: px2vw(44);
	}

	.box2-table-box-left {
		width: px2vw(500);
	}

	.box2-table-box-left-item {
		width: 100%;
		margin-top: px2vw(30);
	}

	.table-title {
		font-size: px2vw(22);
		color: #555555;
		line-height: px2vw(29);
	}

	.box2-table-box-right {
		width: px2vw(500);
		margin-left: px2vw(92);
	}

	.box3 {
		// height: px2vw(553);
		background: #FFFFFF;
		margin-top: px2vw(10);
	}

	.btn-box {
		// margin-top: px2vw(10);
	}

	.btn-submit {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-top: px2vw(94);
	}

	.btn-cancel {
		width: px2vw(200);
		height: px2vw(58);
		background: #D8D8D8;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-top: px2vw(94);
		margin-left: px2vw(30);
	}
</style>