订单详情添加状态

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>