优化proofList

src/views/ProofList.vue

@@ -36,90 +36,18 @@
       class="more-action"
       position="bottom"
     >
-      <van-grid :column-num="3" :gutter="10" :border="false" v-if="[ChainStatus.NONE,ChainStatus.CHAINING,ChainStatus.FAILURE].includes(currentProof.status)">
-        <van-grid-item 
-          v-if="currentProof.status !== ChainStatus.CHAINING"
+      <van-grid :column-num="3" :gutter="10" :border="false">
+         <van-grid-item 
+          v-for="(item, index) in actionList"
+          :key="index"
           icon="photo-o" 
-          :text="currentProof.status === ChainStatus.FAILURE? '重新上链':'上链'" 
-          @click="blockChainProof(currentProof)">
+          :text="item.text"
+          @click="select(item.key)">
           <template #icon>
-            <common-svg name="shanglian1" :width="'44px'" :height="'44px'"></common-svg>
+            <common-svg :name="item.icon" :width="'44px'" :height="'44px'"></common-svg>
           </template>
         </van-grid-item>
-        <van-grid-item 
-          v-if="currentProof.status !== ChainStatus.CHAINING"
-          icon="edit" 
-          text="编辑" 
-          :to="{name:'ProofDetail',query: {proofId:currentProof.id}}">
-          <template #icon>
-            <common-svg name="bianji1" :width="'44px'" :height="'44px'"></common-svg>
-          </template>
-        </van-grid-item>
-        <van-grid-item 
-          v-if="currentProof.status !== ChainStatus.CHAINING"
-          icon="delete" 
-          text="删除" 
-          @click="delProof(currentProof.id)" >
-          <template #icon>
-            <common-svg name="shanchu3" :width="'44px'" :height="'44px'"></common-svg>
-          </template>
-        </van-grid-item>
-        <van-grid-item 
-          icon="photo-o" 
-          text="复制"
-          @click="copyProof(currentProof)">
-          <template #icon>
-            <common-svg name="fuzhi1" :width="'44px'" :height="'44px'"></common-svg>
-          </template>
-        </van-grid-item>
-        <!-- <van-grid-item 
-          icon="photo-o" 
-          text="重命名"
-          @click="reName(currentProof)"/> -->
       </van-grid>
-      <van-grid
-        v-if="currentProof.status === ChainStatus.SUCCESS"
-        :column-num="3" :gutter="10" :border="false" >
-        <!-- <van-grid-item 
-          icon="photo-o" 
-          text="撤销展示" 
-          @click="abolishBlockChainProof(currentProof.id)"/> -->
-        <van-grid-item 
-          icon="photo-o" 
-          text="区块链查询" 
-          @click="goToBROWSER(currentProof)">
-          <template #icon>
-            <common-svg name="qukuailianchaxun" :width="'44px'" :height="'44px'"></common-svg>
-          </template>
-        </van-grid-item>
-        <van-grid-item 
-          icon="qr" 
-          text="复制hash地址" 
-          v-clipboard:copy="currentProof.hash"
-          v-clipboard:success="onCopyHash"
-          v-clipboard:error="onErrorCopyHash">
-          <template #icon>
-            <common-svg name="fuzhiHashdizhi" :width="'44px'" :height="'44px'"></common-svg>
-          </template>
-        </van-grid-item>
-        <van-grid-item 
-          icon="delete" 
-          text="删除" 
-          @click="abandonProof(currentProof.id)">
-          <template #icon>
-            <common-svg name="shanchu3" :width="'44px'" :height="'44px'"></common-svg>
-          </template>
-        </van-grid-item>
-        <!-- <van-grid-item 
-          icon="photo-o" 
-          text="查看二维码" 
-          :to="{name:'ViewCode',query: {hash:currentProof.hash}}">
-          <template #icon>
-            <common-svg name="chakanerweima1" :width="'44px'" :height="'44px'"></common-svg>
-          </template>
-        </van-grid-item> -->
-      </van-grid>
-
       <van-button block round @click="show = false;">取消</van-button>
     </van-popup>
 
@@ -145,6 +73,14 @@ const ChainStatusStr: any = {
   [ChainStatus.SUCCESS]: '已上链',
   [ChainStatus.FAILURE]: '上链失败',
 };
+const ActionList = { blockChain: {key: 'blockChain', icon: 'shanglian1', text: '上链'},
+                      edit: {key: 'edit', icon: 'bianji1', text: '编辑'},
+                      del: {key: 'del', icon: 'shanchu3', text: '删除'},
+                      copy: {key: 'copy', icon: 'fuzhi1', text: '复制'},
+                      blockquery: {key: 'blockquery', icon: 'qukuailianchaxun', text: '区块链查询'},
+                      copyhash: {key: 'copyhash', icon: 'fuzhiHashdizhi', text: '复制hash地址'},
+                      del2: {key: 'del2', icon: 'shanchu3', text: '删除'},
+                    };
 @Component({
   components: {
     ProofItem,
@@ -178,6 +114,28 @@ export default class ProofList extends Vue {
     return ChainStatus;
   }
 
+  get actionList() {
+    const {blockChain, edit, del, del2, copy, blockquery , copyhash } = ActionList;
+    const obj: any = {
+      [ChainStatus.NONE]: [blockChain, edit, copy, del],
+      [ChainStatus.CHAINING]: [ copy],
+      [ChainStatus.SUCCESS]: [ blockquery, copyhash, del2],
+      [ChainStatus.FAILURE]: [blockChain, edit, copy, del],
+    };
+    return obj[this.currentProof.status];
+  }
+  private select(type: string) {
+    const obj: any = {
+      blockChain: () => { this.blockChainProof(this.currentProof); },
+      edit: () => { this.goProofDetail(this.currentProof.id); },
+      del: () => { this.delProof(this.currentProof.id); },
+      copy: () => { this.copyProof(this.currentProof); },
+      blockquery: () => { this.goToBROWSER(); },
+      copyhash: () => {},
+      del2: () => { this.abandonProof(this.currentProof.id); },
+    };
+    obj[type]();
+  }
   private async getList() {
     const { chainStatus } = this;
     const params = {