feat: 划转弹窗

src/components/newProductList/IssuePass.vue

@@ -76,19 +76,19 @@ export default {
   },
   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;
+      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)
   }

src/components/newProductList/TransferPass.vue

+<template>
+  <div class="transfer-pass">
+    <div class="head">资产转账</div>
+    <div class="form">
+      <div class="content">
+        <img src="../../assets/images/newProductList/pass.png" alt="">
+        已选择 <span class="pass-name">{{content.name}}</span>
+        <span class="pass-type">{{content.type === 1 ? 'NFT' : 'FT'}}</span>
+      </div>
+      <el-form :rules="rules" :model="formData">
+        <el-form-item label="收币地址" prop="to">
+          <el-input v-model="formData.to" placeholder="填写收币地址"/>
+        </el-form-item>
+        <el-form-item label="转账数量" prop="amount" v-if="content.type === 0">
+          <el-input :disabled="amountDisable" v-model.number="formData.amount" placeholder="填写转账数量"></el-input>
+          <span class="balance">{{content.balance}}</span>
+          <el-button type="text">全部</el-button>
+        </el-form-item>
+      </el-form>
+      <el-button @click="submit" type="primary" :disabled="disabled">确定</el-button>
+    </div>
+    <div class="tip-wrapper">
+      <p class="title">提示</p>
+      <p class="tip">1、因区块链交易会有延迟，转账时间约1~10分钟</p>
+      <p class="tip">2、提币前请务必确认转账地址是否正确</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {debounce} from "@/utils/tool/debounce";
+import {GO_URLS} from "../../config/URLS";
+
+export default {
+  name: "TransferPass",
+  props: ['content'],
+  data() {
+    return {
+      formData: {
+        to: '',
+        amount: ''
+      },
+      rules: {
+        to: [
+          { required: true, message: '请输入通证名称', trigger: 'blur' },
+        ],
+        amount: [
+          { required: true, message: '请输入通证数量', trigger: 'blur' }
+        ],
+      },
+      amountDisable: false
+    }
+  },
+  watch: {
+    'content.type': {
+      handler(val) {
+        if (val === 1) {
+          this.$set(this.formData, 'amount', 1)
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    disabled() {
+      return this.formData.to === '' ||
+          Number(this.formData.amount) <= 0 ||
+          this.formData.amount === ''
+    },
+
+  },
+  methods: {
+    submit: debounce(async function() {
+      const params = Object.assign(
+          {},
+          this.formData,
+          {pass_id: this.content.id}
+      )
+      console.log(params);
+      const res = await this.$ajax({
+        type: "post",
+        url: GO_URLS.transfer,
+        params
+      });
+      if (!res) return;
+      this.$message.success('转账成功');
+      this.$emit('closePopup');
+    }, 500, false)
+  }
+}
+</script>
+
+<style scoped lang="less">
+.transfer-pass {
+  width: 592px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  .head {
+    line-height: 60px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #353535;
+    text-align: center;
+    border-bottom: 1px solid #F0F1F5;
+  }
+  .form {
+    padding: 17px 37px 10px 38px;
+
+    .content {
+      width: 517px;
+      height: 56px;
+      background: #F8F8F8;
+      border-radius: 4px;
+      font-size: 14px;
+      line-height: 56px;
+      color: #A6A6A6;
+      display: flex;
+      align-items: center;
+      margin-bottom: 14px;
+
+      img {
+        width: 30px;
+        height: 30px;
+        margin-left: 22px;
+        margin-right: 11px;
+      }
+
+      .pass-name {
+        color: #000000;
+        margin-left: 20px;
+      }
+
+      .pass-type {
+        margin-left: auto;
+        margin-right: 23px;
+        color: #353535;
+      }
+    }
+
+    /deep/.el-form-item {
+      margin-bottom: 17px;
+
+      .el-form-item__label {
+        line-height: 35px;
+        &:before {
+          margin-right: 10px;
+        }
+        padding-right: 22px;
+      }
+      .el-form-item__content {
+        height: 35px;
+        line-height: 35px;
+
+        .el-input {
+          width: 420px;
+          height: 35px;
+          line-height: 35px;
+
+          .el-input__inner {
+            height: 35px;
+            line-height: 35px;
+          }
+        }
+      }
+      .el-form-item__error {
+        padding-left: 94px;
+      }
+      .el-input__icon {
+        line-height: 35px;
+      }
+    }
+    /deep/.el-button--primary {
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      padding: 0;
+      //background-color: #3f79fe;
+    }
+  }
+  .tip-wrapper {
+    padding: 0 40px 60px 38px;
+    font-size: 12px;
+    color: #565656;
+    line-height: 17px;
+
+    .title {
+      color: #FF6268;
+      margin-bottom: 8px;
+    }
+
+    .tip {
+      margin-bottom: 6px;
+    }
+  }
+}
+
+</style>

src/components/pass/PassListTable.vue

 <template>
-  <el-table
-      :data="passList"
-      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>
+    <el-table
+        :data="passList"
+        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>
-          <div
-              class="column-status status2"
+          <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"
-          >
-            发行成功
-          </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>
+              type="text"
+              @click="transfer(scope.row)"
+          >划转</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 发行通证弹窗-->
+    <common-dialog showMask v-if="passShow" @closePopup="passShow = false">
+      <transfer-pass :content="curItem" @closePopup="passShow = false"></transfer-pass>
+    </common-dialog>
+  </div>
 </template>
 
 <script>
 import {debounce} from "../../utils/tool/debounce";
+import CommonDialog from "@/components/CommonDialog.vue";
+import TransferPass from "@/components/newProductList/TransferPass";
 import {GO_URLS} from "../../config/URLS";
 
 export default {
@@ -70,13 +78,13 @@ export default {
         {
           label: "发行数量",
           prop: "amount",
-          mWidth: 80,
+          mWidth: 60,
           width: 0,
         },
         {
           label: "剩余数量",
           prop: "amount",
-          mWidth: 80,
+          mWidth: 60,
           width: 0,
         },
         {
@@ -91,9 +99,15 @@ export default {
           mWidth: 80,
           width: 0,
         }
-      ]
+      ],
+      passShow: false, // 显示转账弹窗
+      curItem: {}
     }
   },
+  components: {
+    CommonDialog,
+    TransferPass
+  },
   methods: {
     reIssue: debounce(async function (content) {
       const res = await this.$ajax({
@@ -107,8 +121,9 @@ export default {
       this.$message.success('重新发行成功');
       this.$emit('update');
     }, 500, false),
-    transfer() {
-
+    transfer(item) {
+      this.curItem = item;
+      this.passShow = true
     }
   }
 }

src/config/URLS.ts

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