update:代码优化

src/modules/payment/views/Detail.vue

 <template>
   <div>
-    <template v-if="dealList.payment_status === '70'">
-      <el-button
-        @click="fetchConfirmTicketDetail('FINANCE')"
-        type="danger"
-        v-if="isFINANCE && dealList.finance_confirm_status === 0"
-        >财务确认足额支付</el-button
-      >
-      <el-button
-        @click="fetchConfirmTicketDetail('BUSINESS')"
-        type="danger"
-        v-if="isBUSINESS && dealList.business_confirm_status === 0"
-        >业务确认足额支付</el-button
-      >
-    </template>
-    <template v-if="dealList.payment_status === '80'">
-      <el-button
-        @click="fetchCancelTicketDetail('FINANCE')"
-        type="danger"
-        v-if="isFINANCE && dealList.finance_confirm_status === 1"
-        >财务取消足额支付</el-button
-      >
-      <el-button
-        @click="fetchCancelTicketDetail('BUSINESS')"
-        type="danger"
-        v-if="isBUSINESS && dealList.business_confirm_status === 1"
-        >业务取消足额支付</el-button
-      >
-    </template>
+    <!-- 财务 -->
+    <el-button
+      type="danger"
+      v-if="
+        isFINANCE &&
+        ((this.dealList.finance_confirm_status === 0 && this.dealList.payment_status === '70') ||
+          (this.dealList.finance_confirm_status === 1 && this.dealList.payment_status === '80'))
+      "
+      @click="fetchToTicketDetail('FINANCE')"
+      >{{ btnText1 }}</el-button>
+    <!-- 业务 -->
+    <el-button
+      type="danger"
+      v-if="
+        isBUSINESS &&
+        ((this.dealList.business_confirm_status === 0 && this.dealList.payment_status === '70') ||
+          (this.dealList.business_confirm_status === 1 && this.dealList.payment_status === '80'))
+      "
+      @click="fetchToTicketDetail('BUSINESS')"
+      >{{ btnText2 }}</el-button>
     <app-card title="订单信息" style="margin-top: 20px">
       <Order :dealList="dealList" />
     </app-card>
@@ -88,6 +80,22 @@ export default {
         this.roles.includes('dean_of_admissions') ||
         this.roles.includes('developer')
       )
+    },
+    // eslint-disable-next-line vue/return-in-computed-property
+    btnText1() {
+      if (this.dealList.finance_confirm_status === 0 && this.dealList.payment_status === '70') {
+        return '财务确认足额支付'
+      } else if (this.dealList.finance_confirm_status === 1 && this.dealList.payment_status === '80') {
+        return '财务取消足额支付'
+      }
+    },
+    // eslint-disable-next-line vue/return-in-computed-property
+    btnText2() {
+      if (this.dealList.business_confirm_status === 0 && this.dealList.payment_status === '70') {
+        return '业务确认足额支付'
+      } else if (this.dealList.business_confirm_status === 1 && this.dealList.payment_status === '80') {
+        return '业务取消足额支付'
+      }
     }
   },
   beforeMount() {
@@ -107,25 +115,23 @@ export default {
           this.$message.error(error.message)
         })
     },
-    // 确认
-    fetchConfirmTicketDetail(val) {
+    // 财务(业务)确认(取消)支付
+    fetchToTicketDetail(val) {
       const params = {
         confirm_type: val,
         id: this.id
       }
-      confirmPayDetail(params).then(res => {
-        this.fetchTicketDetail()
-      })
-    },
-    // 取消
-    fetchCancelTicketDetail(val) {
-      const params = {
-        confirm_type: val,
-        id: this.id
+      if (this.dealList.payment_status === '70') {
+        // 确认
+        confirmPayDetail(params).then(res => {
+          this.fetchTicketDetail()
+        })
+      } else {
+        // 取消
+        cancelPayDetail(params).then(res => {
+          this.fetchTicketDetail()
+        })
       }
-      cancelPayDetail(params).then(res => {
-        this.fetchTicketDetail()
-      })
     }
   }
 }