fx66/src/components/ApplyForm.vue

<template>
  <div class="wrap">
    <div class="apply-box">
      <div class="tabline">
        <h2>经纪商申请</h2>
      </div>
      <div class="apply-form">
        <div class="left-part">
          <h4>经纪商申请标准:</h4>
          <h5>经纪商是具有一定资源并能独立运营的公司、机构或团体。</h5>
          <p>1.经纪商所辖客户交易手续费的一部分作为返佣；</p>
          <p>2.经纪商可自行设置客户的提款手续费标准；</p>
          <p>3.经纪商可招募代理商，并在经纪商后台调整代理商返佣标准；</p>
          <p>4.经纪商所辖客户有不当得利的行为（恶意刷单、利用BUG等），手续费不返还；</p>
          <p>5.经纪商可在后台查看直发客户及代理客户的交易统计表；</p>
        </div>
        <div class="right-form">
          <el-form ref="applyForm" :model="applyForm" label-width="138px">
            <el-form-item label="公司/机构名称:">
              <el-input v-model="applyForm.comName" placeholder="请输入您所在的公司或者机构名称"></el-input>
            </el-form-item>
            <el-form-item label="姓名:">
              <el-input v-model="applyForm.name" placeholder="请输入您的姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号:" class="group-one">
              <el-select v-model="defaultValue" class="select fl">
                <el-option v-for="item in countries" :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
              <el-input v-model="applyForm.pNum" placeholder="请输入您的手机号码" class="fl"></el-input>
            </el-form-item>
            <el-form-item label="其他联系方式:" class="group-two">
              <el-input type="textarea"
                        :rows="3"
                        placeholder="请输入您的其他联系方式 如：微信、邮箱等"
                        v-model="textarea">
              </el-input>
            </el-form-item>
            <el-form-item label="所在地:" class="group-two">
              <el-select v-model="areaValue" clearable placeholder="所属国家" class="area-select" @change="disabled()">
                <el-option
                  v-for="item in areas"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="proValue" clearable placeholder="所属省份" class="area-select" :disabled="others">
                <el-option
                  v-for="item in provinces"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('applyForm')" class="apply-button">立即申请</el-button>
            </el-form-item>
            </el-form-item>
          </el-form>
          <p class="tips">*您好，我们尊重每一个客户的隐私。 一旦提交了以上内容则表明您同意FX66使用以上提供的信息与您联系，为您解答您所咨询的产品及服务。
          </p>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApplyForm',
  data () {
    return {
      applyForm: {
        comName: '',
        name: '',
        date1: '',
        pNum: ''
      },
      countries: [
        {
          label: '中国',
          value: '0'
        },
        {
          label: '法国',
          value: '1'
        },
        {
          label: '中国香港(地区)',
          value: '2'
        },
        {
          label: '意大利',
          value: '3'
        },
        {
          label: '日本',
          value: '4'
        },
        {
          label: '柬埔寨',
          value: '5'
        },
        {
          label: '韩国',
          value: '6'
        }

      ],
      defaultValue: '0',
      areas: [
        {
          label: '中国',
          value: '0'
        },
        {
          label: '法国',
          value: '1'
        },
        {
          label: '意大利',
          value: '2'
        },
        {
          label: '日本',
          value: '3'
        },
        {
          label: '柬埔寨',
          value: '4'
        },
        {
          label: '韩国',
          value: '5'
        }, {
          label: '马来西亚',
          value: '6'
        }
      ],
      provinces: [
        {
          label: '北京市',
          value: '0'
        },
        {
          label: '天津市',
          value: '1'
        },
        {
          label: '上海市',
          value: '2'
        },
        {
          label: '重庆市',
          value: '3'
        }, {
          label: '河北省',
          value: '4'
        }, {
          label: '山西省',
          value: '5'
        },
        {
          label: '辽宁省',
          value: '6'
        },
        {
          label: '吉林省',
          value: '7'
        },
        {
          label: '黑龙江省',
          value: '8'
        },
        {
          label: '江苏省',
          value: '9'
        },
        {
          label: '浙江省',
          value: '10'
        },
        {
          label: '安徽省',
          value: '11'
        },
        {
          label: '福建省',
          value: '12'
        },
        {
          label: '安徽省',
          value: '13'
        },
        {
          label: '江西省',
          value: '14'
        },
        {
          label: '山东省',
          value: '15'
        },
        {
          label: '河南省',
          value: '16'
        },
        {
          label: '湖北省',
          value: '17'
        },
        {
          label: '湖南省',
          value: '18'
        },
        {
          label: '广东省',
          value: '19'
        },
        {
          label: '海南省',
          value: '20'
        },
        {
          label: '四川省',
          value: '21'
        },
        {
          label: '海南省',
          value: '22'
        },
        {
          label: '贵州省',
          value: '23'
        },
        {
          label: '云南省',
          value: '24'
        },
        {
          label: '陕西省',
          value: '25'
        },
        {
          label: '甘肃省',
          value: '26'
        },
        {
          label: '陕西省',
          value: '27'
        },
        {
          label: '青海省',
          value: '28'
        },
        {
          label: '台湾省',
          value: '29'
        },
        {
          label: '内蒙古自治区',
          value: '30'
        },
        {
          label: '广西壮族自治区',
          value: '31'
        },
        {
          label: '西藏自治区',
          value: '32'
        },
        {
          label: '宁夏回族自治区',
          value: '33'
        },
        {
          label: '新疆维吾尔自治区',
          value: '34'
        },
        {
          label: '香港特别行政区',
          value: '35'
        },
        {
          label: '澳门特别行政区',
          value: '36'
        }

      ],
      nodata:[
        {
          value:'999',
          label:'无数据'
        }
      ],
      areaValue: '',
      proValue: '',
      textarea: '',
      others: true,
      selected: ''
    }
  },
  methods: {
    disabled: function () {
      if (this.areaValue == 0) {
        this.others = false
      } else {
        this.others = true;
        this.proValue = '';
      }
    },
    submitForm: function () {

    }
  }
}
</script>

<style scoped>
  .apply-box {
    background-color: #fff;
  }

  h2 {
    line-height: 80px;
    font-size: 24px;
    font-weight: 700;
  }

  .tabline {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 50px;
    height: 80px;
  }

  .apply-form {
    text-align: left;
    margin: 0 75px;
    color: #333;
    display: flex;
  }

  .left-part {
    width: 530px;
    border: 1px solid #e5e5e5;
    padding: 20px;
    position: relative;
    text-align: left;

  h4 {
    font-size: 16px;
    line-height: 1;
  }

  h5 {
    color: #0176c3;
    margin-top: 20px;
    font-size: 14px;
  }

  p {
    margin-top: 20px;
    font-size: 14px;
  }

  }
  .left-part:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    display: block;
    border-left: 10px solid #e5e5e5;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }

  .left-part:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
    display: block;
    border-left: 8px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }

  .right-form {
    width: 480px !important;
    margin-left: 40px;
  }

  .el-select-dropdown__item.selected {
    color: #fff;
    background-color: #20a0ff;
    font-weight: 500;
  }

  .select {
    width: 130px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .group-one .el-input {
    width: 212px;

  .el-input__inner {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  }
  .area-select {
    /*width: 165px;*/
  }

  .area-select:nth-of-type(2) {
    margin-left: 8px;
  }

  .apply-button {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    background-color: #0176c3;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding-top: 0;
  }

  .tips {
    padding-left: 28px;
    color: #3884d3;
    font-size: 14px;
  }
</style>