blame | history | patch | commit | commitdiff | ignore whitespace
Helius
2022-05-27 4351e71d782741143a98f86f6648acd16689165f 
 zq-erp/src/main/resources/templates/views/admin/fenxiao/fenxiao-update.html


New file


@@ -0,0 +1,672 @@


<!DOCTYPE HTML>


<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">


<head>


    <meta charset="utf-8">


    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">


    <meta name="renderer" content="webkit|ie-comp|ie-stand">


    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


    <meta name="viewport"


          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>


    <meta http-equiv="Cache-Control" content="no-siteapp"/>


    <!-- 本框架基本脚本和样式 -->


    <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>


    <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">


    <link rel="stylesheet" th:href="@{/plugin/bootstrap-3.3.5/css/bootstrap.min.css}">


    <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>




    <!-- 富文本编辑器 -->


    <script type="text/javascript" charset="utf-8"


            th:src="@{/plugin/beditor/ueditor.config.js}"></script>


    <script type="text/javascript" charset="utf-8"


            th:src="@{/plugin/beditor/ueditor.all.js}">


    </script>


    <script type="text/javascript" charset="utf-8"


            th:src="@{/plugin/beditor/lang/zh-cn/zh-cn.js}"></script>


    <style>


        .paginationStyle{


            background: #ffffff;


            padding: 10px 10px;


            margin: 0px 0px 10px 0px;


            text-align: right;


        }


        .el-aside {


            color: #333;


            line-height: 15px;


        }


        .el-main {


            color: #333;


            line-height: 15px;


        }


        .box-card {


            width: 160px;


            border-radius: 5px;


            color: #ffffff;


            padding: 5px 5px;


            margin-right: 20px;


            cursor: pointer;


            float: right;


        }


        .el-card__body {


            padding: 0px;


        }


    </style>


</head>




<body>


