fx66/src/views/apply.vue

<template>
  <div class="apply">
    <div class="banner">
    	<img src="../assets/img/apply-banner.png">
    </div>
		<div class="tab">
			<el-steps :active="active" finish-status="success" align-center space="306px">
			  <el-step title="填写申请信息"></el-step>
			  <el-step title="审核中"></el-step>
			  <el-step title="审核通过"></el-step>
			</el-steps>
		</div>
		<div class="apply-content">
			<div class="content-tab">
				<h2>经纪商申请</h2>
			</div>

			<template v-if="active!=2">
				<div class="from-box">
					<div class="left">
						<h4>经纪商申请标准:</h4>
						<h5>经纪商是具有一定资源并能独立运营的公司、机构或团体。</h5>
						<p>1.经纪商所辖客户交易手续费的一部分作为返佣；</p>
						<p>2.经纪商可自行设置客户的提款手续费标准；</p>
						<p>3.经纪商可招募代理商，并在经纪商后台调整代理商返佣标准；</p>
						<p>4.经纪商所辖客户有不当得利的行为（恶意刷单、利用BUG等），手续费不返还；</p>
						<p>5.经纪商可在后台查看直发客户及代理客户的交易统计表；</p>
					</div>
					<div class="right">
						<el-form ref="form" :model="applyForm" label-width="138px">
							<el-form-item label="公司/机构名称:" sizi="small">
						    <el-input v-model="applyForm.company" 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="手机号:">
						    <el-col :span="9">
						      <el-select v-model="applyForm.region" placeholder="请选择" >
							      <el-option v-for="item in contury" :label="item.ch_name" :value="item.code" :key="item.code"></el-option>
							    </el-select>
							  </el-col>
								<el-col :span="15">
							    <el-input v-model="applyForm.phoneNumber" placeholder="请输入您的手机号码"></el-input>
						    </el-col>
						  </el-form-item>
							<el-form-item label="其他联系方式:">
								<el-input type="textarea" :rows="2" placeholder="请输入您的其他联系方式 如：微信、邮箱等" v-model="applyForm.other">
								</el-input>
							</el-form-item>
							
							<el-form-item label="所在地:">
								<el-col :span="9">
						      <el-select v-model="applyForm.contury" placeholder="所属国家" @change="conturyChange">
							      <el-option v-for="item in contury" :label="item.ch_name" :value="item.code" :key="item.code"></el-option>
							    </el-select>
							  </el-col>
							  <el-col :span="15">
						      <el-select v-model="applyForm.province" placeholder="所属省份" :disabled='citydis'>
							      <el-option v-for="item in city" :label="item.name" :value="item.id" :key="item.id"></el-option>
							    </el-select>
							  </el-col>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="apply" :disable='applydis'>立即申请</el-button>
							</el-form-item>
						</el-form>
						<p>
	            *您好，我们尊重每一个客户的隐私。
	            一旦提交了以上内容则表明您同意FX66使用以上提供的信息与您联系，为您解答您所咨询的产品及服务。
	          </p>
					</div>
				</div>
				<div class="contact">
					<div class="contact-title">
						<hr>
						<h3>联系我们 快速申请</h3>
						<hr>
					</div>
					<h4>Feel Free to Contact Us</h4>
					<ul>
						<li>
							<img src="../assets/img/phone.png">
							<img src="../assets/img/phoneHover.png">
							<p class="goleft">86-17354718363</p>
						</li>
						<li>
							<img src="../assets/img/wx.png">
							<img src="../assets/img/wxHover.png">
							<p>fx66kefu</p>
							<img class="ewm" src="../assets/img/fx66kefufu.8b7368d.jpg" width="120">
						</li>
					</ul>
				</div>
			</template>
			
			<div class="apply-success" v-else>
				<img src="../assets/img/success.png" height="46px">
				<h2>恭喜您，已经成功申请成为经纪商！</h2>
				<p>您可用现在的账号和密码登录后台！如有疑问，可联系我们！</p>
				<el-button round>登陆后台</el-button>
			</div>
				
			
			
		</div>
		<contactWe/>
  </div>
</template>

