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

package.json

@@ -17,6 +17,7 @@
     "downloadjs": "^1.4.7",
     "epic-spinners": "^1.1.0",
     "html-to-image": "^1.6.2",
+    "html2canvas": "^1.1.4",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "moment": "^2.29.1",

src/components/CardList.vue

@@ -3,7 +3,8 @@
             <div class="list-row flex justify-start relative text-font-white text-sm mb-3"  v-for="(i,index) in outputData" :key="index" :id="i.id">
               <div class='item flex flex-col w-4/12 items-center z-10' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.id)">
                   <div class='w-full '>
-                    <img src='/img/cover.png'  class=" w-11/12 mx-auto   rounded-xl shadow-md">
+                    <!-- <img src='/img/cover.png'  class=" w-11/12 mx-auto   rounded-xl shadow-md"> -->
+                    <img :src="k.cover?k.cover :'/img/cover.png'" class="rounded-md max-h-36 mx-auto" />
                   </div>
                   <div class='mt-3'>
                     {{k.name}}
@@ -33,7 +34,7 @@ export default Vue.extend({
     }
   },
   computed:{
-      outputData:function(){
+      outputData:function():any{
           return _chunk(this.data,this.rowSize)
       }
   },

src/components/CollectionCard.vue

@@ -11,8 +11,9 @@
       bg-font-light-black
     "
   >
-    <div class="left w-4/12 object-cover rounded-md">
-      <img :src="colletionData.cover?colletionData.cover:'/img/cover.png'" class="rounded-md" />
+    <div class="flex items-center text-center left w-4/12 object-cover rounded-md">
+      <img :src="colletionData.cover?colletionData.cover :'/img/cover.png'" class="rounded-md max-h-36 mx-auto" />
+      <!-- <img src="/img/cover.png" class="rounded-md" /> -->
     </div>
     <div class="right w-8/12">
       <div class="w-full px-4">

src/layout/NavHeader.vue

@@ -21,26 +21,27 @@ import Vue from 'vue';
 export default Vue.extend({
     data() {
         return{
-            title:'',
             saveBtn:{
                 show:false,
                 enable:false,
-            }
+            },
         }
     },
 
   components:{
       'app-icon':()=>import('@/components/common/Icon.vue')
   },
+  computed:{
+      title():string{
+          return this.$route.query.text?this.$route.query.text:(this.$route.query.type?`上传${this.$route.query.type}`:this.$route.meta?.title)
+      }
+  },
   mounted(){
-      this.title = this.$route.meta?.title
       if(this.$route.path.includes('/User/edit')){
             this.saveBtn.show = true
       }else{
            this.saveBtn.show = false
       } 
-   
-      
   },
     methods:{
         clickSaveBtn(){

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

@@ -4,15 +4,15 @@
     <div class="w-6/12 object-cover mx-auto">
       <img src="./stars.png" class="mx-auto" />
     </div>
-    <div class="box xs:mt-6 mt-3" ref="certifyCard">
-      <div class="top xs:h-60 h-48 relative bg-certifyBG  bg-no-repeat bg-cover">
+    <div class="box xs:mt-6 mt-3" ref="certifyCard" id="certifyCard">
+      <div id="certificate-title" class=" top xs:h-60 h-48 relative bg-certifyBG  bg-no-repeat bg-cover">
         <div class="blur-img h-full w-full absolute top-0 left-0"></div>
         <div class="pt-6 xs:text-sm text-xs">
           <div>影视区块链版权电子数据确权书</div>
         </div>
-        <div>
-          <img  v-if="!coverName" src="/img/cover.png" class=" w-20 xs:w-24 mx-auto mt-4" />
-          <img id="coverImg" :src="showUploadFile" v-else class=" w-20 xs:w-24 mx-auto mt-4" />
+        <div class=" h-40 flex items-center ">
+          <img id="coverImg" v-if="!coverName" src="/img/cover.png" class=" max-w-20 xs:max-w-24 mx-auto mt-4 mb-4 max-h-32" />
+          <img id="coverImg" :src="showUploadFile" v-else class=" max-w-20 xs:max-w-24 mx-auto mt-4 mb-4 max-h-32" />
         </div>
         <div class="float-box  w-full absolute -bottom-10  text-3xs xs:text-2xs">
             <div class="w-11/12 p-2 flex-wrap mx-auto flex break-all bg-font-white shadow-md rounded  text-font-black">
@@ -61,8 +61,10 @@
 import Vue from "vue";
 import download from 'downloadjs'
 import moment from 'moment'
+// import html2canvas from 'html2canvas'
 import { toPng } from 'html-to-image';
 import { mapState } from "vuex";
+'bg-certifyBG'
 export default Vue.extend({
   data(){
     return {
@@ -79,13 +81,13 @@ export default Vue.extend({
       }
     }
   },
-  mounted(){
-        const fileReader = new FileReader();
-        fileReader.readAsDataURL(this.coverFile);
-        fileReader.onload = function (){
-            (document.getElementById("coverImg") as any).src = fileReader.result;
-        }
-  },
+  // mounted(){
+  //       const fileReader = new FileReader();
+  //       fileReader.readAsDataURL(this.coverFile);
+  //       fileReader.onload = function (){
+  //           (document.getElementById("coverImg") as any).src = fileReader.result;
+  //       }
+  // },
   props: {
     name: {
       type: String,
@@ -123,17 +125,41 @@ export default Vue.extend({
   },
   methods:{
     async downloadImg(){
-      let certifyCard = this.$refs.certifyCard as HTMLElement
-      toPng(certifyCard).then(function (dataUrl) {
+        // let certifyCard = this.$refs.certifyCard as HTMLElement
+        try {
+          let certifyCard = document.getElementById('certifyCard') as HTMLElement
+          let dataUrl = await toPng(certifyCard)
             // var img = new Image();
             // img.src = dataUrl;
             // console.log(img.src);
           download(dataUrl, 'my-node.png');
-      })
-      .catch(function (error) {
-        console.error('oops, something went wrong!', error);
-      });
+        }catch(error){
+          console.error('oops, something went wrong!', error)
+        }
+        //  const canvas2 = document.createElement('canvas');
+        //  let _canvas = document.getElementById('certifyCard');
+        //  const w = parseInt(window.getComputedStyle(_canvas).width);
+        //  const h = parseInt(window.getComputedStyle(_canvas).height);
+        //  const dpr = window.devicePixelRatio || 1;
+        //  canvas2.width = w * dpr;
+        //  canvas2.height = h * dpr;
+        //  canvas2.style.width = w + 'px'
+        //  canvas2.style.height = h + 'px'
+        //  var context = canvas2.getContext('2d');
+        //  context.scale(1, 1);
+        //  window.scrollTo(0, 0); 
+        //  html2canvas(_canvas, { canvas: canvas2 }).then(function(canvas) {
+        //    const imgUrl = canvas.toDataURL('image/png')
+        //    download(imgUrl,'certify.png')
+        //   //  window.location.href = imgUri; 
+        //  });
     }
   },
 });
 </script>
+<style scoped>
+/* #certificate-title {
+  background: url('/img/certify-bg.png') no-repeat ;
+  background-size: cover;
+} */
+</style>

src/view/NFT/Create/form.vue

@@ -36,7 +36,7 @@
           :text="fromText.themeText"
           :placeholder="fromText.themePlaceholder"
           class="text-font-white my-3"
-          @click.native="$router.push('/Nft/create/pick')"
+          @click.native="$router.push({name:'NftPick',query:{text:`${getPreText()}题材`}})"
         ></app-cell>
         <div>
           <div class="my-4 text-font-gray text-sm ml-4">{{fromText.desText}}</div>
@@ -76,7 +76,7 @@
           type="upload"
           :placeholder="fromText.filePlaceholder"
           :name="fileName"
-          @cellOnChange="$router.push({ name: 'NftUpload',params:{type:getPreText()}})"
+          @cellOnChange="$router.push({ name: 'NftUpload',query:{type:getPreText()}})"
         ></app-cell>
         <app-cell
           text="封面上传(非必填)"
@@ -84,7 +84,7 @@
           type="upload"
           placeholder="请上传相关封面"
           :name="coverName"
-          @cellOnChange="$router.push({ name: 'NftUpload',params:{type:'封面图片'}})"
+          @cellOnChange="$router.push({ name: 'NftUpload',query:{type:'封面图片'}})"
         ></app-cell>
         <app-cell
           :text="fromText.fileHashText"
@@ -386,6 +386,14 @@ export default Vue.extend({
           return '剧本'
         case '2':
           return '视频'
+        case '3':
+          return '电影'
+        case '4':
+          return '音频'
+        case '5':
+          return '图片'
+        case '6':
+          return '衍生品'
         default:
           return ''
       }
@@ -542,6 +550,7 @@ export default Vue.extend({
         }
       }catch(err){
         this.loading2 = false
+        this.$toast('上传失败，请稍后再试~')
         return 
       }
       if (this.currentStep < this.mySteps.length + 1) {

src/view/NFT/Create/upload.vue

@@ -137,12 +137,12 @@ export default Vue.extend({
       }
     },
     uploadType():any{
-      return this.$route.params.type
+      return this.$route.query.type
     },
     uploadAccept():object{
       switch(this.uploadType){
         case '剧本':
-          return {acceptTitle:'请上传剧本附件',acceptType:'application/pdf,application/msword,text/plain',acceptText:'支持扩展名格式PDF'}
+          return {acceptTitle:'请上传剧本附件',acceptType:'.pdf,.doc,.word,.txt',acceptText:'支持扩展名格式PDF'}
         case '视频':
           return {acceptTitle:'请上传视频附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为500M以内'}
         case '电影':

src/view/User/index.vue

@@ -61,6 +61,7 @@ export default Vue.extend({
         this.show= true
       },
       async fileUpload(event:any){
+          try{
              this.$toast.loading('头像更新中...')
              this.file = event.target.files[0]
         //   this.$store.commit('app/SET_FILEDATA',event.target.files)
@@ -71,6 +72,10 @@ export default Vue.extend({
                 this.$toast.success('头像更新成功')
              }
         //   this.$router.push({name:'PhotoEdit'})
+          }catch(err){
+              this.$toast('头像更新失败')
+          }
+
       },
       onSelect(item:any){
         this.show = false;