qimall/addons/CloudStockTwo/backend/views/level/agent-quota.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-05-08
 * Time: 16:11
 */
use common\helpers\ComponentHelper;
$diyPath = dirname(__DIR__) . '/components';
ComponentHelper::loadComponentView('stock-goods-edit', $diyPath);
?>

<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>代理名额</span>
            </div>
        </div>
        <div class="table-body">

            <div class="head" style="display: flex;margin-bottom: 20px;">
                <el-input style="width: 200px;margin-right: 20px;" size="small" type="text" v-model="keyword" @keyup.enter.native="toSearch" placeholder="请输入昵称/ID/手机号 搜索"></el-input>

                <el-select size="small" v-model="level" @change="toSearch"  class="select" style="margin-right: 20px;" placeholder="请选择代理等级">
                    <el-option label="全部代理等级" value=""></el-option>
                    <el-option :key="index" :label="item.name" :value="item.level" v-for="(item, index) in agentLevelList"></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" style="padding: 0 10px !important;" @click="toSearch">搜索</el-button>

            </div>

            <el-table
                size="small"
                :data="list"
                v-loading="listLoading"
                style="width: 100%">
                <el-table-column
                    label="代理商用户id"
                    prop="user_id"
                    align="center"
                    min-width="100">
                </el-table-column>
                <el-table-column label="代理商用户昵称" width="200">
                    <template slot-scope="scope">
                        <div class="table-info-img-text">
                            <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                            <div class="table-info-text">
                                <div style="color:#000;">{{scope.row.user.nickname}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="mobile"
                    align="center"
                    min-width="120"
                    label="代理商手机号">
                    <template slot-scope="scope">
                        <div v-if="scope.row.user.mobile">{{scope.row.user.mobile}}</div>
                        <el-tag v-else type="info">暂无数据</el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                   prop="time"
                     align="center"
                     width="200"
                   label="获取时间">
                 </el-table-column> -->
                <el-table-column
                    prop="level_name"
                    align="center"
                    min-width="150"
                    label="代理商等级">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.stockLevel.name}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="赠送名额"
                    align="center"
                    min-width="200"
                >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.agent_quota_list.length" v-for="(item,index) in scope.row.agent_quota_list" :key="index" style="margin: 0 5px 5px 0;">{{item.stockLevel.name}}：{{item.num}}个</el-tag>
                        <el-tag v-if="!scope.row.agent_quota_list.length" type='info'>暂无数据</el-tag>
                    </template>
                </el-table-column>

                <!--  <el-table-column
                    prop="name"
                    label="账户名额"
                      align="center"
                    >
                      <template slot-scope="scope">
                          <el-button type="primary" size="small" @click="seeDetail()">使用明细</el-button>
                      </template>
                  </el-table-column> -->

            </el-table>
            <!-- 代理库存页面 end -->

            <div style="text-align: right;margin: 20px 0;">
                <el-pagination
                    @current-change="pagination"
                    background
                    layout="prev, pager, next"
                    :page-count="pageCount">
                </el-pagination>
            </div>
        </div>
    </el-card>
    <stock-goods-edit v-model="edit.show" :edit_row="edit"></stock-goods-edit>

    <!-- <el-dialog
      title="使用记录"
      :visible.sync="dialogVisible"
      width="50%"
      >
       <el-table
            size="small"
            :data="tableData"
            style="width: 100%;padding-bottom: 30px;">
            <el-table-column
              label="指定升级的会员"
              width="180">
              <template slot-scope="scope">
                  <div style="display: flex;align-items: center;">
                      <img :src="scope.row.huiyuan.img" style="width: 35px;height: 35px;display: block;margin-right: 5px;" />
                      <div>{{scope.row.huiyuan.name}}</div>
                  </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="dengji"
              align="center"
              label="升级前等级"
              width="180">
            </el-table-column>
            <el-table-column
              prop="dengji2"
              align="center"
              label="升级后等级">
            </el-table-column>
            <el-table-column
              prop="time"
              align="center"
              label="时间">
            </el-table-column>
            <el-table-column
              align="center"
              label="剩余名额">
              <template slot-scope="scope">
                  <div style="color: #03C5FF;font-size: 15px;">-{{scope.row.shiyong}}</div>
                  <div>剩余：{{scope.row.shengyu}}</div>
              </template>
            </el-table-column>
          </el-table>
    </el-dialog> -->

</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                edit:{
                    show:false,
                    id:0,
                },
                list: [],
                keyword: '',
                level:'',
                listLoading: false,
                page: 1,
                pageCount: 0,
                condition_type_list: {
                    1: '下线用户数',
                    2: '累计佣金',
                    3: '已提现佣金'
                },
                price_type_list: {
                    1: '%',
                    2: '元'
                },
                tableData:[
                    {
                        huiyuan:{
                            img:'http://zhenai.ruinuomei.com/product/5a0bb3d1-cffe-49c7-99d7-b1481c31dc5c',
                            name:'张三'
                        },
                        time:'2020-12-30 16:30:30',
                        dengji:"等级1",
                        dengji2:"等级2",
                        shiyong:1,
                        shengyu:4
                    },
                    {
                        huiyuan:{
                            img:'http://zhenai.ruinuomei.com/product/5a0bb3d1-cffe-49c7-99d7-b1481c31dc5c',
                            name:'张三'
                        },
                        time:'2020-12-30 16:30:30',
                        dengji:"等级1",
                        dengji2:"等级2",
                        shiyong:1,
                        shengyu:4
                    }
                ],

                agentLevelList:[],
                dialogVisible:false,

            };
        },
        mounted: function () {
            this.getList();
            this.getLevelList();
        },
        methods: {
            getLevelList() {
                request({
                    params: {
                        r: 'cloud-stock-two/level/get-level-list',//plugin/cloud_stock/mall/level/get-list
                        page:1,
                        limit:100
                    },
                    method: 'get',
                }).then(response => {
                    if (response.data.code == 0) {
                        this.agentLevelList = response.data.data;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    //this.edit.btnLoading = false;
                });
            },
            seeDetail(){
                this.dialogVisible = true;
            },
            search() {
                this.page = 1;
                this.getList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            getList() {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'cloud-stock-two/level/agent-quota',//plugin/cloud_stock/mall/agent/get-agent-quota-list代理商名额列表
                        page:self.page,
                        limit:10,
                        keyword:self.keyword,
                        level:self.level
                    },
                    method: 'get',
                }).then(e => {
                    //console.log('代理商名额列表='+JSON.stringify(e))
                    if(e.data.code == 0){
                        self.listLoading = false;
                        self.list = e.data.data.list;
                        self.pageCount = e.data.data.page_count;
                    }

                }).catch(e => {
                    console.log(e);
                });
            },

            switchStatus(row) {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'plugin/stock/mall/level/switch-status',
                    },
                    method: 'post',
                    data: {
                        id: row.id,
                    }
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code === 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    self.getList();
                }).catch(e => {
                    console.log(e);
                });
            },
            editClick(id){
                if (id){
                    this.edit.id=id;
                    this.edit.show=true;
                    this.edit.title="编辑商品"
                }else {
                    this.edit.show=true;
                    this.edit.title="添加商品"
                }

            },
            levelDelete(row, index) {
                let self = this;
                self.$confirm('删除该库存商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'plugin/stock/mall/goods/delete',
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.list.splice(index, 1);
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
            toSearch() {
                this.page = 1;
                this.getList();
            },
        }
    });
</script>

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    /* .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    } */


    .el-table thead{
        font-size: 14px;
        color: #333;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
        border-bottom: 1.4px solid #D6D6D6;
    }
</style>