luojigou_exhibition/src/pages/contact/index.vue

<template>
  <view class="contact">
    <view class="head">
      <view class="title">
        <image class="img-title" src="/static/img/contact/head_title.png" mode="aspectFill" />
      </view>
      <view class="tel">
        <image class="tel-img" src="/static/img/contact/icon_phone.png" mode="aspectFill" />
      </view>
    </view>
    <view class="form-warpper">
      <view class="input-content-wrapper">
        <form @submit="formSubmit" @reset="formReset">
          <view class="input-content">
            <view class="iconfont">
              <image class="image" src="/static/img/contact/icon_01.png" mode="aspectFill" />
            </view>
            <view class="flex align-center">
              <input class="uni-input" v-model="form.customer_name" name="customerName" placeholder="请输入您的姓名" />
            </view>
          </view>
          <view class="input-content">
            <view class="iconfont">
              <image class="image" src="/static/img/contact/icon_02.png" mode="aspectFill" />
            </view>
            <view class="flex align-center">
              <input class="uni-input" maxlength="11" v-model="form.mobile" name="mobile" placeholder="请输入联系方式" />
            </view>
          </view>
          <view class="input-content">
            <view class="iconfont">
              <image class="image" src="/static/img/contact/icon_03.png" mode="aspectFill" />
            </view>
            <view class="area flex align-center">
              <pick-regions name="regionCode" :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
                <text :class="['regions', regionName ? '' : 'empty']" >{{ regionName || '请选择所在地区' }}</text>
              </pick-regions>
              <!-- <input class="uni-input" v-model="form.parentName" name="parentName" placeholder="请选择所在地区" /> -->
              <image class="arrow" src="/static/img/contact/down.png" mode="aspectFill" />
            </view>
          </view>
          <view class="input-content">
            <view class="iconfont">
              <image class="image" src="/static/img/contact/icon_04.png" mode="aspectFill" />
            </view>
            <view class="area flex align-center">
              <picker mode="selector" name="type" @change="typeChange" :value="typeIndex" :range="typeList" range-key="label">
                <view class="empty" v-if="typeIndex == -1">
                  {{ '您的意向' }}
                </view>
                <view v-else>
                  {{ typeList[typeIndex] }}
                </view>
              </picker>
              <!-- <input class="uni-input" v-model="form.parentName" name="parentName" placeholder="您的意向" /> -->
              <image class="arrow" src="/static/img/contact/down.png" mode="aspectFill" />
            </view>
          </view>
          <view class="submit-btn">
            <image src="/static/img/contact/submit.png" mode="aspectFill" />
            <button class="confirm-btn" :disabled="disabled" form-type="submit"></button>
          </view>
        </form>
      </view>
    </view>

    <view class="adderss flex align-start">
      <view class="text">
        <view>
          地址：北京市朝阳区高碑店乡西店记忆文创小镇E6号楼
        </view>
        <view>
          一层102号
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import pickRegions from '@/components/pick-regions/pick-regions.vue';

export default {
  data() {
    return {
      disabled:false,
      form: {
        customer_name: '',
        mobile: ''
      },
      region:[],
      defaultRegionCode: '110101',
      defaultRegion:['北京市','市辖区','东城区'],
      typeIndex: -1,
      typeList: ["教学渠道代理", "思维芯游戏教室渠道代理", "家庭版渠道代理", "HOME&PLUS渠道代理", "探索小镇渠道代理（TOWN）", "合作园所（北京地区园所）"],
      reqBody: {}
    }
  },
  computed: {
    regionName: {
      get: function() {
        return this.region.map(item=>item.name).join('/')
      },
      set: function(val) {
        if(val) {
          this.region = val.map(item => {
            return {
              name: item
            }
          })
        }
        return val;
      }
    },
    regionCode() {
      if (this.region.length > 0) {
        return this.region[this.region.length - 1].code;
      } else {
        return this.defaultRegionCode;
      }
    }
  },
  components: {
    pickRegions
  },
  methods: {
    formSubmit(e) {
      console.log(e.detail.value);
      let rules = [
        { name: 'parentName', checkType: 'notnull', checkRule: '', errorMsg: '请填写家长姓名' },
        { name: 'parentPhone', checkType: 'phoneno', checkRule: '', errorMsg: '联系方式不正确'},
        // { name: 'address', checkType: 'notnull', checkRule: '', errorMsg: '请填写详细地址'},
      ]
    },
    typeChange(e) {
      const index = e.detail.value;
      this.typeIndex = index;
      // this.form.sex = this.genderList[index].value;
    },
    // 获取选择的地区
    handleGetRegion(region){
      this.region = region
    }
  }
}
</script>

<style lang="scss">
.contact {
  padding: 86upx 0 44upx;
  background: url('@/static/img/contact/bg.png') no-repeat #01A2E8;
  background-size: cover;
  .title {
    text-align: center;
    .img-title {
      width: 598upx;
      height: 168upx;
      vertical-align: middle;
    }
  }
  .tel {
    margin-top: 36upx;
    .tel-img {
      width: 564upx;
      height: 134upx;
      vertical-align: middle;
      margin-left: 68upx;
    }
  }
  .form-warpper {
    margin-top: 52upx;
    padding: 0 96upx;
  }
  .input-content-wrapper {
    margin-bottom: 0upx
  }
  .input-content {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 100upx;
    border: 2upx solid #003F66;
    margin-bottom: 36upx;
    padding: 0 42upx 0 42upx;
    background: #FFFFFF;
    border-radius: 172upx;
    .iconfont {
      position: relative;
      margin-right: 52upx;
      &::after {
        content: "";
        width: 2upx;
        height: 34upx;
        background:#B9B9B9;
        border-radius: 4upx;
        position: absolute;
        top: 4upx;
        right: -26upx;
      }
      image {
        width: 40upx;
        height: 46upx;
        vertical-align: middle;
      }
    }
    .input-placeholder {
      color: #B9B9B9;
      line-height: 36px;
      font-size: 28upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
    }
    .area {
      width: 100%;
    }
    uni-picker {
      width: 100%;
    }
    .regions {
      &.empty {
        color: #B9B9B9;
        line-height: 36px;
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    }
    .empty {
      color: #B9B9B9;
      line-height: 36px;
      font-size: 28upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
    }
    .picker {
      color: #B9B9B9;
      line-height: 36px;
      font-size: 28upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
    }
    .arrow {
      width: 24upx;
      height: 12upx;
      vertical-align: middle;
    }
  }
  .submit-btn {
    position: relative;
    margin-top: 94upx;
    text-align: center;
    image {
      width: 334upx;
      height: 92upx;
      vertical-align: middle;
    }
    .confirm-btn {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 334upx;
      height: 92upx;
      background: red;
      opacity: 0;
    }
  }
  .adderss {
    margin: 150upx 0 0 60upx;
    .text {
      font-size: 24upx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #B2E8FF;
      line-height: 34upx;
    }
  }
}
</style>