阶段性提交

src/components/common/Cell.vue

@@ -22,7 +22,7 @@
 
 
     <!-- 右边 -->
-    <div class="right flex items-center overflow-hidden">
+    <div class="right flex items-center overflow-ellipsis">
       <div v-if="type == 'click'" @click="eventEmit(type)">
         <div class="flex items-center">
           <div class="text-sm">{{ value }}</div>
@@ -34,11 +34,12 @@
         <input
           v-model="inputValue"
           type="text"
-          class="bg-transparent"
+          class="bg-transparent text-sm"
           :placeholder="placeholder"
           @input="cellOnChange"
         />
       </div>
+
       <input v-else-if="type === 'input-num'"
         :value="inputValue"
         type="number"
@@ -47,6 +48,7 @@
         class="bg-transparent"
         :placeholder="placeholder"
       />
+
       <div v-else-if="type === 'pick'">
         <div class="flex flex-row items-center">
           <div @click="eventEmit(type)">
@@ -73,6 +75,7 @@
           </div>
         </div>
       </div>
+
       <div v-else-if="type === 'upload'" class="overflow-hidden">
         <div class="flex flex-row items-center overflow-hidden">
           <div
@@ -94,15 +97,17 @@
           </div>
         </div>
       </div>
+      
       <div v-else-if="type === 'showText'" class="overflow-hidden">
-        <div class="flex flex-row items-center overflow-hidden">
+        <div class="flex flex-row items-center overflow-ellipsis">
           <div
             v-if="name"
-            class="overflow-hidden overflow-ellipsis"
+            class="overflow-hidden text-xs"
             id="copyNodeId"
           >
             {{ name }}
           </div>
+          
           <div ref="btn" @click="handleClickCopy(name)" class="ml-1">
             <app-icon name="icon-fuzhi" size="18px"></app-icon>
           </div>

src/service/nftService/nftService.ts

@@ -28,6 +28,10 @@ export class NFTService extends Service {
       path: '/oss/policy',
       dataType: 'application/x-www-form-urlencoded',
     },
+    fileUpload: {
+      path: '/oss/upload',
+      dataType: 'multipart/form-data'
+    },
     getMd5: { path: '/nft/file/md5', dataType: 'multipart/form-data' },
     save: { path: '/nft/save', dataType: 'multipart/form-data' },
     publish: { path: '/nft/publish', dataType: 'application/json' },
@@ -205,6 +209,18 @@ export class NFTService extends Service {
     })
   }
 
+  //普通文件上传
+  async fileUpload(file:File):Promise<string>{
+    const fd = new FormData()
+    fd.append('file',file)
+    return await this.service.post(this.router.fileUpload.path,fd,{
+      headers: {
+        Authorization: this.getAuth(),
+        'Content-Type': this.router.fileUpload.dataType,
+      }
+    })
+  }
+
   /**
    * 完成OSS签名
    */

src/service/nftService/types.ts

@@ -11,4 +11,5 @@ export interface iSaveData {
   isGrant?: number
   fileUrl?: string
   fileName?: string
+  cover?: string
 }

src/view/NFT/Create/form.vue

@@ -18,7 +18,7 @@
           :text='fromText.nameText'
           :validate="{ maxLen: 20 }"
           :placeholder="fromText.namePlaceholder"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-sm"
           @cellOnChange="(v) => setCreateNFT({ value_name: v })"
         ></app-cell>
         <app-cell
@@ -27,7 +27,7 @@
           :text="fromText.authorText"
           :validate="{ maxLen: 20 }"
           :placeholder="fromText.authorPlaceholder"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-sm"
           @cellOnChange="(v) => setCreateNFT({ value_publisher: v })"
         ></app-cell>
         <app-cell
@@ -73,7 +73,7 @@
       <div class="step-two" v-if="currentStep == 2">
         <app-cell
           :text="fromText.fileUploadText"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-xs"
           type="upload"
           :placeholder="fromText.filePlaceholder"
           :name="fileName"
@@ -81,7 +81,7 @@
         ></app-cell>
         <app-cell
           text="封面上传(非必填)"
-          class="text-font-white my-3 "
+          class="text-font-white my-3 text-xs"
           type="upload"
           placeholder="请上传相关封面"
           :name="coverName"
@@ -89,7 +89,7 @@
         ></app-cell>
         <app-cell
           :text="fromText.fileHashText"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-xs"
           type="showText"
           :name="fileHash"
           @cellOnChange="getValue"
@@ -101,7 +101,7 @@
           labelIcon="icon-wenhao"
           @clickIcon="alertPlatformSave"
           :list="archivesList"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-xs"
           @cellOnChange="(v) => (createNFT.archives = v)"
         ></app-cell>
         <app-cell
