store

src/components/common/Cell.vue

@@ -46,15 +46,18 @@
       />
       <div v-else-if="type === 'pick'">
         <div class="flex flex-row items-center">
-          <input
-            @click="eventEmit(type)"
-            :disabled="true"
-            v-if="$store.state.create.pickedList.length === 0"
-            type="text"
-            class="bg-transparent"
-            :placeholder="placeholder"
-          />
+          <div @click="eventEmit(type)">
+            <input
+              @click="eventEmit(type)"
+              :disabled="true"
+              v-if="$store.state.create.pickedList.length === 0"
+              type="text"
+              class="bg-transparent"
+              :placeholder="placeholder"
+            />
+          </div>
           <app-tag
+            @click.native="eventEmit(type)"
             v-for="item in $store.state.create.pickedList"
             :key="item.id"
             :text="item.text"
@@ -69,7 +72,11 @@
       </div>
       <div v-else-if="type === 'upload'" class="overflow-hidden">
         <div class="flex flex-row items-center overflow-hidden">
-          <div v-if="name" class="overflow-hidden overflow-ellipsis">
+          <div
+            v-if="name"
+            class="overflow-hidden overflow-ellipsis"
+            @click="cellOnChange"
+          >
             {{ name }}
           </div>
           <input
@@ -93,18 +100,17 @@
           >
             {{ name }}
           </div>
-          <div
-            ref="btn"
-            @click="handleClickCopy(name)"
-            class="ml-1"
-          >
+          <div ref="btn" @click="handleClickCopy(name)" class="ml-1">
             <app-icon name="icon-fuzhi" size="18px"></app-icon>
           </div>
         </div>
       </div>
       <div v-else-if="type === 'select'" class="overflow-hidden">
         <div class="flex flex-row items-center overflow-hidden">
-          <div class="overflow-hidden overflow-ellipsis">
+          <div
+            class="overflow-hidden overflow-ellipsis"
+            @click="eventEmit(type)"
+          >
             {{ getNameOfSelect(selected) }}
           </div>
           <div @click="eventEmit(type)">
