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

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>
@@ -40,6 +40,7 @@
           @input="cellOnChange"
         />
       </div>
+
       <input v-else-if="type === 'input-num'"
         :value="inputValue"
         type="number"
@@ -48,6 +49,7 @@
         class="bg-transparent"
         :placeholder="placeholder"
       />
+
       <div v-else-if="type === 'pick'">
         <div class="flex flex-row items-center">
           <div @click="eventEmit(type)">
@@ -74,11 +76,12 @@
           </div>
         </div>
       </div>
+
       <div v-else-if="type === 'upload'" class="overflow-hidden">
         <div class="flex flex-row items-center overflow-hidden">
           <div
             v-if="name"
-            class="overflow-hidden overflow-ellipsis"
+            class="overflow-hidden overflow-ellipsis whitespace-nowrap w-48 text-right"
             @click="cellOnChange"
           >
             {{ name }}
@@ -95,15 +98,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 overflow-ellipsis whitespace-nowrap text-sm w-56"
             id="copyNodeId"
           >
             {{ name }}
           </div>
+          
           <div ref="btn" @click="handleClickCopy(name)" class="ml-1">
             <app-icon name="icon-fuzhi" size="18px"></app-icon>
           </div>
@@ -112,7 +117,7 @@
       <div v-else-if="type === 'select'" class="overflow-hidden">
         <div class="flex flex-row items-center overflow-hidden">
           <div
-            class="overflow-hidden overflow-ellipsis"
+            class="overflow-hidden overflow-ellipsis "
             @click="eventEmit(type)"
           >
             {{ getNameOfSelect(selected) }}
@@ -124,8 +129,8 @@
       </div>
       <div v-else-if="type === 'image'">
         <div class="flex flex-row items-center self-end">
-            <div class='w-20 pr-1'>
-                <img :src="value" class='rounded-full w-18 object-fill' >
+            <div class='w-20 h-20 pr-1 flex items-center'>
+                <van-image width="80" height="80" lazy-load show-loading show-error round fit="cover" :src="value"/>
             </div>
           <app-icon v-if="icon" :name="icon" class="self-center"></app-icon>
         </div>
@@ -183,6 +188,7 @@ export default Vue.extend({
     name: [String, Number],
     selected: [String, Number, Object],
     list: Array,
+    validate:Object,
   },
   data() {
     return {
@@ -215,8 +221,8 @@ export default Vue.extend({
       }
     },
     cellOnChange(e:any) {
-      if(e.target.value && e.target.value.length >= 15) {
-        this.inputValue = (this.inputValue as string).slice(0,15)
+      if(e.target.value && e.target.value.length >= this.validate.maxLen) {
+        this.inputValue = (this.inputValue as string).slice(0,this.validate.maxLen)
       }
       this.$emit("cellOnChange", this.inputValue);
     },

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' },
@@ -209,6 +213,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

@@ -16,18 +16,18 @@
           v-model="createNFT.value_name"
           type="input"
           :text='fromText.nameText'
-          :validate="{ maxLen: 20 }"
+          :validate="{ maxLen: 15 }"
           :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
           v-model="createNFT.value_publisher"
           type="input"
           :text="fromText.authorText"
-          :validate="{ maxLen: 20 }"
+          :validate="{ maxLen: 15 }"
           :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
@@ -44,7 +44,7 @@
             v-model="createNFT.value_des"
             name="des"
             id="nft-des"
-            cols="10"
+            cols="30"
             maxlength="500"
             :placeholder="fromText.desPlaceholder"
             rows="10"
@@ -56,7 +56,6 @@
               rounded-md
               text-sm
             "
-            @input="textareaChange"
           ></textarea>
         </div>
         <div class="fixed bottom-3 w-full left-0 z-30">
@@ -73,7 +72,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-sm"
           type="upload"
           :placeholder="fromText.filePlaceholder"
           :name="fileName"
@@ -81,7 +80,7 @@
         ></app-cell>
         <app-cell
           text="封面上传(非必填)"
-          class="text-font-white my-3 "
+          class="text-font-white my-3 text-sm"
           type="upload"
           placeholder="请上传相关封面"
           :name="coverName"
@@ -89,7 +88,7 @@
         ></app-cell>
         <app-cell
           :text="fromText.fileHashText"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-sm"
           type="showText"
           :name="fileHash"
           @cellOnChange="getValue"
@@ -101,7 +100,7 @@
           labelIcon="icon-wenhao"
           @clickIcon="alertPlatformSave"
           :list="archivesList"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-sm"
           @cellOnChange="(v) => (createNFT.archives = v)"
         ></app-cell>
         <app-cell
@@ -112,7 +111,7 @@
           labelIcon="icon-wenhao"
           @clickIcon="alertAuthorizeRead"
           :list="grantList"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-sm"
           @cellOnChange="(v) => (createNFT.grant = v)"
         ></app-cell>
         <div class="fixed bottom-3 w-full left-0 flex flex-row z-30">
@@ -138,20 +137,20 @@
           text="NFT编号"
           type="showText"
           :name="publish.nftId"
-          class="text-font-white my-3 break-all"
+          class="text-font-white my-3 text-sm"
         ></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-sm"
           @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-sm"
           @cellOnChange="getValue"
         ></app-cell>
         <app-cell
@@ -160,7 +159,7 @@
           :value="1"
           :disabled="true"
           type="input-num"
-          class="text-font-white my-3"
+          class="text-font-white my-3 text-sm"
           @cellOnChange="
             (v) => {
               publish.count = v;
@@ -344,7 +343,8 @@ export default Vue.extend({
       fileName: "fileName",
       file: "file",
       pickedList: "pickedList",
-      coverName: 'coverName'
+      coverName: 'coverName',
+      coverFile: "coverFile"
     }),
     validation(): boolean {
       let disabled = true;
@@ -442,15 +442,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 +463,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 +494,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,37 +505,54 @@ 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;
     },
-    textareaChange(e:any){
-      if(e.target.value.length >= 500) {
-        this.createNFT.value_des = e.target.value.slice(0,500)
-      }
-    }
+    // textareaChange(e:any){
+    //   if(e.target.value.length >= 500) {
+    //     this.createNFT.value_des = e.target.value.slice(0,500)
+    //   }
+    // }
   },
 });
 </script>

src/view/NFT/Detail/index.vue

@@ -161,10 +161,10 @@
 import Vue from "vue";
 import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue"
 import { token } from '@/util/userInfoUtils'
-import anquanzhongxin89 from "@/assets/img/img-anquanzhongxin89.png"
-import chakan from "@/assets/img/img-chakan.png"
-import atupian from "@/assets/img/img-a-tupian.png"
-import BOSSyingyetingchushi from "@/assets/img/img-BOSS-yingyeting-chushi.png"
+import anquanzhongxin89 from "@/assets/img/check.png"
+import chakan from "@/assets/img/upload.png"
+import atupian from "@/assets/img/transfer.png"
+import BOSSyingyetingchushi from "@/assets/img/certigicate.png"
 
 const apps = [
   {