@@ -112,7 +112,7 @@
           labelIcon="icon-wenhao"
           @clickIcon="alertAuthorizeRead"
           :list="grantList"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-xs"
           @cellOnChange="(v) => (createNFT.grant = v)"
         ></app-cell>
         <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
@@ -138,20 +138,20 @@
           text="NFT编号"
           type="showText"
           :name="publish.nftId"
-          class="text-font-white my-3 break-all"
+          class="text-font-white my-3 text-xs"
         ></app-cell>
         <app-cell
           :text="fromText.fileHashText"
           type="showText"
           :name="publish.fileHash"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-xs"
           @cellOnChange="getValue"
         ></app-cell>
         <app-cell
           text="发行人地址"
           type="showText"
           :name="publish.wallet"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-xs"
           @cellOnChange="getValue"
         ></app-cell>
         <app-cell
@@ -160,7 +160,7 @@
           :value="1"
           :disabled="true"
           type="input-num"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-xs"
           @cellOnChange="
             (v) => {
               publish.count = v;
@@ -344,7 +344,8 @@ export default Vue.extend({
       fileName: "fileName",
       file: "file",
       pickedList: "pickedList",
-      coverName: 'coverName'
+      coverName: 'coverName',
+      coverFile: "coverFile"
     }),
     validation(): boolean {
       let disabled = true;
@@ -442,15 +443,15 @@ export default Vue.extend({
       this.$router.push("/Nft/create/pick");
     },
     async publishNft() {
-      try {
+      // try {
         this.loading4 = true;
         const result = this.$service.nftService.publish({
           fileHash: this.fileHash,
           id: this.publish.id,
           wallet: this.publish.wallet,
           nftId: this.publish.nftId,
-        
         });
+        // const result = this.$service.nftService.publish();
         result
           .then((ret: any) => {
             this.success = ret === true;
@@ -463,20 +464,22 @@ export default Vue.extend({
             this.success = false;
             this.errorMsg = err;
           });
-      } catch (err) {
-        console.log(err);
-      }
+      // } catch (err) {
+      //   console.log(err);
+      // }
     },
+
     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}`;
     },
+
     async encryptAndPushToChain() {
       this.loading2 = true;
-      let mistake = false;
-      try {
+      // let mistake = false;
+      // try {
         let data = {
           author: this.createNFT.value_publisher,
           categoryId: parseInt(this.categoryId) ,
@@ -492,6 +495,7 @@ export default Vue.extend({
             isArchives: this.createNFT.archives,
           };
         } else if (this.createNFT.archives === 1) {
+          //需要加密存档
           const fileUrl = await this.uploadFileToOss(this.file);
           data = {
             ...data,
@@ -502,29 +506,46 @@ export default Vue.extend({
             isGrant: this.createNFT.grant,
           };
         }
-
+        if(this.coverFile){
+          const coverImgUrl = await this.$service.nftService.fileUpload(this.coverFile)
+          data = {
+            ...data,
+            cover: coverImgUrl
+          }
+        }
+        
         const { id, nftId, wallet, fileHash } =
         await this.$service.nftService.save(data);
         this.publish.fileHash = fileHash;
         this.publish.nftId = nftId;
         this.publish.id = id;
         this.publish.wallet = wallet;
-      } catch (err) {
-        mistake = true;
-      }
+
+
+      // } catch (err) {
+      //   mistake = true;
+      // }
       this.loading2 = false;
-      if (mistake) return;
+      // if (mistake) return ;
     },
+
+    
     async currentStepChange(val: number) {
-      if (this.currentStep === 2 && val === 1) {
-        await this.encryptAndPushToChain();
-      } else if (this.currentStep === 3 && val === 1) {
-        await this.publishNft();
+      try{
+        if (this.currentStep === 2 && val === 1) {
+          await this.encryptAndPushToChain();
+        } else if (this.currentStep === 3 && val === 1) {
+          await this.publishNft();
+        }
+      }catch(err){
+        this.loading2 = false
+        return 
       }
       if (this.currentStep < this.mySteps.length + 1) {
         this.currentStep += val;
       }
     },
+
     clickRepublish() {
       this.currentStep = 1;
     },

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">{{uploadAccept.acceptTitle}}</div>
-    <input type="file" id="upload" class="hidden" @change="handleFileChange('inputFile')" ref="inputFile" :accept="uploadAccept.acceptType"/>
-    <input type="file" id="upload" accept="image/*" class=" hidden" ref='localImgElem' @change="handleFileChange('localImgElem')"/>
-    <input type="file" id="upload" accept="image/*" capture="camera" class=" hidden" ref='cameraElem' @change="handleFileChange('cameraElem')"/>
+    <div class="text-font-white mt-20 text-center mb-6">{{uploadAccept.acceptTitle}}</div>
+    <input type="file" class="upload hidden" @change="handleFileChange('inputFile')" ref="inputFile" :accept="uploadAccept.acceptType"/>
+    <input type="file" accept="image/*" class="upload hidden" ref='localImgElem' @change="handleFileChange('localImgElem')"/>
+    <input type="file" accept="image/*" capture="camera" class="upload hidden" ref='cameraElem' @change="handleFileChange('cameraElem')"/>
     <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
 
-    <label @click="initUpload" class="inline-block">
-      <div
-        ref="uploadBox"
-        class="
-          upload-box
-          text-center
-          flex
-          items-center
-          justify-center
-          text-font-white
-        "
-      >
+    <div
+      ref="uploadBox"
+      class="
+        upload-box
+        text-center
+        text-font-white
+      "
+      :class="{hiddenBorder:((uploadType == '封面图片' && coverName) || (uploadType == '图片' && fileName))}"
+    >
+      <img
+        @click="initUpload"
+        v-if="uploadNull "
+        src="@/assets/icons/upload.png"
+        alt=""
+        class="mx-auto mt-28"
+      />
+      <Loading type="spiner mt-16" v-else-if="uploadLoading" />
+      <!-- 当上传的是图片或封面图片 -->
+      <div v-else-if="showImgUploadImg" class="img-box">
         <img
-          v-if="showNotUploadImg "
-          src="@/assets/icons/upload.png"
-          alt=""
-          class="mx-auto"
-        />
-        <img
-          v-else-if="showImgUploadImg"
           :src="showUploadFile"
           alt=""
           class="mx-auto"
+          @click="showFullImg"
         />
-        <img
-          v-else-if="status === uploadStatus.success && uploadType !== '图片' && uploadType !== '封面图片'"
-          src="@/assets/icons/upload.png"
-          alt=""
-          class="mx-auto"
-        />
-        <Loading type="spiner" v-else-if="status === uploadStatus.uploading || coverstatus === uploadStatus.uploading" />
-        <div v-else-if="status === uploadStatus.failed || coverstatus === uploadStatus.uploading">上传失败</div>
       </div>
-    </label>
 
-    <div class="text-center text-font-white">
-      <div v-if="(uploadType == '封面图片' && !coverName) || (uploadType !== '封面图片' && !fileName)" class="mt-2">{{uploadAccept.acceptText}}</div>
-      <div v-else class="mt-2">
+      <!-- 当上传的不是图片或封面图片 -->
+      <img
+        v-else-if="status === uploadStatus.success && uploadType !== '图片' && uploadType !== '封面图片'"
+        src="@/assets/img/file.png"
+        alt=""
+        class="mx-auto mt-16"
+      />
+      <div v-else-if="uploadFailed">上传失败</div>
+      <div v-if="!(uploadType == '封面图片' && !coverName) || (uploadType !== '封面图片' && !fileName)" class=" w-40 mx-auto mt-2 text-xs">
         {{ (uploadType == '封面图片' && coverName)?coverName:fileName }}
       </div>
-      <!-- <div v-if="uploadType == '封面图片' && coverName" class="mt-2">
-        {{ coverName }}
+      <div v-if="uploadNull" class="mt-2 text-center mx-auto w-40" style="color: #0076ff" @click="initUpload">
+        {{uploadType=='封面图片'?"上传封面":'上传附件'}}
       </div>
-      <div v-else-if="uploadType !== '封面图片' && fileName" class="mt-2">
-        {{ fileName }}
-      </div> -->
-
-      <label for="upload" class="mt-2">
-        <div
-          v-if="showReUpload"
-          style="color: #0076ff"
-          class="inline-block"
-        >
+      <div v-if="showReUpload" class="mt-2 flex mx-auto w-40 justify-between" style="color: #0076ff"> 
+        <div @click="clearUpload">
+          删除上传
+        </div>
+        <div @click="initUpload">
           重新上传
         </div>
-      </label>
-
+      </div>
     </div>
+    <div class="mt-2 mx-auto w-56 text-center text-font-white text-xs">{{uploadAccept.acceptText}}</div>
 
     <div class="flex justify-between fixed bottom-0 left-0 right-0">
       <app-btn
@@ -141,11 +134,11 @@ export default Vue.extend({
         case '剧本':
           return {acceptTitle:'请上传剧本附件',acceptType:'application/pdf,application/msword,text/plain',acceptText:'支持扩展名格式PDF'}
         case '视频':
-          return {acceptTitle:'请上传视频附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为100M以内'}
+          return {acceptTitle:'请上传视频附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为500M以内'}
         case '电影':
-          return {acceptTitle:'请上传电影附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为100M以内'}
+          return {acceptTitle:'请上传电影附件',acceptType:'video/*',acceptText:'上传电影仅支持MOV、MP4格式文件，大小限制为1G以内'}
         case '音频':
-          return {acceptTitle:'请上传音频附件',acceptType:"audio/*",acceptText:'上传音频仅支持MP3格式文件'}
+          return {acceptTitle:'请上传音频附件',acceptType:"audio/*",acceptText:'上传音频仅支持MP3格式文件，大小限制为100M以内'}
         case '图片':
           return {acceptTitle:'请上传图片附件',acceptType:'image/*',acceptText:'仅支持png、jpg图片'}
         case '封面图片':
@@ -163,14 +156,23 @@ export default Vue.extend({
         return ''
       }
     },
-    showNotUploadImg():boolean{
-      return (this.uploadType !== '封面图片' && this.status === uploadStatus.NULL) || (this.uploadType == '封面图片' && this.coverstatus === uploadStatus.NULL)
-    },
     showImgUploadImg():boolean{
       return (this.status === uploadStatus.success && this.uploadType == '图片') || (this.coverstatus === uploadStatus.success && this.uploadType == '封面图片')
     },
+    uploadNull():boolean{
+      return ((this.uploadType !== '封面图片' && this.status === uploadStatus.NULL)||(this.uploadType == '封面图片' && this.coverstatus === uploadStatus.NULL))
+    },
+    uploadLoading():boolean{
+      return ((this.uploadType !== '封面图片' && this.status === uploadStatus.uploading)||(this.uploadType == '封面图片' && this.coverstatus === uploadStatus.uploading))
+    },
+    uploadSuccess():boolean{
+      return ((this.uploadType !== '封面图片' && this.status === uploadStatus.success)||(this.uploadType == '封面图片' && this.coverstatus === uploadStatus.success))
+    },
     showReUpload():boolean{
       return ((this.uploadType !== '封面图片') && (this.status === uploadStatus.failed || this.status === uploadStatus.success))||((this.uploadType == '封面图片') && (this.coverstatus === uploadStatus.failed || this.coverstatus === uploadStatus.success))
+    },
+    uploadFailed():boolean {
+      return ((this.uploadType !== '封面图片' && this.status === uploadStatus.failed)||(this.uploadType == '封面图片' && this.coverstatus === uploadStatus.failed))
     }
   },
   methods: {
@@ -199,6 +201,7 @@ export default Vue.extend({
       const ele = this.$refs[ref] as HTMLInputElement;
       const files = ele.files;
       if (files && files.length >= 1) {
+        this[this.uploadType == '封面图片'? 'coverstatus':'status'] = uploadStatus.uploading;
         this.afterRead(files[0]);
       }
     },
@@ -210,38 +213,47 @@ export default Vue.extend({
         const ab = await file.arrayBuffer();
         const fileMd5 = md5(Buffer.from(ab));
         
-        // const ossRet = await this.$service.nftService.ossPolicy();
-        // const uploadRet = await this.$service.nftService.uploadFileToOss(
-        //   file,
-        //   ossRet
-        // );
         if(this.uploadType == '封面图片') {
-          this.coverstatus = uploadStatus.uploading;
           this.setState({
             coverName: file.name,
             coverFile: file,
           });
-          this.coverstatus = uploadStatus.success;
         }else {
-          this.status = uploadStatus.uploading;
           this.setState({
             fileName: file.name,
             fileHash: fileMd5,
             file: file,
           });
-          this.status = uploadStatus.success;
         }
-
+        this[this.uploadType == '封面图片'? 'coverstatus':'status'] = uploadStatus.success;
       } catch (err) {
-        console.log(err, "show err");
-        if(this.uploadType == '封面图片') {
-          this.coverstatus = uploadStatus.failed;
-        }else {
-          this.status = uploadStatus.failed;
-        }
-        
+        this[this.uploadType == '封面图片'? 'coverstatus':'status'] = uploadStatus.failed;
       }
     },
+    showFullImg(){
+      console.log('图片预览')
+    },
+    clearUpload(){
+      if(this.uploadType == '封面图片'){
+          this.setState({
+            coverName: '',
+            coverFile: undefined,
+          });
+          this.coverstatus = uploadStatus.NULL
+      }else {
+          this.setState({
+            fileName: '',
+            fileHash: '',
+            file: undefined,
+          });
+          this.status = uploadStatus.NULL
+      }
+      for(let item of document.getElementsByClassName('upload')){
+        (item as any).value = ''
+      }
+    },
+
+
     afterRead2(file: any) {
       file.status = "uploading";
       file.message = "上传中...";
@@ -255,12 +267,22 @@ export default Vue.extend({
 });
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .upload-box {
-  width: 140px;
-  height: 71px;
+  width: 200px;
+  height: 280px;
+  margin: 0 auto;
   background: #1d2649;
   border-radius: 15px;
   border: 1px solid #0078ff;
+  padding-top: 1px;
+  .img-box {
+    height: 200px;
+    display: flex;
+    align-items: center;
+  }
+}
+.hiddenBorder {
+  border: none;
 }
 </style>
\ No newline at end of file