fx66/src/views/proxyApply.vue

<template>
  <div>
    <header-component :is-login="isLogin" :login-account="loginAccount" fix-top="1"></header-component>
    <div class="banner">
    </div>
    <div class="main-container">
      <div class="step-bar-container">
        <hr class="line left-radius" :class="{'active':step>0}"/>
        <p class="step-circle" :class="{'active':step>0}"><span class="description">填写申请信息</span>1</p>
        <hr class="line left-radius" :class="{'active':step>0}"/>
        <hr class="line right-radius" :class="{'active':step>1}"/>
        <p class="step-circle" :class="{'active':step>1}"><span class="description">审核中</span>2</p>
        <hr class="line left-radius" :class="{'active':step>1}"/>
        <hr class="line right-radius" :class="{'active':step>2}"/>
        <p class="step-circle" :class="{'active':step>2}"><span class="description">申请通过</span>3</p>
        <hr class="line right-radius" :class="{'active':step>2}"/>
      </div>
      <div class="apply-form-container">

        <h1 class="title">经纪商申请</h1>
        <div v-if="step<3" class="form-container">
          <div class="left-panel">
            <h4>经纪商申请标准:</h4>
            <h5>经纪商是具有一定资源并能独立运营的公司、机构或团体。</h5>
            <p>1.经纪商所辖客户交易手续费的一部分作为返佣；</p>
            <p>2.经纪商可自行设置客户的提款手续费标准；</p>
            <p>3.经纪商可招募代理商，并在经纪商后台调整代理商返佣标准；</p>
            <p>4.经纪商所辖客户有不当得利的行为（恶意刷单、利用BUG等），手续费不返还；</p>
            <p>5.经纪商可在后台查看直发客户及代理客户的交易统计表；</p>
          </div>
          <div class="right-panel">
            <el-form :disabled="disableAll" ref="form" :model="form" label-width="120px">
              <el-form-item label="公司/机构名称：">
                <el-input v-model="form.companyName"></el-input>
                <span class="red-dot">*</span>
              </el-form-item>
              <el-form-item label="姓名：">
                <el-input v-model="form.name"></el-input>
                <span class="red-dot">*</span>
              </el-form-item>
              <el-form-item label="手机号：">
                <span class="red-dot">*</span>
                <el-input  placeholder="请输入内容" v-model="form.phone" class="input-with-select">
                  <el-select v-model="form.phonePrefix" slot="prepend" placeholder="请选择">
                    <el-option
                      v-for='item,index in areaOptions'
                      :key="index"
                      :label="item.ch_name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item label="其他联系方式：">
                <el-input type="textarea" v-model="form.otherContact" ></el-input>
              </el-form-item>
              <el-form-item label="所在地区：">
                <el-row>
                  <el-col :span="10">
                    <el-select v-model="form.country" placeholder="请选择">
                      <el-option
                        v-for='item,index in countryOptions'
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="10">
                    <el-select class="prov-select" v-model="form.prov" placeholder="请选择">
                      <el-option
                        v-for='item,index in provOptions'
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <div :class="{'disabled':disableAll}" class="apply-button" @click="handleApply">立即申请</div>
              </el-form-item>
            </el-form>
            <p class="bottom-notice">*您好，我们尊重每一个客户的隐私。一旦提交了以上内容则表明您同意
              FX66使用以上提供的信息与您联系，为您解答您所咨询的产品及服务。</p>
            <!--<div class="apply-rule"><p class="rule-text">查看代理商申请标准</p></div>-->
          </div>

        </div>
        <div v-if="step==3" class="success-container">
          <i class="icon icon-success"></i>
          <h2 class="success-title">恭喜您，已经成功申请成为经纪商！</h2>
          <p class="success-content">您可用现在的账号和密码登录后台！如有疑问，可联系我们！</p>
          <button class="login-admin-button">登陆后台</button>
        </div>
      </div>
      <div  v-if="step<3" class="other-apply-container">
        <special-title title="联系我们 快速申请" eng-title="Contact us for quick application" font-size="25"></special-title>
        <div class="hex-container">

          <hexagon-block class="hex" icon="&#xe714;" content="400-1566-899"></hexagon-block>
          <hexagon-block class="hex" icon="&#xe600;" content="345106800<br/>545967811"></hexagon-block>
          <hexagon-block class="hex" icon="&#xe628;" content="326982014@qq.com"></hexagon-block>
        </div>

      </div>

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

