Fx66/src/views/ApplyAgent.vue

<template>
  <section class="apply-ctnr">
    <myheader></myheader>
    <div class="apply-content">
      <div class="banner">
        <img src="../assets/img/banner.png" alt="">
      </div>
      <div class="apply-tab">
        <el-steps :active="step" align-center >
          <el-step title="填写申请信息"></el-step>
          <el-step title="审核中"></el-step>
          <el-step title="申请通过"></el-step>
        </el-steps>
      </div>
      <div class="apply-form" v-if="!successshow">
        <div class="apply-title">
          <h2>经纪商申请</h2>
        </div>
        <div class="apply-form-box">  
          <div class="left-part">
            <h3>经纪商申请标准</h3>
            <h4>经纪商是具有一定资源并能独立运营的公司、机构或团体。</h4>
            <p>1.经纪商所辖客服交易手续费的一部分作为返佣；</p>
            <p>2.经纪商可自行设置客户的提款手续费标准；</p>
            <p>3.经纪商可招募代理商，并在经纪商后台调整代理商返佣标准；</p>
            <p>4.经纪商所辖客户有不当得利的行为（恶意刷单，利用BUG等），手续费不返还；</p>
            <p>5.经纪商可在后台查看直发客户及代理客户的交易统计表；</p>
          </div>
          <div class="right-part">
            <el-form label-position="right" label-width='138px' v-model="applyform">
              <el-form-item label="公司/机构名称:">
                <el-input placeholder="请输入您所在的公司或者机构名称" v-model="applyform.company" :disabled="unavailable"></el-input>
              </el-form-item>
              <el-form-item label="姓名:">
                <el-input placeholder="请输入您的姓名" v-model="applyform.contacts" :disabled="unavailable"></el-input>
              </el-form-item>
              <el-form-item label="手机号:">
                <el-col :span="10">
                  <el-select placeholder="请选择" v-model="applyform.mobile_area" :disabled="unavailable">
                    <el-option v-for="item in m_options" :key="item.code" :label="item.ch_name" :value="item.code"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="14">
                  <el-input placeholder="请输入您的手机号码" v-model="applyform.mobile" :disabled="unavailable"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="其它联系方式:">
                <el-input placeholder="请输入您的其它联系方式：如微信、邮箱等" type="textarea" v-model="applyform.other" :disabled="unavailable"></el-input>
              </el-form-item>
              <el-form-item label="所在地:">
                <el-col :span="12">
                  <el-select clearable placeholder='所属国家' v-model="applyform.country" :disabled="unavailable" @change="getCity">
                    <el-option
                      v-for="item in countryOptions" :key="item.sname" :label="item.ch_name" :value="item.sname"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="11">
                  <el-select clearable placeholder='所属省份' v-model="applyform.area" :disabled="unavailable||oversea">
                    <el-option
                      v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button :disabled="unavailable" :class="{ disbtn:unavailable }" @click="applyNow">立即申请</el-button>
              </el-form-item>
            </el-form>
            <p class="tip">*您好，我们尊重每一个客户的隐私。 一旦提交了以上内容则表明您同意FX66使用以上提供的信息与您联系，为您解答您所咨询的产品及服务。</p>
          </div>
        </div>
        <div class="serve-block">
          <div class="service-title">
            <hr>
            <h3>联系我们 快速申请</h3>
            <hr>
            <h4>Feel Free to Contact Us</h4>
          </div>
          <ul class="service-list">
            <li v-for="(item,index) in contactList" @mouseenter="showItem(index)" @mouseleave="showItem(index)">
              <img :src="item.baseUrl" v-show="!item.state">
              <img :src="item.hoverUrl" v-show="item.state">
              <p>{{ item.text }}</p>
            </li>
          </ul>
          <img src="../assets/img/fx66kefufu.jpg" v-if="wxshow" class="wximg">
        </div>
        <contactwe class="contact-block"></contactwe>
      </div>
      <div class="success-apply" v-if="successshow">
        <div class="apply-title">
          <h2>经纪商申请</h2>
        </div>
        <p>
          <i class="el-icon-circle-check"></i>
        </p>
        <h5>恭喜您已经成功成为经纪商!</h5>
        <p>您可以用现在的帐号和密码登录后台！如有疑问，可联系我们！</p>
        <button @click="loginBack">登录后台</button>
      </div>
      <div class="dialog-apply">
        <el-dialog
        class="dialog-content" :visible.sync="dialogVisible">
          <span class="content"><i class="el-icon-circle-check"></i>您的申请已经提交成功！</span>
          <p>我们会尽快通过电话与您沟通，请保持手机畅通，谢谢！</p>
        </el-dialog>
      </div>
      <div class="dialog-apply">
        <el-dialog class="dialog-content" :visible.sync="dialogtip">
          <span class="content">
            <i class="el-icon-warning"></i>登录后才可申请经纪商!
          </span><br>
          <button @click="gologin">立即登录</button>
        </el-dialog>
      </div>
    </div>
  </section>
