repairForMiniProgram/pages/personal-information/index.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()
    this.init()
  },
  methods: {
    async init() {
      await this.getbuild()
      await this.getbuildHigh()
      await this.getrooms()
    },
    // 获取学生数据
    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.studentPhone || !this.studentOtherPhone) {
        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.redirectTo({
              url: '../home/home',
            })
          }, 1000)
        } 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>