功能开发

src/components/template/TypeEight.vue

@@ -2,11 +2,13 @@
   <div class="van-hairline--bottom type-two">
     <div class="title" style="margin-bottom: 10px;">{{proofSubItem.label}}</div>
     <div v-for="(file,index) in fileList" :key="index" style="margin-bottom: 10px;">
-      <video controls  :src="file.url" style="margin-bottom: 10px;width: 100%;">
+      <video controls disablePictureInPicture  style="margin-bottom: 10px;width: 100%;">
+         <source :src="file.url">
+          你的浏览器不支持Video标签
       </video>
       <div style="text-align:right;color:#3175FF;" @click="del(index)">删除</div>
     </div>
-    <input type="file" @change="handleFileChange" id="uploader2" accept="video/*" :value="file" style="display:none;">
+    <input type="file" @change="handleFileChange" id="uploader2" accept="video/*" style="display:none;">
     <label for="uploader2" class="uploader">
       <common-svg name="shipin" width="32px" height="32px"></common-svg>
       <div class="title">上传视频</div>
@@ -31,7 +33,6 @@ export default class TypeEight extends Vue {
   @Prop()
   private value!: [];
   private fileList: any[] = [];
-  private file: any = '';
   private loaded: number = 0;
   private total: number = 0;
   @Watch('valHash', { immediate: true, deep: true })
@@ -58,15 +59,19 @@ export default class TypeEight extends Vue {
     this.$emit('update:value', value);
   }
   private handleFileChange(e: any) {
-    const input = e.target;
-    const files = input.files;
+    const [ file ] = e.target.files;
+    if (!file) { return; }
+    console.log(file.size);
+    if(file.size > 10 *  1024 * 1024) {
+      this.$toast('文件太大');
+      return;
+    }
     const toast = this.$toast({
       message: '0%',
       duration: 0, // 持续展示 toast
       forbidClick: true,
     });
-    if (files && files[0]) {
-      this.$api.file.upload(files[0], (process: any) => {
+    this.$api.file.upload(file, (process: any) => {
       const { loaded, total } = process;
       const percent = Math.floor(loaded / total * 100);
       toast.message = `${ percent }%`;
@@ -75,16 +80,16 @@ export default class TypeEight extends Vue {
       }
     }).then((res: any) => {
       e.target.value = '';
-        this.file = '';
       const temp: any = Array.isArray(this.value) ? this.value : [];
       this.$emit('update:value', [...temp, {
         type: 'media',
         format: 'hash',
         value: res.hash,
       }]);
+    }).catch((err: any) => {
+      toast.clear();
     });
   }
-  }
 }
 </script>
 <style lang="scss" scoped>

src/components/template/TypeNine.vue

@@ -56,10 +56,21 @@ export default class TypeNine extends Vue {
     this.$emit('update:value', value);
   }
   private handleFileChange(e: any) {
-    const input = e.target;
-    const files = input.files;
-    if (files && files[0]) {
-      this.$api.file.upload(files[0]).then((res: any) => {
+    const [ file ] = e.target.files;
+    if (!file) { return; }
+    const toast = this.$toast({
+      message: '0%',
+      duration: 0, // 持续展示 toast
+      forbidClick: true,
+    });
+    this.$api.file.upload(file, (process: any) => {
+      const { loaded, total } = process;
+      const percent = Math.floor(loaded / total * 100);
+      toast.message = `${ percent }%`;
+      if (percent === 100) {
+        toast.clear();
+      }
+    }).then((res: any) => {
       e.target.value = '';
       this.file = '';
       const temp: any = Array.isArray(this.value) ? this.value : [];
@@ -68,9 +79,10 @@ export default class TypeNine extends Vue {
         format: 'hash',
         value: res.hash,
       }]);
+    }).catch((err: any) => {
+      toast.clear();
     });
   }
-  }
 }
 </script>
 <style lang="scss" scoped>

src/views/template/components/SelectTemplate.vue

@@ -258,12 +258,12 @@ export default class SelectTemplate extends Vue {
       place-items: center;
     }
     .btn-group{
-      position: fixed;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      padding: 10px 17px;
+      // position: fixed;
+      // left: 0;
+      // right: 0;
+      // bottom: 0;
+      // display: flex;
+      // padding: 10px 17px;
       .left,.right{
         border-radius: 4px;
         height: 40px;

src/views/userCenter/AccountNum.vue

@@ -21,19 +21,14 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio } from 'vant';
+import { Button, Image } from 'vant';
 import { State, Getter, Action, Mutation } from 'vuex-class';
 import { Route } from 'vue-router';
 import H5Cropper from 'vue-cropper-h5';
 @Component({
   components: {
-    [Form.name]: Form,
-    [Field.name]: Field,
     [Button.name]: Button,
     [Image.name]: Image,
-    [Cell.name]: Cell,
-    [RadioGroup.name]: RadioGroup,
-    [Radio.name]: Radio,
     H5Cropper,
   },
 })