fx66/src/views/brokers/nBodyone.vue

<template>
	<div class="bheader">
    <!-- 弹框 -->
    <div class="tanchuang">
      <el-dialog
      :visible.sync="dialogVisible" width="600px" center class='dialog-box'>
      <span class="dialog-content"><img src="../../../static/img/warning.png" height="30" width="30" alt=""><p>登陆后才可申请经纪商！</p></span><br>
      <button @click='toLogin()'>立即登陆</button>
      </el-dialog>
    </div>

		<div class="banner"></div>
		<div class="bcontent">
			<div class="tablist">
				<el-steps :active="active" finish-status="success" align-center :space="310">
				  <el-step title="填写申请信息"></el-step>
				  <el-step title="审核中"></el-step>
				  <el-step title="审核通过"></el-step>
				</el-steps>
			</div>
			<div class="apply-form">
				<div class="title-line">
					<h2>经纪商申请</h2>
				</div>
				<div class="apply-form-box">
					<!-- 申请标准 -->
					<div class="appstandard">
						<h4>经纪商申请标准：</h4>
						<h5>经纪商是具有一定资源并能独立运营的公司、机构或团体。</h5>
						<p v-for='stand in standList'>{{stand.word}}</p>
					</div>
					<!-- 表单 -->
					<div class="form-content">
						<el-form ref="form" :model="form" label-width="80px">
						  <el-form-item label="公司/机构名称 :">
						    <el-input v-model="form.name" placeholder="请输入您所在的公司或者机构名称"></el-input>
						  </el-form-item>
						  <el-form-item label="姓名 :">
						    <el-input v-model="form.contacts" placeholder="请输入您的姓名"></el-input>
						  </el-form-item>
						  <el-form-item label="手机号 :">
								<el-input placeholder="请输入您的手机号码" v-model="form.mobile" class="input-with-select">
  							  <el-select v-model="form.mobile_area" slot="prepend" placeholder="请选择" class='tel-select'>
  							    <el-option :label="msg.ch_name" :value="msg.code" v-for='msg in telarea'></el-option>
  							  </el-select>
  							</el-input>
						  </el-form-item>
						  <el-form-item label="其他联系方式 :">
						    <el-input type="textarea" v-model="form.other" placeholder="请输入您的其他联系方式 如: 微信、邮箱等"></el-input>
						  </el-form-item>
						  <el-form-item label="所在地 :">
								  <el-select v-model="form.country" placeholder="所属国家" class='local'>
								    <el-option
								      v-for="item in opcountry"
                      :label="item.ch_name"
                      :value="item.ch_name">
								    </el-option>
								  </el-select>
								  <el-select v-model="form.area" placeholder="所属省份" class='local' :disabled='chcity'>
								    <el-option
								      v-for="item in city"
								      :label="item.name"
								      :value="item.name">
								    </el-option>
								  </el-select>
						  </el-form-item>
						  <button type='button' class="apply-btn" @click='apply()'>立即申请</button>
						</el-form>
						<p class="tip">*您好，我们尊重每一个客户的隐私。 一旦提交了以上内容则表明您同意FX66使用以上提供的信息与您联系，为您解答您所咨询的产品及服务。</p>
					</div>
				</div>
				<!-- 底部 -->
				<div class="server-bottom">
					<div class="bt-title">
						<hr>
						<h3>联系我们 快速申请</h3>
						<hr>
					</div>
					<h4>Feel Free to Contact Us</h4>
					<ul class="serverList">
						<li @mouseenter='ser1=true' @mouseleave='ser1=false'>
							<img src="../../../static/img/phone1.png" v-show='ser1==false'>
							<img src="../../../static/img/phoneHover.png" v-show='ser1==true'>
							<p>86-17354718363</p>
						</li>
						<li @mouseenter='ser2=true,kefu=true' @mouseleave='ser2=false,kefu=false'>
							<img src="../../../static/img/wx.png" v-show='ser2==false'>
							<img src="../../../static/img/wxHover.png" v-show='ser2==true'>
							<p>fx66客服</p>
						</li>
					</ul>
					<img src="../../../static/img/fx66kefufu.jpg" class="kefu" v-show='kefu==true'>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	export default {
    data() {
      return {
        dialogVisible: false,
        regshow:2,
        active: 0,
        ser1:false,
        ser2:false,
        kefu:false,

        serverListpic:[
        	{
        		serverhover:false,
        		src1:'../../../static/img/phone1.png',
        		src2:'../../../static/img/phoneHover.png',
        		msg:'86-17354718363'
        	},
        	{
        		serverhover:false,
        		src1:'../../../static/img/wx.png',
        		src2:'../../../static/img/wxHover.png',
        		msg:'fx66客服'
        	}
        ],
        standList:[
        	{
        		word:'1.经纪商所辖客户交易手续费的一部分作为返佣；'
        	},
        	{
        		word:'2.经纪商可自行设置客户的提款手续费标准；'
        	},
        	{
        		word:'3.经纪商可招募代理商，并在经纪商后台调整代理商返佣标准；'
        	},
        	{
        		word:'4.经纪商所辖客户有不当得利的行为（恶意刷单、利用BUG等），手续费不返还；'
        	},
        	{
        		word:'5.经纪商可在后台查看直发客户及代理客户的交易统计表；'
        	}
        ],
        telarea:[],
        options: [],
        //表单数据
        Authorization:'',
        chcity:false,       
        telarea:[],
        opcountry: [],
        city:[],
        form: {
          company:'',
          contacts: '',
          mobile:'',
          mobile_area:'',
          other: '',
          country:'',
          area:'',
        },    
      }; 
    },
    
    methods: {
      toLogin: function(){
        this.dialogVisible = false;
        this.$router.push({path:'/home'});
      },
      msgSave: function(){
        console.log(this.form);
        sessionStorage.setItem('msgform',JSON.stringify(this.form));
        sessionStorage.setItem('country',this.country);
        sessionStorage.setItem('area',this.area);
      },
      apply:function(){
        const Form = this.form;
        const params = new URLSearchParams();
        for (let item in Form){
          params.append(item,Form[item]);
        }
        this.axios.post('https://dev407.33.cn/api/broker/apply',params,{headers:{Authorization: this.Authorization}}).then((res)=>{
          const result = res.data;
            if(result.code!=200){
              if(result.code==1005){
                this.$notify({
                  title:'提示',
                  message: '请先登陆',
                  type:'warning',
                })
              }else{
                this.$notify({
                  title:'提示',
                  message: result.message,
                  type:'warning',
                })
              }
                // this.msgSave();
                // this.$router.push({path:'/verify'});
              }else{
                alert('申请成功');
                this.msgSave();
                this.$router.push({path:'/verify'});
              }
        })        
      },
      changemsg: function(){
        this.regshow = sessionStorage.getItem('regshow')? sessionStorage.getItem('regshow'):2;
        this.Authorization = sessionStorage.getItem('token_code')? sessionStorage.getItem('token_code'):'';
      },
      showDialog: function(){
        if(this.regshow!=4){
          this.dialogVisible = true;
        }else{
          this.dialogVisible = false;
        }
      }
    },
    computed:{
      country(){
        return this.form.country
      },
      area(){
        return this.form.area
      }
    },
    watch:{
      area: function(val){
        this.area = val;
      },
      country: function(val){
        this.form.country = val;
        if (this.form.country!='中国'){
          this.form.area='';
          this.chcity=true
        }else{
          this.chcity=false;          
        }
      },
      area: function(val){
        this.form.area = val
      },
      '$route': 'changemsg',
    },
    beforeRouteEnter(to, from, next){
      next(vm=>{
          if(vm.regshow!=4){
            vm.dialogVisible = true;
          }else{
            vm.dialogVisible = false;
          }
      })
    },
    mounted(){
      this.changemsg();
      this.showDialog();
      this.axios.get('https://dev407.33.cn/api/data/country',{}).then((res)=>{
        this.telarea = res.data.data;
      })
      this.axios.get('https://dev407.33.cn/api/data/country?type=name',{}).then((res)=>{
        this.opcountry = res.data.data;
      })
      this.axios.get('https://dev407.33.cn/api/data/city',{}).then((res)=>{
        this.city = res.data.data;
      })
    }
  }