<div class="ibox-content" id="app" v-cloak>


    <el-container>


        <el-aside width="60px" style="display:flex;align-items: center;">


            <el-avatar :size="50" :src="basicdetail.avatarUrl" style="display:flex;align-items: center;margin-left: 10px"></el-avatar>


        </el-aside>


        <el-main>


            <el-row style="display:flex;align-items: center;padding: 10px;">


                <el-col :span="8" style="display:flex;align-items: center;">


                    <span style="font-size: 20px;">{{basicdetail.nickname}} </span>


                </el-col>


                <el-col :span="6">


                    <el-select v-model="basicdetail.grade" @focus="getDatalist()" @change="changeSaleManGrade(basicdetail.grade)" placeholder="请选择" filterable allow-create>


                        <el-option v-for="item in salemanGradeList " :key="item.id" :label="item.name" :value="item.id"></el-option>


                    </el-select>


                </el-col>


                <el-col :span="10">


                </el-col>


            </el-row>


            <el-row style="display:flex;padding: 5px;">


                <el-col>


                    <span>


                        手机号码:{{basicdetail.phone}}   |


                        加入时间:{{basicdetail.createTime}}


                    </span>


                </el-col>


            </el-row>


            <el-row style="display:flex;padding: 5px;">


                <el-col>


                    <span>


                        邀请人:{{basicdetail.parentUser}}   |


                        来源:


                            <span v-if="basicdetail.applyWay == 1">自主申请</span>


                            <span v-if="basicdetail.applyWay == 2">自动添加</span>


                            <span v-if="basicdetail.applyWay == 3">上级邀请</span>


                            <span v-if="basicdetail.applyWay == 4">手动添加</span>   |


                        状态:


                            <span v-if="basicdetail.applyStatus == 1">待审核</span>


                            <span v-if="basicdetail.applyStatus == 2">通过</span>


                            <span v-if="basicdetail.applyStatus == 3">未通过</span>


                    </span>


                </el-col>


            </el-row>


        </el-main>


        <el-main>


            <el-row>


                <el-row style="display:flex;align-items: center;text-align: center;">


                    <el-card class="box-card" style="background-color: #0f9aef;">


                        <div style="padding:10px;font-size: 20px;">{{basicdetail.lowerLevelNum}}人</div>


                        <div>绑定客户</div>


                    </el-card >


                    <el-card class="box-card" style="background: #67C23A;">


                        <div style="padding:10px;font-size: 20px;">{{basicdetail.invitedNum}}人</div>


                        <div>邀请下级</div>


                    </el-card >


                    <el-card class="box-card" style="background: rgb(121, 187, 255);">


                        <div style="padding:10px;font-size: 20px;">{{basicdetail.totalRevenue}}元</div>


                        <div>累计收益</div>


                    </el-card >


                    <el-card class="box-card" style="background: rgb(93 191 45);">


                        <div style="padding:10px;font-size: 20px;">{{basicdetail.balance}}元</div>


                        <div>待结算</div>


                    </el-card >


                </el-row>


            </el-row>


        </el-main>


    </el-container>




    <el-row>


        <el-tabs v-model="activeName" >


            <el-tab-pane label="绑定客户" name="first">


                <el-row style="display:flex;align-items: center;text-align: right;">


                    <el-col>


                        <el-form ref="form" :model="form" inline >


                            <el-form-item prop="userName" >


                                <el-input v-model="form.userName" placeholder="请输入会员姓名"></el-input>


                            </el-form-item>




                            <el-button type="primary" @click="search" >搜索</el-button>


                            <el-button @click="resetForm('form')">重置</el-button>


                        </el-form>


                    </el-col>


                </el-row>


                <el-row class="table-style" >


                    <el-table id="proj" :data="fxyList.rows"  :height="height" stripe:true  @sort-change="sortChange">


                        <el-table-column


                                type="selection">


                        </el-table-column>


                        <el-table-column


                                label="客户"


                                show-overflow-tooltip>


                            <template slot-scope="scope">


                                <img :src="scope.row.avatarUrl" width="40" height="40" class="head_pic"/>


                                {{scope.row.nickname}}


                            </template>


                        </el-table-column>


                        <el-table-column


                                prop="createTime"


                                label="绑定时间"


                                show-overflow-tooltip>


                        </el-table-column>


                        <el-table-column


                                label="客户状态">


                            <template slot-scope="scope">


                                <span v-if="scope.row.doneNum == 0">已成交</span>


                                <span v-if="scope.row.doneNum > 0">未成交</span>


                            </template>


                        </el-table-column>


                        <el-table-column label="操作" width="240">


                            <template slot-scope="scope">


                                <el-row style="display:flex;">


                                    <el-button type="primary" size="mini" @click="openExamineSaleMan(scope.row)">解绑</el-button>


                                </el-row>


                            </template>


                        </el-table-column>


                    </el-table>


                </el-row>


                <el-row class="paginationStyle"  >


                    <el-pagination background


                                   @size-change="changePageSize"


                                   @current-change="changeCurrentPage"


                                   :current-page="fxyList.currentPage"


                                   :page-sizes="[10, 20, 30, 50]"


                                   :page-size="fxyList.pageSize"


                                   layout="total, sizes, prev, pager, next, jumper"


                                   :total="fxyList.total">


                    </el-pagination>


                </el-row>


            </el-tab-pane>




            <el-tab-pane label="邀请下级" name="second">


                <el-row style="display:flex;align-items: center;text-align: right;">


                    <el-col>


                        <el-form ref="formlow" :model="formlow" inline >


                            <el-form-item prop="userName">


                                <el-input v-model="formlow.userName" placeholder="请输入会员姓名"></el-input>


                            </el-form-item>




                            <el-button type="primary" @click="searchlow" >搜索</el-button>


                            <el-button @click="resetFormlow('formlow')">重置</el-button>


                        </el-form>


                    </el-col>


                </el-row>


                <el-row class="table-style" >


                    <el-table id="proj" :data="lowLevelList.rows"  :height="height" stripe:true  @sort-change="sortChange">


                        <el-table-column


                                type="selection">


                        </el-table-column>


                        <el-table-column


                                label="客户">


                            <template slot-scope="scope">


                                <img :src="scope.row.avatarUrl" width="40" height="40" class="head_pic"/>


                                {{scope.row.nickname}}


                            </template>


                        </el-table-column>


                        <el-table-column


                                prop="createTime"


                                label="绑定时间">


                        </el-table-column>


                        <el-table-column


                                label="绑定方式">


                            <template slot-scope="scope">


                                <span v-if="scope.row.applyWay == 1">自主申请</span>


                                <span v-if="scope.row.applyWay == 2">自动添加</span>


                                <span v-if="scope.row.applyWay == 3">上级邀请</span>


                                <span v-if="scope.row.applyWay == 4">手动添加</span>


                            </template>


                        </el-table-column>


                        <el-table-column label="操作" width="240">


                            <template slot-scope="scope">


                                <el-row style="display:flex;">


                                    <el-button type="primary" size="mini" @click="openExamineSaleMan(scope.row)">解绑</el-button>


                                </el-row>


                            </template>


                        </el-table-column>


                    </el-table>


                </el-row>


                <el-row class="paginationStyle"  >


                    <el-pagination background


                                   @size-change="changePageSizelow"


                                   @current-change="changeCurrentPagelow"


                                   :current-page="lowLevelList.currentPage"


                                   :page-sizes="[10, 20, 30, 50]"


                                   :page-size="lowLevelList.pageSize"


                                   layout="total, sizes, prev, pager, next, jumper"


                                   :total="lowLevelList.total">


                    </el-pagination>


                </el-row>


            </el-tab-pane>




            <el-tab-pane label="收益订单" name="third">


                <el-row style="display:flex;align-items: center;text-align: right;">


                    <el-col>


                        <el-form ref="formOrder" :model="formOrder" inline >


                            <el-form-item label="结算状态" prop="orderType">


                                <el-select v-model="formOrder.orderType" placeholder="请选择">


                                    <el-option


                                            v-for="item in orderTypeList"


                                            :key="item.value"


                                            :label="item.label"


                                            :value="item.value"


                                    >


                                    </el-option>


                                </el-select>


                            </el-form-item>


                            <el-form-item prop="userName">


                                <el-input v-model="formOrder.userName" placeholder="请输入会员姓名"></el-input>


                            </el-form-item>


                            <el-button type="primary" @click="searchFormOrder" >搜索</el-button>


                            <el-button @click="resetFormOrder('formOrder')">重置</el-button>


                        </el-form>


                    </el-col>


                </el-row>


                <el-row class="table-style" >


                    <el-table id="proj" :data="orderLevelList.rows"  :height="height" stripe:true  @sort-change="sortChange">


                        <el-table-column


                                prop="orderNo"


                                label="订单编号"


                                show-overflow-tooltip>


                        </el-table-column>


                        <el-table-column


                                prop="orderMoney"


                                label="实付金额">


                        </el-table-column>


                        <el-table-column


                                label="订单状态">


                            <template slot-scope="scope">


                                <span v-if="scope.row.orderState == 1">待付款</span>


                                <span v-if="scope.row.orderState == 2">待配送</span>


                                <span v-if="scope.row.orderState == 3">待收货</span>


                                <span v-if="scope.row.orderState == 4">待评价</span>


                                <span v-if="scope.row.orderState == 5">已评价</span>


                                <span v-if="scope.row.orderState == 6">申请退款</span>


                                <span v-if="scope.row.orderState == 7">退款成功</span>


                                <span v-if="scope.row.orderState == 8">退款拒绝</span>


                                <span v-if="scope.row.orderState == 9">已取消</span>


                            </template>


                        </el-table-column>


                        <el-table-column


                                prop="storeName"


                                label="下单门店"


                                show-overflow-tooltip>


                        </el-table-column>


                        <el-table-column


                                label="客户"


                                show-overflow-tooltip>


                            <template slot-scope="scope">


                                <img :src="scope.row.avatarUrl" width="40" height="40" class="head_pic"/>


                                {{scope.row.nickName}}


                            </template>


                        </el-table-column>


                        <el-table-column


                                prop="createTime"


                                label="时间"


                                show-overflow-tooltip>


                        </el-table-column>


                        <el-table-column


                                label="收益类型">


                            <template slot-scope="scope">


                                <span v-if="scope.row.revenueType == 1">推广收益</span>


                                <span v-if="scope.row.revenueType == 2">邀请收益</span>


                            </template>


                        </el-table-column>


                        <el-table-column


                                prop="amount"


                                label="收益金额">


                        </el-table-column>


                        <el-table-column


                                label="结算状态">


                            <template slot-scope="scope">


                                <span v-if="scope.row.orderStatus == 1">待结算</span>


                                <span v-if="scope.row.orderStatus == 2">已结算</span>


                                <span v-if="scope.row.orderStatus == 3">已退款</span>


                            </template>


                        </el-table-column>


                    </el-table>


                </el-row>


                <el-row class="paginationStyle"  >


                    <el-pagination background


                                   @size-change="changePageSizeOrder"


                                   @current-change="changeCurrentPageOrder"


                                   :current-page="orderLevelList.currentPage"


                                   :page-sizes="[10, 20, 30, 50]"


                                   :page-size="orderLevelList.pageSize"


                                   layout="total, sizes, prev, pager, next, jumper"


                                   :total="orderLevelList.total">


                    </el-pagination>


                </el-row>


            </el-tab-pane>


        </el-tabs>


    </el-row>


