style：样式优化

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)">
@@ -85,11 +91,7 @@
           >
             {{ name }}
           </div>
-          <div
-            :data-clipboard-text="name"
-            ref="btn"
-            @click="handleClickCopy"
-          >
+          <div :data-clipboard-text="name" ref="btn" @click="handleClickCopy">
             <app-icon name="icon-fuzhi" size="18px"></app-icon>
           </div>
         </div>
@@ -206,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/view/NFT/Create/form.vue

@@ -89,6 +89,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 +99,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 +116,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 +167,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,6 +177,7 @@
 </template>
 
 <script lang="ts">
+import { Dialog } from "vant";
 import Vue from "vue";
 import { mapState } from "vuex";
 
@@ -205,16 +212,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: {
@@ -271,6 +280,20 @@ export default Vue.extend({
         ...obj,
       };
     },
+    alertPlatformSave() {
+      Dialog.alert({
+        title: "标题",
+        message: `1、选择加密存档后，您的剧本将由平台审核保管，您可以授权是否给其他人查看；
+2、选择不存档后，您的剧本将由自己保管，您可以通过私下发送给其他用户查看；`,
+      });
+    },
+    alertAuthorizeRead() {
+      Dialog.alert({
+        title: "标题",
+        message: `1、选择作者授权阅读，剧本需要您本人授权后方可查看；
+2、选择无需授权，剧本可公开阅读。`,
+      });
+    },
     addStep() {
       this.currentStep++;
     },
@@ -288,6 +311,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 +332,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">