</script>

<style scoped>
.bcontent{
	height: 1100px;
}
.tanchuang{
  width: 1200px;
  margin: 0 auto;
  .dialog-box{

  }
  .dialog-content{
    position: relative;
    top: 22px;
    font-size: 24px;
    color: #1a6fa6;
    text-align: center;
    img{
      float: left;
      position: relative;
      left: 120px;
      top: 18px;
    }
  }
  button{
    margin-left: 215px;
    border: 1px solid #e5e5e5;
    color: #1a6fa6;
    height: 35px;
    width: 120px;
    border-radius: 25px;
    margin-top: 30px;
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 700;
    transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    cursor: pointer;
  }
  button:hover{
    color: #fff;
    background: #1a6fa6;
  }
}
.bheader{
	position: relative;
	background: #f5f8ff;
	.banner{
		height: 400px;
		width: 100%;
		background: #ccc;
		margin-top: 75px;
		background: url('../../../src/assets/img/nbanner.png') no-repeat center center;
		margin-bottom: 10px;
	}

	.tablist{
		width: 1200px;
   	background: #fff;
   	margin: 0 auto;
   	margin-bottom: 10px;
   	height: 110px;
   	padding-top: 20px;
   	padding-left: 140px;
	}
	.tip{
		margin-top: 22px;
		padding-left: 28px;
    color: #3884d3;
    font-size: 14px;
	}
	.apply-form{
		background: #fff;
   	width: 1200px;
   	margin: 0 auto 20px;
   	.title-line{
   		border-bottom: 1px solid #e5e5e5;
   	  margin-bottom: 50px;
    	height: 80px;
    	h2{
    		line-height: 80px;
    		font-size: 24px;
   		  font-weight: 700;
    	}
   	}
   	.apply-form-box{
   		text-align: left;
    	margin: 0 75px;
    	color: #333;
    	display: flex;
   		.appstandard{
    		height: 320px;
  			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;

    		}
   		}
   		.appstandard: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;
   		}
   		.appstandard: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;
   		}
   		.form-content{
   			width: 480px!important;
    		margin-left: 40px;
    		.apply-btn{
    			line-height: 36px;
    			position: relative;
    			font-size: 14px;
    			display: block;
    			width: 342px;
    			margin-left: 138px;
    			border: 0;
    			border-radius: 0;
    			background-color: #0176c3;
    			color: #fff;
    			height: 40px;
    			line-height: 40px;
    			padding-top: 0;
          cursor: pointer;
    		}
    		.tel-select{
    			width: 130px;
    		}
    		.local{
    			width: 165px;
    		}
    		.local:nth-of-type(2){
					margin-left: 8px;
    		}
   		}   		
   	}
   	.server-bottom{
   			position: relative;
    		width: 1200px;
    		margin: 0 auto;
    		padding-top: 50px;
   			.bt-title{
   				width: 1200px;
					display: flex;
    			align-items: center;
    			justify-content: space-between;
    			hr{
    				width: 420px;
   					height: 1px;
   					background-color: #e5e5e5;
   					border: 0;
    			}
    			h3{
    				font-size: 25px;
    				font-weight: 700;
    				line-height: 1;
    			}
   			}
   			h4{
   				font-size: 16px;
    			color: #999;
    			margin-top: 12px;
   			}
   			.serverList{
					margin-top: 50px;
    			padding: 0 400px 70px;
    			display: flex;
    			justify-content: space-between;
    			li{
						img{
							margin-bottom: 20px;
						}
						
    				p{
    					line-height: 1;
    					font-size: 20px;
    					color:#2c3e50;
    				}
    			}
   			}
   			.kefu{
   				position: absolute;
   				top: 150px;
   				left: 850px;
					width: 120px;
					height: 120px;
				}
   		}
	}
}
</style>

