yichael_zhongchuang_front_2/components/student/StudentInfo.vue

<template>
	<view class="m_right">
		<view class="m_hander">
			<view class="m_hander_item" style="display:inline-block;">
				<image src="../../assets/login/loginPic2.png" class="m_upload_img"></image>
			</view>
			<view class="m_hander_item m_hander_item_left" style="display: inline-block;">
				<button type="default" class="m_btn m_btn_download" size="mini" @click="onUploadAvatar">上传头像</button>
			</view>
		</view>
		<view class="m_card">
			<view class="m_user_info">
				<view class="m_user_info_hander">
					<view class="m_user_left">
					</view>
					<view class="m_text">
						个人信息
					</view>
				</view>
			</view>
			<view class="m_user_info_container">
				<div class="m_row">
					<div class="m_form_item">
						<span class="m_form_title">姓名</span>
						<input type="text" v-model="model.Name" value="" class="m_input" placeholder="请输入姓名" />
					</div>
					<div class="m_form_item">
						<span class="m_form_title">生日</span>
						<input type="text" class="m_input" placeholder="例:2020-01-23" />
					</div>
				</div>
				<div class="m_row">
					<div class="m_form_item">
						<span class="m_form_title">性别</span>
						<input type="text" value="" class="m_input" placeholder="请输入性别" />
					</div>
					<div class="m_form_item">
						<span class="m_form_title">民族</span>
						<input type="text" value="" v-model="model.Nation" class="m_input" placeholder="请输入民族" />
					</div>
				</div>
				<div class="m_row">
					<div class="m_form_item">
						<span class="m_form_title">政治面貌</span>
						<input type="text" value="" v-model="model.PoliticsStatus" class="m_input" placeholder="请输入政治面貌" />
					</div>
					<div class="m_form_item">
						<span class="m_form_title">籍贯</span>
						<input type="text" value="" v-model="model.NativePlace" class="m_input" placeholder="请输入籍贯"  />
					</div>
				</div>
				<div class="m_row">
					<div class="m_form_item">
						<span class="m_form_title">证件类型</span>
						<input type="text" value="" v-model="model.Certificate" class="m_input" placeholder="请输入" />
					</div>
					<div class="m_form_item">
						<span class="m_form_title">手机</span>
						<input type="text" v-model="model.PhoneNum" class="m_input" placeholder="请输入手机" />
					</div>
				</div>
				<div class="m_row">
					<div class="m_form_item">
						<span class="m_form_title">证件号码</span>
						<input type="text" class="m_input" v-model="model.CertificateNum" placeholder="请输入号码" />
					</div>
					<div class="m_form_item">
						<span class="m_form_title">邮件</span>
						<input type="text" value="" v-model="model.Email" class="m_input" placeholder="请输入邮件" />
					</div>
				</div>
			</view>
		</view>
		<view class="m_card">

			<view class="m_user_info">
				<view class="m_user_info_hander">
					<view class="m_user_left">
					</view>
					<view class="m_text">
						学校认证信息
					</view>
				</view>
			</view>
			<view class="m_user_info_container">
				<div class="m_row">
					<div class="m_form_item">
						<span class="m_form_title">学校</span>
						<input type="text" class="m_input" v-model="model.School" placeholder="输入学校" />
					</div>
					<div class="m_form_item">
						<span class="m_form_title">学号</span>
						<input type="text" class="m_input" v-model="model.StudentID" placeholder="输入学号" />
					</div>
				</div>
				<div class="m_row">
					<div class="m_form_item">
						<span class="m_form_title">专业</span>
						<input type="text" v-model="model.Profession" class="m_input" placeholder="输入专业" />
					</div>
					<div class="m_form_item">
						<span class="m_form_title">院系</span>
						<input type="text" class="m_input" v-model="model.Department" placeholder="输入院系" />
					</div>
				</div>
				<div class="m_row">
					<div class="m_form_item">
						<span class="m_form_title">职务</span>
						<input type="text" value="" v-model="model.Post" class="m_input" placeholder="输入专业" />
					</div>
				</div>
				<div style="text-align: center;">
					<button type="default" @click="save" class="m_btn m_btn_red" style="margin-right: 40rpx;" size="mini">确定</button>
					<button type="default" class="m_btn m_btn_red" style="background: #D8D8D8;margin-right: 250rpx;" size="mini">取消</button>
				</div>
			</view>

		</view>
		<view class="m_school">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					"UserID": "",
					"SetUserID": "",
					"Name": "",
					"School": "",
					"Profession": "",
					"Class": "",
					"StudentID": "",
					"PhoneNum": "",
					"Department": "",
					"Post": "",
					"Email": "",
					"Nation": "",
					"PoliticsStatus": "",
					"NativePlace": "",
					"Certificate":"",
					"CertificateNum":""
				}
			}
		},
		methods: {
			save() {
				this.model.UserID = this.$UserId;
				this.model.SetUserID = this.$UserId;
				var tempData = this.model;
				if (this.model.PhoneNum != "") {
					tempData.PhoneNum = Number(this.model.PhoneNum);
				} else {
					tempData.PhoneNum = 0;
				}
				if (this.model.StudentID != "") {
					tempData.StudentID = Number(this.model.StudentID);
				} else {
					tempData.StudentID = 0;
				}
				if (this.model.CertificateNum != "") {
					tempData.CertificateNum = Number(this.model.CertificateNum);
				} else {
					tempData.CertificateNum = 0;
				}
				uni.request({
					url: this.$Api + "/user/setuserinfo",
					data: tempData,
					method: "POST",
					dataType: "json",
					success: res => {
						var {
							data
						} = res;
						if (data.Code == 100) {
							alert("操作成功~")
						} else {
							alert("操作失败~")
						}
					}
				})
			}
		},
		onUploadAvatar(){
			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 scoped lang="scss">
	.m_contaner {
		text-align: left;
	}

	.m_btn_download {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		background: #EA252C;
		color: #fff;
		font-family: MicrosoftYaHei;
		width: 300rpx;
		margin-top: 60rpx;

	}

	.m_btn_red {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		background: #EA252C;
		color: #fff;
		font-family: MicrosoftYaHei;
		width: 300rpx;

	}

	.m_hander {
		padding-top: 40rpx;
		padding-left: 460rpx;
	}

	.m_hander_item_left {
		margin-left: 30rpx;
	}

	.m_hander_item {
		float: left;
		line-height: 200rpx;

	}

	.m_upload_img {
		width: 200rpx;
		height: 200rpx;
	}

	.m_hander {
		height: 300rpx;

	}

	.m_btn {
		// width: 800rpx;
	}

	// .m_user_info {
	// 	width: 400rpx;
	// 	text-align: right;
	// }

	.m_user_info_hander {
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 200rpx;
		margin-top: 100rpx
	}

	.m_user_left {
		width: 10rpx;
		height: 60rpx;
		/* height: 0px; */
		background: #EA252C;
		float: left;
	}

	.m_text {
		margin-left: 20rpx;
		color: #EA252C;
		font-weight: bold;
		float: left;
		height: 60rpx;
		line-height: 60rpx;
	}

	.m_row {
		width: 100%;
		display: flex;
		margin-bottom: 50rpx;
	}

	.m_form_item {
		width: 40%;
		display: flex;
		justify-content: space-between;

		.m_form_title {
			width: 400rpx;
			line-height: 70rpx;
			font-weight: bold;
			color: #555555;
			margin-right: 30rpx;
			text-align: right;
		}

		.m_input {
			width: 80%;
			border-radius: 8rpx;
			padding: 14rpx 30rpx;
			border: 1px solid #B4B4B4;
			line-height: 60rpx;
		}
	}

	.m_user_info_container {
		margin-bottom: 100rpx;
	}

	.m_user_info {
		// line-height: 200rpx;
		height: 100rpx;
	}

	.m_user_info_container {
		// margin-top: 100rpx;
	}

	.m_input {

		/* height: 80rpx; */
	}

	.m_card {
		border-top: 10rpx solid #ECECEC;
	}
</style>