数据处理基本完成

config/index.js

@@ -10,7 +10,13 @@ module.exports = {
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api': {
+        target: "https://dev407.33.cn",//设置你调用的接口域名和端口号 别忘了加http
+        changeOrigin: true,
+        pathRewrite:{}
+      }
+    },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST

mock/mock.json

@@ -0,0 +1,167 @@
+{
+  "country": {
+    "code": "200",
+    "ecode": 200,
+    "error": "OK",
+    "message": "OK",
+    "data": [
+      {
+        "en_name": "China",
+        "ch_name": "中国",
+        "code": "86",
+        "is_open": 1,
+        "sname": "CN"
+      },
+      {
+        "en_name": "France",
+        "ch_name": "法国",
+        "code": "33",
+        "is_open": 1,
+        "sname": "FR"
+      },
+      {
+        "en_name": "Hongkong",
+        "ch_name": "中国香港(地区)",
+        "code": "852",
+        "is_open": 1,
+        "sname": "HK"
+      },
+      {
+        "en_name": "Italy",
+        "ch_name": "意大利",
+        "code": "39",
+        "is_open": 1,
+        "sname": "IT"
+      },
+      {
+        "en_name": "Japan",
+        "ch_name": "日本",
+        "code": "81",
+        "is_open": 1,
+        "sname": "JP"
+      },
+      {
+        "en_name": "Kampuchea (Cambodia )",
+        "ch_name": "柬埔寨",
+        "code": "855",
+        "is_open": 1,
+        "sname": "KH"
+      },
+      {
+        "en_name": "Korea",
+        "ch_name": "韩国",
+        "code": "82",
+        "is_open": 1,
+        "sname": "KR"
+      },
+      {
+        "en_name": "Macao",
+        "ch_name": "中国澳门(地区)",
+        "code": "853",
+        "is_open": 1,
+        "sname": "MO"
+      },
+      {
+        "en_name": "Malaysia",
+        "ch_name": "马来西亚",
+        "code": "60",
+        "is_open": 1,
+        "sname": "MY"
+      },
+      {
+        "en_name": "Maldives",
+        "ch_name": "马尔代夫",
+        "code": "960",
+        "is_open": 1,
+        "sname": "MV"
+      },
+      {
+        "en_name": "Singapore",
+        "ch_name": "新加坡",
+        "code": "65",
+        "is_open": 1,
+        "sname": "SG"
+      },
+      {
+        "en_name": "Taiwan",
+        "ch_name": "中国台湾省(地区)",
+        "code": "886",
+        "is_open": 1,
+        "sname": "TW"
+      },
+      {
+        "en_name": "Thailand",
+        "ch_name": "泰国",
+        "code": "66",
+        "is_open": 1,
+        "sname": "TH"
+      },
+      {
+        "en_name": "United Kiongdom",
+        "ch_name": "英国",
+        "code": "44",
+        "is_open": 1,
+        "sname": "GB"
+      },
+      {
+        "en_name": "United States of America",
+        "ch_name": "美国",
+        "code": "1",
+        "is_open": 1,
+        "sname": "US"
+      },
+      {
+        "en_name": "Vietnam",
+        "ch_name": "越南",
+        "code": "84",
+        "is_open": 1,
+        "sname": "VN"
+      }
+    ]
+  },
+  "brokerquicklogin": {
+    "email": "",
+    "password": "lh681113",
+    "redirect_uri": "",
+    "os": "web",
+    "type": "sms",
+    "area": "86",
+    "logintype": "password",
+    "code": "",
+    "mobile": "13336158210",
+    "platform": "fx66"
+  },
+  "reset": {
+    "code": 200,
+    "error": "OK",
+    "message": "OK",
+    "data": {
+      "sid": "4zkh12Hf35zEvtoMwlHU",
+      "guide": "mg61kny06aw5gfua"
+    }
+  },
+  "apply": {
+    "code": 200,
+    "error": "OK",
+    "message": "OK",
+    "data": []
+  },
+  "applystatus": {
+    "code": 200,
+    "error": "OK",
+    "message": "OK",
+    "data": {
+      "isApplyed": 1,
+      "info": {
+        "company": "宁波久安网络科技有限公司",
+        "contacts": "陈国安",
+        "mobile": "15867169712",
+        "'mobile_area'": 86,
+        "other": "QQ:476094464",
+        "country": "中国",
+        "area": "",
+        "status": "0"
+      }
+    }
+  }
+}

