deming/pageE/more/ApplyLive.vue

<template>
  <view class="apply-live">
    <view class="basic-info">
      <view>
        <label for="name">姓名:</label>
        <input type="text" id="name"  @input="names" placeholder="请输入姓名" />
      </view>
      <view>
        <label for="phone">手机号:</label>
        <input type="number" id="phone" @input="phones" maxlength="11" placeholder="请输入手机号" />
      </view>
      <view @click="show=true">
        <label for="address">居住地址:</label>
        <input type="text" id="address" v-model="address" disabled placeholder="请选择居住地址" />
        <u-icon name="arrow-down" color="#343434" size="26" class="arrow-icon"></u-icon>
      </view>
      <view>
        <label for="details">详细地址:</label>
        <input type="text" id="details" @input="detailss" placeholder="请填写详细地址" />
      </view>
    </view>
    <view class="other-info">
      <view class="item-box specialty">
        <view class="title">特长领域：<text class="brief">(多选）</text></view>
        <view class="check-box-container">
          <u-checkbox-group @change="specialtyGroupChange" active-color="#fff">
            <u-checkbox 
              v-model="item.checked" 
              v-for="(item, index) in industryList" :key="index" 
              :name="item.name"
            >{{item.name}}</u-checkbox>
          </u-checkbox-group>
        </view>
      </view>
      <view class="item-box hobby">
        <view class="title">兴趣爱好：<text class="brief">(多选）</text></view>
        <view class="check-box-container">
          <u-checkbox-group @change="hobbyGroupChange" active-color="#fff">
            <u-checkbox 
              v-model="item.checked" 
              v-for="(item, index) in hobbyList" :key="index" 
              :name="item.name"
            >{{item.name}}</u-checkbox>
          </u-checkbox-group>
        </view>
      </view>
    </view>
    <view class="submit-btn" @click="applyExpert">提交申请</view>
    <u-select v-model="show" 
				mode="mutil-column-auto" 
				:list="areaList" 
				value-name="area_id" 
				label-name="area_name" 
				child-name="_child" 
				@confirm="setArea">
		</u-select>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      areaList: [],
      name: '',
      phone: '',
      address: '',
      details: '',
      industryList: [],
      hobbyList: [],
      checkedIndustryList: [],
      checkedHobbyList: [],
      isSubmit: true, // 防止多次提交
    }
  },
  onLoad() {
    this.getAreaData();
    this.getIndustryList();
    this.getHobbyList();
  },
  methods: {
    names(a){
      console.log(a.detail)
      this.name = a.detail.value
    },
    phones(a){
      this.phone = a.detail.value
    },
    detailss(a){
      this.details = a.detail.value
    },

    getAreaData() {
			this.$u.api.getArea().then((res)=>{
				if (res.errCode == 0) {
					this.areaList = res.data;
				}
			})
		},
    getIndustryList() {
      this.$u.api.getIndustryList().then(res => {
        res.data.forEach(element => {
          this.industryList.push({
            checked: false,
            name: element,
          });
        });
      })
    },
    getHobbyList() {
      this.$u.api.getHobbyList().then(res => {
        res.data.forEach(element => {
          this.hobbyList.push({
            checked: false,
            name: element,
          });
        });
      })
    },
    specialtyGroupChange(e) {
      // console.log(e);
      this.checkedIndustryList = e;
    },
    hobbyGroupChange(e) {
      // console.log(e);
      this.checkedHobbyList = e;
    },
    // 验证
		validateData() {
			if(this.$u.test.isEmpty(this.name)) {
        this.$u.toast('姓名不能为空');
				return false;
			}
			if(this.$u.test.isEmpty(this.phone)) {
        this.$u.toast('手机号不能为空');
				return false;
			}
			if(!this.$u.test.mobile(this.phone)) {
        this.$u.toast('手机号错误');
				return false;
			}
			if(this.$u.test.isEmpty(this.address)) {
        this.$u.toast('地址不能为空');
				return false;
			}
			if(this.$u.test.isEmpty(this.details)) {
        this.$u.toast('详细地址不能为空');
				return false;
      }
      if(!this.checkedIndustryList.length) {
        this.$u.toast('行业领域不能为空');
				return false;
      }
      if(!this.checkedHobbyList.length) {
        this.$u.toast('兴趣爱好不能为空');
				return false;
			}
			return true;
		},
    applyExpert() {
      if(!this.isSubmit) return false;
      if(!this.validateData()) return false;
      this.isSubmit = false;
      this.$u.api.applyExpert({
        name: this.name, 
        mobile: this.phone, 
        address: this.address + this.details, 
        industry: this.checkedIndustryList, 
        hobby: this.checkedHobbyList,
      }).then(res => {
        if(res.errCode == 0) {
          this.$refs.uToast.show({
            title: res.message,
            back: true,
          })
        } else {
          this.isSubmit = true;
          this.$u.toast(res.message);
        }
      })
    },
    setArea(area) {
			// console.log(area);
			this.area_id = area[0].value;
			this.city_id = area[1].value;
			let temp = '';
			area.forEach(e => {
				temp += e.label;
			});
			this.address = temp;
		},
  }
};
</script>
<style lang="scss" scoped>
.apply-live {
  min-height: calc(100vh - var(--window-top));
  background-color: #ECECEC;
  padding-bottom: 60rpx;
  .basic-info {
    > view {
      background-color: #FFFFFF;
      padding: 34rpx 30rpx;
      display: flex;
      align-items: center;
      margin-bottom: 2rpx;
      > label {
        width: 150rpx;
        margin-right: 40rpx;
        font-size: 30rpx;
        color: #343434;
      }
      > input {
        flex: 1;
        font-size: 28rpx;
      }
      .arrow-icon {
        margin-left: 20rpx;
      }
    }
  }
  .other-info {
    margin-bottom: 80rpx;
    .item-box {
      background-color: #FFFFFF;
      padding: 35rpx 30rpx;
      margin-bottom: 1rpx;
      .title {
        font-size: 30rpx;
        color: #343434;
        margin-bottom: 30rpx;
        .brief {
          color: #9A9A9A;
        }
      }
      .check-box-container {
        /deep/ .u-checkbox {
          margin-bottom: 24rpx;
          .u-checkbox__icon-wrap {
            border-color: #C0C0C0 !important;
          }
          .u-checkbox__icon-wrap--checked {
            .u-icon__icon {
              color: #FF780F !important;
            }
          }
        }
      }
    }
  }
  .submit-btn {
    width: 690rpx;
    height: 98rpx;
    background: #FF7810;
    border-radius: 49rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>