认证产品页

components/menu/data.js

@@ -55,4 +55,13 @@ export default [{
     title: '会员设置',
     path: 'vip_setting',
   }]
-}]
+},
+{
+  title: '认证',
+  subs: [
+    {
+      title: '认证产品',
+      path: 'check_pro',
+    },
+  ]
+},]

pages/main/index/check_pro.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id="withdraw">
+    <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"
+          :label="tableHeaders[index]"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              v-if="prop === 'uid'"
+              @click="clickUID(scope.row[prop])"
+            >{{scope.row[prop]}}</el-button>
+            <span v-else-if="prop === 'statusShow' && scope.row['status'] !== '1'">
+              {{scope.row[prop]}}
+              <el-button type="text" @click="clickRetry(scope.row['id'])">重试</el-button>
+            </span>
+            <el-button type="text" v-else-if="prop === 'ctrl'" @click="clickCtrl(scope.row, index)">操作</el-button>
+            <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 = [
+  "名称",
+  "状态",
+  "排序",
+  "价格",
+  "配图",
+  "简介",
+  "说明",
+  "操作",
+]
+const tableProps = [
+  "uid",
+  "real_name",
+  "amount",
+  "true_amount",
+  "after_amount",
+  "account",
+  "created_atShow",
+  "ctrl",
+]
+
+export default {
+  data() {
+    return {
+      // 数据总条目
+      totalCount: 0,
+      currentPage: 1,
+      // 列表头显示内容
+      tableHeaders,
+      // 列表头字段
+      tableProps,
+      // 列表数据
+      tableData: []
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  methods: {
+    clickCtrl(item, index) {
+      console.log(JSON.stringify(item))
+    },
+    // 点击重试
+    async clickRetry(id) {
+      const res = await this.$post("/api/admin/payment/redoDraw", { id })
+      console.log(res)
+    },
+    // 点击用户的 uid
+    clickUID(uid) {
+      console.log("click uid: " + uid)
+    },
+    // 根据状态显示图表样式
+    tableRowClassName({ row, rowIndex }) {
+      // console.log({row, rowIndex})
+      let className = ""
+      if(row.status === "1") className = "success-row"
+      return className
+    },
+    // 格式化列表数据
+    formatTableData(data) {
+      return data.map(i => ({
+        ...i,
+        statusShow: i.status === "1" ? "到账" : "失败",
+        created_atShow: new Date(Number(i.created_at) * 1000).toLocaleString(),
+        taken_atShow: new Date(Number(i.taken_at) * 1000).toLocaleString(),
+        ctrl: 1
+      }))
+    },
+    // 获取列表数据
+    async getTableData(page = 1) {
+      this.tableData = []
+      const res = await this.$post("/api/admin/payment/listDraw", { page })
+      // console.log(res)
+      const data = res.data
+      this.tableData = this.formatTableData(res.data.list)
+      // console.log(this.tableData)
+      this.totalCount = Number(data.total)
+      this.totalPage = data.totalPage
+    }
+  }
+};
+</script>
+
+<style scoped>
+.table {
+  height: calc(100% - 40px);
+}
+</style>