mock/mock_copy.json

@@ -0,0 +1,172 @@
+{
+  "country": {
+    "code": "200",
+    "ecode": 200,
+    "error": "OK",
+    "message": "OK",
+    "data": [
+      {
+        "en_name": "China",
+        "ch_name": "中国",
+        "code": "86",
+        "is_open": 1,
+        "sname": "CN"
+      },
+      {
+        "en_name": "France",
+        "ch_name": "法国",
+        "code": "33",
+        "is_open": 1,
+        "sname": "FR"
+      },
+      {
+        "en_name": "Hongkong",
+        "ch_name": "中国香港(地区)",
+        "code": "852",
+        "is_open": 1,
+        "sname": "HK"
+      },
+      {
+        "en_name": "Italy",
+        "ch_name": "意大利",
+        "code": "39",
+        "is_open": 1,
+        "sname": "IT"
+      },
+      {
+        "en_name": "Japan",
+        "ch_name": "日本",
+        "code": "81",
+        "is_open": 1,
+        "sname": "JP"
+      },
+      {
+        "en_name": "Kampuchea (Cambodia )",
+        "ch_name": "柬埔寨",
+        "code": "855",
+        "is_open": 1,
+        "sname": "KH"
+      },
+      {
+        "en_name": "Korea",
+        "ch_name": "韩国",
+        "code": "82",
+        "is_open": 1,
+        "sname": "KR"
+      },
+      {
+        "en_name": "Macao",
+        "ch_name": "中国澳门(地区)",
+        "code": "853",
+        "is_open": 1,
+        "sname": "MO"
+      },
+      {
+        "en_name": "Malaysia",
+        "ch_name": "马来西亚",
+        "code": "60",
+        "is_open": 1,
+        "sname": "MY"
+      },
+      {
+        "en_name": "Maldives",
+        "ch_name": "马尔代夫",
+        "code": "960",
+        "is_open": 1,
+        "sname": "MV"
+      },
+      {
+        "en_name": "Singapore",
+        "ch_name": "新加坡",
+        "code": "65",
+        "is_open": 1,
+        "sname": "SG"
+      },
+      {
+        "en_name": "Taiwan",
+        "ch_name": "中国台湾省(地区)",
+        "code": "886",
+        "is_open": 1,
+        "sname": "TW"
+      },
+      {
+        "en_name": "Thailand",
+        "ch_name": "泰国",
+        "code": "66",
+        "is_open": 1,
+        "sname": "TH"
+      },
+      {
+        "en_name": "United Kiongdom",
+        "ch_name": "英国",
+        "code": "44",
+        "is_open": 1,
+        "sname": "GB"
+      },
+      {
+        "en_name": "United States of America",
+        "ch_name": "美国",
+        "code": "1",
+        "is_open": 1,
+        "sname": "US"
+      },
+      {
+        "en_name": "Vietnam",
+        "ch_name": "越南",
+        "code": "84",
+        "is_open": 1,
+        "sname": "VN"
+      }
+    ]
+  },
+  "brokerquicklogin": {
+    "code": 200,
+    "ecode": 1002,
+    "error": "OK",
+    "message": "OK",
+    "data": {
+      "access_token": "1f2a8c4d7e9af9e92df3c690aeaab284048c9a3d",
+      "expires_in": 3600000,
+      "token_type": "bearer",
+      "scope": null,
+      "userid": "10004",
+      "refresh_token": "56481a96cae0fa617c5c2878c2c09b556d82eef1",
+      "code": 200,
+      "group": "user"
+    }
+  },
+  "reset":{
+    "code":200,
+    "error":"OK",
+    "message":"OK",
+    "data":{
+      "sid":"4zkh12Hf35zEvtoMwlHU",
+      "guide":"mg61kny06aw5gfua"
+    }
+  },
+  "apply":{
+    "code":200,
+    "error":"OK",
+    "message":"OK",
+    "data":[
+    ]
+  },
+  "applystatus":{
+    "code":200,
+    "error":"OK",
+    "message":"OK",
+    "data":{
+      "isApplyed":1,
+      "info":{
+        "company":"宁波久安网络科技有限公司",
+        "contacts":"陈国安",
+        "mobile":"15867169712",
+        "'mobile_area'":86,
+        "other":"QQ:476094464",
+        "country":"中国",
+        "area":"",
+        "status":"0"
+      }
+    }
+  }
+}