<script>
    import HeaderComponent from "../components/header";
    import SpecialTitle from "../components/specialTitle";
    import HexagonBlock from "../components/hexagonBlock";
    export default {
      name: "proxyApply",
      components: {HexagonBlock, SpecialTitle, HeaderComponent},
      data(){
        return{
          step:1,
          isLogin:false,
          loginAccount:'123456789',
          form:{
            companyName:'',
            name:'',
            phonePrefix:'86',
            phone:'',
            otherContact:'',
            country:'',
            prov:'',
          },
          disableAll:false,
          areaOptions:[],
          countryOptions:[
            {
              label:'中国',
              value:'+86'
            }
          ],
          provOptions:[
            {
              label:'中国',
              value:'+86'
            }
          ],
        }
      },
      mounted(){
        let username=localStorage.getItem('username')
        if(username) {
          this.isLogin = true;
          this.loginAccount = username;
        }
        this.$http.get(this._ajaxAdress.getApplyStatus,{headers:{'Authorization':'Bearer '+localStorage.getItem('token')}}).then((response)=>{
          if(response.data.code==200){
            this.step=+response.data.data.isApplyed?(response.data.data.info.status==2?3:2):1;
            if(this.step===2){
              let info=response.data.data.info;
              let apply=this.form;
              apply.companyName=info.company;
              apply.name=info.contacts;
              apply.phone=info.mobile;
              apply.otherContact=info.other;
              apply.country=info.country;
              apply.prov=info.area;
              apply.phonePrefix=info.mobile_area
              this.disableAll=true;
            }
          }else{
            this.$notify({
              title: '提示',
              message: response.data.message,
              type: 'warning'
            });
          }

        })
        this.$http.get(this._ajaxAdress.getCountryList).then((response)=>{
          this.areaOptions=response.data.data;
        })
      },
      methods:{
        setUrlParams(obj){
          let param = new URLSearchParams();
          for(let item in obj){
            param.append(item,obj[item]);
          }
          return param
        },
        handleApply(){
          if(this.disableAll)return;
          let apply=this.form;
          if(!apply.companyName){
            this.$alert('请输入公司名称');
            return;
          }
          if(!apply.name){
            this.$alert('请输入联系人姓名');
            return;
          }
          if(!apply.phone){
            this.$alert('请输入手机号码');
            return;
          }
          let params={
            "company":apply.companyName,
            "contacts":apply.name,
            "mobile":apply.phone,
            "other":apply.otherContact,
            "country":apply.country,
            "area":apply.prov,
            "mobile_area":apply.phonePrefix,
          }
          this.$http({
            method:'post',
            url:this._ajaxAdress.postApply,
            data:this.setUrlParams(params),
            headers:{'Authorization':'Bearer '+localStorage.getItem('token')}
          }).then((response)=>{
            if(response.code==200){
              this.$notify({
                title: '成功',
                message: '申请成功',
                type: 'success'
              });
            }else{
              this.$notify({
                title: '提示',
                message: response.data.message,
                type: 'warning'
              });
            }
          })


        }
      }
    }
</script>

