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

src/components/common/Btn.vue

 <template>
-        <div class="text-xs px-3 py-2 text-center cursor-pointer rounded my-3 flex items-center justify-center" :class="disabled?'filter grayscale':'' "   @click="eventEmit">
-           {{text}} <slot name="icon-right"></slot>
-        </div>
+  <div
+    class="
+      text-xs
+      px-3
+      py-2
+      text-center
+      cursor-pointer
+      rounded
+      my-3
+      flex
+      items-center
+      justify-center
+    "
+    :class="[disabled ? 'filter grayscale' : '', loading ? ' opacity-75' : '']"
+    @click="eventEmit"
+  >
+    {{ text }} <slot name="icon-right"></slot>
+    <Loading type="spiner" size="16" class="ml-2" v-if="loading" />
+  </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { Loading } from "vant";
+import Vue from "vue";
 export default Vue.extend({
-  name: 'AppIcon',
+  components: {
+    Loading,
+  },
+  name: "AppIcon",
   props: {
     size: String,
     disabled: {
-        type:Boolean,
-        default:false
+      type: Boolean,
+      default: false,
+    },
+    text: {
+      type: String,
+      required: true,
+    },
+    border: {
+      type: String,
+      default: "border border-app-dark-4",
     },
-    text:{
-        type: String,
-        required: true
+    loading: {
+      type: Boolean,
+      default: false,
     },
-    border:{
-        type: String,
-        default:'border border-app-dark-4'
-    }
   },
-  methods:{
-      eventEmit(v:any){
-          if(this.disabled){
-              return
-          }
-          this.$emit('btnClicked',v)
+  methods: {
+    eventEmit(v: any) {
+      if (this.disabled || this.loading) {
+        return;
       }
+      this.$emit("btnClicked", v);
+    },
   },
-
 });
 </script>
 

src/components/common/Cell.vue

@@ -8,10 +8,16 @@
     "
   >
     <div class="left flex items-center">
-      <app-icon v-if="labelIcon" :name="labelIcon" size="18px"></app-icon>
       <div class="px-2">
         {{ text }}
       </div>
+      <app-icon
+        v-if="labelIcon"
+        :name="labelIcon"
+        color="#ED6F6F"
+        @click.native="$emit('clickIcon')"
+        size="18px"
+      ></app-icon>
     </div>
     <div class="right flex items-center overflow-hidden">
       <div v-if="type == 'click'" @click="eventEmit(type)">
@@ -51,7 +57,7 @@
             :key="item.id"
             :text="item.text"
             :id="item.id"
-            class="text-sm rounded-xl text-font-white bg-app-red"
+            class="text-sm rounded-xl text-font-white bg-app-red ml-1"
             :active="true"
           ></app-tag>
           <div @click="eventEmit(type)">
@@ -82,15 +88,10 @@
             v-if="name"
             class="overflow-hidden overflow-ellipsis"
             id="copyNodeId"
-            :data-clipboard-text="name"
           >
             {{ name }}
           </div>
-          <div
-            data-clipboard-target="#copyNodeId"
-            ref="btn"
-            @click="handleClickCopy"
-          >
+          <div :data-clipboard-text="name" ref="btn" @click="handleClickCopy">
             <app-icon name="icon-fuzhi" size="18px"></app-icon>
           </div>
         </div>
@@ -165,9 +166,6 @@ export default Vue.extend({
       show: false,
     };
   },
-  mounted() {
-    console.log(this.value, "show value");
-  },
   methods: {
     handleInput(e: any) {
       // const temp = this.inputValue;
@@ -210,7 +208,7 @@ export default Vue.extend({
         (item: any) => item.value === selected
       ) as any;
       console.log(item, selected);
-      return item && item.name
+      return item && item.name;
     },
   },
   computed: {

src/style.less

@@ -66,4 +66,28 @@ body{
   .list-scroll{
     height: calc(100vh - 400px);
     overflow-y: scroll;
+  }
+
+  .van-dialog{
+    background-color: #1D2649;
+
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #8899B3;
+    .van-dialog__content,.van-dialog__message, .van-dialog__message--has-title{
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #EEF1F6;
+    }
+    .van-hairline--top, .van-dialog__footer, .van-button{
+      background-color: #1D2649;
+    }
+    .van-button__text{
+      font-size: 14px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #0078FF;
+    }
   }
\ No newline at end of file

src/view/NFT/Create/form.vue

@@ -34,14 +34,6 @@
           class="text-font-white my-3"
           @onClick="what"
         ></app-cell>
-        <!-- <app-cell
-          text="分类"
-          type="select"
-          :selected="createNFT.categoryType"
-          :list="categoryTypes2"
-          class="text-font-white my-3"
-          @cellOnChange="(v) => (createNFT.categoryType = v)"
-        ></app-cell> -->
         <div>
           <div class="text-font-white my-2">剧本简介</div>
           <textarea
@@ -89,6 +81,8 @@
           text="平台存档"
           type="select"
           :selected="createNFT.archives"
+          labelIcon="icon-wenhao"
+          @clickIcon="alertPlatformSave"
           :list="archivesList"
           class="text-font-white my-3"
           @cellOnChange="(v) => (createNFT.archives = v)"
@@ -97,6 +91,8 @@
           text="授权阅读"
           type="select"
           :selected="createNFT.grant"
+          labelIcon="icon-wenhao"
+          @clickIcon="alertAuthorizeRead"
           :list="grantList"
           class="text-font-white my-3"
           @cellOnChange="(v) => (createNFT.grant = v)"
@@ -112,6 +108,7 @@
             text="下一步"
             class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
             :disabled="validation"
+            :loading="loading2"
             border="none"
             @btnClicked="currentStepChange(1)"
           ></app-btn>
@@ -162,6 +159,7 @@
             class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
             border="none"
             :disabled="validation"
+            :loading="loading3"
             @btnClicked="currentStepChange(1)"
           ></app-btn>
         </div>
@@ -171,8 +169,9 @@
 </template>
 
 <script lang="ts">
+import { Dialog } from "vant";
 import Vue from "vue";
-import { mapState } from "vuex";
+import { mapMutations, mapState } from "vuex";
 
 export default Vue.extend({
   data() {
@@ -205,16 +204,18 @@ export default Vue.extend({
       categoryTypes: [] as any[],
       mySteps: [
         {
-          text: "step1",
+          text: "基本信息",
         },
         {
-          text: "step2",
+          text: "加密上链",
         },
         {
-          text: "step3",
+          text: "NFT发行",
         },
       ],
       currentStep: 1,
+      loading2: false,
+      loading3: false,
     };
   },
   components: {
@@ -227,6 +228,9 @@ export default Vue.extend({
     const list = await this.$service.nftService.getCategory();
     this.categoryTypes = list;
     this.createNFT.categoryType = (list.length !== 0 && list[0].id) || NaN;
+    this.setState({
+      pickedList: [],
+    });
   },
   computed: {
     ...mapState("create", {
@@ -265,12 +269,29 @@ export default Vue.extend({
     },
   },
   methods: {
+    ...mapMutations("create", {
+      setState: "SET_STATE",
+    }),
     setCreateNFT(obj: any) {
       this.createNFT = {
         ...this.createNFT,
         ...obj,
       };
     },
+    alertPlatformSave() {
+      Dialog.alert({
+        title: "提示",
+        message: `1、选择加密存档后，您的剧本将由平台审核保管，您可以授权是否给其他人查看；
+2、选择不存档后，您的剧本将由自己保管，您可以通过私下发送给其他用户查看；`,
+      });
+    },
+    alertAuthorizeRead() {
+      Dialog.alert({
+        title: "提示",
+        message: `1、选择作者授权阅读，剧本需要您本人授权后方可查看；
+2、选择无需授权，剧本可公开阅读。`,
+      });
+    },
     addStep() {
       this.currentStep++;
     },
@@ -288,6 +309,7 @@ export default Vue.extend({
     },
     async currentStepChange(val: number) {
       if (this.currentStep === 2 && val === 1) {
+        this.loading2 = true;
         let mistake = false;
         try {
           const { id, nftId, wallet, fileHash } =
@@ -308,17 +330,23 @@ export default Vue.extend({
           this.publish.wallet = wallet;
         } catch (err) {
           mistake = true;
-          return;
         }
+        this.loading2 = false;
         if (mistake) return;
       } else if (this.currentStep === 3 && val === 1) {
-       await this.$service.nftService.publish({
-          fileHash: this.fileHash,
-          id: this.publish.id,
-          wallet: this.publish.wallet,
-          nftId: this.publish.nftId,
-        });
-        this.$router.back()
+        this.loading3 = true;
+        try {
+          await this.$service.nftService.publish({
+            fileHash: this.fileHash,
+            id: this.publish.id,
+            wallet: this.publish.wallet,
+            nftId: this.publish.nftId,
+          });
+          this.$router.back();
+        } catch (err) {
+          console.log(err);
+        }
+        this.loading3 = false;
       }
       if (this.currentStep < this.mySteps.length + 1) {
         this.currentStep += val;

src/view/NFT/Create/pick.vue

 <template>
-  <Layout-Child>
+  <Layout-Child class='page-scroll'>
     <div class="pt-6">
       <div class="text-font-red text-sm text-center">*最多支持三个选项</div>
       <div class="grid grid-cols-3 w-11/12 mx-auto mt-6">

src/view/NFT/Create/upload.vue

@@ -9,7 +9,7 @@
       ref="inputFile"
       accept=".pdf"
     />
-    <label for="upload">
+    <label for="upload" class="inline-block">
       <div
         ref="uploadBox"
         class="
@@ -18,26 +18,40 @@
           flex
           items-center
           justify-center
-          mx-auto
           text-font-white
         "
       >
         <img
-          v-if="!fileName"
+          v-if="status === uploadStatus.NULL"
           src="@/assets/icons/upload.png"
           alt=""
           class="mx-auto"
         />
-        <img v-else src="@/assets/icons/file.png" alt="" class="mx-auto" />
+        <img
+          v-else-if="status === uploadStatus.success"
+          src="@/assets/icons/file.png"
+          alt=""
+          class="mx-auto"
+        />
+        <Loading type="spiner" v-else-if="status === uploadStatus.uploading" />
+        <div v-else-if="status === uploadStatus.failed">上传失败</div>
       </div>
     </label>
     <div class="text-center text-font-white">
-      <div v-if="!fileName">支持扩展名格式：PDF</div>
-      <div v-if="fileName">
+      <div v-if="!fileName" class="mt-2">支持扩展名格式：PDF</div>
+      <div v-if="fileName" class="mt-2">
         {{ fileName }}
       </div>
-      <label for="upload">
-        <div v-if="fileName">重新上传</div>
+      <label for="upload" class="mt-2">
+        <div
+          v-if="
+            status === uploadStatus.failed || status === uploadStatus.success
+          "
+          style="color: #0076ff"
+          class="inline-block"
+        >
+          重新上传
+        </div>
       </label>
     </div>
     <div class="flex justify-between fixed bottom-0 left-0 right-0">
@@ -59,17 +73,31 @@
 </template>
 
 <script lang="ts">
-
 import Vue from "vue";
+import { Uploader, Loading } from "vant";
 import { mapMutations, mapState } from "vuex";
+
+enum uploadStatus {
+  NULL,
+  uploading,
+  failed,
+  success,
+}
+
 export default Vue.extend({
   data() {
-    return {};
+    return {
+      fileList: [],
+      uploading: false,
+      uploadStatus,
+      status: uploadStatus.NULL,
+    };
   },
   components: {
     "Layout-Child": () => import("@/layout/Child.vue"),
     "app-btn": () => import("@/components/common/Btn.vue"),
-
+    Uploader,
+    Loading,
   },
   computed: {
     ...mapState("create", ["fileName"]),
@@ -90,17 +118,27 @@ export default Vue.extend({
     }),
     async afterRead(file: File) {
       try {
+        this.status = uploadStatus.uploading;
         const ret = await this.$service.nftService.getMd5(file);
         this.setState({
           fileName: file.name,
           fileHash: ret,
-          file: file
+          file: file,
         });
+        this.status = uploadStatus.success;
       } catch (err) {
-        console.log(err);
-        
+        this.status = uploadStatus.failed;
       }
     },
+    afterRead2(file: any) {
+      file.status = "uploading";
+      file.message = "上传中...";
+
+      setTimeout(() => {
+        file.status = "failed";
+        file.message = "上传失败";
+      }, 1000);
+    },
   },
 });
 </script>