阶段性提交

src/view/NFT/Create/components/uploadImg/delete.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1628648195297" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1202" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M798.1 872.6c0 34.3-27.9 62.2-62.1 62.2H288.1c-34.3-0.1-62.1-27.9-62.2-62.2V212.8h572.2v659.8zM350.2 101.2c0-7.2 5.6-12.8 12.8-12.8h298.8c7.2 0 12.7 5.6 12.7 12.8v37.5H350.2v-37.5z m634.3 37.5H748.7v-37.5c0-47.8-39-86.9-86.9-86.9H363c-47.9 0.1-86.8 38.9-86.9 86.9v37.5H39.5C18.7 138.7 2 155.4 2 176.1s16.7 37.5 37.5 37.5H151v659c0 75.7 61.4 137.1 137.1 137.1h447.8c75.7 0 137.1-61.4 137.1-137.1V212.8h111.6c20.7 0 37.5-16.7 37.5-37.5s-16.8-36.6-37.6-36.6zM512 822.4c20.7 0 37.5-16.7 37.5-37.5V386.5c0-20.7-16.7-37.5-37.5-37.5-20.7 0-37.5 16.7-37.5 37.5v398.4c0 20.7 16.8 37.5 37.5 37.5m-174.5 0c20.7 0 37.5-16.7 37.5-37.5V386.5c0-20.7-16.7-37.5-37.5-37.5-20.7 0-37.5 16.7-37.5 37.5v398.4c0.8 20.7 17.6 37.5 37.5 37.5m349 0c20.7 0 37.5-16.7 37.5-37.5V386.5c0-20.7-16.7-37.5-37.5-37.5-20.7 0-37.5 16.7-37.5 37.5v398.4c0.1 20.7 16.8 37.5 37.5 37.5" p-id="1203"></path></svg>
\ No newline at end of file

src/view/NFT/Create/components/uploadImg/uploadImg.vue