<style scoped lang="less">
  @import "../assets/less/_variable.less";
  .banner{
    background: url(../assets/proxyApply/banner.png) no-repeat 50% 50%;
    background-size: cover;
    width: 100%;
    height: 400px;
  }
  .main-container{
    width: 1200px;
    margin: 15px auto;
    & .step-bar-container{
      width: 100%;
      height: 110px;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      & .line{
        width: 150px;
        height:6px;
        border: 0;
        background-color: #eeeeee;
        &.left-radius{
          border-radius: 3px 0 0 3px;
        }
        &.right-radius{
          border-radius: 0px 3px 3px 0px;
        }
        &.active{
          background-color: #3884d3;
        }
      }
      & .step-circle{
        display: block;
        margin: 0 10px;
        position: relative;
        width: 45px;
        height: 45px;
        background-color: #ffffff;
        border: solid 1px #e5e5e5;
        border-radius: 100%;
        line-height: 45px;
        font-size: 26px;
        color: @lighterBlack;
        &.active{
          border: solid 1px #3884d3;
          background-color: #3884d3;
          color: white;
          &>.description{
            color:  #3884d3;
          }
        }
        & .description{
         left: -30px;
          position: absolute;
          top: -40px;
          /*transform: translateX(-25%);*/
          color: @lighterBlack;
          font-size: 16px;
          width: 100px ;


        }
      }
    }
    & .apply-form-container{
      position: relative;
      padding: 1px;
      width: 100%;
      margin-top: 10px;
      background-color: white;
      & .title{
        font-weight: 700;
        font-size: 25px;
        color: @lightBlack;
        width: 100%;
        margin-top: 33px;
        padding-bottom: 25px;
        border-bottom: solid 1px #e5e5e5;
      }
      & .success-container{
        & .icon{
          display: inline-block;
          margin-top: 80px;
          text-align: center;
          width: 50px;
          height: 50px;

        }
        & .icon-success{
          background:url(../assets/proxyApply/success.png) no-repeat;
          background-size: cover;
        }
        & .success-title{
          font-size: 25px;
          color: @lightBlack;
          margin-top: 40px;
        }
        & .success-content{
          font-size: 14px;
          color: @lighterBlack;
          margin-top: 40px;
        }
        & .login-admin-button{
          margin: 32px 0 70px;
          cursor: pointer;
          width: 140px;
          height: 40px;
          background-color: #ffffff;
          border-radius: 20px;
          border: solid 1px #e5e5e5;
          font-size: 18px;
          color:@primaryBlue

        }
      }
      & .form-container{
        padding-top: 48px;
        /*width: 550px;*/
        /*float: right;*/
        margin: 0 75px;
        display: flex;
        justify-content: space-between;
        text-align: left;
        & .left-panel{
          width: 530px;
          border: 1px solid #e5e5e5;
          padding: 20px;
          position: relative;
          margin-right: 40px;
          & h4{
            font-size: 16px;
            line-height: 1;
          }
          & h5{
            color: #0176c3;
            margin-top: 20px;
            font-size: 14px;
          }
          & p{
            margin-top: 20px;
            font-size: 14px;
          }
        }
        & .apply-rule{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          /*width: 64px;*/
          height: 273px;
          background-color: #0176c3;
          & .rule-text{
            width: 16px;
            font-size: 16px;
            color: white;
            margin: 44px 20px;
            line-height:20px;
          }
        }
        & .red-dot{
          position: absolute;
          top: 0;
          right:-15px;
          color: red;
          font-size: 16px;

        }
        & .bottom-notice{
          font-size: 14px;
          color: #3884d3;
          width: 440px;
          margin: 20px auto 0;
        }

        & .prov-select{
          margin-left: 12px;
        }
        & .apply-button{
          &.disabled{
            background-color: #dcdcdc;
          }
          width: 384px;
          line-height: 50px;
          height: 50px;
          background-color: #0176c3;
          border: 0;
          color: white;
          font-size: 16px;
          text-align: center;
          cursor: pointer;
          &.disabled{
            cursor: default;
            background-color: #dcdcdc;
          }
        }

      }


    }
    & .other-apply-container{

      padding-top: 48px;
      background-color: white;
      & .hex-container{
        margin-top: 50px;
        display: flex;
        width: 100%;

        justify-content: center;
        justify-content: space-around;
        & .hex{
          flex-basis: 55px;
        }
      }
    }
  }
</style>