开发者展示样式完成;欠缺编辑

src/module/main/components/dev_show.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="cloud-balance">
+    <div class="table">
+      <el-table v-if="tableData.length"
+        height="100%"
+        border
+        style="width: 100%"
+        :data="tableData"
+        :row-class-name="tableRowClassName">
+        <el-table-column v-for="(prop, index) of tableProps" :key="index"
+          :prop="prop"
+          align="center"
+          :label="tableHeaders[index]">
+          <template slot-scope="scope">
+            <el-button type="text" v-if="prop === 'uid'" @click="clickUID(scope.row)">{{scope.row[prop]}}</el-button>
+            <img v-else-if="prop === 'url'" :src="scope.row[prop]" alt="url" style="display: block; width: 100px; height: 80px;">
+            <section class="ctrls" v-else-if="prop === 'ctrls'">
+              <el-button type="text" @click="clickEdit(scope.row)">编辑</el-button>
+              <el-button type="text" @click="clickDel(scope.row)">删除</el-button>
+            </section>
+            <span v-else>{{scope.row[prop]}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="getTableData"
+      :current-page.sync="currentPage"
+      :page-size="20"
+      layout="total, prev, pager, next"
+      :total="totalCount">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+const tableHeaders = [
+  'ID',
+  '昵称',
+  '排序',
+  '配图',
+  '添加时间',
+  '操作',
+]
+const tableProps = [
+  'uid',
+  'nickname',
+  'order',
+  'url',
+  'create_date',
+  'ctrls',
+]
+
+export default {
+  data() {
+    return {
+      // 数据总条目
+      totalCount: 0,
+      currentPage: 1,
+      // 列表头显示内容
+      tableHeaders,
+      // 列表头字段
+      tableProps,
+      // 列表数据
+      tableData: []
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  methods: {
+    // 点击删除
+    clickDel(i) {
+      const id = i.id
+      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        const res = await this.$post('/api/admin/developer/deleteRecommendDeveloper', { id });
+        if(!res) return;
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+        this.getTableData()
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    // 点击编辑
+    clickEdit(i) {
+
+    },
+    // 点击用户
+    clickUID(i) {
+      window.open(i.seo_uri)
+    },
+    // 根据状态显示图表样式
+    tableRowClassName({row, rowIndex}) {
+      let className = ''
+      if(row.p_status_name === '已结算') className = 'success-row'
+      return className
+    },
+    // 格式化列表数据
+    formatTableData(data) {
+      return data.map(i => ({
+        ...i,
+      }))
+    },
+    // 获取列表数据
+    async getTableData(page = 1) {
+      this.tableData = []
+      const res = await this.$post('/api/admin/developer/getRecommendList', { page })
+      console.log(res)
+      const data = res.data
+      this.tableData = this.formatTableData(data)
+      this.totalCount = Number(data.total)
+      this.totalPage = data.totalPage
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+#cloud-balance {
+  .table {
+    height: calc(100% - 40px);
+  }
+}
+
+</style>

src/module/main/components/menu/data.js

@@ -12,6 +12,15 @@ export default [{
   ]
 },
 {
+  title: '运营',
+  subs: [
+    {
+      title: '云端开发者展示',
+      path: 'dev_show',
+    },
+  ]
+},
+{
   title: '项目',
   subs: [{
     title: '云端工作',