</div>


</body>


<script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>


<script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script>


<script type="text/javascript" th:src="@{/plugin/bootstrap-3.3.5/js/bootstrap.min.js}"></script>


<script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script>


<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>


<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>


<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>


<script type="text/javascript" th:src="@{/plugin/layer/layer.js}"></script>


<script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script>




<script>


    //获取传输的USERID对象


    var userId = $.query.get("userId");


    var applyId = $.query.get("applyId");




    var app = new Vue({


        el: '#app',


        data: {


            activeName: 'first',


            basicdetail:{},


            //绑定客户


            form:{


                userName:'',


                order:'',


                sort:''


            },


            salemanGradeList:[],


            fxyList:{


                rows:[],


                total:0,


                pageSize:10,


                currentPage:1,


            },


            //邀请下级


            formlow:{


                userName:'',


                order:'',


                sort:''


            },


            lowLevelList:{


                rows:[],


                total:0,


                pageSize:10,


                currentPage:1,


            },


            //收益订单


            formOrder:{


                userName:'',


                orderType:'',


                order:'',


                sort:''


            },


            //条件查询结算状态


            orderTypeList:[


                {value:'',label:'全部'},


                {value:1,label:'待结算'},


                {value:2,label:'已结算'},


                {value:3,label:'已退款'}


            ],


            orderLevelList:{


                rows:[],


                total:0,


                pageSize:10,


                currentPage:1,


            },


            height:'calc(100vh - 400px)',


        },




        created: function () {


            this.loadInfo();


        },


        mounted: function () {


        },


        methods: {


            //加载分类


            loadInfo() {


                let _this = this;


                _this.loadParamSettingBasic();


                _this.loadParamSetting();


                _this.loadParamSettinglow();


                _this.loadParamSettingOrder();


                _this.getDatalist();


            },


            //修改等级


            changeSaleManGrade(id){


                let _this = this;


                let obj = {


                    userId: userId,


                    gradeId: id,


                }


                AjaxProxy.requst({


                    app: _this,


                    data:obj,


                    url: basePath + '/fenXiao/fenXiaoUser/changeSaleManGrade',


                    callback: function (data) {


                        _this.$message.success(data.info);


                        this.loadInfo();


                    }


                });


            },


            //加载基本数据信息


            loadParamSettingBasic() {


                let _this = this;


                let data={


                    userId:userId,


                    applyId:applyId,


                };


                AjaxProxy.requst({


                    app: _this,


                    data:data,


                    url: basePath + '/fenXiao/fenXiaoUser/loadParamSettingBasic',


                    callback: function (data) {


                        _this.basicdetail = data.mapInfo.basicdetail;


                    }


                });


            },


            //绑定客户


            loadParamSetting() {


                let _this = this;


                let data=_this.getRequestParam();


                data.pageSize=_this.fxyList.pageSize;


                data.pageNum=_this.fxyList.currentPage;


                AjaxProxy.requst({


                    app: _this,


                    data:data,


                    url: basePath + '/fenXiao/fenXiaoUser/loadParamSetting',


                    callback: function (data) {


                        _this.fxyList.rows = data.mapInfo.customDetailRecords;


                        _this.fxyList.total = data.mapInfo.customDetailTotal;


                        _this.loadParamSettingBasic();


                    }


                });


            },


            //查询参数


            getRequestParam(){


                let _this = this;


                return   {


                    userName:_this.form.userName,


                    order:_this.form.order,


                    sort:_this.form.sort,


                    userId:userId,


                    applyId:applyId,


                }


            },


            //查询


            search:function(){


                this.fxyList.currentPage=1;


                this.loadParamSetting();


            },


            //重置


            resetForm(formName) {


                this.$refs[formName].resetFields();


            },


            changePageSize(val) {


                this.fxyList.pageSize = val;


                this.loadParamSetting();


            },


            changeCurrentPage(val) {


                this.fxyList.currentPage = val;


                this.loadParamSetting();


            },


            //邀请下级


            loadParamSettinglow() {


                let _this = this;


                let data=_this.getRequestParamlow();


                data.pageSize=_this.lowLevelList.pageSize;


                data.pageNum=_this.lowLevelList.currentPage;


                AjaxProxy.requst({


                    app: _this,


                    data:data,


                    url: basePath + '/fenXiao/fenXiaoUser/loadParamSettinglow',


                    callback: function (data) {


                        _this.lowLevelList.rows = data.mapInfo.customLowRecords;


                        _this.lowLevelList.total = data.mapInfo.customLowTotal;


                        _this.loadParamSettingBasic();


                    }


                });


            },


            //查询参数


            getRequestParamlow(){


                let _this = this;


                return   {


                    userName:_this.formlow.userName,


                    order:_this.formlow.order,


                    sort:_this.formlow.sort,


                    userId:userId,


                    applyId:applyId,


                }


            },


            //查询


            searchlow:function(){


                this.lowLevelList.currentPage=1;


                this.loadParamSettinglow();


            },


            //重置


            resetFormlow(formName) {


                this.$refs[formName].resetFields();


            },


            changePageSizelow(val) {


                this.lowLevelList.pageSize = val;


                this.loadParamSettinglow();


            },


            changeCurrentPagelow(val) {


                this.lowLevelList.currentPage = val;


                this.loadParamSettinglow();


            },




            //收益订单


            loadParamSettingOrder() {


                let _this = this;


                let data=_this.getRequestParamOrder();


                data.pageSize=_this.orderLevelList.pageSize;


                data.pageNum=_this.orderLevelList.currentPage;


                AjaxProxy.requst({


                    app: _this,


                    data:data,


                    url: basePath + '/fenXiao/fenXiaoUser/loadParamSettingOrder',


                    callback: function (data) {


                        _this.orderLevelList.rows = data.mapInfo.orderRecords;


                        _this.orderLevelList.total = data.mapInfo.orderTotal;


                        _this.loadParamSettingBasic();


                    }


                });


            },


            //查询参数


            getRequestParamOrder(){


                let _this = this;


                return   {


                    userName:_this.formOrder.userName,


                    orderType:_this.formOrder.orderType,


                    order:_this.formOrder.order,


                    sort:_this.formOrder.sort,


                    userId:userId,


                    applyId:applyId,


                }


            },


            //查询


            searchFormOrder:function(){


                this.orderLevelList.currentPage=1;


                this.loadParamSettingOrder();


            },


            //重置


            resetFormOrder(formName) {


                this.$refs[formName].resetFields();


            },


            changePageSizeOrder(val) {


                this.orderLevelList.pageSize = val;


                this.loadParamSettingOrder();


            },


            changeCurrentPageOrder(val) {


                this.orderLevelList.currentPage = val;


                this.loadParamSettingOrder();


            },




            // select下拉框获取焦点的时候下拉框数据源---分销员等级


            getDatalist() {


                let _this = this;


                AjaxProxy.requst({


                    app: _this,


                    data:[],


                    url: basePath + '/fenXiao/fenXiaoUser/getShopSalesmanGrade',


                    callback: function (data) {


                        _this.salemanGradeList = data.mapInfo.salesGrade;


                    }


                });


            },


            sortChange:function (column){


                if(column.order){


                    if(column.order.indexOf("desc")){


                        this.form.order="desc";


                    }else{


                        this.form.order="asc";


                    }


                    this.form.sort=column.prop;


                    this.loadInfo();


                }


            },


            //解绑


            openExamineSaleMan(row) {


                this.$confirm('是否解绑?', '解绑', {


                    distinguishCancelAndClose: true,//设置关闭按钮和不通过按钮的区别


                    confirmButtonText: '同意',


                    cancelButtonText: '取消',


                    type: 'info'


                }).then(() => {


                    //通过


                    console.log("conform");


                    this.unbundlingSaleMan(row);


                }).catch(action => {


                    //不通过


                    if(action === 'cancel'){


                        console.log("cancel");


                    }else{


                        //关闭按钮


                        console.log("close");


                    }


                });


            },


            unbundlingSaleMan(row){


                let _this = this;


                let userId = row.userId;


                let obj = {


                    userId: userId,


                }


                AjaxProxy.requst({


                    app: _this,


                    data:obj,


                    url: basePath + '/fenXiao/fenXiaoUser/unbundlingSaleMan',


                    callback: function (data) {


                        _this.$message.success(data.info);


                        if(_this.activeName == "first"){


                            _this.loadParamSetting();


                        }


                        if(_this.activeName == "second"){


                            _this.loadParamSettinglow();


                        }


                    }


                });


            },


        }


    })


</script>




</body>


</html>