订单详情添加状态

src/constants.js

@@ -67,6 +67,17 @@ export const orderStatusNames = {
   9: "拒绝退款",
 };
 
+export const getStatusColor = (status) => {
+  switch (status) {
+    case 1:
+      return "#EF4848";
+    case 4:
+      return "#35CD67";
+    default:
+      return "#999999";
+  }
+};
+
 export const directionAdjusts = {
   AdjustLowerRight: "向右下方调瞄",
   AdjustDown: "向下方调瞄",

src/pages/order-detail.vue

@@ -3,7 +3,7 @@ import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
 import SButton from "@/components/SButton.vue";
 import { payOrderAPI, cancelOrderListAPI, getHomeData } from "@/apis";
-import { orderStatusNames } from "@/constants";
+import { orderStatusNames, getStatusColor } from "@/constants";
 import useStore from "@/store";
 const store = useStore();
 const { updateUser } = store;
@@ -52,6 +52,11 @@ const cancelOrder = async () => {
 <template>
   <Container title="订单详情">
     <view class="container">
+      <view
+        class="order-status"
+        :style="{ backgroundColor: getStatusColor(data.orderStatus) }"
+        >{{ orderStatusNames[data.orderStatus] }}</view
+      >
       <view class="order">
         <view>
           <text>商品名：{{ data.vipName }}</text>
@@ -81,6 +86,7 @@ const cancelOrder = async () => {
   height: 100%;
   background-color: #f5f5f5;
   padding-top: 10px;
+  position: relative;
 }
 .order {
   width: 100%;
@@ -107,4 +113,13 @@ const cancelOrder = async () => {
 .order > view:last-child {
   margin-bottom: 20px;
 }
+.order-status {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  width: 50px;
+  color: #fff;
+  text-align: center;
+  font-size: 11px;
+}
 </style>

src/pages/orders.vue

@@ -4,22 +4,11 @@ import Container from "@/components/Container.vue";
 import ScrollList from "@/components/ScrollList.vue";
 import { getOrderListAPI } from "@/apis";
 import useStore from "@/store";
-import { orderStatusNames } from "@/constants";
+import { orderStatusNames, getStatusColor } from "@/constants";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, config } = storeToRefs(store);
 
-const getStatusColor = (status) => {
-  switch (status) {
-    case 1:
-      return "#EF4848";
-    case 4:
-      return "#35CD67";
-    default:
-      return "#999999";
-  }
-};
-
 const toDetailPage = (detail) => {
   uni.setStorageSync("order", detail);
   uni.navigateTo({