上传ui更改

package.json

@@ -19,6 +19,7 @@
     "html-to-image": "^1.6.2",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
+    "moment": "^2.29.1",
     "register-service-worker": "^1.7.1",
     "validator": "^13.6.0",
     "vant": "^2.12.22",

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

@@ -17,9 +17,9 @@
             <div class="w-11/12 p-2 flex-wrap mx-auto flex break-all bg-font-white shadow-md rounded  text-font-black">
                 <div class="w-full text-left ">
                     <div>NFT哈希</div>
-                    <div>{{NFTHASH}}</div>
+                    <div>{{certificateData?certificateData.nftId:'无'}}</div>
                     <div class="pt-1">剧本哈希</div>
-                    <div>{{fileHash}}</div>
+                    <div>{{certificateData?certificateData.fileHash:'无'}}</div>
                 </div>
             </div>
         </div>
@@ -27,27 +27,27 @@
       <div class="bot bg-font-white text-font-black px-3 py-10 pt-12 text-3xs xs:text-2xs">
         <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">剧本名称</div>
-          <div>{{ name }}</div>
+          <div class="flex-1 text-left break-all">{{ certificateData?certificateData.value_name:'无'}}</div>
         </div>
         <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">发行人地址</div>
-          <div>{{ addr }}</div>
+          <div class="flex-1 text-left break-all">{{ certificateData?certificateData.wallet:'无' }}</div>
         </div>
         <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">发行人</div>
-          <div>{{ publisher }}</div>
+          <div class="flex-1 text-left break-all">{{ certificateData?certificateData.value_publisher:'无' }}</div>
         </div>
         <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">存证时间</div>
-          <div>{{ timeStamp }}</div>
+          <div class="flex-1 text-left break-all">{{ createTime }}</div>
         </div>
         <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">剧本审核</div>
-          <div v-if="auditing === 0">剧本未审核</div>
+          <div class="flex-1 text-left break-all" v-if="auditing === 0">剧本未审核</div>
         </div>
         <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">版权证明</div>
-          <div v-if="copyRight === 0">版权未审核</div>
+          <div class="flex-1 text-left break-all" v-if="copyRight === 0">版权未审核</div>
         </div>
       </div>
     </div>
@@ -59,8 +59,14 @@
 <script lang="ts">
 import Vue from "vue";
 import download from 'downloadjs'
