feat: 转账列表基本功能

src/components/newProductList/Search.vue

@@ -15,7 +15,7 @@
       </ul>
     </div>
     <div class="input">
-      <input type="text" v-model="searchInput" placeholder="搜索通证标识">
+      <input type="text" v-model="searchInput" :placeholder="searchPlaceholder || '搜索通证标识'">
       <svg-icon class="icon-search" icon-class="search"></svg-icon>
     </div>
     <div class="sort">
@@ -47,7 +47,7 @@ import {debounce} from "../../utils/tool/debounce";
 
 export default {
   name: "Search",
-  props: ['query'],
+  props: ['query', 'searchPlaceholder'],
   model: {
     prop: 'query',
     event: 'update'
@@ -65,7 +65,7 @@ export default {
     }
   },
   watch: {
-    searchInput: debounce((val) => {
+    searchInput: debounce(function (val) {
       this.$emit('update', Object.assign({}, this.query, {identifier: val}))
     }, 500, false)
   },

src/components/pass/TransferRecord.vue

 <template>
   <div>
-    <search v-model="query"></search>
-    <pass-list-table class="list-table" />
+    <search v-model="query" search-placeholder="搜索批次号"></search>
+    <transfer-record-list class="list-table" :transfer-list="transferList" />
   </div>
 </template>
 
 <script>
 import Search from "../newProductList/Search";
-import PassListTable from "./PassListTable";
+import TransferRecordList from "./TransferRecordList";
+import {GO_URLS} from "../../config/URLS";
 export default {
   name: "TransferRecord",
   data() {
@@ -20,17 +21,71 @@ export default {
       },
       page: 1,
       page_size: 50,
-      passList: [], // 查询到的通证列表
+      transferList: [], // 查询到的通证列表
       total: 0
     }
   },
   components: {
     Search,
-    PassListTable
+    TransferRecordList
+  },
+  mounted() {
+    this.getList(true);
+  },
+  watch: {
+    query: {
+      handler() {
+        this.getList(true);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    /**
+     * @param refresh 当查询条件改变时传入整个列表刷新，否则查询数据添加到 passList
+     */
+    async getList(refresh) {
+      if (refresh) {
+        this.page = 1;
+      }
+      const params = Object.assign(
+          {},
+          this.query,
+          {
+            page: this.page,
+            page_size: this.page_size
+          }
+      )
+
+      console.log(typeof params.type);
+      if (params.identifier === '') delete params.identifier;
+
+      const res = await this.$ajax({
+        type: "get",
+        url: GO_URLS.transferList,
+        params
+      });
+      if (refresh) {
+        this.transferList = res.data.results;
+      } else {
+        this.transferList = this.transferList.concat(res.data.results);
+      }
+    },
+    /**
+     * 滚动加载通证列表
+     */
+    async nextPage() {
+      if (this.total > this.page * this.page_size) {
+        this.page += 1;
+        await this.getList(false);
+      }
+    }
   },
 }
 </script>
 
 <style scoped>
-
+.list-table {
+  margin-top: 21px;
+}
 </style>

src/components/pass/TransferRecordList.vue

+<template>
+  <div>
+    <el-table
+        :data="transferList"
+        style="width: 100%">
+      <el-table-column
+          v-for="item in columns"
+          :key="item.label"
+          :label="item.label"
+          align="center"
+          :show-overflow-tooltip="true"
+          :min-width="item.mWidth"
+          :width="item.width"
+      >
+        <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>
+  </div>
+</template>
+
+<script>
+import {debounce} from "../../utils/tool/debounce";
+import {GO_URLS} from "../../config/URLS";
+
+export default {
+  name: "TransferRecordList",
+  props: ['transferList'],
+  data() {
+    return {
+      columns: [
+        {
+          label: "转账名称",
+          prop: "pass_name",
+          mWidth: 100,
+          width: 0,
+        },
+        {
+          label: "通证标识",
+          prop: "identifier",
+          mWidth: 0,
+          width: 180,
+        },
+        {
+          label: "划转地址",
+          prop: "to",
+          mWidth: 100,
+          width: 0,
+        },
+        {
+          label: "划转数量",
+          prop: "amount",
+          mWidth: 60,
+          width: 0,
+        },
+        {
+          label: "划转时间",
+          prop: "create_time",
+          mWidth: 80,
+          width: 0,
+        },
+        {
+          label: "划转状态",
+          prop: "status",
+          mWidth: 80,
+          width: 0,
+        }
+      ],
+      passShow: false, // 显示转账弹窗
+      curItem: {}
+    }
+  },
+  methods: {
+    reIssue: debounce(async function (content) {
+      const res = await this.$ajax({
+        type: "post",
+        url: GO_URLS.reTransfer,
+        params: {
+          id: content.id
+        },
+      });
+      if (!res) return;
+      this.$message.success('重新转账成功');
+      this.$emit('update');
+    }, 500, false),
+  }
+}
+</script>
+
+<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

@@ -62,4 +62,7 @@ export class GO_URLS {
     static passList = prefix_go + '/api/passes'; // 获取通证列表
     static reissue = prefix_go + '/api/passes/reissue'; // 重新发行通证
     static transfer = prefix_go + '/api/pass/transfer'; // 添加转账
+    static reTransfer = prefix_go + '/api/pass/transfer/reissue'; // 重新发行转账
+    static transferList = prefix_go + '/api/pass/transfers'; // 查询转账列表
+
 }