完成订单相关UI

src/pages/orders.vue

@@ -0,0 +1,78 @@
+<script setup>
+import Container from "@/components/Container.vue";
+
+const orders = ["已生效", "已失效"];
+
+const getStatusColor = (status) => {
+  switch (status) {
+    case "已生效":
+      return "#35CD67";
+    case "已失效":
+      return "#EF4848";
+    default:
+      return "#999999";
+  }
+};
+
+const toDetailPage = (id) => {
+  uni.navigateTo({
+    url: `/pages/order-detail?id=${id}`,
+  });
+};
+</script>
+
+<template>
+  <Container title="订单">
+    <view class="container">
+      <view
+        v-for="(item, index) in orders"
+        :key="index"
+        class="order-item"
+        @click="() => toDetailPage(item)"
+      >
+        <view :style="{ backgroundColor: getStatusColor(item) }">{{
+          item
+        }}</view>
+        <text>会员一个月</text>
+        <text>支付时间：2025-01-31 09:27:34</text>
+        <text>金额：10 元</text>
+        <text>支付方式：支付宝</text>
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: #e4e4e4;
+  padding-top: 10px;
+}
+.order-item {
+  position: relative;
+  background-color: #fff;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+}
+.order-item > view:first-child {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50px;
+  color: #fff;
+  text-align: center;
+  font-size: 11px;
+}
+.order-item > text:nth-child(2) {
+  color: #000;
+  font-size: 16px;
+}
+.order-item > text {
+  color: #666666;
+  font-size: 13px;
+  margin-top: 5px;
+}
+</style>