</template>
<script>
  import myheader from '../components/Header.vue'
  import contactwe from '../components/ContactWe.vue'
  import {getInfo} from '../assets/js/common.js'
  export default{
    data(){
      return{
        formable:false,
        step:1,
        dialogtip:false,
        dialogVisible:false,
        successshow:false,
        unavailable:false,
        oversea:false,
        wxshow:false,
        m_options:[],
        countryOptions:[],
        cityOptions:[],
        contactList:[
          {
            baseUrl:require('../assets/img/phonebase.png'),
            hoverUrl:require('../assets/img/phoneHover.png'),
            state:false,
            text:'86-17354718363'
          },
          {
            baseUrl:require("../assets/img/wx.png"),
            hoverUrl:require("../assets/img/wxHover.png"),
            state:false,
            text:"fx66kefu"
          }
        ],
        applyform:{
          company:"",//公司名称
          contacts:"",//联系人姓名
          mobile_area:"",//手机地区
          mobile:"",//手机号
          other:"",//其它联系方式
          country:"",//国家
          area:"",//省份
        }
      }
    },
    created(){
      document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop=0;
    },
    mounted(){
      this.jumpdown();
      this.getCountry();
    },
    components:{
      myheader,
      contactwe
    },
    methods:{
      getApplyStatus(){
        getInfo(this,this.urlApi.applyStatue,"GET",'',function(res){
          if (res.code = 200) {
            if (res.data.isApply == 1) {
              switch(res.data.info.status == 0){
                case 0://待审核
                  this.step = 2;
                  this.disabled = true;
                  this.applyform = res.data.info;//因为刷新页面后，需要把数据再显示出来，所以需要进行赋值
                  this.$notify({
                    title: '提示',
                    message: '您的申请正在审核中！',
                    type: 'warning',
                    duration:'2000'
                  });
                  break;
                case 1://已通过
                  this.step = 3;
                  this.disabled = true;
                  this.applyform = res.data.info;
                  this.$notify({
                    title: '成功',
                    message: '您的申请已通过审核！',
                    type: 'success',
                    duration:'5000'
                  })
                  break;
                case -1:
                  this.getInfo = 1;
                  this.disabled = false;
                  this.$notify({
                    title: '提示',
                    message: '您的申请已被拒绝！',
                    type: 'warning',
                    duration:'2000'
                  });
              }
            }
          }
        });
      },
      applyNow(){
        var that = this;
        getInfo(this,this.urlApi.applyToAgent,"POST",this.applyform,function(res){
          if (res.code = 200) {
            that.getApplyStatus();
            that.dialogVisible = true;
          }
        })
      },
      getCountry(){
        getInfo(this,this.urlApi.phoneCountry,'GET','',(res)=>{
          this.m_options=res.data;
          this.countryOptions = res.data;
        });
      },
      getCity(){
        this.applyform.area = "";//初始化省份
        if (this.applyform.country == "CN") {//因为绑定的值是sname所以这里用CN判断，如果绑定的是code可以用86判断
          this.oversea = false;
          var that = this;//下方函数里的this会改变
          getInfo(this,this.urlApi.applyCountry,"GET","",function(res){
            if (res.code == 200) {
              that.cityOptions = res.data;
            }
          })
        }else{
          this.oversea = true;
        }
      },
      showItem(index){
        this.contactList[index].state = !this.contactList[index].state;
        if(index==1){
          this.wxshow = !this.wxshow;
        }
      },
      jumpdown(){
        document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop=400;
        //这里为什么要设置window.pageYOffset?设置它也不会跳转呀？
      },
      loginBack(){
        window.location.href = "https://pms.licai.cn/#/";
      },
      gologin(){
        this.$router.push({path:"/"});
      }
    }
  }