mock/router.json

@@ -0,0 +1,7 @@
+{
+  "/api/data/*": "/$1",
+  "/api/broker/*": "/$1",
+  "/api/member/*": "/$1",
+  "/api/send/*":"/$1"
+
+}

package.json

@@ -11,7 +11,8 @@
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "mockfaker": "json-server --watch mock/mock.json   --routes mock/router.json -d 150 --port 9090"
   },
   "dependencies": {
     "axios": "^0.18.0",

src/assets/connectAdress/adress.js

@@ -0,0 +1,15 @@
+// let pre='http://localhost:9090/api';
+let pre='/api';
+let address={
+  getCountryList:'/data/country',
+  postLogin:'/member/brokerquicklogin',
+  findPwd:'/send/reset',
+  postApply:'/broker/apply',
+  getApplyStatus:'/broker/applystatus',
+  postRegister:'/broker/register',
+};
+
+for(let i in address){
+  address[i]=pre+address[i];
+}
+module.exports=address;

src/components/header.vue

@@ -1,11 +1,20 @@
 <template>
-    <div class="header-container" :class="{'offset':isOffset||fixTop,'topped':fixTop}">
+    <div class="header-container" :class="{'offset':isOffset||fixTop}">
       <div class="inner-container">
         <img class="brand" :src="isOffset?require('../assets/logo-rev.png'):require('../assets/mainLogo.png')"/>
         <ul class="header-tab">
           <li class="header-tab-item" :class="{'active':$route.path==='/index'}" @click="$router.push('/index')">首页</li>
-          <li class="header-tab-item" :class="{'active':$route.path==='/proxy-apply'} " @click="$router.push('/proxy-apply')">申请代理</li>
+          <li class="header-tab-item" :class="{'active':$route.path==='/proxy-apply'} " @click="$router.push('/proxy-apply')"><i class="badge">HOT</i>申请代理</li>
         </ul>
+        <div class="log-box" v-if="!isLogin">
+          <p class="register">注册</p>
+          <p class="divider">|</p>
+          <p class="login">登录</p>
+        </div>
+        <div class="logged-box" v-else>
+          <div class="username"><i class="iconfont icon">&#xe61a;</i> {{loginAccount}} </div>
+          <div class="logout"><i class="iconfont icon">&#xe620;</i>退出</div>
+        </div>
       </div>
     </div>
 </template>
@@ -13,7 +22,7 @@
 <script>
     export default {
       name: "headerComponent",
-      props:['fixTop'],
+      props:['fixTop','isLogin','loginAccount'],
       data(){
         return{
           isTopped:this.fixTop,
@@ -51,13 +60,80 @@
       position: relative!important;
     }
   }
-
+   .badge{
+    position: absolute;
+    background-color: #ff4e00;
+    color: #fff;
+    display: block;
+    width: 38px;
+    height: 18px;
+    line-height: 18px;
+    font-size: 12px;
+    border-radius: 2px;
+    top: 8px;
+    right: 0;
+    &:after{
+      content: "";
+      width: 0;
+      height: 0;
+      position: absolute;
+      /*z-index: -1;*/
+      bottom: 0;
+      left: 30%;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 14px solid #ff4e00;
+      margin-bottom: -8px;
+      transform: rotate(30deg);
+    }
+  }
   .inner-container{
     position: relative;
     width: 1200px;
     margin: 0 auto;
     display: flex;
     flex-direction: row;
+    & .logged-box{
+      position: absolute;
+      right: 0;
+      top:0;
+      /*float: right;*/
+      color:white;
+      display: flex;
+      align-items: center;
+      height: 80px;
+      font-size: 14px;
+      & .icon{
+        font-size: 20px;
+        color: #999;
+        padding-right: 5px;
+      }
+      & .username{
+        margin-right: 10px;
+      }
+      & .logout{
+        cursor: pointer;
+      }
+    }
+    & .log-box{
+      position: absolute;
+      right: 0;
+      top:0;
+      /*float: right;*/
+      color:white;
+      display: flex;
+      width: 84px;
+      align-items: center;
+      height: 80px;
+      font-size: 14px;
+      & .register{
+        color: #008be0;
+      }
+      & .divider{
+        color:#3290cf;
+        margin: 0 5px;
+      }
+    }
     & .brand{
       position: absolute;
       width: 100px;
@@ -71,12 +147,14 @@
       display: flex;
       flex-direction: row;
       & .header-tab-item{
+        position: relative;
         font-size: 14px;
         width: 100px;
         height: 80px;
         line-height: 80px;
         cursor: pointer;
         color: white;
+
         &.active{
           color: @primaryBlue;
           background-color: white;
@@ -86,7 +164,9 @@
 
   }
   .header-container.offset{
-
+    & .logged-box{
+      color:black;
+    }
     background-color: white;
     & .header-tab .header-tab-item {
 

src/components/loginBox.vue

@@ -10,8 +10,8 @@
                 <el-option
                   v-for='item,index in areaOptions'
                   :key="index"
-                  :label="item.label"
-                  :value="item.value">
+                  :label="item.ch_name"
+                  :value="item.code">
                 </el-option>
               </el-select>
             </el-input>
@@ -19,7 +19,7 @@
               <template slot="prepend"><i  class="prepend-icon iconfont">&#xe600;</i> </template>
             </el-input>
           </div>
-          <div v-if="checkBoxState('','login','code',2)||checkBoxState('phone','find','','')"  class="code-container">
+          <div v-if="checkBoxState('','login','code',2)||checkBoxState('phone','find','','')||checkBoxState('','set','','')"  class="code-container">
             <div class="code-input-inner">
               <el-input  class="special-input"  placeholder="请输入验证码" v-model="loginInfo.code"></el-input>
               <button class="send-code-button" @click="sendMessage" :class="{'disabled':disableSend}">{{sendButtonText}}</button>
@@ -27,8 +27,8 @@
             <p class="no-code-notice" v-if="showNoCodeNotice&&checkBoxState('','set','','')">收不到短信？试试 <a class="notice-link" href="#">语音验证码</a></p>
 
           </div>
-          <div v-if="checkBoxState('','login','pwd',2)||checkBoxState('phone','find','','')"  class="password-container">
-            <el-input class="special-input" type="password" placeholder="请输入内容" v-model="loginInfo.password">
+          <div v-if="checkBoxState('','login','pwd',2)||checkBoxState('phone','find','','')||checkBoxState('','set','','')"  class="password-container">
+            <el-input class="special-input" type="password" placeholder="请输入内容" @change="disableAction=!loginInfo.password" v-model="loginInfo.password">
               <template slot="prepend"><i  class="prepend-icon iconfont">&#xe6c5;</i> </template>
               <i slot="suffix" class="el-input__icon iconfont">&#xe653;</i>
             </el-input>
@@ -36,7 +36,7 @@
           <div class="action-container">
             <div class="login-action" v-if="checkBoxState('','login','',2)">
               <div class="login-action__phone" v-if="checkBoxState('phone','login','code',2)">
-                <el-checkbox label="我已了解风险提示！" v-model="loginInfo.checkItem"></el-checkbox>
+                <el-checkbox label="我已了解风险提示！" @change="disableAction=!loginInfo.checkItem" v-model="loginInfo.checkItem"></el-checkbox>
               </div>
               <div class="login-action__pwd" v-if="checkBoxState('','login','pwd',2)">
                 <el-checkbox label="记住密码" v-model="loginInfo.rememberPwd"></el-checkbox>
@@ -44,11 +44,14 @@
               </div>
             </div>
             <div class="set-action" v-if="checkBoxState('','set','',2)">
-              <p class="go-back" @click="buttonTextChange();switchNoticeTextChange();">返回</p>
+              <p class="go-back" @click="handleGoBack">返回</p>
             </div>
             <div class="find-action" v-if="checkBoxState('','find','','')">
               <p class="go-back" @click="handleGoBack">返回</p>
             </div>
+            <div class="register-action" v-if="checkBoxState('','login','',1)">
+              <a class="register" @click="handleRegister">立即注册</a>
+            </div>
           </div>
           <div class="button-container">
             <p class="top-notice no-code-notice" v-if="showNoCodeNotice&&checkBoxState('','login','','')">收不到短信？试试 <a class="notice-link" href="#">语音验证</a></p>
@@ -117,15 +120,12 @@
             },
           },
           areaOptions:[
-            {
-              label:'中国',
-              value:'+86'
-            }
+
           ],
           buttonText:'',
           switchNoticeText:'',
           loginInfo:{
-            selectArea:'+86',
+            selectArea:'86',
             account:'',
             code:'',
             password:'',
@@ -164,15 +164,11 @@
       mounted(){
         this.buttonText=this.buttonTextChange();
         this.switchNoticeText=this.switchNoticeTextChange();
+        this.$http.get(this._ajaxAdress.getCountryList).then((response)=>{
+          this.areaOptions=response.data.data;
+        })
         // this.type.password='psw';
       },
-      // watch:{
-      //   type:function () {
-      //     this.setTypeFullCode()
-      //   },
-      //   deep:true
-      //
-      // },
       methods:{
         changeTab(id){
           if(this.tabList.length<2){
@@ -257,6 +253,11 @@
           this.textChange();
 
         },
+        handleRegister(){
+          this.type.action='set';
+          this.type.step=2;
+          this.textChange();
+        },
         handleGoBack(){
           this.type.action='login';
           this.textChange();
@@ -300,13 +301,147 @@
           }
           return ''
         },
+        setUrlParams(obj){
+          let param = new URLSearchParams();
+          for(let item in obj){
+            param.append(item,obj[item]);
+          }
+          return param
+        },
         handleActionClick(){
           if(this.disableAction)return;
-          if(this.checkBoxState('email','find','','')){
-            console.log(123)
+          this.disableAction=true;
+          if(this.checkBoxState('','login','',2)){//登录
+            let params={
+              'email':'',
+              'password':'',
+              'redirect_uri':'https://dev407.33.cn',
+              'os':'web',
+              'type':'',
+              'area':'',
+              'logintype':'',
+              'code':'',
+              'mobile':'',
+              'platform':'fx66',
+              'broker_code':'04031632e48cd96e',
+            }
+            if(this.checkBoxState('','login','pwd',2)){
+              params.password=this.loginInfo.password
+              params.logintype='password'
+            }else{
+              params.code=this.loginInfo.code
+              params.logintype='code'
+            }
+
+            if(this.checkBoxState('email','login','pwd',2)){
+              params.email=this.loginInfo.account;
+              params.type='email';
+            }else{
+              params.mobile=this.loginInfo.account;
+              params.type='sms';
+              params.area=this.loginInfo.selectArea;
+            }
+            if(this.checkBoxState('email','login','code',2)){
+              params.email=this.loginInfo.account;
+              params.type='email';
+            }else{
+              params.mobile=this.loginInfo.account;
+              params.type='sms';
+              params.area=this.loginInfo.selectArea;
+            }
+            this.$http.post(this._ajaxAdress.postLogin,this.setUrlParams(params)).then((response)=>{//todo 将get改为post
+              if(response.data.code==200){
+                this.$emit('loginSuccess');
+                localStorage.setItem('token',response.data.data.access_token);
+                localStorage.setItem('username',(this.checkBoxState('phone','','','')?this.loginInfo.selectArea:'')+this.loginInfo.account)
+              }else{
+                this.$notify({
+                  title: '提示',
+                  message: response.data.message,
+                  type: 'warning'
+                });
+              }
+
+              this.disableAction=false;
+            })
+
           }
-          if(this.checkBoxState('phone','login','',2)){
-            console.log(this.loginInfo.selectArea+this.loginInfo.account);
+          if(this.checkBoxState('','find','','')){//密码找回
+            let params={
+              'email':'',
+              'os':'web',
+              'type':'',
+              'area':'',
+              'mobile':'',
+              'platform':'fx66',
+            }
+            if(this.checkBoxState('email','find','','')){
+              params.email=this.loginInfo.account;
+            }else{
+              params.mobile=this.loginInfo.account;
+              params.area=this.loginInfo.selectArea;
+            }
+            this.$http.post(this._ajaxAdress.findPwd,this.setUrlParams(params)).then((response)=>{
+              if(response.data.code==200){
+                if(this.checkBoxState('email','find','','')){
+                  this.$notify({
+                    title: '成功',
+                    message: '你的邮箱验证码已经发送到你的邮箱\n请前往修改密码！',
+                    type: 'success'
+                  })
+                }
+              }else{
+                this.$notify({
+                  title: '提示',
+                  message: response.data.message,
+                  type: 'warning'
+                });
+              }
+
+              this.disableAction=false;
+
+
+
+            })
+
+          }
+          if(this.checkBoxState('','set','','')){
+            let params={
+              'email':'',
+              'password':'',
+              'type':'',
+              'area':'',
+              'code':'',
+              'mobile':'',
+            }
+            params.code=this.loginInfo.code;
+            params.password=this.loginInfo.password;
+            if(this.checkBoxState('email','set','','')){
+              params.email=this.loginInfo.account;
+              params.type='email';
+            }else{
+              params.mobile=this.loginInfo.account;
+              params.type='sms';
+              params.area=this.loginInfo.selectArea;
+            }
+            this.$http.post(this._ajaxAdress.postRegister,this.setUrlParams(params)).then((response)=>{//todo 将get改为post
+              if(response.data.code==200){
+                this.$notify({
+                  title: '成功',
+                  message:'注册成功',
+                  type: 'success'
+                });
+              }else{
+                this.$notify({
+                  title: '提示',
+                  message: response.data.message,
+                  type: 'warning'
+                });
+              }
+
+              this.disableAction=false;
+            })
+
           }
           if(this.checkBoxState('','','',1)&&!this.checkBoxState('email','find','','')){
             this.type.step+=1;
@@ -458,12 +593,27 @@
 
         }
         & .find-action{
+          & .go-back{
+            float: right;
+          }
+          text-align: right;
+          cursor: pointer;
+        }
+        & .set-action{
+          & .go-back{
+            float: right;
+          }
           text-align: right;
           cursor: pointer;
         }
       }
     }
   }
+  .register{
+    float: left;
+    cursor: pointer;
+    color:@primaryBlue;
+  }
   .disabled{
     background-color: #dcdcdc!important;
     cursor: default!important;

src/main.js

@@ -10,8 +10,10 @@ import 'element-ui/lib/theme-chalk/index.css';
 import './assets/css/general.css';
 import './assets/less/_variable.less';
 import './assets/less/rewrite.less'
+import Address from './assets/connectAdress/adress.js';
 // import  '//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css'
 Vue.prototype.$http=axios;
+Vue.prototype._ajaxAdress=Address;
 Vue.config.productionTip = false
 Vue.use(ElementUI);
 

src/views/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <header-component></header-component>
+    <header-component :is-login="isLogin" :login-account="loginAccount"></header-component>
     <el-carousel indicator-position="none" arrow="never" height="900px">
       <el-carousel-item v-for="item,index in 3" :key="index">
         <div class="banner" :id="'banner'+index">
@@ -13,9 +13,14 @@
     </el-carousel>
     <div class="position-box">
       <div class="login-box">
-        <div class="box-inner">
-          <login-box></login-box>
+        <div  class="box-inner">
+          <login-box @loginSuccess="isLogin=true;loginAccount=localStorage.getItem('username')" v-if="!isLogin" class="login-box-com"></login-box>
+          <div v-else class="logged-box">
+            <h1 class="title">欢迎您!{{loginAccount}}</h1>
+            <button class="logged-apply-btn">申请代理商</button>
+          </div>
         </div>
+
       </div>
     </div>
     <proxy-banner></proxy-banner>
@@ -153,6 +158,8 @@
               imgUrl:require('../assets/add04.png')
             }
           ],
+          isLogin:false,
+          loginAccount:'123456789',
           infoDataList:[
             {
               icon:'&#xe648;',
@@ -177,6 +184,13 @@
           ]
         }
       },
+      mounted(){
+        let username=localStorage.getItem('username')
+        if(username){
+          this.isLogin=true;
+          this.loginAccount=username;
+        }
+      },
       methods:{
 
       }
@@ -226,16 +240,38 @@
     position: absolute;
     right: 0;
     top:180px;
-    width: 390px;
-    height: 526px;
+    /*width: 390px;*/
+    /*height: 526px;*/
     background-color: rgba(255, 255, 255, 0.4);
     padding: 15px;
     & .box-inner{
       position: relative;
-      height: 100%;
-      width: 100%;
+      width: 360px;
       background-color: white;
+      & .login-box-com{
+        height: 496px;
+
+      }
+      & .logged-box{
+        padding: 15px;
+        & .title{
+          font-size: 25px;
+          color: #1a6fa6;
+        }
+        & .logged-apply-btn{
+          background-color: white;
+          margin-top: 50px;
+          width: 100%;
+          height: 50px;
+          line-height: 50px;
+          border: 1px solid #d2d2d2;
+          /*background-color: transparent;*/
+          margin-bottom: 20px;
+          font-size: 18px;
+        }
+      }
     }
+
   }
   .main-currency-container{
     height: 910px;

src/views/proxyApply.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <header-component fix-top="1"></header-component>
+    <header-component :is-login="isLogin" :login-account="loginAccount" fix-top="1"></header-component>
     <div class="banner">
     </div>
     <div class="main-container">
@@ -16,64 +16,77 @@
         <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">
-          <el-form 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.label"
-                    :value="item.value">
-                  </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="请选择">
+          <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 provOptions'
+                      v-for='item,index in areaOptions'
                       :key="index"
-                      :label="item.label"
-                      :value="item.value">
+                      :label="item.ch_name"
+                      :value="item.code">
                     </el-option>
                   </el-select>
-                </el-col>
-              </el-row>
-            </el-form-item>
-            <el-form-item>
-              <button class="apply-button">立即申请</button>
-            </el-form-item>
-          </el-form>
-          <p class="bottom-notice">*您好，我们尊重每一个客户的隐私。一旦提交了以上内容则表明您同意
-            FX66使用以上提供的信息与您联系，为您解答您所咨询的产品及服务。</p>
-          <div class="apply-rule"><p class="rule-text">查看代理商申请标准</p></div>
+                </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>
@@ -106,22 +119,20 @@
       components: {HexagonBlock, SpecialTitle, HeaderComponent},
       data(){
         return{
-          step:2,
+          step:1,
+          isLogin:false,
+          loginAccount:'123456789',
           form:{
             companyName:'',
             name:'',
-            phonePrefix:'+86',
+            phonePrefix:'86',
             phone:'',
             otherContact:'',
             country:'',
             prov:'',
           },
-          areaOptions:[
-            {
-              label:'中国',
-              value:'+86'
-            }
-          ],
+          disableAll:false,
+          areaOptions:[],
           countryOptions:[
             {
               label:'中国',
@@ -134,6 +145,96 @@
               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'
+              });
+            }
+          })
+
+
         }
       }
     }
@@ -258,9 +359,32 @@
       }
       & .form-container{
         padding-top: 48px;
-        width: 550px;
-        margin: 50px auto;
+        /*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%;
@@ -296,12 +420,17 @@
           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;