Merge branch 'main' of gitlab.33.cn:HF_web/NFT

src/components/common/Cell.vue

@@ -96,7 +96,11 @@
           >
             {{ name }}
           </div>
-          <div :data-clipboard-text="name" ref="btn" @click="handleClickCopy" class="ml-1">
+          <div
+            ref="btn"
+            @click="handleClickCopy(name)"
+            class="ml-1"
+          >
             <app-icon name="icon-fuzhi" size="18px"></app-icon>
           </div>
         </div>
@@ -208,10 +212,23 @@ export default Vue.extend({
     cellOnChange() {
       this.$emit("cellOnChange", this.inputValue);
     },
-    handleClickCopy() {
-      const btn = this.$refs.btn as HTMLElement;
-      new Clipboard(btn);
+    handleClickCopy(text: string | number) {
+      this.$util.cliboard(text);
       this.$toast("复制成功");
+      // const btn = this.$refs.btn as HTMLElement;
+      // const clipboard = new Clipboard(btn);
+      // clipboard.on("success", function (e) {
+      //   console.info("Action:", e.action);
+      //   console.info("Text:", e.text);
+      //   console.info("Trigger:", e.trigger);
+      //   e.clearSelection();
+      // });
+
+      // clipboard.on("error", function (e) {
+      //   console.error("Action:", e.action);
+      //   console.error("Trigger:", e.trigger);
+      // });
+      // this.$toast("复制成功");
     },
     onCancel() {},
     onSelect(value: any) {

src/service/nftService/nftService.ts

@@ -255,7 +255,6 @@ export class NFTService extends Service {
     Object.keys(data).forEach((keyName) => {
       const value = data[keyName as keyof iSaveData]
       value? fd.append(keyName, typeof value === 'number' ? String(value) : value):''
-    
     })
 
     return (await this.service.post(this.router.save.path, fd, {

src/service/nftService/types.ts

 export interface iSaveData {
-  author: string
-  categoryId: number
-  fileHash: string
-  isArchives: number
-  name: string
-  synopsis: string
-  theme: string
-  isGrant: number
+  id?: number
+  nftId?: string,
+  author?: string
+  categoryId?: number
+  fileHash?: string
+  isArchives?: number
+  name?: string
+  synopsis?: string
+  theme?: string
+  isGrant?: number
   fileUrl?: string
-  fileName?:string
+  fileName?: string
 }

src/util/cliboard.ts

+import ClipboardJS from 'clipboard'
+
+export default function (text: string | number) {
+  const ele = document.createElement('div')
+  ele.setAttribute('data-clipboard-text', text.toString())
+  document.body.appendChild(ele)
+  const clipboard = new ClipboardJS(ele)
+  // document.body.removeChild(ele)
+}

src/util/index.ts

 
 import {token,userMsg} from './userInfoUtils'
 import validator from 'validator'
+import cliboard from "./cliboard"
 
 export default {
   install(Vue: any) {
@@ -8,6 +9,7 @@ export default {
       token: token,
       userMsg: userMsg,
       validator:validator,
+      cliboard,
     }
   }
 }

src/util/util.types.ts

 import {token,userMsg} from './userInfoUtils'
 import validator from 'validator'
+import cliboard from './cliboard'
 export interface UTIL_INTERFACE{
     token: typeof token,
     userMsg: typeof userMsg
     validator: typeof validator
+    cliboard: typeof cliboard
 }
\ No newline at end of file

src/view/NFT/Create/form.vue

@@ -2,6 +2,7 @@
   <Layout-Child class="page-scroll">
     <div class="w-7/12 mx-auto my-6">
       <app-steps
+        v-if="currentStep !== 4"
         :data="mySteps"
         :currentStep="currentStep"
         @stepOnChange="stepOnChange"
@@ -171,12 +172,45 @@
           ></app-btn>
         </div>
       </div>
+      <div v-if="currentStep == 4" class="text-font-white">
+        <div
+          v-if="loading4"
+          class="flex flex-col items-center w-full pt-16 justify-center"
+        >
+          <breeding-rhombus-spinner
+            :animation-duration="2000"
+            :size="60"
+            :color="'#0078FF'"
+          />
+          <div class="mt-6 text-font-white">loading...</div>
+        </div>
+        <div v-else class="text-center">
+          <div v-if="success">
+            <div>恭喜您获得NFT证书</div>
+            <img src="@/assets/img/starBg.png" class="w-full" alt="" />
+            <div>保存下载</div>
+            <img src="@/assets/icons/close_publish.png" class=" w-5 mx-auto mt-10" alt="" />
+          </div>
+          <div
+            v-else
+            class="flex flex-col items-center w-full pt-16 justify-center"
+          >
+            <img src="@/assets/img/earth.png" class="w-8/12" alt="" />
+            <div class="mt-16">抱歉，NFT发布失败！</div>
+            <div>失败原因：{{ errorMsg }}</div>
+            <div class="republishBtn mt-6" @click="clickRepublish">
+              重新发行
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </Layout-Child>
 </template>
 
 <script lang="ts">
 import { iSaveData } from "@/service/nftService/types";
+import { BreedingRhombusSpinner } from "epic-spinners";
 import { Dialog } from "vant";
 import Vue from "vue";
 import { mapMutations, mapState } from "vuex";
@@ -224,6 +258,9 @@ export default Vue.extend({
       currentStep: 1,
       loading2: false,
       loading3: false,
+      loading4: false,
+      success: true,
+      errorMsg: "",
     };
   },
   components: {
@@ -231,6 +268,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"),
+    BreedingRhombusSpinner,
   },
   async mounted() {
     const list = await this.$service.nftService.getCategory();
@@ -315,26 +353,34 @@ export default Vue.extend({
     },
 
     async publishNft() {
-      /* 加密上链的下一步点击回调 */
-      this.loading3 = true;
       try {
-        await this.$service.nftService.publish({
+        this.loading4 = true;
+        const result = this.$service.nftService.publish({
           fileHash: this.fileHash,
           id: this.publish.id,
           wallet: this.publish.wallet,
           nftId: this.publish.nftId,
         });
-        this.$router.back();
+        result
+          .then((ret: any) => {
+            this.success = ret === true;
+            this.loading4 = false;
+            ret !== true && (this.errorMsg = ret);
+          })
+          .catch((err) => {
+            this.loading4 = false;
+            this.success = false;
+            this.errorMsg = err;
+          });
       } catch (err) {
         console.log(err);
       }
-      this.loading3 = false;
     },
     async uploadFileToOss(file: File): Promise<string> {
       const ossRet = (await this.$service.nftService.ossPolicy()) as any;
       await this.$service.nftService.uploadFileToOss(file, ossRet);
       const { dir, host } = ossRet;
-      return `${host}/${dir}/${file.name}`;
+      return `${host}/${dir}${file.name}`;
     },
     async encryptAndPushToChain() {
       this.loading2 = true;
@@ -388,6 +434,19 @@ export default Vue.extend({
         this.currentStep += val;
       }
     },
+    clickRepublish() {
+      this.currentStep = 1;
+    },
   },
 });
 </script>
+<style scoped>
+.republishBtn {
+  width: 100px;
+  height: 34px;
+  background: #0078ff;
+  box-shadow: 0px 1px 6px 0px #252836;
+  border-radius: 29px;
+  line-height: 34px;
+}
+</style>
\ No newline at end of file