repairForMiniProgram/pages/personal-information/personal-information.vue

<template>
	<view class="bodyContent">
		<form bindsubmit='handleSubmit'>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						<text>*</text>姓名
					</view>
					<view class="uni-list-cell-db">
						<u--input class="uni-input" v-model="name" placeholder="请输入姓名"></u--input>
					</view>
				</view>
			</view>

			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						<text>*</text>性别
					</view>
					<view class="uni-list-cell-db">
						<view class="radio">
							<radio-group @change="radioChange">
								<label style="margin-right: 30px;">
									<radio value="0" :checked="men" />男
								</label>
								<label>
									<radio value="1" :checked="women" />女
								</label>
							</radio-group>
						</view>
					</view>
				</view>
			</view>

			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						<text>*</text>班级
					</view>
					<view class="uni-list-cell-db">
						<u--input class="uni-input" v-model="studentClazz" placeholder="请输入班级"></u--input>
					</view>
				</view>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						<text>*</text>手机号
					</view>
					<view class="uni-list-cell-db">
						<u--input class="uni-input" maxlength=11 v-model="studentPhone" placeholder="请输入手机号"></u--input>
					</view>
				</view>
			</view>

			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						<text>*</text>备选手机号
					</view>
					<view class="uni-list-cell-db">
						<u--input class="uni-input" maxlength=11 v-model="studentOtherPhone" placeholder="请输入备选手机号">
						</u--input>
					</view>
				</view>
			</view>

			<view class="uni-list">
				<view class="cuni-list-cell">
					<view class="uni-list-cell-left">
						<text>*</text>学生宿舍
					</view>
					<view class="uni-list-cell-db">
						<picker class="uni-input-1" mode="multiSelector" :value="roomIndex" :range="room_List"
							@change="bindPickerChange_room" @columnchange="handleNum">
							<view class="uni-input2" v-if="dormNumber">
								{{dormNumber}}
							</view>
							<view class="uni-input2" style="color: #C0C4CC;" v-else>
								请选择学生宿舍
							</view>
						</picker>

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

			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						<text>*</text>学生校区
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="studentCampus" :range="array">
							<view class="uni-input2" v-if="studentCampus!==null">{{array[studentCampus]}}</view>
							<view class="uni-input2" style="color: #C0C4CC;" v-else>
								请选择学生校区
							</view>
						</picker>
					</view>
				</view>
			</view>
			<button @click="modifyInformation" form-type="submit"
				style="color: white;background-color:  rgba(42, 130, 228, 1);">确认</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '', //姓名
				studentSex: 0, //性别
				studentClazz: '', //班级
				studentPhone: '', //手机号
				studentOtherPhone: '', //备用手机号
				dormNumber: null, //学生宿舍
				studentCampus: null, //学生校区
				studentDormitory: '',
				array: ['黄家湖校区', '墨轩湖校区'],
				men: true,
				women: false,
				room_List: [
					[],
					[],
					[]
				],
				roomIndex: null,
				buildId: 1,
				floorId: 1,
				roomId: 1,
				IdList: [],
				IdList2: [],
				count: 0,
				count2: 0,
			}
		},
		onLoad() {
			this.getStudentInformation()
			this.getbuild()
			this.getbuildHigh()
			this.getrooms()
		},
		methods: {
			// 获取学生数据
			getStudentInformation() {
				let res = uni.getStorageSync('student')
				// console.log('这是获取key中的内容', res)
				if (res) {
					this.name = res.studentName
					this.studentSex = res.studentSex
					if (this.studentSex == 0) {
						this.men = true
						this.women = false
					} else {
						this.men = false
						this.women = true
					}
					this.studentCampus = res.studentCampus
					this.studentPhone = res.studentPhone
					this.studentOtherPhone = res.studentOtherPhone
					this.studentDormitory = res.studentDormitory
					this.dormNumber = res.dormNumber
					this.studentClazz = res.studentClazz
				}
			},

			// 获取宿舍楼栋数据
			async getbuild() {
				let res = await this.$myRequest({
					method: "post",
					url: `/build/queryAllBuild`,
				})
				// console.log(res)
				let tempList = []
				res.data.forEach(item => {
					tempList.push(item.buildName)
				})
				this.$nextTick(() => {
					this.$set(this.room_List, 0, tempList)
				})
			},

			// 获取宿舍楼层数据
			async getbuildHigh() {
				let res = await this.$myRequest({
					method: "post",
					url: `/build/queryAllFloorByBuildID?buildId=${this.buildId}`,
				})
				// console.log(res)
				this.room_List[1] = []
				this.room_List[2] = []
				this.IdList = []
				let tempList = []
				res.data.forEach(item => {
					tempList.push(item.floorName)
					this.IdList.push(item.floorId)
				})
				this.$nextTick(() => {
					this.$set(this.room_List, 1, tempList)
					this.floorId = this.IdList[this.count]
				})
			},

			// 获取宿舍房间数据
			async getrooms() {
				let res = await this.$myRequest({
					method: "post",
					url: `/build/queryAllRoomByFloorID?floorId=${this.floorId}`,
				})
				// console.log(res)
				this.room_List[2] = []
				this.IdList2 = []
				let tempList2 = []
				res.data.forEach(item => {
					tempList2.push(item.roomName)
					this.IdList2.push(item.roomId)
				})
				this.$nextTick(() => {
					this.$set(this.room_List, 2, tempList2)
					this.roomId = this.IdList2[this.count2]
				})
			},

			// 编辑信息
			async modifyInformation() {
				let phoneVer = /^[1][3,4,5,7,8,9][0-9]{9}$/ //验证规则
				if (!this.name || !this.studentClazz || !this.studentPhone || !this
					.studentOtherPhone || this.dormNumber == null || this.studentCampus == null) {
					uni.showToast({
						title: "请输入具体信息",
						icon: "none"
					})
				} else if (!phoneVer.test(this.studentPhone) || !phoneVer.test(this.studentOtherPhone)) {
					uni.showToast({
						title: "请输入正确的联系电话",
						icon: 'none'
					})
				} else {
					let res = await this.$myRequest({
						method: "post",
						url: `/student/updateStudent?studentOtherPhone=${this.studentOtherPhone}&studentName=${this.name}&studentDormitory=${this.studentDormitory}&studentSex=${this.studentSex}&studentPhone=${this.studentPhone}&studentCampus=${this.studentCampus}&dormNumber=${this.dormNumber}&studentClazz=${this.studentClazz}`,
					})
					// console.log(res)
					if (res.status == 200) {
						uni.showToast({
							title: '编辑成功',
							icon: 'success'
						})
						uni.setStorageSync("updataMsg", true)
						uni.setStorageSync('student', res.data);
						setTimeout(() => {
							uni.reLaunch({
								url: '../index/index'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: '编辑失败',
							icon: 'error'
						})
					}
				}
			},

			// 学生校区选择框
			bindPickerChange(e) {
				// console.log(e)
				this.studentCampus = e.detail.value
			},

			// 性别选择框
			radioChange(e) {
				// console.log(e.detail.value)
				this.studentSex = e.detail.value
			},

			// 三级联动下拉框回调
			bindPickerChange_room(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.roomIndex = e.detail.value
				this.dormNumber = this.room_List[0][this.roomIndex[0]] + this.room_List[1][this.roomIndex[1]] + this
					.room_List[2][this.roomIndex[2]]
				// console.log(this.buildId + '-' + this.floorId + '-' + this.roomId)
			},

			// 三级联动下拉框拖动回调
			handleNum(e) {
				// console.log("第"+(e.detail.column+1)+"列"+"第"+(e.detail.value+1)+"行" )
				if (e.detail.column == 0) {
					// console.log("楼栋发生变化，当前为"+(e.detail.value+1)+"栋")
					if (e.detail.value < 4) {
						this.buildId = e.detail.value + 1
					} else {
						this.buildId = e.detail.value + 5
					}
				} else if (e.detail.column == 1) {
					// console.log("层数发生变化，当前为"+(e.detail.value+1)+"层")
					this.floorId = this.IdList[e.detail.value]
					this.count = e.detail.value
				} else {
					// console.log("房间数发生变化，当前为"+(e.detail.value+1)+"号")
					this.roomId = this.IdList2[e.detail.value]
					this.count2 = e.detail.value
				}
				// console.log(this.buildId + '-' + this.floorId + '-' + this.roomId)
			}
		},

		// 监听属性
		watch: {
			buildId: {
				handler() {
					this.getbuildHigh()
				},
				immediate: true
			},
			floorId: {
				handler() {
					this.getrooms()
				},
				immediate: true
			},
		},
	}
</script>

<style>
	.bodyContent {
		position: fixed;
		width: 100%;
	}

	.uni-list-cell-left {
		float: left;
		width: 22%;
		height: 94rpx;
		text-align: center;
		font-size: 28rpx;
		border-bottom: 1px solid rgba(200, 200, 205, 1);
		line-height: 94rpx;
	}

	.uni-list-cell-left text {
		color: red;
	}

	.uni-list-cell-db {
		float: right;
		width: 78%;
		height: 94rpx;
		border-bottom: 1px solid rgba(200, 200, 205, 1);
	}

	/* .uni-list-cell-db .name {
		float: right;
	} */

	.uni-list {
		position: relative;
		font-size: 28rpx;
	}

	.uni-list-cell-db input {
		height: 94rpx;
		width: 78%;
		float: right;
		text-align: center;
		line-height: 94rpx;
		font-size: 28rpx;
		border: none;
	}

	.uni-list-cell-db .u-border {
		border: none;
		float: right;
		margin-top: 16rpx;
		width: 196rpx;
	}

	.uni-list-cell-db .uni-input {
		float: right;
		margin-right: 44rpx;
		width: 240rpx;
		line-height: 94rpx;
	}

	.uni-list-cell-db .uni-input2 {
		float: right;
		margin-right: 64rpx;
		width: 240rpx;
		height: 96rpx;
		line-height: 94rpx;
		font-size: 30rpx;
	}

	.uni-list-cell-db uni-image {
		position: absolute;
		width: 52rpx;
		height: 52rpx;
		right: 6rpx;
		top: 22rpx;
	}

	button {
		position: absolute;
		top: 690rpx;
		left: 48rpx;
		width: 656rpx;
		height: 94rpx;
		color: white;
	}

	.radio {
		float: right;
		margin: 24rpx 72rpx 0 0;
		/* color: #C0C4CC; */
	}

	.uni-input-1 {
		height: 50rpx;
	}
</style>