index.vue

<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.retail==1){
                            this.isopen1=1
                        }else{
                            this.isopen1=0
                        }
                        if(res.data.invite==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>