@@ -180,7 +186,7 @@ export default Vue.extend({
       this.$emit("cellOnChange", Number(this.inputValue));
     },
     eventEmit(v: any) {
-      console.log(this.type);
+      console.log("eventEmit");
 
       if (this.disabled) {
         return;
@@ -189,10 +195,7 @@ export default Vue.extend({
         this.$emit("onClick", v);
       }
       if (this.type === "pick") {
-        this.$emit("onClick", (cb: any) => {
-          console.log(cb);
-          return cb;
-        });
+        this.$emit("onClick", v);
       }
       if (this.type === "select") {
         this.show = true;

src/view/NFT/Create/components/certificate/index.vue

+<template>
+  <div class="theContainer bg-white text-left">
+    <div class="top-blur"></div>
+    <div class="top">
+      <div class="title">影视区块链版权电子数据确权书</div>
+      <div class="img-theContainer" style="position: relative">
+        <img class="img" src="/img/cover.png" alt="图片" />
+        <img
+          src="./mark.png"
+          style="position: absolute; right: -40px; bottom: -10px; width: 70px"
+          alt=""
+        />
+      </div>
+      <div class="box">
+        <div>
+          <div>
+            <div class="box-font-title">NFT哈希</div>
+            <div class="box-font-content">{{ nftHash }}</div>
+          </div>
+          <div>
+            <div class="box-font-title">剧本哈希</div>
+            <div class="box-font-content">{{ hash }}</div>
+          </div>
+        </div>
+        <div style="flex-grow: 1"></div>
+        <div class="qr-theContainer">
+          <div class="qr-box">
+            <img
+              src="${qrCode}"
+              style="width: 100%; height: 100%"
+              alt="二维码"
+            />
+          </div>
+          <div class="qr-font">存证二维码</div>
+        </div>
+      </div>
+      <div class="shadow_"></div>
+    </div>
+    <div class="bottom overflow-hidden px-4">
+      <table class="table_ overflow-hidden table-auto w-full">
+        <thead>
+          <tr>
+            <th class="w-1/4"></th>
+            <th class="w-3/4"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>剧本名称</td>
+            <td class="row-value">{{ name }}</td>
+          </tr>
+          <tr>
+            <td>发行人地址</td>
+            <td class="row-value">{{ wallet }}</td>
+          </tr>
+          <tr>
+            <td>发行人</td>
+            <td class="row-value">{{ publisher }}</td>
+          </tr>
+          <tr>
+            <td>存证时间</td>
+            <td class="row-value">{{ publishTimer }}</td>
+          </tr>
+          <tr>
+            <td>剧本审核</td>
+            <td class="row-value">
+              <div class="approve-outer">
+                <div class="approve-inner">{{ approveStatus1 }}</div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>版权证明</td>
+            <td class="row-value">
+              <div class="approve-outer">
+                <div class="approve-inner">{{ approveStatus2 }}</div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  props: {
+    nftHash: {
+      type: String,
+      default: "0x111",
+    },
+    hash: {
+      type: String,
+      default: "0x111",
+    },
+    name: {
+      type: String,
+      default: "0x111",
+    },
+    wallet: {
+      type: String,
+      default: "0x111",
+    },
+    publisher: {
+      type: String,
+      default: "0x111",
+    },
+    publishTimer: {
+      type: String,
+      default: "0x111",
+    },
+    approveStatus1: {
+      type: String,
+      default: "0x111",
+    },
+    approveStatus2: {
+      type: String,
+      default: "0x111",
+    },
+  },
+});
+</script>
+
+<style>
+.theContainer {
+  position: relative;
+  height: calc(240px + 269px);
+  padding: 0 10px;
+  background: rgb(168, 167, 167);
+  overflow: hidden;
+}
+
+.theContainer .top-blur {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 246px;
+  background-image: url(/img/cover.png);
+  background-size: cover;
+  filter: blur(20px);
+  -webkit-filter: blur(20px);
+}
+
+.theContainer .top {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 246px;
+  z-index: 2;
+}
+
+.theContainer .top .title {
+  margin-top: 34px;
+  margin-bottom: 17px;
+  text-align: center;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #edf1f7;
+  line-height: 22px;
+}
+
+.theContainer .top .img-theContainer {
+  z-index: 2;
+  position: relative;
+  margin: 0 auto;
+  margin-bottom: 16px;
+  width: 86px;
+  height: 119px;
+  background-color: #a7b5b9;
+  border-radius: 2px;
+  opacity: 0.6;
+}
+
+.img-theContainer .img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 79px;
+  height: 111px;
+}
+
+.theContainer .box {
+  position: relative;
+  z-index: 20;
+  background: #ffffff;
+  border-radius: 5px;
+  margin: 0 10px;
+  display: flex;
+  white-space: normal;
+  padding: 10px 15px;
+}
+
+.theContainer .shadow_ {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  background-image: url(./shadow.png);
+  background-position: center;
+  height: 43px;
+  background-repeat: no-repeat;
+  margin-top: -21px;
+}
+
+.box-font-title {
+  font-size: 8px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #1d2649;
+  margin-bottom: 3px;
+}
+
+.box-font-content {
+  font-size: 8px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #1d2649;
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+
+.box-font-content:last-of-type {
+  margin-bottom: 0;
+}
+
+.qr-theContainer {
+  position: relative;
+  margin-left: 20px;
+  text-align: center;
+  align-self: center;
+}
+
+.qr-font {
+  font-size: 8px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #1d2649;
+  word-break: keep-all;
+}
+
+.qr-box {
+  width: 40px;
+  height: 40px;
+  background-color: gray;
+  margin: 0 auto;
+  margin-bottom: 4px;
+}
+
+.theContainer .bottom {
+  position: absolute;
+  top: 246px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-image: url(./bg.png);
+  z-index: 1;
+}
+
+.bottom .table_ {
+  margin-top: 77px;
+  padding-left: 38px;
+  padding-right: 38px;
+  table-layout: fixed;
+
+  font-size: 10px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #1d2649;
+  line-height: 20px;
+}
+
+.table_ .row-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.approve-outer {
+  border: 1px solid #ef797e;
+  border-radius: 3px;
+  height: 25px;
+  width: fit-content;
+}
+
+.approve-inner {
+  border: 1px solid #ee0000;
+  border-radius: 3px;
+  margin: 1px;
+  color: #ef797e;
+  text-align: center;
+  padding: 0 3px;
+}
+
+.table_ tr,
+td {
+  width: auto;
+}
+</style>
\ No newline at end of file

src/view/NFT/Create/form.vue

@@ -182,14 +182,19 @@
             :size="60"
             :color="'#0078FF'"
           />
-          <div class="mt-6 text-font-white">loading...</div>
+          <div class="mt-6 text-font-white">发行中...</div>
         </div>
         <div v-else class="text-center">
-          <div v-if="success">
+          <div v-if="success" class=" absolute top-0 left-0 right-0">
             <div>恭喜您获得NFT证书</div>
             <img src="@/assets/img/starBg.png" class="w-full" alt="" />
+            <certificate class="-mt-36" />
             <div>保存下载</div>
-            <img src="@/assets/icons/close_publish.png" class=" w-5 mx-auto mt-10" alt="" />
+            <img
+              src="@/assets/icons/close_publish.png"
+              class="w-5 mx-auto mt-10"
+              alt=""
+            />
           </div>
           <div
             v-else
@@ -255,7 +260,7 @@ export default Vue.extend({
           text: "NFT发行",
         },
       ],
-      currentStep: 1,
+      currentStep: 4,
       loading2: false,
       loading3: false,
       loading4: false,
@@ -268,6 +273,7 @@ export default Vue.extend({
     "app-steps": () => import("@/components/common/Steps.vue"),
     "app-cell": () => import("@/components/common/Cell.vue"),
     "app-btn": () => import("@/components/common/Btn.vue"),
+    certificate: () => import("./components/certificate/index.vue"),
     BreedingRhombusSpinner,
   },
   async mounted() {
@@ -278,6 +284,14 @@ export default Vue.extend({
       pickedList: [],
     });
   },
+  destroyed() {
+    this.setState({
+      pickedList: [],
+      fileHash: "",
+      fileName: "",
+      file: undefined,
+    });
+  },
   computed: {
     ...mapState("create", {
       fileHash: "fileHash",
@@ -351,8 +365,8 @@ export default Vue.extend({
     getValue(val: string) {
       console.log(val);
     },
-    what(item: Function) {
-      item(this.$router.push("/Nft/create/pick"));
+    what() {
+      this.$router.push("/Nft/create/pick");
     },
     async publishNft() {
       try {