epmet-wx-pa-chengyang/src/views/userInfo/index.vue

<template>
  <div class="container">
    <div class="block">
      <van-cell title="头像" required>
        <template>
          <van-image width="37" height="37" :src="userInfo.headImgUrl" round />
        </template>
      </van-cell>
      <van-field label="姓名" required v-model="surName" placeholder="请输入" />
      <van-cell title="性别">
        <van-radio-group class="gender" v-model="gender">
          <van-radio name="1">男</van-radio>
          <van-radio name="2" style="margin-left: 50px">女</van-radio>
        </van-radio-group>
      </van-cell>
      <template v-if="type !== 'edit'">
        <van-field label="手机号" required v-model="phone" placeholder="请输入" />
        <van-field label="验证码" required v-model="smsCode" placeholder="请输入">
          <template #button>
            <van-button size="mini" round type="info" v-if="time === 60" @click="getCode">获取验证码</van-button>
            <van-button size="mini" round type="info" v-else disabled>{{ time }}s后重试</van-button>
          </template>
        </van-field>
      </template>
    </div>
    <div class="block">
      <Picker
        required
        label="所在街道"
        placeholder="请选择"
        v-model="streetId"
        :items="streetOptions"
        @change="e => setVal('street', e, 'getChildAgencyByPid')"
      />
      <Picker
        required
        label="居住社区"
        placeholder="请选择"
        v-model="communityId"
        :items="communityOptions"
        @change="e => setVal('community', e, 'getQuartersForCommunity')"
      />
      <Picker
        required
        label="小区"
        placeholder="请选择"
        v-model="quarterId"
        :items="quarterOptions"
        @change="e => setVal('quarter', e, 'buildingoption')"
      />
      <Picker
        required
        label="楼栋"
        placeholder="请选择"
        v-model="buildingId"
        :items="buildingOptions"
        @change="e => setVal('building', e, 'unitoption')"
      />
      <Picker
        required
        label="单元号"
        placeholder="请选择"
        v-model="unitId"
        :items="unitOptions"
        @change="e => setVal('unit', e, 'houseoption')"
      />
      <Picker
        required
        label="门牌号"
        placeholder="请选择"
        v-model="houseNumberId"
        :items="houseOptions"
        @change="e => setVal('houseNumber', e)"
      />
    </div>

    <van-button round block @click="submit" color="linear-gradient(to right, #81B5FB, #3E92FF)">提交</van-button>
  </div>
</template>