+<template>
+  <div class=" flex justify-between flex-wrap">
+    <input type="file" class=" hidden" multiple ref="inputDom" @change="handleFileChange">
+    <div v-for="(item,index) in urlList" :key="item.name" class=" w-1/3 h-32 p-1 relative">
+        <img :src="item.url" alt="" class=" w-full h-full">
+        <div class=" h-8 text-center absolute bottom-1 left-1 right-1 bg-gray-500 opacity-80 text-white leading-8" v-if="index == 0">默认封面</div>
+        <img src="./delete.svg" alt="" class=" absolute top-2 right-2 w-1/6" @click="deleteImg(index)">
+    </div>
+    <div v-if="fileList.length < maxCount" @click="upload" class=" w-1/3 text-white">
+        图片上传
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        fileList: Array,
+        maxCount: Number,
+    },
+    methods: {
+        upload(){
+            const dom = this.$refs.inputDom as HTMLInputElement
+            dom.click()
+        },
+        handleFileChange(e:any){
+            this.$emit('fileChange',e.target.files)
+        },
+        deleteImg(index:number){
+            this.$emit('deleteImg',index)
+        }
+    },
+    computed: {
+        urlList(){
+            return this.fileList.map((item)=>{
+                return {
+                    url: window.URL.createObjectURL(item)
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/view/NFT/Create/form.vue

 <template>
-  <Layout-Child class="page-scroll pb-20">
+  <Layout-Child class="page-scroll pb-32">
     <div class=" mx-auto my-6">
       <!-- <app-steps
         v-if="currentStep !== 4"
@@ -33,10 +33,8 @@
             "
           ></textarea>
         </div>
-
-        <van-uploader v-model="fileList" multiple :max-count="9" :preview-size="width">
-          <!-- <div>上传</div> -->
-        </van-uploader>
+        
+        <upload-img :fileList="fileList" :maxCount='9' @fileChange="fileChange" @deleteImg="deleteImg"></upload-img>
 
         <app-cell
           v-model="createNFT.value_name"
@@ -127,7 +125,7 @@
           class="text-font-white my-3 text-sm"
           @cellOnChange="(v) => (createNFT.grant = v)"
         ></app-cell> -->
-        <div>第二步发行NFT</div>
+        <div class=" text-white">第二步发行NFT</div>
         <div class="fixed bottom-3 w-full left-0 flex flex-row z-30">
           <app-btn
             text="上一步"
@@ -147,7 +145,7 @@
       </div>
 
       <div class="step-three" v-if="currentStep == 3">
-        <div>温馨提示</div>
+        <div class=" text-white">温馨提示</div>
         <!-- <app-cell
           text="NFT编号"
           type="showText"
@@ -200,7 +198,7 @@
       </div>
 
       <div v-if="currentStep == 4" class="text-font-white">
-        <div>最终成功或者失败</div>
+        <div class=" text-white">最终成功或者失败</div>
         <!-- <div
           v-if="loading4"
           class="flex flex-col items-center w-full pt-16 justify-center"
@@ -259,14 +257,12 @@
 <script lang="ts">
 // import { iSaveData } from "@/service/nftService/types";
 // import { BreedingRhombusSpinner } from "epic-spinners";
-import {Uploader} from "vant"
 
 import { Overlay } from 'vant'
 // import { Dialog } from "vant";
 import Vue from "vue";
 import { mapMutations, mapState } from "vuex";
 Vue.use(Overlay)
-Vue.use(Uploader)
 export default Vue.extend({
   data() {
     return {
@@ -330,7 +326,6 @@ export default Vue.extend({
       errorMsg: "",
       certificateData:{},
       fileList:[],
-      width: 80,
     };
   },
   components: {
@@ -340,6 +335,8 @@ export default Vue.extend({
     "app-btn": () => import("@/components/common/Btn.vue"),
     // certificate: () => import("./components/certificate/index.vue"),
     // BreedingRhombusSpinner
+    'uploadImg': ()=>import('./components/uploadImg/uploadImg.vue'),
+
   },
   async mounted() {
     const data = await this.getPreText()
@@ -392,14 +389,14 @@ export default Vue.extend({
       }
       return disabled;
     },
-    categoryTypes2(): any[] {
-      return this.categoryTypes.map((item: any) => {
-        return {
-          name: item.categoryName,
-          value: item.id,
-        };
-      });
-    },
+    // categoryTypes2(): any[] {
+    //   return this.categoryTypes.map((item: any) => {
+    //     return {
+    //       name: item.categoryName,
+    //       value: item.id,
+    //     };
+    //   });
+    // },
   },
   methods: {
     ...mapMutations("create", {
@@ -445,6 +442,12 @@ export default Vue.extend({
         ...obj,
       };
     },
+    fileChange(files:any){
+      (this.fileList as any).push(...files)
+    },
+    deleteImg(index:number){
+      this.fileList.splice(index,1)
+    },
     // alertPlatformSave() {
     //   Dialog.alert({
     //     title: "提示",

src/view/NFT/Detail/components/sourceSearch.vue

+<template>
+  <div class=" text-center pt-3 text-font-dark-blue">
+      暂未绑定溯源码
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/view/NFT/Detail/index.vue

@@ -2,6 +2,8 @@
   <Layout-Child class="page-scroll">
     <div class="w-11/12 mx-auto mt-6 text-font-white">
       <SkeletonNftDetail v-if="showSkelton" />
+
+      <!-- 领取纪念版NFT页面 -->
       <div v-if="$route.query.officia">
         <div class="h-80">
           <img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" alt="" />
@@ -27,13 +29,18 @@
           纪念版NFT只能进行转让，不能进行交易。最终解释权归平台所有。
         </div>
       </div>
+
+      <!-- 纪念版NFT -->
       <div v-else-if="nftData.isCommemorate == 1">
         <div class="h-80 flex items-center">
           <!-- <img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" alt="" /> -->
           <img class=" max-h-72 mx-auto" :src="nftData.cover?nftData.cover:'@/assets/img/NFTCover.png'" alt="" />
         </div>
       </div>
+      <!-- 不是纪念版NFT -->
       <app-collectionCard :colletionData="nftData" v-else></app-collectionCard>
+
+      <!-- 几个图标 -->
       <div class="app-icons mx-auto flex justify-around my-6" v-if="isOwner">
         <div
           v-for="(i, index) in (nftData.isCommemorate == 0?apps:ComApps)"
@@ -43,12 +50,6 @@
         >
           <div class="flex flex-col items-center">
             <div class="flex content-center">
-              <!-- <app-icon
-                @click.native="appOnclick(i.action)"
-                :name="i.icon"
-                size="24px"
-                class="p-5 bg-table-light-blue shadow-md rounded-full"
-              ></app-icon> -->
               <img :src="i.icon" alt="" @click="appOnclick(i.action)" />
             </div>
             <div class="text-xs mt-3 text-font-white">
@@ -57,6 +58,8 @@
           </div>
         </div>
       </div>
+      
+      <!-- 发行人 -->
       <div
         class="
           text-xs
@@ -82,7 +85,13 @@
           <div class="mt-1 text-font-dark-blue">{{ nftData.wallet?nftData.wallet:nftData.publishAddress }}</div>
         </div>
       </div>
-      <div class="py-3">
+      
+      <div class="flex w-2/3 m-auto justify-between mt-5 text-font-dark-blue">
+        <div @click="changeBanner(0)" :class="{'text-white':bannerIndex == 0}">NFT信息</div>
+        <div @click="changeBanner(1)" :class="{'text-white':bannerIndex == 1}">溯源查询</div>
+      </div>
+
+      <div class="py-3" v-if="bannerIndex == 0">
         <div class="text-font-dark-blue">NFT信息</div>
         <app-cell
           v-if="nftData.isCommemorate == 0"
@@ -113,7 +122,8 @@
           boxType="border"
         ></app-cell>
       </div>
-      <div class="py-3" v-if="nftData.isCommemorate == 0">
+
+      <div class="py-3" v-if="nftData.isCommemorate == 0 && bannerIndex == 0">
         <div class="text-font-dark-blue">版权信息</div>
         <!-- <app-cell
           text="版权登记号"
@@ -147,7 +157,7 @@
         ></app-cell> -->
       </div>
 
-      <div class="py-3">
+      <div class="py-3" v-if="bannerIndex == 0">
         <!-- <div class="text-font-dark-blue">剧本简介</div> -->
         <div class="text-font-dark-blue" v-if="nftData.isCommemorate == 0">作品简介</div>
         <div class="text-font-dark-blue" v-if="nftData.isCommemorate == 1 || $route.query.officia">纪念版NFT简介</div>
@@ -156,7 +166,7 @@
         </div>
       </div>
 
-      <div class="py-3">
+      <div class="py-3" v-if="bannerIndex == 0">
         <div class="text-font-dark-blue">关于NFT</div>
         <div class="py-2 tracking-wide leading-6 text-sm break-all">
           NFT全称为Non-Fungible
@@ -164,13 +174,17 @@
         </div>
       </div>
 
-      <div class="py-3" v-if="!$route.query.officia">
+      <div class="py-3" v-if="!$route.query.officia && bannerIndex == 0">
         <div class="text-font-dark-blue">流转记录</div>
         <div class="text-center py-5">暂无记录</div>
       </div>
+
+      <source-search v-if="bannerIndex == 1"></source-search>
+
       <van-overlay :show="showoverlay" @click="showoverlay = false" />
       <div class="scroll-padding"></div>
 
+      <!-- 不是领取纪念版NFT的弹出层 -->
       <div
         class="
           fixed
@@ -242,9 +256,7 @@
         </div>
 
       </div>
-
-
-
+      <!-- 领取纪念版NFT的弹出层 -->
       <div
         class="
           fixed
@@ -278,60 +290,62 @@
         </div>
 
       </div>
-        <div class=" fixed bottom-0 left-0 right-0 top-0 bg-font-black flex items-center z-50" v-if="getOfficialNft == 'loading'">
-          <div class=" w-4/6 mx-auto text-center">
-            <img src="@/assets/img/saveLoading.png" alt="" class=" mx-auto">
-            <div class=" mt-5">证书领取中，请稍后~~</div>
-          </div>
+      <!-- 领取纪念版NFT步骤 -->
+      <div class=" fixed bottom-0 left-0 right-0 top-0 bg-font-black flex items-center z-50" v-if="getOfficialNft == 'loading'">
+        <div class=" w-4/6 mx-auto text-center">
+          <img src="@/assets/img/saveLoading.png" alt="" class=" mx-auto">
+          <div class=" mt-5">证书领取中，请稍后~~</div>
         </div>
-
-        <div class=" fixed bottom-0 left-0 right-0 top-0 bg-font-black flex items-center z-50 overflow-y-scroll" v-if="getOfficialNft == 'success'">
-          <div class="w-10/12 mx-auto text-center">
-            <certificate :categoryId="'c'" :certificateData="certificateData"></certificate>
-            <img
-              @click="getOfficialNft=''"
-              src="@/assets/icons/close_publish.png"
-              class="w-4 xs:w-6 mx-auto mt-3"
-              />
+      </div>
+      <div class=" fixed bottom-0 left-0 right-0 top-0 bg-font-black flex items-center z-50 overflow-y-scroll" v-if="getOfficialNft == 'success'">
+        <div class="w-10/12 mx-auto text-center">
+          <certificate :categoryId="'c'" :certificateData="certificateData"></certificate>
+          <img
+            @click="getOfficialNft=''"
+            src="@/assets/icons/close_publish.png"
+            class="w-4 xs:w-6 mx-auto mt-3"
+            />
+        </div>
+      </div>
+      <div class=" fixed bottom-0 left-0 right-0 top-12 bg-font-black flex items-center z-50" v-if="getOfficialNft == 'fail'">
+        <div class=" w-4/6 mx-auto text-center">
+          <img src="@/assets/img/earth.png" alt="" class=" mx-auto w-4/6">
+          <div class=" mt-5">抱歉，NFT领取失败!</div>
+          <div>
+            <app-btn class=" w-2/6 mx-auto text-font-white rounded-2xl bg-font-blue" text="重新领取" @click.native="confirmBtn" border="none">
+            </app-btn>
           </div>
         </div>
+      </div>
 
-        <div class=" fixed bottom-0 left-0 right-0 top-12 bg-font-black flex items-center z-50" v-if="getOfficialNft == 'fail'">
-          <div class=" w-4/6 mx-auto text-center">
-            <img src="@/assets/img/earth.png" alt="" class=" mx-auto w-4/6">
-            <div class=" mt-5">抱歉，NFT领取失败!</div>
-            <div>
-              <app-btn class=" w-2/6 mx-auto text-font-white rounded-2xl bg-font-blue" text="重新领取" @click.native="confirmBtn" border="none">
-              </app-btn>
-            </div>
-          </div>
+      <!-- <van-overlay v-if>
+        <app-cell text="NFT类型" :value="nftData.category" class="my-1"></app-cell>
+        <app-cell
+          text="文件名"
+          :value="nftData.fileName || '未上传文件'"
+          class="my-1"
+        ></app-cell>
+        <div class="flex justify-center">
+          <van-image
+            class="my-3 self-center text-center"
+            width="180"
+            lazy-load
+            :src="nftData.fileUrl"
+          />
         </div>
-        <!-- <van-overlay v-if>
-          <app-cell text="NFT类型" :value="nftData.category" class="my-1"></app-cell>
-          <app-cell
-            text="文件名"
-            :value="nftData.fileName || '未上传文件'"
-            class="my-1"
-          ></app-cell>
-          <div class="flex justify-center">
-            <van-image
-              class="my-3 self-center text-center"
-              width="180"
-              lazy-load
-              :src="nftData.fileUrl"
+      </van-overlay> -->
+
+      <!-- 展示证书 -->
+      <div class=" fixed bottom-0 left-0 right-0 top-0 bg-font-black flex items-center z-50 overflow-y-scroll" v-if="showCertificate ">
+        <div class="w-10/12 mx-auto text-center">
+          <certificate :categoryId="'c'" :certificateData="certificateData"></certificate>
+          <img
+            @click="showCertificate = false"
+            src="@/assets/icons/close_publish.png"
+            class="w-4 xs:w-6 mx-auto mt-3"
             />
-          </div>
-        </van-overlay> -->
-        <div class=" fixed bottom-0 left-0 right-0 top-0 bg-font-black flex items-center z-50 overflow-y-scroll" v-if="showCertificate ">
-          <div class="w-10/12 mx-auto text-center">
-            <certificate :categoryId="'c'" :certificateData="certificateData"></certificate>
-            <img
-              @click="showCertificate = false"
-              src="@/assets/icons/close_publish.png"
-              class="w-4 xs:w-6 mx-auto mt-3"
-              />
-          </div>
         </div>
+      </div>
     </div>
   </Layout-Child>
 </template>
@@ -397,6 +411,7 @@ export default Vue.extend({
       user: this.$util.userMsg.getUserMsg() as any,
       getOfficialNft: '',
       showCertificate: false,
+      bannerIndex: 0,
       // loading:true
     };
   },
@@ -443,6 +458,7 @@ export default Vue.extend({
     "app-collectionCard": () => import("@/components/CollectionCard.vue"),
     "certificate": () => import("@/view/NFT/Create/components/certificate/index.vue"),
     SkeletonNftDetail,
+    'sourceSearch': ()=>import('./components/sourceSearch.vue'),
   },
   methods: {
     appOnclick(action: any) {
@@ -544,6 +560,9 @@ export default Vue.extend({
           }
         });
     },
+    changeBanner(index:number){
+      this.bannerIndex = index
+    }
   },
 });
 </script>