积分表UI修改

src/components/Header.vue

@@ -1,6 +1,17 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import HeaderProgress from "@/components/HeaderProgress.vue";
+import Avatar from "@/components/Avatar.vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const currentPage = computed(() => {
+  const pages = getCurrentPages();
+  return pages[pages.length - 1].route;
+});
 
 const props = defineProps({
   title: {
@@ -32,6 +43,18 @@ const onClick = () => {
   }
 };
 
+const toUserPage = () => {
+  uni.navigateTo({
+    url: "/pages/user",
+  });
+};
+
+const signin = () => {
+  if (!user.value.id) {
+    uni.$emit("point-book-signin");
+  }
+};
+
 const loading = ref(false);
 const showLoader = ref(false);
 const pointBook = ref(null);
@@ -73,6 +96,26 @@ onBeforeUnmount(() => {
       />
     </view>
     <view :style="{ color: whiteBackArrow ? '#fff' : '#000' }">
+      <view
+        v-if="currentPage === 'pages/point-book'"
+        class="user-header"
+        @click="signin"
+      >
+        <block v-if="user.id">
+          <Avatar
+            :rankLvl="user.rankLvl"
+            :src="user.avatar"
+            :onClick="toUserPage"
+            :size="40"
+            borderColor="#333"
+          />
+          <text>{{ user.nickName }}</text>
+        </block>
+        <block v-else>
+          <image src="../static/user-icon.png" mode="widthFix" />
+          <text>新来的弓箭手你好呀~</text>
+        </block>
+      </view>
       <block
         v-if="
           '-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
@@ -200,4 +243,21 @@ onBeforeUnmount(() => {
   display: flex;
   justify-content: center;
 }
+.user-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.user-header > image {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2rpx solid #333;
+}
+.user-header > text:nth-child(2) {
+  font-weight: 500;
+  font-size: 30rpx;
+  color: #333333;
+  margin: 0 20rpx;
+}
 </style>