fix: 发行通证

src/components/newProductList/IncrementalDataList.vue

@@ -118,14 +118,14 @@
         </div>
       </li>
       <li class="content-pass">
-        <span v-if="false" class="text-black">发行通证</span>
+        <span v-if="item.status !== 2" class="text-black">发行通证</span>
         <el-button
             class="text-btn"
             type="text"
             @click="showIssuePass(item)"
-            v-else-if="true">发行通证</el-button>
+            v-else-if="item.pass_id === 0">发行通证</el-button>
         <div v-else>
-          <span>已发行</span>
+          <span >已发行</span>
           <el-button class="text-btn" type="text">查询</el-button>
         </div>
       </li>
@@ -225,7 +225,7 @@
 
     <!-- 发行通证弹窗-->
     <common-dialog showMask v-if="passShow" @closePopup="passShow = false">
-      <issue-pass :content="curItem"></issue-pass>
+      <issue-pass :content="curItem" @closePopup="passShow = false"></issue-pass>
     </common-dialog>
   </div>
 </template>
@@ -629,6 +629,12 @@ export default {
   .content-pass {
     width: 100px;
     text-align: center;
+
+    span {
+      font-size: 12px;
+      font-weight: normal;
+      margin: 0 10px;
+    }
   }
   .content-set {
     text-align: center;

src/components/newProductList/IssuePass.vue

@@ -12,20 +12,23 @@
         </el-form-item>
         <el-form-item label="通证类型" prop="type">
           <el-select v-model="formData.type" placeholder="请选择通证类型">
-            <el-option key="FT" label="FT" value="FT"></el-option>
-            <el-option key="NFT" label="NFT" value="NFT"></el-option>
+            <el-option key="FT" label="FT" value="0"></el-option>
+            <el-option key="NFT" label="NFT" value="1"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="通证数量" prop="amount">
-          <el-input v-model.number="formData.amount" placeholder="请输入通证数量"></el-input>
+          <el-input :disabled="amountDisable" v-model.number="formData.amount" placeholder="请输入通证数量"></el-input>
         </el-form-item>
       </el-form>
-      <el-button type="primary" :disabled="disabled">确定</el-button>
+      <el-button @click="submit" type="primary" :disabled="disabled">确定</el-button>
     </div>
   </div>
 </template>
 
 <script>
+import {debounce} from "@/utils/tool/debounce";
+import {GO_URLS} from "@/config/URLS";
+
 export default {
   name: "IssuePass",
   props: ['content'],
@@ -46,6 +49,20 @@ export default {
         amount: [
           { required: true, message: '请输入通证数量', trigger: 'blur' }
         ],
+      },
+      amountDisable: false
+    }
+  },
+  watch: {
+    'formData.type': {
+      handler(val) {
+        if (Number(val) === 1) {
+          this.$set(this.formData, 'amount', 1);
+          this.amountDisable = true;
+        } else {
+          this.$set(this.formData, 'amount', '');
+          this.amountDisable = false;
+        }
       }
     }
   },
@@ -56,6 +73,24 @@ export default {
           Number(this.formData.amount) <= 0 ||
           this.formData.amount === ''
     }
+  },
+  methods: {
+    submit: debounce(async function() {
+      // const params = Object.assign(
+      //     {},
+      //     this.formData,
+      //     {proof_id: this.content.id}
+      // )
+      // params.type = Number(params.type);
+      // console.log(params);
+      // const res = await this.$ajax({
+      //   type: "post",
+      //   url: GO_URLS.pass,
+      //   params
+      // });
+      // if (!res) return;
+      this.$emit('closePopup');
+    }, 500, false)
   }
 }
 </script>

src/components/newProductList/Search.vue

 <template>
   <div class="search-wrapper">
     <div class="choose-type">
-      {{type}}
-      <svg-icon class="arrow-down" icon-class="down"/>
-      <ul v-if="showChooseType">
+      <div class="chosen-type" @click="show('showChooseType')">
+        {{types[query.type]}}
+        <svg-icon class="arrow-down" icon-class="down"/>
+      </div>
+      <ul v-if="showChooseType" class="type-ul" @mousedown.stop>
         <li
-            @click="selectType(type)"
+            @click="selectType(index)"
             :key="type"
-            v-for="type in types">
+            v-for="(type, index) in types">
           {{type}}
         </li>
       </ul>
     </div>
     <div class="input">
-      <input type="text" v-model="searchInput">
-      <svg-icon icon-class="search"></svg-icon>
+      <input type="text" v-model="searchInput" placeholder="搜索通证标识">
+      <svg-icon class="icon-search" icon-class="search"></svg-icon>
     </div>
     <div class="sort">
