添加：分销商申请转正

src/api/promoter.js

@@ -223,3 +223,12 @@ export function orderLogApi(id, data) {
 export function getChildrenOrderApi(id) {
   return request.get(`spread/order/children/${id}`)
 }
+
+// 分销 - 申请转正 - 列表
+export function promoterFormalList(data) {
+  return request.get('user/promoter/formal_list', data)
+}
+// 分销 - 申请转正 - 审核
+export function promoterFormalExamine(data) {
+  return request.get('user/promoter/formal_examine', data)
+}

src/router/modules/promoter.js

@@ -30,6 +30,15 @@ const promoterRouter =
         },
         component: () => import('@/views/promoter/user/index')
       },
+      {
+        path: 'apply_formal',
+        name: 'AccountsUserApplyFormal',
+        meta: {
+          title: '分销转正申请',
+          noCache: true
+        },
+        component: () => import('@/views/promoter/user/apply_formal')
+      },
       {
         path: 'orderList',
         name: 'OrderList',

src/views/promoter/user/apply_formal.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <!--顶部搜索-->
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form size="small" label-width="100px" :inline="true">
+            <el-form-item label="用户UID：" label-width="100px" style="display: inline-block;">
+              <el-input style="width: 350px" v-model="tableFrom.uid" placeholder="请输入用户UID" class="selWidth"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <el-button size="small" type="primary" @click="getList(1)">搜索</el-button>
+      </div>
+      <!--列表-->
+      <el-table v-loading="listLoading" :data="tableData.data">
+        <el-table-column prop="id" label="ID" min-width="80" />
+        <el-table-column label="申请人信息" min-width="280" align="center">
+          <template slot-scope="scope">
+            <div class="user-content" v-if="scope.row.user">
+              <div class="user-avatar">
+                <img :src="scope.row.user.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.user.nickname }}</div>
+                <div class="user-id">{{ scope.row.user.uid }}</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" min-width="60" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status == 0" type="info" effect="dark" size="small">审核中</el-tag>
+            <el-tag v-else-if="scope.row.status == 1" type="success" effect="dark" size="small">已通过</el-tag>
+            <el-tag v-else type="danger" effect="dark" size="small">已驳回</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="申请时间" prop="create_time" min-width="150" align="center"/>
+        <el-table-column label="申请凭证" min-width="150">
+          <template slot-scope="scope">
+            <div class="demo-image__preview">
+              <el-image style="width: 36px; height: 36px" :src="scope.row.voucher_image" :preview-src-list="[scope.row.voucher_image]" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="280" fixed="right" align="center">
+          <template slot-scope="scope">
+            <template v-if="scope.row.status == 0">
+              <el-button type="success" size="small" @click="toExamine(scope.row.id, 1)">通过</el-button>
+              <el-button type="danger" size="small" @click="toExamine(scope.row.id, 2)">驳回</el-button>
+            </template>
+            <el-button type="info" size="small" @click="seeDetails(scope.row)">查看详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页-->
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {promoterFormalExamine, promoterFormalList} from "@/api/promoter";
+
+export default {
+  name: "SupplierList",
+  components: { },
+  data() {
+    return {
+      listLoading: true,
+      tableFrom: {
+        page: 1,
+        limit: 20,
+        uid: ""
+      },
+      tableData: {
+        data: [],
+        total: 0
+      },
+    };
+  },
+  mounted() {
+    this.getList("");
+  },
+  methods: {
+    // 获取申请列表
+    getList(num) {
+      this.listLoading = true;
+      this.tableFrom.page = num ? num : this.tableFrom.page;
+      promoterFormalList(this.tableFrom).then(res => {
+        this.tableData.data = res.data.list;
+        this.tableData.total = res.data.count;
+        this.listLoading = false;
+      }).catch(res => {
+        this.listLoading = false;
+        this.$message.error(res.message);
+      });
+    },
+    pageChange(page) {
+      this.tableFrom.page = page;
+      this.getList("");
+    },
+    handleSizeChange(val) {
+      this.tableFrom.limit = val;
+      this.getList(1);
+    },
+    // 审核操作
+    toExamine(id, status){
+      let _this = this;
+      let params = {
+        id: id,
+        status: status
+      };
+      if(Number(status) === 2){
+        // 驳回
+        _this.$prompt('驳回原因', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          inputErrorMessage: '请输入原因',
+          inputType: 'textarea',
+          inputPlaceholder: '请输入原因',
+          inputValidator: (value) => {
+            if (!value) {
+              return '请输入原因'
+            }
+          }
+        }).then(({value}) => {
+          params.reason = value || '';
+          _this.submitToExamine(params);
+        }).catch(() => {})
+      }else{
+        // 通过
+        this.$confirm('是否确认审核通过?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          _this.submitToExamine(params);
+        }).catch(() => {});
+      }
+    },
+    // 审核操作 - 提交审核
+    submitToExamine(params){
+      let _this = this;
+      promoterFormalExamine(params).then(res => {
+        _this.$message.success(res.message);
+        _this.getList();
+      }).catch(res => {
+        _this.$message.error(res.message);
+      });
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  .user-avatar{
+    height: var(--user-content-height-);
+    width: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 80%!important;
+      width: 80%!important;
+      border-radius: 50% !important;
+    }
+  }
+  .user-info{
+    max-width: calc(100% - var(--user-content-height-));
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      width: 100%;
+      height: 25px;
+      line-height: 25px;
+      text-align: left;
+      font-size: 15px;
+      font-weight: bold;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: center;
+      .user-id{
+        color: #fff;
+        background-color: #409eff;
+        border-color: #409eff;
+        height: 18px;
+        line-height: 20px;
+        font-size: 13px;
+        padding: 0 5px;
+        border-radius: 5px;
+        margin-left: 10px;
+        width: max-content!important;
+      }
+    }
+    .user-id{
+      width: 100%;
+      text-align: left;
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
+.head {
+  padding: 20px 20px 10px;
+  .full {
+    display: flex;
+    align-items: center;
+    .order_icon {
+      width: 60px;
+      height: 60px;
+    }
+    .text {
+      align-self: center;
+      flex: 1;
+      min-width: 0;
+      padding-left: 12px;
+      font-size: 13px;
+      color: #606266;
+      .title {
+        margin-bottom: 10px;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 16px;
+        color: #282828;
+      }
+    }
+  }
+  .bold{
+    font-weight: bold;
+  }
+  .list {
+    display: flex;
+    margin-top: 20px;
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    .item {
+      flex: none;
+      width: 200px;
+      font-size: 14px;
+      line-height: 14px;
+      color: rgba(0, 0, 0, 0.85);
+      .title {
+        margin-bottom: 12px;
+        font-size: 13px;
+        line-height: 13px;
+        color: #666666;
+      }
+    }
+  }
+}
+.footer{
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  bottom: 17px;
+  padding-top: 17px;
+  border-top: 1px dashed #eeeeee;
+}
+.selWidth{
+  margin-bottom: 10px!important;
+}
+.id-image{
+  width: 150px;
+  height: 150px;
+  margin-right: 10px;
+
+
+}
+</style>

src/views/promoter/user/index.vue

@@ -1,24 +1,28 @@
 <template>
   <div class="divBox">
     <el-card class="box-card">
+      <!--顶部筛选及统计-->
       <div slot="header" class="clearfix">
         <div class="container">
           <el-form size="small" label-width="100px" inline>
             <el-form-item label="时间选择：" class="width100">
               <el-radio-group v-model="tableFrom.date" type="button" class="mr20" size="small" @change="selectChange(tableFrom.date)">
-                <el-radio-button v-for="(item,i) in fromList.fromTxt" :key="i" :label="item.val">{{ item.text }}</el-radio-button>
+                <el-radio-button v-for="(item,i) in fromList.fromTxt" :key="i" :label="item.val">{{
+                    item.text
+                  }}
+                </el-radio-button>
               </el-radio-group>
               <el-date-picker v-model="timeVal" value-format="yyyy/MM/dd" format="yyyy/MM/dd" size="small" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 250px;" @change="onchangeTime" />
             </el-form-item>
             <el-form-item label="分销等级：">
-                <el-select v-model="tableFrom.brokerage_level" clearable filterable placeholder="请选择" class="selWidth" @change="getList(1),getStatistics()">
-                  <el-option
-                    v-for="item in levelList"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
+              <el-select v-model="tableFrom.brokerage_level" clearable filterable placeholder="请选择" class="selWidth" @change="getList(1),getStatistics()">
+                <el-option
+                  v-for="item in levelList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
             </el-form-item>
             <el-form-item label="关键字：" class="width100">
               <el-input v-model="tableFrom.keyword" @keyup.enter.native="getList" placeholder="请输入姓名、电话、UID" class="selWidth" size="small">
@@ -29,95 +33,56 @@
         </div>
         <cards-data :card-lists="cardLists" />
       </div>
-      <el-table
-        v-loading="listLoading"
-        :data="tableData.data"
-        style="width: 100%"
-        size="mini"
-        class="table"
-        highlight-current-row
-      >
-        <el-table-column
-          prop="uid"
-          label="ID"
-          width="60"
-        />
-        <el-table-column
-          label="头像"
-          min-width="80"
-        >
+      <!--表格信息-->
+      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini" class="table" highlight-current-row>
+        <el-table-column prop="uid" label="ID" width="80" align="center" />
+        <el-table-column label="用户信息" min-width="230" align="left" >
           <template slot-scope="scope">
-            <div class="demo-image__preview">
-              <el-image
-                :src="scope.row.avatar || moren"
-                :preview-src-list="[scope.row.avatar || moren]"
-              />
+            <div class="user-content">
+              <div class="user-avatar">
+                <img :src="scope.row.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.nickname }}</div>
+                <div class="agent-type-text">
+                  <el-tag type="info" effect="dark" size="small">{{ scope.row.uid }}</el-tag>
+                </div>
+              </div>
             </div>
           </template>
         </el-table-column>
-         <el-table-column
-          label="用户信息"
-          min-width="100"
-        >
+        <el-table-column label="分销等级" min-width="120" align="center">
           <template slot-scope="scope">
-            <div>昵称：{{ scope.row.nickname }}</div>
-            <div>电话：{{ scope.row.phone }}</div>
+            <span>{{ scope.row.brokerage ? scope.row.brokerage.brokerage_name : '' }}</span>
           </template>
         </el-table-column>
-        <el-table-column
-          prop="spread_count"
-          label="推广用户数量"
-          min-width="120"
-        />
-         <el-table-column
-          label="分销等级"
-          min-width="120"
-         >
-         <template slot-scope="scope">
-           <span>{{scope.row.brokerage ? scope.row.brokerage.brokerage_name : ''}}</span>
+        <el-table-column label="推广信息" min-width="200" align="left">
+          <template slot-scope="scope">
+            推广用户：{{ scope.row.spread_count || 0 }}人<br />
+            推广订单：{{ scope.row.spread_pay_count || 0 }}单<br />
+            推广金额：{{ scope.row.spread_pay_price || 0 }}元
+          </template>
+        </el-table-column>
+        <el-table-column label="佣金信息" min-width="200" align="left">
+          <template slot-scope="scope">
+            佣金金额：{{ scope.row.total_brokerage_price || 0 }}元<br />
+            已提现金额：{{ scope.row.total_extract_price || 0 }}元<br />
+            未提现金额：{{ scope.row.brokerage_price || 0 }}元
+          </template>
+        </el-table-column>
+        <el-table-column prop="total_extract_num" label="提现次数" min-width="90" align="center"/>
+        <el-table-column prop="spread.nickname" label="上级推广人" min-width="150" align="center"/>
+        <el-table-column label="转正状态" min-width="200" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.brokerageApplyFormal">
+              <!--状态：0=申请中，1=已通过，2=已驳回-->
+              <span v-if="scope.row.brokerageApplyFormal.status == 0">申请中</span>
+              <span v-else-if="scope.row.brokerageApplyFormal.status == 0">已转正</span>
+              <span v-else-if="scope.row.brokerageApplyFormal.status == 0">已驳回</span>
+            </span>
+            <span v-else>未申请</span>
           </template>
         </el-table-column>
-        <el-table-column
-          label="推广订单数量"
-          min-width="120"
-          prop="spread_pay_count"
-        />
-        <el-table-column
-          label="推广订单金额"
-          min-width="120"
-          prop="spread_pay_price"
-        />
-        <el-table-column
-          label="佣金金额"
-          min-width="120"
-          sortable
-          :sort-method="(a,b)=>{return a.total_brokerage_price - b.total_brokerage_price}"
-          prop="total_brokerage_price"
-        />
-        <el-table-column
-          label="已提现金额"
-          min-width="120"
-          sortable
-          :sort-method="(a,b)=>{return a.total_extract_price - b.total_extract_price}"
-          prop="total_extract_price"
-        />
-        <el-table-column
-          prop="total_extract_num"
-          label="提现次数"
-          min-width="90"
-        />
-        <el-table-column
-          label="未提现金额"
-          min-width="120"
-          sortable
-          :sort-method="(a,b)=>{return a.brokerage_price - b.brokerage_price}"
-          prop="brokerage_price"
-        />
-        <el-table-column
-          prop="spread.nickname"
-          label="上级推广人"
-          min-width="150"
-        />
         <el-table-column label="操作" min-width="150" fixed="right" align="center">
           <template slot-scope="scope">
             <el-button type="text" size="small" class="mr10" @click="onSpread(scope.row.uid, 'man')">推广人</el-button>
@@ -147,7 +112,6 @@
         />
       </div>
     </el-card>
-
     <!--推广人-->
     <el-dialog
       :title="showDistributor ? '推广订单' : '推广人'"
@@ -510,7 +474,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .selWidth{
     width: 300px;
   }
@@ -522,4 +486,72 @@ export default {
   .el-icon-arrow-down {
     font-size: 12px;
   }
+  .user-content{
+    --user-content-height-: 80px;
+
+    height: var(--user-content-height-);
+    width: 100%;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    .user-avatar{
+      height: var(--user-content-height-);
+      width: var(--user-content-height-);
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      img{
+        height: 80%!important;
+        width: 80%!important;
+        border-radius: 50% !important;
+      }
+    }
+    .user-info{
+      max-width: calc(100% - var(--user-content-height-));
+      height: var(--user-content-height-);
+      display: inline-flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: flex-start;
+      .nickname{
+        width: 100%;
+        height: 25px;
+        line-height: 25px;
+        text-align: left;
+        font-size: 15px;
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-items: center;
+        .user-id{
+          color: #fff;
+          background-color: #409eff;
+          border-color: #409eff;
+          height: 18px;
+          line-height: 20px;
+          font-size: 13px;
+          padding: 0 5px;
+          border-radius: 5px;
+          margin-left: 10px;
+          width: max-content!important;
+        }
+      }
+      .user-id{
+        width: 100%;
+        text-align: left;
+        font-size: 13px;
+        line-height: calc(var(--user-content-height- * 35%));
+      }
+    }
+  }
 </style>