完成订单界面的debug

src/components/OrderItem.vue

@@ -59,13 +59,13 @@ function getOrderDetail() {
 const statusText = computed(() => {
   switch (status.value) {
     case 'UNPAID':
-      return "待支付"
+      return "待顾客支付"
     case 'UNSEND':
-      return "待发货"
+      return "待商家发货"
     case 'UNGET':
-      return "待收货"
+      return "待顾客收货"
     case 'UNCOMMENT':
-      return "待评价"
+      return "待顾客评价"
     case 'DONE':
       return "已完成"
     default:
@@ -73,21 +73,6 @@ const statusText = computed(() => {
   }
 })
 
-const buttonText = computed(() => {
-  switch (status.value) {
-    case 'UNPAID':
-      return "去支付"
-    case 'UNSEND':
-      return "去发货"
-    case 'UNGET':
-      return "去收货"
-    case 'UNCOMMENT':
-      return "去评价"
-    default:
-      return "按钮"
-  }
-})
-
 function parseTime(time) {
   if (time === null) {
     return "暂未完成"
@@ -220,25 +205,6 @@ function handleSendComment() {
   })
 }
 
-function switchButtonFunction() {
-  switch (status.value) {
-    case 'UNPAID':
-      handlePay();
-      break;
-    case 'UNSEND':
-      handleDeliver();
-      break;
-    case 'UNGET':
-      handleGet();
-      break;
-    case 'UNCOMMENT':
-      handleComment();
-      break;
-    default:
-      break;
-  }
-}
-
 // 处理优惠券
 interface Coupon {
   id: number
@@ -303,12 +269,24 @@ function parseOrderType(type) {
       <div class="card-header">
         <div>
           <span> 订单号 {{ props.orderId }}</span>
-          <el-tag style="margin-left: 8px" v-if="status!=='DONE'"> {{ statusText }}</el-tag>
+          <el-tag style="margin-left: 8px" v-if="status!=='DONE'" type="info"> {{ statusText }}</el-tag>
           <el-tag style="margin-left: 8px" v-if="status==='DONE'" type="success"> {{ statusText }}</el-tag>
         </div>
-        <el-button @click="switchButtonFunction" v-if="!(status==='DONE')" class="status-change-button" size="small"
-                   type="primary">
-          {{ buttonText }}
+        <el-button @click="handlePay" v-if="status==='UNPAID' && role==='CUSTOMER'"
+                   class="status-change-button" size="small" type="primary">
+          支付
+        </el-button>
+        <el-button @click="handleDeliver" v-if="status==='UNSEND' && role==='STAFF'"
+                   class="status-change-button" size="small" type="primary">
+          发货
+        </el-button>
+        <el-button @click="handleGet" v-if="status==='UNGET' && role==='CUSTOMER'"
+                   class="status-change-button" size="small" type="primary">
+          收货
+        </el-button>
+        <el-button @click="handleComment" v-if="status==='UNCOMMENT'&& role==='CUSTOMER'"
+                   class="status-change-button" size="small" type="primary">
+          评价
         </el-button>
       </div>
     </template>