-      <svg-icon class="icon-sort" icon-class="sort"/>
-      {{sort}}
-      <svg-icon class="arrow-down" icon-class="down"/>
-      <ul v-if="showChangeSort"></ul>
+      <div class="chosen-sort" @click="show('showChangeSort')">
+        <svg-icon class="icon-sort" icon-class="sort"/>
+        {{sorts[query.amount_sort]}}
+        <svg-icon class="arrow-down" icon-class="down"/>
+      </div>
+      <ul v-if="showChangeSort" class="sort-ul" @mousedown.stop>
+        <li
+            @click="selectSort(index)"
+            :key="sort"
+            v-for="(sort, index) in sorts">
+          {{sort}}
+          <svg-icon
+              v-if="index !== 0"
+              class="icon-arrow"
+              :class="{reverse: index === 1}"
+              icon-class="arrow" />
+        </li>
+      </ul>
     </div>
 
   </div>
 </template>
 
 <script>
+import {debounce} from "../../utils/tool/debounce";
+
 export default {
   name: "Search",
+  props: ['query'],
+  model: {
+    prop: 'query',
+    event: 'update'
+  },
   data() {
     return {
-      types: ['全部', 'NFT', 'FT'],
+      types: ['全部', 'FT', 'NFT'],
       sorts: ['默认排序', '数量从低到高', '数量从高到低'],
       searchInput: '',
       type: '全部',
       sort: '默认排序',
       showChooseType: false,
-      showChangeSort: false
+      showChangeSort: false,
+
     }
   },
+  watch: {
+    searchInput: debounce((val) => {
+      this.$emit('update', Object.assign({}, this.query, {identifier: val}))
+    }, 500, false)
+  },
   methods: {
-    selectType(type) {
-      this.type = type;
-    }
+    selectType(index) {
+      this.$emit('update', Object.assign({}, this.query, {type: index}))
+      this.showChooseType = false;
+    },
+    selectSort(index) {
+      this.$emit('update', Object.assign({}, this.query, {amount_sort: index}))
+      this.showChangeSort = false;
+    },
+    show(tag) {
+      this[tag] = true;
+      document.addEventListener("mousedown", this.onMenuBlur);
+    },
+    onMenuBlur() {
+      this.showChooseType = false;
+      this.showChangeSort = false;
+      document.removeEventListener("mousedown", this.onMenuBlur);
+    },
   }
 }
 </script>