<script>
import contactWe from '../components/contact-we.vue'
export default {
  name: 'apply',
  data () {
    return {
      active: 0,
      contury:[],
      city:[],
      citydis:true,
      applydis:false,
      applyForm: {
      	company:'',
        name: '',
        region: '',
        phoneNumber: '',
        other: '',
        contury:'',
        province:''
      }
    }
  },
  components:{
  	contactWe
  },
  mounted(){
  	if (!window.localStorage.username) {
  		alert('请先登陆')
  		this.$router.push('/')
  	}else{
  		this.$http.get("https://dev407.33.cn/api/broker/applystatus",{
  			headers:{
  				Authorization:'Bearer '+window.localStorage.token
  			}
  		})
  		.then(response=>{
  			if (response.data.data.isApplyed==0) {
  				this.active=0
  			}else if (response.data.data.isApplyed==1&&response.data.data.info.status==0) {
  				this.active=1
  				this.applyForm.company=response.data.data.info.company
  				this.applyForm.name=response.data.data.info.contacts
  				this.applyForm.region=response.data.data.info.mobile_area
  				this.applyForm.phoneNumber=response.data.data.info.mobile
  				this.applyForm.other=response.data.data.info.other
  				this.applyForm.contury=response.data.data.info.contury
  				this.applyForm.province=response.data.data.info.area
  				this.applydis=true
  			}else if (response.data.data.isApplyed==1&&response.data.data.info.status==1) {
  				this.active=2
  			}else if(response.data.data.isApplyed==1&&response.data.data.info.status==-1) {
  				this.active=0
  			}
  		})
  		this.$http.get('https://dev407.33.cn/api/data/country')
  		.then(response=>{
  			this.contury=response.data.data
  		})
  		this.$http.get('https://dev407.33.cn/api/data/city')
  		.then(response=>{
  			this.city=response.data.data
  		})
  	}
  },
  methods:{
  	conturyChange(){
  		if (this.applyForm.contury=='86') {
  			this.citydis=false
  		}else {
  			this.citydis=true
  			this.applyForm.province=''
  		}
  	},
  	apply(){
  		let parm = new URLSearchParams()
  		parm.append('company',this.applyForm.company)
  		parm.append('contacts',this.applyForm.name)
  		parm.append('mobile',this.applyForm.phoneNumber)
  		parm.append('other',this.applyForm.other)
  		parm.append('country',this.applyForm.contury)
  		parm.append('area',this.applyForm.province)
  		parm.append('mobile_area',this.applyForm.region)
  		this.$http.post('https://dev407.33.cn/api/broker/apply',{
  			headers:{
  				Authorization:'Bearer '+window.localStorage.token
  			},
  			data:parm
  		})	
  		.then(response=>{
  			if (response.data.code='200') {
  				alert('申请成功')
  				this.active=1
  				this.applydis=true
  			}
  		})
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.apply{
		padding-top: 75px;
		.banner{
			height: 400px;
			overflow: hidden;
			img{
				height: 100%;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.tab{
			width: 1200px;
			background: #fff;
			margin: 0 auto 10px;
			height: 110px;
			padding-left: 130px;
			padding-top: 20px;

		}
		.apply-content{
			width: 1200px;
			margin: 0 auto 20px;
			background: white;
			.content-tab{
				border-bottom: 1px solid #e5e5e5;
				margin-bottom: 50px;
				height: 80px;
				h2{
					font-size: 24px;
					line-height: 80px;
					font-weight: 700;
					text-align: center;
				}
			}
			.from-box{
				margin: 0 75px;
				color: #333;
				display: flex;
				.left{
					height: 320px;
					width: 530px;
					border: 1px solid #e5e5e5;
					padding: 20px;
					position: relative;
					h4{
						font-size: 16px;
						line-height: 1;
					}
					h5{
						font-size: 14px;
						margin-top: 20px;
						color: #0176c3;
					}
					p{
						margin-top: 20px;
    				font-size: 14px;
					}
					&::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;
				    z-index: 99;
					}
					&::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;
					}
				}
				.right{
					width: 480px;
					margin-left: 40px;
					.el-input__inner{
						height: 36px!important;
					}
					.el-form-item__label{
						line-height: 36px;
					}
					.el-form-item__content{
						line-height: 36px;
					}
					.el-button--primary{
						width: 100%;
						color: white;
						background: #0176c3;
						border: none;
						border-radius: 0;
						height: 40px;
					}
					p{
					  padding-left: 28px;
				    color: #3884d3;
				    font-size: 14px;
					}
				}
			}
			.contact{
			  position: relative;
		    width: 1200px;
		    margin: 0 auto;
		    padding-top: 50px;
		    text-align: center;
		    .contact-title{
					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;
		    }
		    ul{
		    	margin-top: 50px;
			    padding: 0 400px 70px;
			    display: flex;
			    justify-content: space-between;
			    li{
			    	width: 120px;
			    	img{
				    	margin-bottom: 20px;
				    }
				    p{
				    	font-size: 20px;
				    	line-height: 1;
				    	white-space:nowrap;
				    }
				    .goleft{
				    	margin-left: -15px;
				    }
				    img:nth-child(2){
							display: none;
				    }
				    &:hover img:nth-child(2){
							display: inline-block;
				    }
				    &:hover img:nth-child(1){
							display: none;
				    }
				    .ewm{
				    	display: none;
				    	position: absolute;
					    top: 150px;
					    right: 240px;
				    }
			    }
			    li:nth-child(2):hover .ewm{
			    	display: inline-block;
			    }
		    }
			}
			.apply-success{
				width: 1200px;
				margin: 30px auto 0;
				text-align: center;
				h2{
					font-size: 25px;
					margin-top: 30px;
				}
				p{
					font-size: 14px;
					color: #999999;
					margin-top: 30px;
					margin-bottom: 30px;
				}
				.el-button{
					font-weight: 700;
				}
			}
		}
	}
</style>