+import moment from 'moment'
 import { toPng } from 'html-to-image';
 export default Vue.extend({
+  data(){
+    return {
+      createTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
+    }
+  },
   props: {
     name: {
       type: String,
@@ -93,7 +99,8 @@ export default Vue.extend({
     fileHash:{
         type:String,
         default: "1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0ddd7879774757474974"
-    }
+    },
+    certificateData:Object,
   },
   methods:{
     async downloadImg(){
@@ -108,6 +115,6 @@ export default Vue.extend({
         console.error('oops, something went wrong!', error);
       });
     }
-  }
+  },
 });
 </script>

src/view/NFT/Create/form.vue

@@ -9,6 +9,7 @@
         @stepOnFinished="stepOnFinished"
       ></app-steps>
     </div>
+
     <div class="w-11/12 mx-auto">
       <div class="step-one" v-if="currentStep == 1">
         <app-cell
@@ -37,7 +38,6 @@
           class="text-font-white my-3"
           @click.native="$router.push('/Nft/create/pick')"
         ></app-cell>
-
         <div>
           <div class="my-4 text-font-gray text-sm ml-4">{{fromText.desText}}</div>
           <textarea
@@ -59,7 +59,6 @@
             @input="textareaChange"
           ></textarea>
         </div>
-
         <div class="fixed bottom-0 w-full left-0 z-30">
           <app-btn
             text="下一步"
@@ -70,6 +69,7 @@
           ></app-btn>
         </div>
       </div>
+
       <div class="step-two" v-if="currentStep == 2">
         <app-cell
           :text="fromText.fileUploadText"
@@ -77,7 +77,7 @@
           type="upload"
           :placeholder="fromText.filePlaceholder"
           :name="fileName"
-          @cellOnChange="$router.push({ name: 'NftUpload' })"
+          @cellOnChange="$router.push({ name: 'NftUpload',params:{type:getPreText()}})"
         ></app-cell>
         <app-cell
           text="封面上传(非必填)"
@@ -85,7 +85,7 @@
           type="upload"
           placeholder="请上传相关封面"
           :name="fileName"
-          @cellOnChange="$router.push({ name: 'NftUpload'})"
+          @cellOnChange="$router.push({ name: 'NftUpload',params:{type:'封面图片'}})"
         ></app-cell>
         <app-cell
           :text="fromText.fileHashText"
@@ -132,12 +132,13 @@
           ></app-btn>
         </div>
       </div>
+
       <div class="step-three" v-if="currentStep == 3">
         <app-cell
           text="NFT编号"
           type="showText"
           :name="publish.nftId"
-          class="text-font-white my-3"
+          class="text-font-white my-3 break-all"
         ></app-cell>
         <app-cell
           :text="fromText.fileHashText"
@@ -183,6 +184,7 @@
           ></app-btn>
         </div>
       </div>
+
       <div v-if="currentStep == 4" class="text-font-white">
         <div
           v-if="loading4"
@@ -195,12 +197,12 @@
           />
           <div class="mt-6 text-font-white">发行中...</div>
         </div>
+
         <div v-else class="text-center">
           <div v-if="success" >
               <van-overlay :show="showOverlay"  class=" full-height flex items-center z-50" >
                 <div class="w-10/12 mx-auto">
-                  <certificate />
-               
+                  <certificate :certificateData="certificateData"/>
                   <img
                     @click='showOverlay = !showOverlay;'
                     src="@/assets/icons/close_publish.png"
@@ -217,6 +219,7 @@
                  <app-btn text="确认" class=' bg-font-blue' @click.native="$router.push('/Home')"></app-btn>
               </div>
           </div>
+
           <div
             v-else
             class="flex flex-col items-center w-full pt-16 justify-center"
@@ -304,6 +307,7 @@ export default Vue.extend({
       loading4: false,
       success: true,
       errorMsg: "",
+      certificateData:{},
     };
   },
   components: {
@@ -315,7 +319,6 @@ export default Vue.extend({
     BreedingRhombusSpinner
   },
   async mounted() {
-
     const data = await this.getPreText()
     this.fromText = this.concatFormText(data)
     const list = await this.$service.nftService.getCategory();
@@ -375,7 +378,6 @@ export default Vue.extend({
       setState: "SET_STATE",
     }),
     getPreText():string{
-      console.log(this.categoryId,typeof this.categoryId);
       switch (this.categoryId) {
         case '1':
           return '剧本'
@@ -450,6 +452,7 @@ export default Vue.extend({
           .then((ret: any) => {
             this.success = ret === true;
             this.loading4 = false;
+            this.certificateData = Object.assign({},this.createNFT,this.publish)
             ret !== true && (this.errorMsg = ret);
           })
           .catch((err) => {

src/view/NFT/Create/upload.vue

 
 <template>
   <Layout-Child class="page-scroll text-center">
-    <div class="text-font-white mt-20 text-center mb-20">请上传剧本附件</div>
+    <div class="text-font-white mt-20 text-center mb-20">{{uploadAccept.acceptTitle}}</div>
     <input
       type="file"
       id="upload"
       class="hidden"
       @change="handleFileChange"
       ref="inputFile"
-      accept="application/pdf,application/msword,text/plain"
+      :accept="uploadAccept.acceptType"
     />
 
     <label for="upload" class="inline-block">
@@ -41,10 +41,11 @@
     </label>
 
     <div class="text-center text-font-white">
-      <div v-if="!fileName" class="mt-2">支持扩展名格式：PDF</div>
+      <div v-if="!fileName" class="mt-2">{{uploadAccept.acceptText}}</div>
       <div v-if="fileName" class="mt-2">
         {{ fileName }}
       </div>
+
       <label for="upload" class="mt-2">
         <div
           v-if="
@@ -56,6 +57,7 @@
           重新上传
         </div>
       </label>
+
     </div>
 
     <div class="flex justify-between fixed bottom-0 left-0 right-0">
@@ -112,6 +114,28 @@ export default Vue.extend({
     nextBtnDisabled(): boolean {
       return !this.fileName;
     },
+    uploadType(){
+      return this.$route.params.type
+    },
+    uploadAccept(){
+      switch(this.uploadType){
+        case '剧本':
+          return {acceptTitle:'请上传剧本附件',acceptType:'application/pdf,application/msword,text/plain',acceptText:'支持扩展名格式PDF'}
+        case '视频':
+          return {acceptTitle:'请上传视频附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为100M以内'}
+        case '电影':
+          return {acceptTitle:'请上传电影附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为100M以内'}
+        case '音频':
+          return {acceptTitle:'请上传音频附件',acceptType:"audio/*",acceptText:'上传音频仅支持MP3格式文件'}
+        case '图片':
+          return {acceptTitle:'请上传图片附件',acceptType:'image/*',acceptText:'仅支持png、jpg图片'}
+        case '封面图片':
+          return {acceptTitle:'请上传封面图片',acceptType:'image/*',acceptText:'仅支持png、jpg图片'}
+        default:
+          return {acceptTitle:'',acceptType:'',acceptText:''}
+      }
+    }
+
   },
   methods: {
     handleFileChange() {