<template>
<div class="orderList">
<el-card class="box-card">
<el-steps :active="actives" align-center>
<el-step title="选择类型" description=""></el-step>
<el-step title="申请代理" description=""></el-step>
<el-step title="等待审核" description=""></el-step>
<el-step v-if="isfff" title="申请成功" description=""></el-step>
<el-step v-if="!isfff" title="审核未通过" description=""></el-step>
</el-steps>
<div v-show="actives==1" style="padding: 150px;">
<el-row>
<el-col :span="8" v-if="isopen==1">
<div :class="[isselst==1?'selet_bdiv':'selet_div']" @click="isselst=1" >
<h3>区域代理</h3>
<span style="font-size:12px;">
依照传统行业渠道代理的区域进行划分，实现线上区域渠道代理的管理，常见的为省→市→区（县）代理构架。成为代理商后，根据系统产生的区域订单，代理可获得该订单相应的分红。
</span>
<div class="triangle-bottomright" v-show="isselst==1"> <i class="el-icon-check"
style="position:absolute;bottom:-30px;right:0px;color:#fff;"></i> </div>
</div>
</el-col>
<el-col :span="8" v-if="isopen1==1">
<div :class="[isselst==2?'selet_bdiv':'selet_div']" @click="isselst=2">
<h3>分销代理</h3>
<span style="font-size:12px;">
获得推广资格后，即可成为分销商代理，所推广的客户完成订单后，代理可获得该订单相应的分红。
</span>
<div class="triangle-bottomright" v-show="isselst==2"> <i class="el-icon-check"
style="position:absolute;bottom:-30px;right:0px;color:#fff;"></i> </div>
</div>
</el-col>
<el-col :span="8" v-if="isopen2==1">
<div :class="[isselst==3?'selet_bdiv':'selet_div']" @click="isselst=3">
<h3>招商代理</h3>
<span style="font-size:12px;">
平台具备供应商入驻的功能，我们采用了招商员的机制。在获得招商代理资格后，推广入驻的供应商产生订单后，代理可获得该订单相应的分红。
</span>
<div class="triangle-bottomright" v-show="isselst==3"> <i class="el-icon-check"
style="position:absolute;bottom:-30px;right:0px;color:#fff;"></i> </div>
</div>
</el-col>
</el-row>
<el-button type="primary" @click="upclick()" style="display:block; margin:20px auto;">下一步</el-button>
</div>
<div v-show="actives==2">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="真实姓名：" prop="realname">
<el-input size="mini" v-model="ruleForm.realname" style="width:200px;"></el-input>
</el-form-item>
<el-form-item label="注册手机号：" prop="phone">
<el-input size="mini" v-model="ruleForm.phone" style="width:200px;"></el-input>
</el-form-item>
<el-form-item label="代理等级：" prop="area_type" v-if="isselst==1">
<el-select size="mini" v-model="ruleForm.area_type" @change="areaClick" placeholder="请选择活动区域"
style="width:200px;">
<el-option label="省级代理" :value="1"></el-option>
<el-option label="市级代理" :value="2"></el-option>
<el-option label="区级代理" :value="3"></el-option>
<el-option label="街道代理" :value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="代理区域：" prop="area_Id" v-if="isselst==1">
<el-cascader size="mini" ref="cascader" :key="areakey" v-model="addressId"
:props="cascaderProps" placeholder="请选择" style="width:300px;">
</el-cascader>
</el-form-item>
<el-form-item label="代理等级：" prop="level" v-if="isselst==2">
<el-select size="mini" v-model="ruleForm.level" @change="areaClick" placeholder="请选择活动区域"
style="width:200px;">
<el-option v-for="(item,index) in levellist" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="申请等级：" prop="level" v-if="isselst==3">
<el-select size="mini" v-model="ruleForm.level" @change="areaClick" placeholder="请选择活动区域"
style="width:200px;">
<el-option v-for="(item,index) in levellist" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="actives=1">上一步</el-button>
<el-button type="primary" @click="creatsForm('ruleForm')">下一步</el-button>
</el-form-item>
</el-form>
</div>
<div v-show="actives==3" style="padding-top:150px;text-align:center;">
<p>你的申请已提交！</p>
<p>审核约需要1-3个工作日，请等待审核。</p>
<p>期间服务人员可能会联系您核实身份，请注意电话接听。</p>
</div>
<div v-show="actives==4&&!isfff" style="padding-top:150px;text-align:center;">
<p>很遗憾，您本次提交的申请没有通过！</p>
<p>可点击下放按钮重新提交审核申请！</p>
<el-button type="primary" @click="actives=1">重新申请</el-button>
</div>
<el-dialog title="申请协议" :visible.sync="dialogVisible" width="40%" :show-close="false"
:before-close="handleClose" center>
<div style="height:400px;overflow-y:scroll;" v-html="distext">123132213</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">我已了解</el-button>
</span>
</el-dialog>
</el-card>
</div>
</template>
<script>
import { upaddress,checkisopen, addretail,addretailfx,addinvite, checkagent, getagreement,getaglevel } from '@/api/plug/plugindex'
import { parseTime } from '@/utils'
export default {
name: "channelindex",
data() {
let authBusValidator = (rule, value, callback) => {
if (this.addressId.length > 0) {
callback();
} else if (this.addressId.length === 0) {
callback(new Error("请选择代理区域"));
}
};
return {
isopen:1,
isopen1:1,
isopen2:1,
levellist:[],
distext: '',
dialogVisible: false,
isfff: true,
areakey: 1,
isselst: 1,
actives: 1,
ruleForm: {
area_Id: '',
area_type: 1,
phone: '',
realname: '',
level:''
},
cascaderProps: {
checkStrictly: false,
expandTrigger: "click",
emitPath: true,
lazy: true,
lazyLoad: this.lazyLoad,
value: "area_id",
label: "name",
leaf: "leaf",
},
addressId: [],
rules: {
realname: [
{ required: true, message: '请输入真实姓名', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' }
],
level: [
{ required: true, message: '请选择等级', trigger: 'change' }
],
area_type: [
{ required: true, message: '请选择代理等级', trigger: 'change' }
],
area_Id: [
{ required: true, validator: authBusValidator, message: '请选择代理区域' }
],
}
};
},
components: {
},
created() {
this.checkagents()
this.getisopen()
},
watch: {
},
methods: {
getisopen(){
checkisopen().then(res=>{
if(res.code==1){
if(res.data.area==1){
this.isopen=1
}else{
this.isopen=0
}
if(res.data.invite==1){
this.isopen1=1
}else{
this.isopen1=0
}
if(res.data.retail==1){
this.isopen2=1
}else{
this.isopen2=0
}
}
})
},
getaglevellist(val){
let data={
agent_type:val
}
getaglevel(data).then(res=>{
if(res.code==1){
this.levellist = res.data
}
})
},
handleClose() {
},
upclick(){
let data = {
agent_type: this.isselst
}
getagreement(data).then(res => {
if (res.code == 1) {
this.distext = res.data.agreement
if (res.data.is_agreement == 1) {
this.dialogVisible = true
}
this.actives=2
this.getaglevellist(this.isselst)
}
})
},
checkagents() {
checkagent().then(res => {
if (res.code == 1) {
if (res.data.is_agent == 1) {
if (res.data.status === 0) {
this.actives = 3
} else if (res.data.status === 1) {
this.actives = 5
this.isfff = true
if (localStorage.getItem('agentURL')) {
let url = localStorage.getItem('agentURL')
window.open(url)
} else {
var ht = document.location.protocol
window.open(ht+'//'+'agent.jxhh.com')
}
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push({ path: '/' })
} else if (res.data.status === 2) {
this.actives = 4
this.isfff = false
}
} else {
this.actives = 1
}
}
})
},
creatsForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if(this.isselst==1){
let data = {
agent_type:1,
real_name: this.ruleForm.realname,
contact_mobile: this.ruleForm.phone,
area_type: this.ruleForm.area_type,
area_Id: this.addressId[this.addressId.length - 1]
}
addretail(data).then(res => {
if (res.code == 1) {
this.actives = 3
} else {
this.$message({
message: res.message,
type: 'warning'
});
}
})
}
if(this.isselst==2){
let data = {
agent_type:2,
real_name: this.ruleForm.realname,
contact_mobile: this.ruleForm.phone,
level:this.ruleForm.level
}
addretailfx(data).then(res => {
if (res.code == 1) {
this.actives = 3
} else {
this.$message({
message: res.message,
type: 'warning'
});
}
})
}
if(this.isselst==3){
let data = {
agent_type:3,
real_name: this.ruleForm.realname,
contact_mobile: this.ruleForm.phone,
level:this.ruleForm.level
}
addinvite(data).then(res => {
if (res.code == 1) {
this.actives = 3
} else {
this.$message({
message: res.message,
type: 'warning'
});
}
})
}
} else {
console.log('error submit!!');
return false;
}
});
},
areaClick() {
this.areakey++
},
lazyLoad(node, resolve) {
this.getcustomerGetArea(node, resolve);
},
// 获取省市区地址
getcustomerGetArea(node, resolve) {
const level = node.level;
var params;
if (level === 0) {
params = {
pid: 0,
};
} else {
params = {
pid: node.value,
};
}
upaddress(params).then((res) => {
if (res.code == 1) {
var result;
if (level === 0) {
result = res.data;
result.forEach((item) => {
item.value = item.id;
item.label = item.name;
item.leaf = level;
item.children = [];
if (this.ruleForm.area_type == 1) {
item.leaf = level >= 0;
}
});
} else {
result = res.data;
result.forEach((item) => {
item.value = item.id;
item.label = item.name;
//这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上
if (this.ruleForm.area_type == 2) {
item.leaf = level >= 1;
}
if (this.ruleForm.area_type == 3) {
item.leaf = level >= 2;
}
if (this.ruleForm.area_type == 4) {
item.leaf = level >= 3;
}
});
}
resolve(result);
}
});
},
/** 图片转换为base64位 */
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
formatime(cellValue) {
console.log(cellValue)
return parseTime(cellValue, '{y}-{m}-{d}')
},
formatters(row, column, cellValue, index) {
console.log(cellValue)
return parseTime(cellValue, '{y}-{m}-{d}')
}
}
};
</script>
<style scoped>
.orderList {
height: 100%;
}
.box-card {
margin: 20px;
height: calc(100% - 40px);
}
.form_item {
margin-right: 20px;
}
.card-tip {
margin: 0 10px 10px 0;
}
.box-card /deep/ .el-card__body {
height: calc(100% - 45px);
overflow-y: scroll;
}
.card-tip dl {
margin: 21px;
}
.card-tip dl dt {
width: 64px;
height: 64px;
background: red;
float: left;
}
.card-tip dl dd {
width: calc(100% - 74px);
float: left;
margin-left: 10px;
}
.minibtn {
padding: 3px !important;
}
.text_tip {
width: 100%;
height: 38px;
}
.text_tip_m {
height: 30px;
line-height: 30px;
font-size: 16px;
color: #F24141;
}
.text_tip p {
width: calc(100% - 90px);
margin: 10px 0 0;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 这里是超出几行省略 */
overflow: hidden;
font-size: 12px;
}
.selet_div,
.selet_bdiv:hover {
cursor: pointer;
}
.selet_div {
width: 310px;
height: 180px;
padding: 10px;
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 5px;
position: relative;
}
.selet_bdiv {
color: #409eff;
border: 1px solid #409eff;
width: 310px;
height: 180px;
padding: 10px;
border-radius: 5px;
position: relative;
}
.triangle-bottomright {
width: 0;
height: 0;
border-bottom: 30px solid #409eff;
border-left: 30px solid transparent;
position: absolute;
right: 0;
bottom: 0;
}
.demo-ruleForm {
width: 600px;
margin: 100px auto 0;
}
</style>