新增存证流程

src/router/index.ts

@@ -48,6 +48,7 @@ const routes: RouteConfig[] = [
         proofId: route.query.proofId,
         baseProof: route.query.baseProof,
         preProof: route.query.preProof,
+        proofName: route.query.proofName,
       }),
     meta: { requiresAuth: true },
   },

src/views/proof/Detail.vue

@@ -9,7 +9,7 @@
         <li @click="reSendBlockChain(id)">重新上链</li>
       </ul>
     </div>
-    <van-field v-model="name" label="填写存证名称" placeholder="请输入" />
+    <van-field v-model="name" label="填写存证名称" placeholder="请输入" v-if="!proofName" />
     <template-detail :detailInformation="detail" class="detail"></template-detail>
     <div class="btn-group" v-if="!baseProof">
       <div style="overflow:hidden;color:#B6B5BA;font-size:14px;white-space:nowrap;margin-right: 10px;flex:auto;text-align:left;">已选模板:<span style="color:#3F79FE;margin-left:10px;">{{proofType}}</span></div>
@@ -79,15 +79,28 @@ export default class Detail extends Vue {
   private preProof!: any;
   @Prop({})
   private baseProof!: any;
+  @Prop({})
+  private proofName!: string;
+
+  get addOrTemplate() {
+    return {
+      templateId: this.templateId,
+      proofName: this.proofName,
+    };
+  }
 
-  @Watch('templateId', { immediate: true, deep: true })
-  private async onRouteChange(newTemplateId: number, oldTemplateId: number) {
-    if (newTemplateId) {
-      const templateDetail = await this.$api.template.get(newTemplateId);
+  @Watch('addOrTemplate', { immediate: true, deep: true })
+  private async onRouteChange(newTemplateId: any, oldTemplateId: any) {
+    if (newTemplateId.templateId) {
+      const templateDetail = await this.$api.template.get(newTemplateId.templateId);
       this.detail = JSON.parse(templateDetail.detail);
       this.detail2 = JSON.stringify(this.detail);
       this.proofType = templateDetail.name;
-      this.name = templateDetail.name;
+      if (newTemplateId.proofName) {
+        this.name = newTemplateId.proofName;
+      } else {
+        this.name = templateDetail.name;
+      }
       this.name2 = this.name;
       this.showBtn = true;
     }

src/views/proof/Index.vue

 <template>
   <div class="proof-list">
-    <add-baseinfo v-if="showAddProof" @cancle="showAddProof = false;"></add-baseinfo>
     <van-image src="@/assets/addproof.png" width="50px" fit="contain" class="add-proof" @click="showAddProof = true;"></van-image>
     <header>
       <span style="font-size:18px;font-weight:500;">存证列表</span>
@@ -58,7 +57,6 @@
       </van-grid>
       <van-button block round @click="show = false;">取消</van-button>
     </van-popup>
-
     <van-popup v-model="showFilterPicker" :close-on-popstate="true" round position="bottom">
       <van-picker
         show-toolbar
@@ -67,7 +65,8 @@
         @confirm="onConfirmFilter"
       />
     </van-popup>
-    <select-template v-if="showSelectTemplate" @next="next" @cancel="showSelectTemplate = false;" @preview="preview" @add-folder="showAddFolder = true;"></select-template>
+    <add-baseinfo v-if="showAddProof" :proofName.sync="proofName"  :templateInfo.sync="templateInfo" @cancle="showAddProof = false;" @next="addProofHandler" @select-template="showSelectTemplate = true;"></add-baseinfo>
+    <select-template v-if="showSelectTemplate" @next="nextSelectedTemplate" @cancel="showSelectTemplate = false;" @preview="preview" @add-folder="showAddFolder = true;"></select-template>
     <transition name="van-slide-right">
       <add-folder v-if="showAddFolder" @cancel="showAddFolder = false" @next="addFolder"></add-folder>
     </transition>
@@ -147,6 +146,34 @@ export default class Index extends Vue {
   private showAddProof: boolean = false;
 
   private showIncrementMore: boolean = false;
+
+  private proofName: string = '';
+  private templateInfo: any = {
+    id: '',
+    name: '',
+  };
+  private isZengliang: boolean = false;
+  private async addProofHandler() {
+    if ( this.isZengliang ) {
+      let preProof = null;
+      if (this.currentProof.increment_num > 0) {
+        const incrementProofListResult  =  await this.$api.proof.incrementList(this.currentProof.hash);
+        preProof = (incrementProofListResult.results || [])[0];
+      } else {
+        preProof = this.currentProof;
+      }
+      this.$router.push({name: 'ProofDetail',
+                      query: { templateId: this.templateInfo.id,
+                               baseProof: JSON.stringify(this.currentProof),
+                               preProof: JSON.stringify(preProof),
+                               proofName: this.proofName }});
+    } else {
+       this.$router.push({name: 'ProofDetail',
+                      query: { templateId: this.templateInfo.id,
+                               proofName: this.proofName,
+                              }});
+    }
+  }
   private async addFolder(data: any) {
      const { folderName } = data;
      this.showAddFolder = false;
@@ -166,6 +193,11 @@ export default class Index extends Vue {
                                baseProof: JSON.stringify(this.currentProof),
                                preProof: JSON.stringify(preProof) }});
   }
+  private nextSelectedTemplate(data: any) {
+    this.templateInfo.id = data.templateId;
+    this.templateInfo.name = data.templateName;
+    this.showPreview = false;
+  }
   private preview(currentTemplate: any) {
     this.currentTemplate = currentTemplate;
     this.detail = JSON.parse(this.currentTemplate.detail)[0];
@@ -326,7 +358,8 @@ export default class Index extends Vue {
     location.href = process.env.VUE_APP_BROWSER + `/product?hash=${proof.hash}`;
   }
   private increment(proof: any) {
-    this.showSelectTemplate = true;
+    this.showAddProof = true;
+    this.isZengliang = true;
   }
 }
 </script>

src/views/proof/components/AddBaseinfo.vue

 <template>
     <van-popup
      class="add-baseinfo"
+     round
      v-model="show"
       position="bottom" 
       :close-on-click-overlay="false"
@@ -8,18 +9,20 @@
        <header>
          <common-svg name="shanchu5" @click.native="cancle"></common-svg>
          <div>创建存证</div>
-         <div style="color:#B6B5BA;font-size:16px;" @click="next">下一步</div>
+         <div style="color:#B6B5BA;font-size:16px;" @click="next" :style="(proofName && templateInfo.name) ? {color: '#3F79FE'} : {}">下一步</div>
        </header>
-       <van-field v-model="proofName" placeholder="填写存证名称"></van-field>
-       <div>
-          <div>
-            <common-svg name="tianjia" style="margin-right:10px;"></common-svg><span>选择模板</span><common-svg name="jinru"></common-svg>
+       <van-field :value="proofName" placeholder="填写存证名称" @input="change"></van-field>
+       <div style="padding: 0 12px;">
+          <div style="background:#F9F9FB;" class="select-template" @click="$emit('select-template')">
+            <common-svg name="tianjia" style="margin-right:10px;"></common-svg>
+            <span class="select">{{templateInfo.name? `已选择 ${templateInfo.name}`: '选择模板'}}</span>
+            <common-svg name="jinru"></common-svg>
           </div>
        </div>
     </van-popup>
 </template>
 <script lang="ts">
-import { Component, Prop, Watch, Vue, Emit } from 'vue-property-decorator';
+import { Component, Prop, Watch, Vue, Emit, Model } from 'vue-property-decorator';
 import { Button, Field, Popup, Image } from 'vant';
 import { Getter } from 'vuex-class';
 import { TemplateDataItem } from '@/const/interface';
@@ -34,61 +37,65 @@ import { Route } from 'vue-router';
 })
 export default class AddBaseinfo extends Vue {
   private show: boolean = true;
-  private proofName: string = '';
+  @Prop({}) private templateInfo!: any;
+  @Prop({
+  })
+  private proofName!: string;
+  private change(value: string) {
+    this.$emit('update:proofName', value);
+  }
   private cancle() {
-    this.$emit('cancle')
+    this.$dialog({
+      message: '是否放弃当前的存证',
+      confirmButtonText: '继续存证',
+      confirmButtonColor: '#3175FF',
+      showCancelButton: true,
+      cancelButtonText: '放弃',
+      cancelButtonColor: '#353535',
+    }).then(() => {
+    }).catch(() => {
+      this.$emit('cancle');
+    });
   }
-  @Emit('next')
   private next() {
-     return {}
+    const { proofName, templateInfo: { name }} = this;
+    if (!name) {
+      this.$toast('请选择模板');
+      return;
+    }
+    if (!proofName) {
+      this.$toast('请填写模板名称');
+      return;
+    }
+    this.$emit('next')
   }
 }
 </script>
 <style scoped lang="scss">
   .add-baseinfo{
+    ::v-deep .van-field__control{
+      color: #353535;
+      font-size: 22px;
+    }
+    ::-webkit-input-placeholder{
+      color: #CDCDCD
+    }
+
     header{
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       padding: 15px;
+      font-weight: 500;
     }
-    .add{
-      position:relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      height: 170px;
-      text-align: center;
-      background: #353535;
-      color: #FFFFFF;
-    }
-    .preview{
+    .select-template{
       display: grid;
-      grid-template-columns: repeat(auto-fill, 70px);
-      gap: 10px;
-      padding: 17px;
-    }
-    .btn-group{
-      .left,.right{
-        flex: auto;
-      }
-      .left{
-        width:160px;
-        height:40px;
-        line-height: 40px;
-        border-radius:4px;
-        border:1px solid rgba(238,238,238,1);
-      }
-      .right{
-        margin-left: 10px;
-        width:160px;
-        height:40px;
-        line-height: 40px;
-        background:linear-gradient(360deg,rgba(93,123,246,1) 0%,rgba(108,122,254,1) 100%);
-        box-shadow:0px 2px 10px 0px rgba(63,121,254,0.4);
-        border-radius:4px;
-        color: #FFFFFF;
+      grid-template-columns: 30px auto 30px;
+      grid-gap: 5px;
+      place-items: center;
+      margin-top: 15px;
+      .select{
+        justify-self: start;
       }
     }
   }

src/views/template/components/BaseInfo.vue

@@ -72,11 +72,10 @@ export default class BaseInfo extends Vue {
       this.defaultFolderIndex = this.folderList.findIndex( findDefaultFolder );
     });
   }
-  
   private next() {
     const { templateName, folder, imgUrl} = this;
     if ( !templateName ) {
-      this.$toast("请输入模板名称");
+      this.$toast('请输入模板名称');
       return;
     }
     this.$emit('next', {

src/views/template/components/SelectTemplate.vue

@@ -182,11 +182,11 @@ export default class SelectTemplate extends Vue {
   }
   private confirm() {
     this.show = false;
-    this.$emit('next', {templateId: this.currentTemplate.id});
+    this.$emit('next', {templateId: this.currentTemplate.id, templateName: this.currentTemplate.name});
   }
   private employ() {
     this.show = false;
-    this.$emit('next', {templateId: this.currentTemplate.id});
+    this.$emit('next', {templateId: this.currentTemplate.id, templateName: this.currentTemplate.name});
   }
   @Emit('cancel')
   private cancel() {