完成订单相关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>