代码调整

src/views/proof/components/ProofItem.vue

@@ -3,14 +3,14 @@
     <div class="header" >
        <span style="font-weight:500;font-size:18px;" class="van-ellipsis">{{proof.name}}</span>
        <div>
-          <span class="status" :class="statusStr.class">{{statusStr.text}}</span>
-          <span class="time">{{proof.update_time|timeFormat}}</span>
+          <span class="status" :class="currentProofStatusAndClass.class">{{currentProofStatusAndClass.text}}</span>
+          <span class="time">{{proof.update_time | timeFormat}}</span>
        </div>
        <common-svg @click.stop.native="showMoreAction" class="more" name="cunzhengliebiao-gengduo"></common-svg>
     </div>
-    <div class="increment" v-if="proof.increment_num > 0" :class="proof.increment_num > 0 ? 'van-hairline--top':''">  
+    <div class="increment van-hairline--top" v-if="proof.increment_num > 0">  
         <van-steps :active="active" direction="vertical" class="list" active-color="#FF3661" v-show="showIncrementList">
-          <van-step v-for="(incrementProof, index) in incrementList" :key="incrementProof.id" >
+          <van-step v-for="({ id, name, status, update_time }, index) in incrementList" :key="id" >
             <template #active-icon>
                 <common-svg name="suyuan-weishanglian"></common-svg>
             </template>
@@ -18,23 +18,23 @@
               <common-svg name="suyuan-yishanglian"></common-svg>
             </template>
             <div class="header">
-              <div style="color:#737582;">{{incrementProof.name}}</div>
+              <div style="color:#737582;" class="van-ellipsis">{{name}}</div>
               <div>
-                <span>{{getIncrementStatusStr(incrementProof.status).text}}</span>
-                <span style="margin-left: 10px;color:#B6B5BA;">{{incrementProof.update_time|timeFormat}}</span>
+                <span>{{getStatusTextAndClass(status).text}}</span>
+                <span style="margin-left: 10px;color:#B6B5BA;">{{update_time | timeFormat}}</span>
               </div>
               <common-svg name="bianji1"
                 width="30px"
                 height="30px"
-                v-if="incrementProof.status !== ChainStatus.SUCCESS"
-                @click.stop="editIncrementProof(incrementProof,index)" 
+                v-if="[ChainStatus.NONE, ChainStatus.FAILURE].includes(status)"
+                @click.stop="editIncrementProof(index)" 
                 ></common-svg>
             </div>
           </van-step>
         </van-steps>
-      <div class="desc" @click.stop="showIncrementList = !showIncrementList;getIncrementList(3);">
+      <div class="desc" @click.stop="toggleShowIncrementListHandler">
         <common-svg name="suyuan-duoshaotiao1"></common-svg>
-        <div>{{isSy? '溯源' : '慈善'}}流程{{proof.increment_num}}条</div>
+        <div>{{isSy ? '溯源' : '慈善'}}流程{{proof.increment_num}}条</div>
         <common-svg name="fanhui"  :style="{transform: showIncrementList?'rotate(180deg)':'rotate(0)'}"></common-svg>
       </div>
     </div>
@@ -65,39 +65,46 @@ export default class ProofItem extends Vue {
   private activeName: string = '1';
   private ChainStatus = ChainStatus;
 
+  private get currentProofStatusAndClass() {
+    return this.getStatusTextAndClass(this.proof.status);
+  }
   @Emit('show-more-action')
   private async showMoreAction() {
     const { proof: { increment_num } } = this;
-    if (increment_num > 0) {
+    if (increment_num > 0 && this.incrementList.length <= 0) {
       await this.getIncrementList(increment_num);
     }
     return this.proof;
   }
-  private getIncrementList(count: number) {
+  private async getIncrementList(count: number) {
     const { hash } = this.proof;
-    return this.$api.proof.incrementList(hash).then((res: any) => {
-      this.incrementList = res.results || [];
-    });
+    const { results } = await this.$api.proof.incrementList(hash);
+    this.incrementList = results || [];
+  }
+  private toggleShowIncrementListHandler() {
+    const {
+      showIncrementList,
+      incrementList: { length },
+      proof: { increment_num }
+    } = this;
+    this.showIncrementList = !showIncrementList;
+    if (this.showIncrementList && length <= 0) {
+      this.getIncrementList(increment_num);
     }
-  get statusStr() {
-    const { status } = this.proof;
-    return {
-      text: ChainStatusStr[status],
-      class: classEnum[status],
-    };
   }
-  private getIncrementStatusStr(status: number) {
+  private getStatusTextAndClass(status: number) {
     return {
       text: ChainStatusStr[status],
+      class: classEnum[status],
     };
   }
   @Emit('edit-increment-proof')
-  private editIncrementProof(incrementProof: any, currentIndex: number) {
+  private editIncrementProof(currentIndex: number) {
     const preProof = this.incrementList.length < 2
                       ? this.proof
                       : this.incrementList[currentIndex + 1];
     return {
-      incrementProof,
+      incrementProof: this.incrementList[currentIndex],
       baseProof: this.proof,
       preProof,
     };