完成订单相关UI

src/components/Avatar.vue

@@ -16,6 +16,10 @@ defineProps({
     type: Number,
     default: 0,
   },
+  size: {
+    type: Number,
+    default: 45,
+  },
 });
 </script>
 
@@ -46,7 +50,11 @@ defineProps({
       class="avatar-rank"
     />
     <view v-if="rank > 3" class="rank-view">{{ rank }}</view>
-    <image :src="src" mode="widthFix" />
+    <image
+      :src="src"
+      mode="widthFix"
+      :style="{ width: size + 'px', height: size + 'px' }"
+    />
   </view>
 </template>
 
@@ -79,8 +87,6 @@ defineProps({
   border-bottom-right-radius: 50%;
 }
 .avatar > image:last-child {
-  width: 45px;
-  height: 45px;
   border-radius: 50%;
   border: 1px solid #fff;
 }

src/components/UserHeader.vue

@@ -10,6 +10,7 @@ const props = defineProps({
     type: Object,
     default: () => ({
       nickName: "",
+      avatarUrl: "",
       lvl: 0,
       points: 0,
       rankLvl: 0,
@@ -34,7 +35,7 @@ const toUserPage = () => {
 
 <template>
   <view class="container" :style="{ width: containerWidth }">
-    <Avatar frame="true" src="../static/avatar.png" :onClick="toUserPage" />
+    <Avatar :frame="true" :src="user.avatarUrl" :onClick="toUserPage" />
     <view class="user-details">
       <view class="user-name">
         <text>{{ user.nickName }}</text>

src/components/UserItem.vue

@@ -12,6 +12,10 @@ defineProps({
     type: Object,
     default: () => ({}),
   },
+  onClick: {
+    type: Function,
+    default: null,
+  },
 });
 </script>
 
@@ -19,8 +23,8 @@ defineProps({
   <view class="user-item" :style="customStyle">
     <text>{{ title }}</text>
     <view>
-      <text>{{ value }}</text>
-      <button>
+      <slot></slot>
+      <button v-if="onClick !== null" @click="onClick">
         <image src="../static/enter.png" mode="widthFix" />
       </button>
     </view>

src/pages.json

@@ -6,6 +6,12 @@
         "navigationBarTitleText": "首页"
       }
     },
+    {
+      "path": "pages/user",
+      "style": {
+        "navigationBarTitleText": "用户信息"
+      }
+    },
     {
       "path": "pages/login",
       "style": {
@@ -13,9 +19,21 @@
       }
     },
     {
-      "path": "pages/user",
+      "path": "pages/orders",
       "style": {
-        "navigationBarTitleText": "用户信息"
+        "navigationBarTitleText": "订单"
+      }
+    },
+    {
+      "path": "pages/order-detail",
+      "style": {
+        "navigationBarTitleText": "订单详情"
+      }
+    },
+    {
+      "path": "pages/my-growth",
+      "style": {
+        "navigationBarTitleText": "我的成长"
       }
     },
     {

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="会员" />

src/store.js

@@ -7,10 +7,8 @@ export default defineStore("store", {
     user: {
       id: "",
       nickName: "游客",
-    },
-    request: {
-      token: "",
-      tokenExpire: 0,
+      avatarUrl: "../static/avatar.png",
+      trio: false, // 是否完成新手试炼
     },
   }),
 
@@ -26,10 +24,6 @@ export default defineStore("store", {
     updateUser(user) {
       this.user = user;
     },
-    updateToken(token, expire) {
-      this.request.token = token;
-      this.request.tokenExpire = Date.now() + expire;
-    },
   },
 
   // 开启数据持久化
@@ -38,7 +32,7 @@ export default defineStore("store", {
     strategies: [
       {
         storage: uni.getStorageSync,
-        paths: ["user", "request"], // 只持久化用户信息
+        paths: ["user"], // 只持久化用户信息
       },
     ],
   },