模板数据结构调整

README.md

 # 存证溯源h5登记端
 
-# 设计[董军]（https://lanhuapp.com/url/WyPAJ-2swYh）
+# 设计[董军](https://lanhuapp.com/url/WyPAJ-2swYh)
 # 接口文档[confluence](https://confluence.33.cn/pages/viewpage.action?pageId=25887205)
 ## Project setup
 ```

src/components/template/TypeEight.vue

@@ -45,10 +45,11 @@ export default class TypeEight extends Vue {
     });
   }
   get valHash() {
-    return this.value.map((val: any) => {
-      if (!val.value) {
-        return val.hash;
+    if(!Array.isArray(this.value)){
+      return [];
     }
+    return this.value.map((val: any) => {
+        return val.value;
     });
   }
   private del(index: number) {
@@ -75,10 +76,11 @@ export default class TypeEight extends Vue {
       }).then((res: any) => {
         e.target.value = '';
         this.file = '';
-        this.$emit('update:value', [...(this.value), {
+        const temp: any = Array.isArray(this.value)? this.value : [];
+        this.$emit('update:value', [...temp, {
           type: 'media',
           format: 'hash',
-          hash: res.hash,
+          value: res.hash,
         }]);
       });
     }

src/components/template/TypeFive.vue

@@ -3,7 +3,7 @@
     <van-field 
         :label="proofSubItem.label" 
         readonly
-        :value="value"
+        :value="value.value"
         placeholder="点击选择" @click="showPicker = true"/>
     <van-popup v-model="showPicker" position="bottom" round >
       <van-picker
@@ -31,14 +31,14 @@ export default class TypeFive extends Vue {
   @Prop()
   private proofSubItem: any;
   @Prop()
-  private value!: string;
+  private value!: any;
   private showPicker: boolean = false;
   private onChange(picker: any, value: string , index: number) {
     // this.$emit('update:value',value);
   }
   private onConfirm(value: string , index: number) {
     this.showPicker = false;
-    this.$emit('update:value', value);
+    this.$emit('update:value', {...this.value, value: value});
 
   }
 

src/components/template/TypeNine.vue

@@ -43,10 +43,11 @@ export default class TypeNine extends Vue {
     });
   }
   get valHash() {
-    return this.value.map((val: any) => {
-      if (!val.value) {
-        return val.hash;
+    if(!Array.isArray(this.value)){
+      return [];
     }
+    return this.value.map((val: any) => {
+        return val.value;
     });
   }
   private del(index: number) {
@@ -61,10 +62,11 @@ export default class TypeNine extends Vue {
       this.$api.file.upload(files[0]).then((res: any) => {
         e.target.value = '';
         this.file = '';
-        this.$emit('update:value', [...(this.value), {
+        const temp: any = Array.isArray(this.value)? this.value : [];
+        this.$emit('update:value', [...temp, {
           type: 'media',
           format: 'hash',
-          hash: res.hash,
+          value: res.hash,
         }]);
       });
     }

src/components/template/TypeOne.vue

@@ -31,19 +31,22 @@ export default class TypeOne extends Vue {
       });
     }
   get valHash() {
-    return this.value.map((val: any) => {
-      if (!val.value) {
-        return val.hash;
+    if(!Array.isArray(this.value)){
+      return [];
     }
+    return this.value.map((val: any) => {
+        return val.value;
     });
   }
   private afterRead(file: any) {
     if (!Array.isArray(file)) {
       this.$api.file.upload(file.file).then((res: any) => {
-        this.$emit('update:value', [...(this.value), {
+        console.log(res);
+        const temp: any = Array.isArray(this.value)? this.value : [];
+        this.$emit('update:value', [...temp, {
           type: 'image',
           format: 'hash',
-          hash: res.hash,
+          value: res.hash,
         }]);
       });
     }

src/components/template/TypeSix.vue

@@ -33,21 +33,21 @@ export default class TypeSix extends Vue {
   @Prop()
   private proofSubItem: any;
   @Prop()
-  private value!: number;
+  private value!: any;
 
   private showTimer: boolean = false;
   private minDate: any = new Date(2020, 0, 1);
   private maxDate: any = new Date(2025, 10, 1);
   private currentDate: any = new Date();
   get valueStr() {
-    if ( this.value ) {
-      return filter.timeFormat(this.value);
+    if ( this.value.value ) {
+      return filter.timeFormat(this.value.value);
     }
     return '';
   }
   private confirm(value: any) {
     this.showTimer = false;
-    this.$emit('update:value', Math.round(value.getTime() / 1000));
+    this.$emit('update:value', {...this.value, value: Math.round(value.getTime() / 1000)});
   }
 }
 </script>

src/components/template/TypeThree.vue

@@ -4,7 +4,7 @@
     <component
         v-for="(item) in proofSubItem.data" 
         :key="item.id"
-        :value.sync="item.data.value"
+        :value.sync="item.data"
         :is="getComponent(item.type)"
         :proofSubItem="item">
     </component>

src/components/template/TypeTwo.vue

@@ -30,7 +30,7 @@ export default class TypeTwo extends Vue {
   @Prop()
   private proofSubItem: any;
   @Prop()
-  private value!: [];
+  private value!: any;
   private fileList: any[] = [];
   private file: any = '';
   @Watch('valHash', { immediate: true, deep: true })
@@ -44,10 +44,11 @@ export default class TypeTwo extends Vue {
     });
   }
   get valHash() {
-    return this.value.map((val: any) => {
-      if (!val.value) {
-        return val.hash;
+    if(!Array.isArray(this.value)){
+      return [];
     }
+    return this.value.map((val: any) => {
+      return val.value;
     });
   }
   private del(index: number) {
@@ -62,10 +63,11 @@ export default class TypeTwo extends Vue {
       this.$api.file.upload(files[0]).then((res: any) => {
         e.target.value = '';
         this.file = '';
-        this.$emit('update:value', [...(this.value), {
+        const temp: any = Array.isArray(this.value)? this.value : [];
+        this.$emit('update:value', [...temp, {
           type: 'file',
           format: 'hash',
-          hash: res.hash,
+          value: res.hash,
         }]);
       });
     }

src/components/template/TypeZero.vue

 <template>
   <div class="van-hairline--bottom">
-    <van-field :value="value" v-model="aa" @input="input" :label="proofSubItem.label" placeholder="请输入" />
+    <van-field :value="value.value" v-model="aa" @input="input" :label="proofSubItem.label" placeholder="请输入" />
   </div>
 </template>
 
@@ -17,11 +17,11 @@ export default class TypeZero extends Vue {
   private proofSubItem: any;
   // @Model ('input', {type: String})
   @Prop()
-  private value!: string;
+  private value!: any;
   // @Emit('input')
-  private aa: string = this.value;
+  private aa: string = this.value.value;
   private input() {
-    this.$emit('update:value', this.aa);
+    this.$emit('update:value', {...this.value, value: this.aa});
   }
 }
 </script>

src/views/auth/Enterprise.vue

 <template>
     <div class="enterprise-auth">
-      <div v-if="[0,1].includes(companyAuthInfo.status)">
+      <div v-if="![1,2,3].includes(companyAuthInfo.status)">
          <van-form ref="loginForm" @submit="onSubmitStep1" v-if="step === '1'">
           <van-field 
             v-model="basicInfo.name"
@@ -64,6 +64,11 @@
               <div>{{bankInfo.bank_name}}</div>
               <div>账户为：{{bankInfo.bank_card}}</div>
           </van-dialog>
+          <van-popup v-model="showToast" class="toast">
+             <div class="loader-container"><div class="loader" style="margin-bottom:10px;"></div></div>
+             <div style="color:#353535;font-size:20px;margin-top:20px;">打款中</div>
+             <div style="color:#818181;font-size:12px;">提示：请耐心等待，大概需要30~120s</div>
+          </van-popup>
           <van-form @submit="onSubmitStep3" v-if="step === '3'">
               <common-svg name="xuanzhong" width="46px" height="46px"></common-svg>
               <div style="color:#353535;font-size:16px;margin-top:20px;">
@@ -139,6 +144,8 @@ export default class Enterprise extends Vue {
   private step: string = '1';
   private banks: string[] = [];
   private showBankPicker: boolean = false;
+  private showToast: boolean = false;
+
 
   @Watch('step', {immediate: true})
   private onStepChange(step: string) {
@@ -163,8 +170,12 @@ export default class Enterprise extends Vue {
     });
   }
   private onSubmitStep2() {
+    this.showToast = true;
     this.$api.auth.bank(this.bankInfo).then((res: any) => {
       this.step = '3';
+      this.showToast = false;
+    }).catch((err: any) => {
+      // this.showToast = false;
     });
   }
   private onSubmitStep3() {
@@ -192,5 +203,108 @@ export default class Enterprise extends Vue {
         justify-content: space-between;
       }
     }
+    .toast{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 40px 20px;
+      border-radius: 10px;
+      $colors:
+            hsla(337, 84, 48, 0.75)
+            hsla(160, 50, 48, 0.75)
+            hsla(190, 61, 65, 0.75)
+            hsla( 41, 82, 52, 0.75);
+      $size: 2.5em;
+      $thickness: 0.5em;
+
+      // Calculated variables.
+      $lat: ($size - $thickness) / 2;
+      $offset: $lat - $thickness;
+
+      .loader-container{
+        position: relative;
+        width: $size;
+        height: $size;
+        transform: rotate(165deg);
+        &:before,
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: block;
+          width: $thickness;
+          height: $thickness;
+          border-radius: $thickness / 2;
+          transform: translate(-50%, -50%);
+        }
+  
+        &:before {
+          animation: before 2s infinite;
+        }
+        
+        &:after {
+          animation: after 2s infinite;
+        }
+      }
+
+      @keyframes before {
+        0% {
+          width: $thickness;
+          box-shadow:
+            $lat (-$offset) nth($colors, 1),
+            (-$lat) $offset nth($colors, 3);
+        }
+        35% {
+          width: $size;
+          box-shadow:
+            0 (-$offset) nth($colors, 1),
+            0   $offset  nth($colors, 3);
+        }
+        70% {
+          width: $thickness;
+          box-shadow:
+            (-$lat) (-$offset) nth($colors, 1),
+            $lat $offset nth($colors, 3);
+        }
+        100% {
+          box-shadow:
+            $lat (-$offset) nth($colors, 1),
+            (-$lat) $offset nth($colors, 3);
+        }
+      }
+
+      @keyframes after {
+        0% {
+          height: $thickness;
+          box-shadow:
+            $offset $lat nth($colors, 2),
+            (-$offset) (-$lat) nth($colors, 4);
+        }
+        35% {
+          height: $size;
+          box-shadow:
+              $offset  0 nth($colors, 2),
+            (-$offset) 0 nth($colors, 4);
+        }
+        70% {
+          height: $thickness;
+          box-shadow:
+            $offset (-$lat) nth($colors, 2),
+            (-$offset) $lat nth($colors, 4);
+        }
+        100% {
+          box-shadow:
+            $offset $lat nth($colors, 2),
+            (-$offset) (-$lat) nth($colors, 4);
+        }
+      }
+      .loader{
+        position: absolute;
+        top: calc(50% - #{$size / 2});
+        left: calc(50% - #{$size / 2});
+      }
+    }
   }
 </style>
\ No newline at end of file

src/views/auth/Personal.vue

@@ -61,11 +61,6 @@
             </div>
             <van-button block color="#3F79FE"  type="primary" native-type="submit" style="margin-top: 60px;">确定</van-button>
           </van-form>
-          <van-popup v-model="showToast" class="toast">
-             <div class="loader-container"><div class="loader" style="margin-bottom:10px;"></div></div>
-             <div style="color:#353535;font-size:20px;margin-top:20px;">打款中</div>
-             <div style="color:#818181;font-size:12px;">提示：请耐心等待，大概需要30~120s</div>
-          </van-popup>
           <upload-success v-if="uploadSuccess"></upload-success>
       </div>
       <Auditing v-if="authInfo.status === 1"></Auditing>
@@ -117,7 +112,6 @@ export default class Personal extends Vue {
 
   private step: string = '1';
 
-  private showToast: boolean = false;
 
   private readonly requires: any[] = [
     {
@@ -153,14 +147,11 @@ export default class Personal extends Vue {
     // this.$api.auth.bankcard4c(params).then((res: any) => {
     //   this.uploadSuccess = true;
     // });
-    this.showToast = true;
     this.$api.auth.face(params).then((res: any) => {
       this.getUserInfo().then(() => {
         this.uploadSuccess = true;
-        this.showToast = false;
       });
     }).catch((err: any) => {
-        this.showToast = false;
     });
   }
   private handleFileChange(e: any) {