</script>
<style scoped>
  .apply-ctnr{
    background-color: #f5f8ff;
    .apply-content{
      padding-top: 75px;
      .banner{
        height: 400px;
        position: relative;
        overflow: hidden;
        margin-bottom: 10px;
        img{
          height: 100%;
          position: relative;
          left: 50%;
          transform: translateX(-50%);
          /* 这里为什么要这么写？ */
        }
      }
      .apply-tab{
        width: 1200px;
        background-color: #fff;
        margin: 0 auto;
        margin-bottom: 10px;
        height: 110px;
        padding-top: 20px;
      }
      .apply-form{
        width: 1200px;
        margin: 0 auto 20px;
        background-color: #fff;
        .apply-form-box{
          margin: 0 75px;
          color: #333;
          display: flex;
          text-align: left;
          .left-part{
            width: 525px;
            height: 320px;
            padding: 20px;
            position: relative;
            border: 1px solid var(--border-color);
            font-size: 14px;
            h3{
              font-size: 16px;
              line-height: 1;
            }
            h4{
              color: #0176c3;
              margin-top: 20px;
            }
            p{
              margin-top: 20px;
            }
            &:before{
              content: "";
              position: absolute;
              right: -10px;
              top: 50%;
              margin-top: -5px;
              border-left: 10px solid var(--border-color);
              border-top: 10px solid transparent;
              border-bottom: 10px solid transparent; 
            }
            &:after{
              content: '';
              position: absolute;
              right: -8px;
              top: 50%;
              margin-top: -5px;
              border-left: 10px solid #fff;
              border-top: 10px solid transparent;
              border-bottom: 10px solid transparent;
            }
          }
          .right-part{
            width: 480px;
            margin-left: 45px;
            .el-form{
              .el-button{
                width: 100%;
                background-color: #0176c3;
                color: #fff;
              }
              .disbtn{
                color: #bbb;
                background-color: #d1dbe5;
              }
            }
            .tip{
              padding-left: 28px;
              color: #3884d3;
              font-size: 14px;
            }
          }
        }
      }
      .serve-block{
        position: relative;
        width: 1200px;
        margin: 0 auto;
        padding-top: 50px;
        .service-title{
          h3{
            font-size: 25px;
          }
          h4{
            font-size: 16px;
          }
        }
        .service-list{
          margin-top: 50px;
          padding: 0 400px 70px;
          display: flex;
          justify-content: space-between;
          p{
            font-size: 20px;
            line-height: 1;
            margin-top: 20px;
          }
        }
        .wximg{
          width: 120px;
          position: absolute;
          top: 150px;
          right: 20%;
        }
      }
      .contact-block{
        position: fixed;
        right: 0px;
        top: 28%;
        z-index: 200;
      }
      .success-apply{
        width: 1200px;
        background-color: #fff;
        margin: 0 auto;
        margin-bottom: 10px;
        p{
          color: #666;
          font-size: 12px;
          i{
            font-size: 50px;
            color: green;
          }
        }
        h5{
          line-height: 80px;
          font-size: 24px;
          font-weight: 700;
        }
        button{
          border:1px solid #e5e5e5;
          color: #1a6fa6;
          height: 35px;
          width: 120px;
          border-radius: 25px;
          margin-top: 30px;
          margin-bottom: 60px;
          font-size: 16px;
          font-weight: 700;
          cursor: pointer;
        }
      }
      .dialog-apply{
        .dialog-content{
          margin:0 auto;
          width: 1200px;
          .content{
            font-size:24px;
            color: #1a6fa6;
            i{
              font-size: 26px;
              margin-right: 10px;
              color: #1a6fa6;
            }
          }
          p{
            margin-top: 20px;
            margin-bottom: 70px;
          }
          button{
            border:1px solid #e5e5e5;
            color: #1a6fa6;
            height: 35px;
            width: 120px;
            border-radius: 25px;
            margin-top: 30px;
            margin-bottom: 40px;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease 0s;
            cursor: pointer;
            &:hover{
              background-color:#1a6fa6;
              color: #fff;
            }
          }
        }
      }
    }
  }
</style>