完成订单相关UI

src/pages/login.vue

@@ -30,7 +30,7 @@ const handleLogin = () => {
         success: async (loginRes) => {
           const { code } = loginRes;
           const result = await loginAPI(nickName, avatarUrl, code);
-          updateUser(result.user);
+          updateUser({ ...result.user, nickName, avatarUrl });
           uni.navigateBack();
         },
         fail: (err) => {

src/pages/order-detail.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+
+const id = ref("");
+
+onLoad((options) => {
+  id.value = options.id;
+});
+</script>
+
+<template>
+  <Container title="订单详情">
+    <view class="container">
+      <view class="order">
+        <text>商品名：会员一个月</text>
+        <text>订单号：20250131HY1M0000</text>
+        <text>下单时间：2025-01-31 09:27:34</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 {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+}
+.order > text:first-child {
+  color: #000;
+  font-size: 16px;
+}
+.order > text {
+  color: #666666;
+  font-size: 13px;
+  margin-top: 5px;
+}
+</style>

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>

src/pages/user.vue

@@ -3,21 +3,35 @@ import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import UserItem from "@/components/UserItem.vue";
+import Avatar from "@/components/Avatar.vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const toOrderPage = () => {
+  uni.navigateTo({
+    url: "/pages/orders",
+  });
+};
 </script>
 
 <template>
   <view>
     <AppBackground />
     <Header title="用户信息" />
-    <UserHeader />
+    <UserHeader :user="user" />
     <view class="container">
-      <UserItem title="用户名" />
-      <UserItem title="头像" />
+      <UserItem title="用户名">{{ user.nickName }}</UserItem>
+      <UserItem title="头像">
+        <Avatar :src="user.avatarUrl" :size="35" />
+      </UserItem>
       <UserItem
         title="订单"
         :customStyle="{
           marginTop: '10px',
         }"
+        :onClick="toOrderPage"
       />
       <UserItem title="新手试炼场" />
       <UserItem title="会员" />