feat: 通证列表展示

src/components/pass/PassList.vue

 <template>
   <div>
     <search v-model="query"></search>
-    <pass-list-table class="list-table" :pass-list="passList" />
+    <pass-list-table
+        class="list-table"
+        :pass-list="passList"
+        @next="nextPage"
+        @update="getList(true)" />
   </div>
 </template>
 
@@ -69,18 +73,18 @@ export default {
       } else {
         this.passList = this.passList.concat(res.data.results);
       }
+    },
+    /**
+     * 滚动加载通证列表
+     */
+    async nextPage() {
+      if (this.total > this.page * this.page_size) {
+        this.page += 1;
+        await this.getList(false);
+      }
     }
   },
 
-  /**
-   * 滚动加载通证列表
-   */
-  async nextPage() {
-    if (this.total > this.page * this.page_size) {
-      this.page += 1;
-      await this.getList(false);
-    }
-  }
 
 }
 </script>

src/components/pass/PassListTable.vue

@@ -13,13 +13,42 @@
     >
       <template slot-scope="scope">
         <span v-if="item.prop === 'create_time'">{{scope.row[item.prop] | formatTime}}</span>
+        <div v-else-if="item.prop === 'status'">
+          <div class="column-status status1" v-if="scope.row.status === 1">
+            发行中
+          </div>
+          <div
+              class="column-status status2"
+              v-else-if="scope.row.status === 2"
+          >
+            发行成功
+          </div>
+          <div v-else-if="scope.row.status === 3" class="status">
+            <div class="column-status status3">发行失败</div>
+            <svg-icon class="icon-re" icon-class="re" @click="reIssue(scope.row)"/>
+          </div>
+        </div>
         <span v-else>{{ scope.row[item.prop] }}</span>
       </template>
     </el-table-column>
+    <el-table-column label="划转" width="80" align="center">
+      <template slot-scope="scope">
+        <span v-if="scope.row.balance === 0">划转</span>
+        <el-button
+            class="text-btn"
+            v-else-if="scope.row.status === 2"
+            type="text"
+            @click="transfer(scope.row)"
+        >划转</el-button>
+      </template>
+    </el-table-column>
   </el-table>
 </template>
 
 <script>
+import {debounce} from "../../utils/tool/debounce";
+import {GO_URLS} from "../../config/URLS";
+
 export default {
   name: "PassListTable",
   props: ['passList'],
@@ -58,16 +87,76 @@ export default {
         },
         {
           label: "发行状态",
-          prop: "amount",
+          prop: "status",
           mWidth: 80,
           width: 0,
         }
       ]
     }
+  },
+  methods: {
+    reIssue: debounce(async function (content) {
+      const res = await this.$ajax({
+        type: "post",
+        url: GO_URLS.reissue,
+        params: {
+          ids: [content.id]
+        },
+      });
+      if (!res) return;
+      this.$message.success('重新发行成功');
+      this.$emit('update');
+    }, 500, false),
+    transfer() {
+
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.status {
+  position: relative;
+  .icon-re {
+    height: 14px;
+    width: 14px;
+    cursor: pointer;
+    position: absolute;
+    top: 5px;
+    left: 50%;
+    margin-left: 40px;
+  }
+}
+.column-status {
+  width: 70px;
+  height: 25px;
+  line-height: 25px;
+  text-align: center;
+  font-size: 12px;
+  border-radius: 4px;
+  position: relative;
+  overflow: visible;
+  margin: 0 auto;
+
+  &.status1 {
+    background-color: #fff7ec;
+    color: #fe953f;
+  }
+
+  &.status2 {
+    background-color: #ecf1ff;
+    color: #3f79fe;
+  }
 
+  &.status3 {
+    background-color: #ffeeec;
+    color: #fe563f;
+  }
+}
+
+.text-btn {
+  color: #4A90E2;
+  font-size: 12px;
+  font-weight: normal;
+}
 </style>

src/config/URLS.ts

@@ -60,4 +60,5 @@ export class GO_URLS {
     static config = prefix_go + '/api/config'; // 页面跳转以及不同环境的配置数据
     static pass = prefix_go + '/api/pass'; // 查询或添加通证
     static passList = prefix_go + '/api/passes'; // 获取通证列表
+    static reissue = prefix_go + '/api/passes/reissue'; // 重新发行通证
 }

src/icons/svg/re.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645080822133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6189" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M655.189333 843.377778a361.927111 361.927111 0 1 1-40.675555-680.789334l15.758222 5.006223-36.636444 107.690666a248.149333 248.149333 0 1 0 167.537777 255.431111c2.218667-27.022222-0.113778-48.355556-6.257777-64.284444-2.275556-5.916444-11.662222-17.351111-28.501334-32.085333l-6.712889-5.688889 72.647111-87.608889c34.702222 28.842667 57.799111 55.978667 68.835556 84.593778 12.743111 33.223111 16.952889 71.509333 13.312 114.574222a361.813333 361.813333 0 0 1-219.306667 303.217778z" fill="#67A9FF" p-id="6190"></path><path d="M956.871111 436.622222l-289.621333 106.382222 62.976-264.533333z" fill="#67A9FF" p-id="6191"></path></svg>
\ No newline at end of file