@@ -52,8 +95,136 @@ export default {
 .search-wrapper {
   display: flex;
 
+  .choose-type {
+    text-indent: 17px;
+    font-size: 14px;
+    color: #353535;
+    position: relative;
+    display: flex;
+    margin-right: 15px;
+
+    .chosen-type {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 56px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .arrow-down {
+      margin-left: auto;
+      width: 9px;
+      height: 4px;
+    }
+
+    .type-ul {
+      position: absolute;
+      left: 0;
+      top: 40px;
+      width: 154px;
+      padding: 7px 0;
+      background: #FFFFFF;
+      box-shadow: 0 2px 11px 0 rgba(82, 66, 108, 0.16);
+      border-radius: 4px;
+      border: 1px solid #DDDDDD;
+
+      li {
+        line-height: 35px;
+        color: black;
+        font-size: 14px;
+        padding-left: 19px;
+        list-style: none;
+
+        &:hover {
+          background-color: #F5F6FA;
+        }
+      }
+    }
+  }
+
+  .input {
+    position: relative;
+    input {
+      width: 239px;
+      height: 35px;
+      border-radius: 20px;
+      padding-left: 27px;
+      font-size: 14px;
+      border: none;
+      outline: transparent;
+    }
+    .icon-search {
+      position: absolute;
+      right: 21px;
+      top: 9px;
+      width: 19px;
+      height: 19px;
+    }
+  }
+
   .sort {
     margin-left: auto;
+    margin-right: 23px;
+    font-size: 14px;
+    color: #1C2323;
+    display: flex;
+    position: relative;
+
+    .chosen-sort {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      .icon-sort {
+        width: 12px;
+        height: 12px;
+        margin-right: 10px;
+      }
+
+      .arrow-down {
+        width: 9px;
+        height: 4px;
+        margin-left: 8px;
+      }
+    }
+
+    .sort-ul {
+      position: absolute;
+      right: -23px;
+      top: 40px;
+      width: 154px;
+      padding: 7px 0;
+      background: #FFFFFF;
+      box-shadow: 0 2px 11px 0 rgba(82, 66, 108, 0.16);
+      border-radius: 4px;
+      border: 1px solid #DDDDDD;
+
+      li {
+        line-height: 35px;
+        color: black;
+        font-size: 14px;
+        padding-left: 19px;
+        list-style: none;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          background-color: #F5F6FA;
+        }
+
+        .icon-arrow {
+          width: 10px;
+          height: 12px;
+          margin-left: 15px;
+
+          &.reverse {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
   }
 }
 

src/components/pass/Index.vue

@@ -84,6 +84,7 @@ export default {
 .main {
   width: 100%;
   background-color: #F5F6FA;
+  padding: 29px 11px 56px 13px;
 }
 
 </style>

src/components/pass/PassList.vue

 <template>
   <div>
-    <search></search>
+    <search v-model="query"></search>
+    <pass-list-table class="list-table" />
   </div>
 </template>
 
 <script>
 import Search from "../newProductList/Search";
+import PassListTable from "./PassListTable";
+import {GO_URLS} from "../../config/URLS";
 
 export default {
   name: "PassList.vue",
+  data() {
+    return {
+      query: {
+        // 查询通证列表的查询条件
+        type: 0,
+        identifier: '',
+        amount_sort: 0
+      },
+      page: 1,
+      page_size: 50,
+      passList: [], // 查询到的通证列表
+      total: 0
+    }
+  },
   components: {
-    Search
+    Search,
+    PassListTable
+  },
+  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.passList,
+        params
+      });
+      if (refresh) {
+        this.passList = res.data.results;
+      } 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);
+    }
   }
+
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.list-table {
+  margin-top: 21px;
+}
 
 </style>

src/components/pass/PassListTable.vue

+<template>
+  <el-table
+      :data="passList"
+      style="width: 100%">
+    <el-table-column
+        prop="date"
+        label="日期"
+        width="180">
+    </el-table-column>
+    <el-table-column
+        prop="name"
+        label="姓名"
+        width="180">
+    </el-table-column>
+    <el-table-column
+        prop="address"
+        label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "PassListTable",
+  props: ['passList'],
+  data() {
+    return {
+      columns: []
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/pass/TransferRecord.vue

 <template>
-  <div>transfer</div>
+  <div>
+    <search v-model="query"></search>
+    <pass-list-table class="list-table" />
+  </div>
 </template>
 
 <script>
+import Search from "../newProductList/Search";
+import PassListTable from "./PassListTable";
 export default {
-  name: "TransferRecord"
+  name: "TransferRecord",
+  data() {
+    return {
+      query: {
+        // 查询通证列表的查询条件
+        type: 0,
+        identifier: '',
+        amount_sort: 0
+      },
+      page: 1,
+      page_size: 50,
+      passList: [], // 查询到的通证列表
+      total: 0
+    }
+  },
+  components: {
+    Search,
+    PassListTable
+  },
 }
 </script>
 

src/config/URLS.ts

@@ -57,5 +57,7 @@ export class GO_URLS {
     static chunkUpload = prefix_go + '/api/file/chunk/upload'; // 分块上传
     static chunkMerge = prefix_go + '/api/file/chunk/merge'; // 合并分块
     static token = prefix_go + '/api/user/demo/token'; // token
-    static config = prefix_go + '/api/config'; // 跳转链接配置
+    static config = prefix_go + '/api/config'; // 页面跳转以及不同环境的配置数据
+    static pass = prefix_go + '/api/pass'; // 查询或添加通证
+    static passList = prefix_go + '/api/passes'; // 获取通证列表
 }

src/icons/svg/arrow.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="1644981680374" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6334" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M545.792 959.402667v-853.333334h-85.333333v853.333334z" fill="#979797" p-id="6335"></path><path d="M215.808 427.861333l296.106667-296.192 296.277333 296.192 65.877333-65.792L512 0 149.930667 362.069333z" fill="#979797" p-id="6336"></path></svg>
\ No newline at end of file

src/plugins/element.js

@@ -16,7 +16,9 @@ import {
     RadioGroup,
     FormItem,
     BreadcrumbItem,
-    Autocomplete
+    Autocomplete,
+    Table,
+    TableColumn
 } from 'element-ui';
 
 Vue.use(Checkbox);
@@ -33,8 +35,10 @@ Vue.use(RadioGroup)
 Vue.use(BreadcrumbItem)
 Vue.use(FormItem)
 Vue.use(Autocomplete)
+Vue.use(Table)
+Vue.use(TableColumn)
 // Vue.use(Loading)
 Vue.prototype.$loading = Loading;
-// Loading 
+// Loading
 Vue.prototype.$message = Message;
-Vue.prototype.$confirm = MessageBox //暂时先用着
\ No newline at end of file
+Vue.prototype.$confirm = MessageBox //暂时先用着

src/utils/tool/debounce.js

+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(func, wait, immediate) {
+  let timeout, _args, context, timestamp, result
+
+  const later = function () {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, _args)
+        if (!timeout) context = _args = null
+      }
+    }
+  }
+
+  return function (...args) {
+    context = this
+    timestamp = +new Date()
+    _args = args;
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, _args)
+      context = _args = null
+    }
+
+    return result
+  }
+}