1

src/api/user.js

@@ -54,3 +54,11 @@ export function getApplyList(data) {
     data
   })
 }
+// 推广人列表
+export function promoter_list(data) {
+  return request({
+    url: '/api/promoter/promoter_list',
+    method: 'post',
+    data
+  })
+}

src/views/dashboard/index.vue

@@ -5,88 +5,98 @@
         :data="tableData"
         height="800"
         border
+        fit
+        highlight-current-row
         style="width: 100%"
       >
-        <el-table-column
+        <el-table-column type="index" width="100" align="center" label="编号" />
-          prop="date"
-          label="编号"
-        />
         <el-table-column
           prop="name"
           label="姓名"
+          align="center"
         />
         <el-table-column
-          prop="address"
+          prop="phone"
           label="手机号"
+          align="center"
         />
         <el-table-column
-          prop="name"
+          prop="total"
           label="推广总数"
+          align="center"
         />
         <el-table-column
-          prop="name"
+          prop="succe_total"
           label="审核通过完成数"
+          align="center"
         />
         <el-table-column
-          prop="name"
+          prop="join_date"
           label="入驻时间"
+          align="center"
         />
         <el-table-column
-          prop="name"
+          prop="area"
-          label="推广人编号"
-        />
-        <el-table-column
-          prop="name"
           label="所在地区"
+          align="center"
         />
       </el-table>
     </div>
+    <!-- 分页  -->
+    <el-pagination
+      background
+      layout="prev, pager, next"
+      :total="total"
+      :page-size="size"
+      :current-page="page"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { promoter_list } from '@/api/user'
-
 export default {
   name: 'Dashboard',
   data() {
     return {
-      tableData: [{
+      tableData: [],
-        date: '2016-05-03',
+      page: 1,
-        name: '王小虎',
+      size: 20,
-        address: '上海市普陀区金沙江路 1518 弄'
+      total: 0
-      }, {
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-08',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-06',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-07',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }]
     }
   },
   computed: {
-    ...mapGetters([
+    currentList() {
-      'name'
+      const start = (this.page - 1) * this.size
-    ])
+      return this.list.slice(start, start + this.size) // 返回当前页的数据
     }
+  },
+  created() {
+    this.getlist()
+  },
+  methods: {
+    getlist() {
+      promoter_list({ page: this.page, size: this.size }).then(res => {
+        res.data.map(item => {
+          item.area = JSON.parse(item.area).provice_name + JSON.parse(item.area).city_name + JSON.parse(item.area).area_name // 解析地区数据
+        })
+        // this.total = res.data.total || 0
+        this.tableData = res.data || []
+      })
+    },
+    handleSizeChange(val) {
+      this.size = val // 更新每页显示条数
+      this.page = 1 // 当页面大小改变时返回到第一页
+      this.fetchData()
+    },
+    handleCurrentChange(val) {
+      this.page = val // 更新当前页
+      this.fetchData() // 重新拉取数据
+    }
+  }
+
 }
 </script>
 
@@ -100,4 +110,11 @@ export default {
     line-height: 46px;
   }
 }
+.el-pagination {
+  text-align: center;
+  margin-top: 20px;
+}
+.el-table th.status-col {
+  width: 120px;
+}
 </style>

src/views/table/index.vue

@@ -45,7 +45,11 @@
       </el-table-column>
       <el-table-column align="center" prop="created_at" label="进件状态">
         <template slot-scope="scope">
-          <span>{{ scope.row.state==1?'进件中': scope.row.state==2?'审核中':scope.row.state==3?'待签约':scope.row.state==4?'已驳回':'已完成' }}</span>
+          <span>{{ scope.row.state==10?'资料上送':
+            scope.row.state==11?'审核中':scope.row.state==12?'审核失败'
+              :scope.row.state==20?'待签约':scope.row.state==21?'签约中':
+                scope.row.state==22?'签约失败':scope.row.state==30?'待实名认证':scope.row.state==31?'实名认证中':
+                  scope.row.state==32?'实名认证失败':'已完成' }}</span>
         </template>
       </el-table-column>
       <el-table-column class-name="status-col" label="详情" align="center">
@@ -57,7 +61,7 @@
     <el-dialog title="进件详情" :visible.sync="dialogFormVisible">
       <el-form :model="form" :inline="true">
         <el-form-item label="店铺名称" :label-width="formLabelWidth">
-          <el-input v-model="form.shop_name" autocomplete="off" :disabled="true" />
+          <el-input v-model="form.shop_name" type="textarea" autocomplete="off" :disabled="true" />
         </el-form-item>
         <el-form-item label="法人姓名" :label-width="formLabelWidth">
           <el-input v-model="form.name" autocomplete="off" :disabled="true" />
@@ -72,17 +76,16 @@
           <el-input v-model="form.email" autocomplete="off" :disabled="true" />
         </el-form-item>
         <el-form-item
-          label="统一社会信用代
+          label="统一社会信用代码"
-码"
           :label-width="formLabelWidth"
         >
-          <el-input v-model="form.uscc" autocomplete="off" :disabled="true" />
+          <el-input v-model="form.uscc" type="textarea" autocomplete="off" :disabled="true" />
         </el-form-item>
         <el-form-item label="营业执照名称" :label-width="formLabelWidth">
-          <el-input v-model="form.license_name" autocomplete="off" :disabled="true" />
+          <el-input v-model="form.license_name" type="textarea" autocomplete="off" :disabled="true" />
         </el-form-item>
         <el-form-item label="营业执照地址" :label-width="formLabelWidth">
-          <el-input v-model="form.license_address" autocomplete="off" :disabled="true" />
+          <el-input v-model="form.license_address" type="textarea" autocomplete="off" :disabled="true" />
         </el-form-item>
         <el-form-item label="结算银行卡号" :label-width="formLabelWidth">
           <el-input v-model="form.bank_number" autocomplete="off" :disabled="true" />
@@ -97,7 +100,16 @@
           <el-input v-model="form.rates" autocomplete="off" :disabled="true" />
         </el-form-item>
         <el-form-item label="进件状态" :label-width="formLabelWidth">
-          <el-input v-model="form.state==1?'进件中': form.state==2?'审核中':form.state==3?'待签约':form.state==4?'已驳回':'已完成'" autocomplete="off" :disabled="true" />
+          <el-input
+            :value="form.state==10?'资料上送':
+              form.state==11?'审核中':form.state==12?'审核失败':
+                form.state==20?'待签约':form.state==21?'签约中':
+                  form.state==22?'签约失败':form.state==30?'待实名认证':
+                    form.state==31?'实名认证中':
+                    form.state==32?'实名认证失败':'已完成' "
+            autocomplete="off"
+            :disabled="true"
+          />
         </el-form-item>
       </el-form>
     </el-dialog>