<style>
	.bheader{
		.el-step__icon{
			border:2px solid #bfcbd9;
		}
		.el-step__icon-inner{
			color: #bfcbd9;
		}
		.is-process .el-step__icon{
			background: #bfcbd9;
		}
		.is-process .el-step__icon-inner{
			color:#fff;
		}
		.is-success .el-step__icon{
			background: #20a0ff;
			border: none;
		}
		.is-success .el-step__icon-inner{
			color: #fff;
		}
		.is-success .el-step__line{
			border-color: #20a0ff;
		}
		.el-step__main .is-success{
			color: #20a0ff;
		}
		.el-form-item{
			margin-bottom: 22px;
			width: 530px;
		}
		.el-form-item__label{

		}
		.el-form-item__content{
			width: 342px;
			float: left;
			margin-left: 0 !important;
		}
		.el-input__inner{
			height: 36px;
		}
		.el-select{
			display: inline-block;
    	position: relative;
    	.el-input{
    		display: block;
    		position: relative;
    		font-size: 14px;
    	}
		}
		.el-form-item__label{
			width: 138px !important;
			text-align: right;
   		vertical-align: middle;
   		float: left;
   		font-size: 14px;
   		color: #48576a;
   		line-height: 1;
   		padding: 11px 12px 11px 0;
   		box-sizing: border-box;
		}
		
		.el-dialog__close:before{
      width: 24px;
    }
  	.input-with-select .el-input-group__prepend {
   	 	background-color: #fff;
  	}
	}
</style>