阶段性提交

src/components/common/Cell.vue

@@ -53,7 +53,7 @@
             <input
               @click="eventEmit(type)"
               :disabled="true"
-              v-if="$store.state.create.pickedList.length === 0"
+              v-if="!$store.state.create.pickedList || $store.state.create.pickedList.length === 0"
               type="text"
               class="bg-transparent"
               :placeholder="placeholder"
@@ -214,7 +214,7 @@ export default Vue.extend({
       }
     },
     cellOnChange(e:any) {
-      if(e.target.value.length >= 15) {
+      if(e.target.value && e.target.value.length >= 15) {
         this.inputValue = (this.inputValue as string).slice(0,15)
       }
       this.$emit("cellOnChange", this.inputValue);

src/store/create.ts

@@ -4,7 +4,7 @@ const stateData = {
   fileName: '',
   file: undefined as undefined | File,
   coverName:'',
-  coverFile: undefined as undefined | File
+  coverFile: undefined as undefined | File,
 }
 
 export type AppType = typeof stateData

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

@@ -11,7 +11,8 @@
           <div>影视区块链版权电子数据确权书</div>
         </div>
         <div>
-          <img src="/img/cover.png" class=" w-20 xs:w-24 mx-auto mt-4" />
+          <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>
         <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,12 +62,30 @@ import Vue from "vue";
 import download from 'downloadjs'
 import moment from 'moment'
 import { toPng } from 'html-to-image';
+import { mapState } from "vuex";
 export default Vue.extend({
   data(){
     return {
       createTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
     }
   },
+  computed:{
+    ...mapState("create", ["coverFile","coverName"]),
+    showUploadFile(){
+      if(this.coverFile) {
+        return window.URL.createObjectURL(this.coverFile)
+      }else {
+        return ''
+      }
+    }
+  },
+  mounted(){
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(this.coverFile);
+        fileReader.onload = function (){
+            (document.getElementById("coverImg") as any).src = fileReader.result;
+        }
+  },
   props: {
     name: {
       type: String,

src/view/NFT/Create/form.vue

@@ -81,10 +81,10 @@
         ></app-cell>
         <app-cell
           text="封面上传(非必填)"
-          class="text-font-white my-3"
+          class="text-font-white my-3 "
           type="upload"
           placeholder="请上传相关封面"
-          :name="fileName"
+          :name="coverName"
           @cellOnChange="$router.push({ name: 'NftUpload',params:{type:'封面图片'}})"
         ></app-cell>
         <app-cell
@@ -342,6 +342,7 @@ export default Vue.extend({
       fileName: "fileName",
       file: "file",
       pickedList: "pickedList",
+      coverName: 'coverName'
     }),
     validation(): boolean {
       let disabled = true;

src/view/NFT/Create/upload.vue

@@ -2,16 +2,12 @@
 <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"
-      ref="inputFile"
-      :accept="uploadAccept.acceptType"
-    />
+    <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')"/>
+    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
 
-    <label for="upload" class="inline-block">
+    <label @click="initUpload" class="inline-block">
       <div
         ref="uploadBox"
         class="
@@ -24,33 +20,43 @@
         "
       >
         <img
-          v-if="status === uploadStatus.NULL"
+          v-if="showNotUploadImg "
           src="@/assets/icons/upload.png"
           alt=""
           class="mx-auto"
         />
         <img
-          v-else-if="status === uploadStatus.success"
-          src="@/assets/icons/file.png"
+          v-else-if="showImgUploadImg"
+          :src="showUploadFile"
           alt=""
           class="mx-auto"
         />
-        <Loading type="spiner" v-else-if="status === uploadStatus.uploading" />
-        <div v-else-if="status === uploadStatus.failed">上传失败</div>
+        <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="!fileName" class="mt-2">{{uploadAccept.acceptText}}</div>
-      <div v-if="fileName" class="mt-2">
-        {{ fileName }}
+      <div v-if="(uploadType == '封面图片' && !coverName) || (uploadType !== '封面图片' && !fileName)" class="mt-2">{{uploadAccept.acceptText}}</div>
+      <div v-else class="mt-2">
+        {{ (uploadType == '封面图片' && coverName)?coverName:fileName }}
       </div>
+      <!-- <div v-if="uploadType == '封面图片' && coverName" class="mt-2">
+        {{ coverName }}
+      </div>
+      <div v-else-if="uploadType !== '封面图片' && fileName" class="mt-2">
+        {{ fileName }}
+      </div> -->
 
       <label for="upload" class="mt-2">
         <div
-          v-if="
-            status === uploadStatus.failed || status === uploadStatus.success
-          "
+          v-if="showReUpload"
           style="color: #0076ff"
           class="inline-block"
         >
@@ -85,6 +91,9 @@ import Vue from "vue";
 import { Uploader, Loading } from "vant";
 import { mapMutations, mapState } from "vuex";
 import md5 from "md5";
+import { ActionSheet } from 'vant';
+
+Vue.use(ActionSheet);
 
 enum uploadStatus {
   NULL,
@@ -100,7 +109,13 @@ export default Vue.extend({
       uploading: false,
       uploadStatus,
       status: uploadStatus.NULL,
+      coverstatus: uploadStatus.NULL,
       // accept:
+      show: false,
+      actions: [
+        { name: '本地相册'},
+        { name: '拍照'},    
+      ],
     };
   },
   components: {
@@ -110,14 +125,18 @@ export default Vue.extend({
     Loading,
   },
   computed: {
-    ...mapState("create", ["fileName"]),
+    ...mapState("create", ["fileName","coverName",'coverFile','file']),
     nextBtnDisabled(): boolean {
-      return !this.fileName;
+      if(this.uploadType == '封面图片') {
+        return !this.coverName
+      }else {
+        return !this.fileName;
+      }
     },
-    uploadType(){
+    uploadType():any{
       return this.$route.params.type
     },
-    uploadAccept(){
+    uploadAccept():object{
       switch(this.uploadType){
         case '剧本':
           return {acceptTitle:'请上传剧本附件',acceptType:'application/pdf,application/msword,text/plain',acceptText:'支持扩展名格式PDF'}
@@ -134,12 +153,50 @@ export default Vue.extend({
         default:
           return {acceptTitle:'',acceptType:'',acceptText:''}
       }
+    },
+    showUploadFile():string{
+      if(this.uploadType == '封面图片' && this.coverFile) {
+        return window.URL.createObjectURL(this.coverFile)
+      }else if(this.uploadType !== '图片' && this.file) {
+        return window.URL.createObjectURL(this.file)
+      }else {
+        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 == '封面图片')
+    },
+    showReUpload():boolean{
+      return ((this.uploadType !== '封面图片') && (this.status === uploadStatus.failed || this.status === uploadStatus.success))||((this.uploadType == '封面图片') && (this.coverstatus === uploadStatus.failed || this.coverstatus === uploadStatus.success))
     }
-
   },
   methods: {
-    handleFileChange() {
-      const ele = this.$refs.inputFile as HTMLInputElement;
+    initUpload(){
+      if(this.uploadType == '图片' || this.uploadType == '封面图片') {
+        this.show = true
+      }else {
+        (this.$refs.inputFile as HTMLInputElement).click()
+      }
+    },
+    onSelect(item:any){
+        this.show = false;
+        let cEl =this.$refs.cameraElem as HTMLInputElement
+        let fEl =this.$refs.localImgElem as HTMLInputElement
+        switch(item.name){
+            case '拍照':
+                cEl.click();
+              break;  
+            case '本地相册':
+                fEl.click();
+              break;
+        }
+        this.$toast(item.name);
+    },
+    handleFileChange(ref:any) {
+      const ele = this.$refs[ref] as HTMLInputElement;
       const files = ele.files;
       if (files && files.length >= 1) {
         this.afterRead(files[0]);
@@ -152,21 +209,37 @@ export default Vue.extend({
       try {
         const ab = await file.arrayBuffer();
         const fileMd5 = md5(Buffer.from(ab));
-        this.status = uploadStatus.uploading;
+        
         // const ossRet = await this.$service.nftService.ossPolicy();
         // const uploadRet = await this.$service.nftService.uploadFileToOss(
         //   file,
         //   ossRet
         // );
-        this.setState({
-          fileName: file.name,
-          fileHash: fileMd5,
-          file: file,
-        });
-        this.status = uploadStatus.success;
+        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;
+        }
+
       } catch (err) {
         console.log(err, "show err");
-        this.status = uploadStatus.failed;
+        if(this.uploadType == '封面图片') {
+          this.coverstatus = uploadStatus.failed;
+        }else {
+          this.status = uploadStatus.failed;
+        }
+        
       }
     },
     afterRead2(file: any) {
@@ -181,6 +254,7 @@ export default Vue.extend({
   },
 });
 </script>
+
 <style scoped>
 .upload-box {
   width: 140px;