feat: 发行通证弹窗

src/components/newProductList/IncrementalDataList.vue

@@ -9,6 +9,7 @@
       <li class="list-chain">上链</li>
       <li class="list-qrcode">二维码</li>
       <li class="list-search">区块链查询</li>
+      <li class="list-pass">通证</li>
       <li class="list-set">操作</li>
     </ul>
     <!-- 表体 -->
@@ -116,6 +117,18 @@
           </div>
         </div>
       </li>
+      <li class="content-pass">
+        <span v-if="false" class="text-black">发行通证</span>
+        <el-button
+            class="text-btn"
+            type="text"
+            @click="showIssuePass(item)"
+            v-else-if="true">发行通证</el-button>
+        <div v-else>
+          <span>已发行</span>
+          <el-button class="text-btn" type="text">查询</el-button>
+        </div>
+      </li>
       <li class="content-set">
         <div class="set-btn_wrapper">
           <i
@@ -193,6 +206,7 @@
           </li>
           <li class="center-placeholder--one"></li>
           <li class="center-placeholder--two"></li>
+          <li class="center-placeholder--three"></li>
           <li class="incremental-operation">
             <div class="btn-box">
               <span
@@ -208,12 +222,19 @@
         </ul>
       </div>
     </ul>
+
+    <!-- 发行通证弹窗-->
+    <common-dialog showMask v-if="passShow" @closePopup="passShow = false">
+      <issue-pass :content="curItem"></issue-pass>
+    </common-dialog>
   </div>
 </template>
 
 <script>
 import { downloadQrCode, getQR, openChainBrowser } from "@/utils/app/common";
+import CommonDialog from "@/components/CommonDialog.vue";
 import { GO_URLS } from "@/config/URLS";
+import IssuePass from "@/components/newProductList/IssuePass";
 export default {
   data() {
     return {
@@ -221,9 +242,15 @@ export default {
       checkBlock: -1,
       checkSet: -1,
       expandTheListIndex: -1,
-      QRcode: "", // 二维码路劲
+      QRcode: "", // 二维码路径
+      passShow: false,
+      curItem: {}
     };
   },
+  components: {
+    CommonDialog,
+    IssuePass
+  },
   watch: {
     getInfoList: function (newv, oldv) {
       this.expandTheListIndex = -1;
@@ -252,6 +279,10 @@ export default {
     },
   },
   methods: {
+    showIssuePass(item) {
+      this.curItem = item;
+      this.passShow = true;
+    },
     increment(item, index) {
       this.$emit("increment", item);
       this.checkSet = -1;
@@ -368,6 +399,17 @@ export default {
   padding: 14px 12px 0 12px;
   min-width: 1024px;
 }
+.text-gray {
+  color: gray;
+}
+.text-black {
+  color: black;
+}
+.text-btn {
+  color: #4A90E2;
+  font-size: 12px;
+  font-weight: normal;
+}
 // 表头
 .list-title {
   list-style: none;
@@ -404,6 +446,10 @@ export default {
     width: 66px;
     text-align: center;
   }
+  .list-pass {
+    width: 100px;
+    text-align:center;
+  }
   .list-set {
     width: 40px;
     text-align: left;
@@ -580,6 +626,10 @@ export default {
       position: relative;
     }
   }
+  .content-pass {
+    width: 100px;
+    text-align: center;
+  }
   .content-set {
     text-align: center;
     width: 40px;
@@ -598,6 +648,9 @@ export default {
   cursor: no-drop;
   color: #b6b5ba;
 }
+.center-placeholder--three {
+  width: 100px;
+}
 .center-placeholder--two {
   width: 64px;
 }
@@ -688,4 +741,4 @@ export default {
     text-align: center;
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/newProductList/IssuePass.vue

+<template>
+  <div class="issue-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>
+      </div>
+      <el-form :rules="rules" :model="formData">
+        <el-form-item label="通证名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入通证名称"></el-input>
+        </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-select>
+        </el-form-item>
+        <el-form-item label="通证数量" prop="amount">
+          <el-input v-model.number="formData.amount" placeholder="请输入通证数量"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" :disabled="disabled">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IssuePass",
+  props: ['content'],
+  data() {
+    return {
+      formData: {
+        name: '',
+        type: '',
+        amount: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入通证名称', trigger: 'blur' },
+        ],
+        type: [
+          { required: true, message: '请选择通证类型', trigger: 'blur' }
+        ],
+        amount: [
+          { required: true, message: '请输入通证数量', trigger: 'blur' }
+        ],
+      }
+    }
+  },
+  computed: {
+    disabled() {
+      return this.formData.name === '' ||
+          this.formData.type === '' ||
+          Number(this.formData.amount) <= 0 ||
+          this.formData.amount === ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.issue-pass {
+  width: 592px;
+  height: 413px;
+  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 67px 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;
+      }
+
+    }
+
+    /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;
+    }
+  }
+
+
+}
+
+</style>