<script>
import Picker from '@/components/Picker'
import {
  buildingoption,
  getAllAgencyStreet,
  getChildAgencyByPid,
  getQuartersForCommunity,
  editUser,
  houseoption,
  register,
  sendsmscode,
  unitoption
} from '@/api/user'
var leftTime
export default {
  name: 'userInfo',
  components: { Picker },
  data() {
    return {
      form: {},
      jiedaoOptions: [],
      time: 60,
      userInfo: {},

      phone: '',
      smsCode: '',
      surName: '',
      gender: '',
      userId: '',
      streetId: '',
      communityId: '',
      quarterId: '',
      buildingId: '',
      unitId: '',
      houseNumberId: '',
      gridId: '',
      customerId: '',
      homeId: '',

      streetOptions: [],
      communityOptions: [],
      quarterOptions: [],
      buildingOptions: [],
      unitOptions: [],
      houseOptions: [],
      type: ''
    }
  },
  mounted() {
    this.type = this.$route.params.type ? this.$route.params.type : ''
    this.userInfo = this.$store.state.app.userInfo
    this.gender = this.$store.state.app.userInfo.gender
    this.getAllAgencyStreet()
    if (this.type === 'edit') {
      this.surName = this.userInfo.realName
      this.gender = this.userInfo.gender
      this.streetId = this.userInfo.streetId
      this.customerId = this.userInfo.customerId
      this.communityId = this.userInfo.communityId
      this.quarterId = this.userInfo.quarterId
      this.buildingId = this.userInfo.buildingId
      this.unitId = this.userInfo.unitId
      this.houseNumberId = this.userInfo.houseNumberId
      this.homeId = this.userInfo.homeId
      this.gridId = this.userInfo.gridId
      this.getChildAgencyByPid()
      this.getQuartersForCommunity()
      this.buildingoption()
      this.unitoption()
      this.houseoption()
    }
  },
  destroyed() {
    clearInterval(leftTime)
  },
  watch: {},
  methods: {
    submit() {
      let params = {
        gender: this.gender,
        userId: this.userInfo.userId,
        streetId: this.streetId,
        communityId: this.communityId,
        quarterId: this.quarterId,
        buildingId: this.buildingId,
        unitId: this.unitId,
        houseNumberId: this.houseNumberId,
        gridId: this.gridId,
        customerId: this.customerId,
        homeId: this.homeId
      }
      if (this.type !== 'edit') {
        params.phone = this.phone
        params.smsCode = this.smsCode
        params.surName = this.surName
        if (!params.surName) {
          this.$toast.fail('请输入姓名')
          return
        }
        if (!params.phone) {
          this.$toast.fail('请输入手机号')
          return
        }
        if (!params.smsCode) {
          this.$toast.fail('请输入验证码')
          return
        }
      } else {
        params.realName = this.surName
        if (!params.realName) {
          this.$toast.fail('请输入姓名')
          return
        }
      }
      if (!params.streetId) {
        this.$toast.fail('请选择所在街道')
        return
      }
      if (!params.communityId) {
        this.$toast.fail('请选择居住社区')
        return
      }
      if (!params.quarterId) {
        this.$toast.fail('请选择小区')
        return
      }
      if (!params.buildingId) {
        this.$toast.fail('请选择楼栋')
        return
      }
      if (!params.unitId) {
        this.$toast.fail('请选择单元号')
        return
      }
      if (!params.houseNumberId) {
        this.$toast.fail('请选择门牌号')
        return
      }
      if (this.type !== 'edit') {
        register(params).then(res => {
          localStorage.setItem('token', res.token)
          this.$toast.success('提交成功')
          this.$router.back()
        })
      } else {
        editUser(params).then(() => {
          this.$toast.success('修改成功')
          this.$router.back()
        })
      }
    },
    getCode() {
      if (!this.phone) {
        this.$toast.fail('请输入手机号')
        return false
      }
      if (!/1[3456789]\d{9}/.test(this.phone)) {
        this.$toast.fail('手机号格式错误')
        return false
      }
      sendsmscode({
        phone: this.phone
      }).then(() => {
        leftTime = setInterval(() => {
          if (this.time > 0) {
            this.time--
          } else {
            this.time = 60
            clearInterval(leftTime)
          }
        }, 1000)
      })
    },
    setVal(key, val, method) {
      if (key === 'street') {
        this.communityId = ''
        this.customerId = val.customerId
        this.communityOptions = []
        this.quarterOptions = []
        this.buildingOptions = []
        this.unitOptions = []
        this.houseOptions = []
      }
      if (key === 'community') {
        this.quarterId = ''
        this.gridId = ''
        this.quarterOptions = []
        this.buildingOptions = []
        this.unitOptions = []
        this.houseOptions = []
      }
      if (key === 'quarter') {
        this.gridId = val.gridId
        this.buildingId = ''
        this.buildingOptions = []
        this.unitOptions = []
        this.houseOptions = []
      }
      if (key === 'building') {
        this.unitId = ''
        this.unitOptions = []
        this.houseOptions = []
      }
      if (key === 'unit') {
        this.houseNumberId = ''
        this.houseOptions = []
      }
      if (key === 'houseNumber') {
        this.houseNumberId = val.label
        this.homeId = val.value
        this.houseOptions = []
      } else {
        this[key + 'Id'] = val.value
      }

      if (method) {
        this[`${method}`]()
      }
    },
    // 获取街道
    getAllAgencyStreet() {
      getAllAgencyStreet({}).then(res => {
        console.log(res, 'resresres')
        this.streetOptions = res
          ? res.map(item => {
              return {
                label: item.organizationName,
                value: item.id,
                customerId: item.customerId
              }
            })
          : []
        this.communityOptions = []
      })
    },
    // 获取社区
    getChildAgencyByPid() {
      getChildAgencyByPid({
        pid: this.streetId
      }).then(res => {
        this.communityOptions = res
          ? res.map(item => {
              return {
                label: item.organizationName,
                value: item.id
              }
            })
          : []
        this.gridOptions = []
      })
    },
    // 获取小区
    getQuartersForCommunity() {
      getQuartersForCommunity({
        agencyId: this.communityId
      }).then(res => {
        this.quarterOptions = res
          ? res.map(item => {
              return {
                label: item.label,
                value: item.value,
                gridId: item.pid
              }
            })
          : []
        this.buildingOptions = []
      })
    },
    // 获取楼栋
    buildingoption() {
      buildingoption({
        quartersId: this.quarterId
      }).then(res => {
        this.buildingOptions = res
          ? res.map(item => {
              return {
                label: item.label,
                value: item.value
              }
            })
          : []
        this.unitOptions = []
      })
    },
    // 获取单元
    unitoption() {
      unitoption({
        buildingId: this.buildingId
      }).then(res => {
        this.unitOptions = res
          ? res.map(item => {
              return {
                label: item.label,
                value: item.value
              }
            })
          : []
        this.houseOptions = []
      })
    },
    // 获取房号
    houseoption() {
      houseoption({
        unitId: this.unitId
      }).then(res => {
        this.houseOptions = res
          ? res.map(item => {
              return {
                label: item.label,
                value: item.value
              }
            })
          : []
      })
    }
  }
}
</script>

<style scoped lang="less">
@import './index';
</style>