shoot-miniprograms/src/components/UserHeader.vue

<script setup>
import { computed } from "vue";
import Avatar from "@/components/Avatar.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
  showRank: {
    type: Boolean,
    default: false,
  },
});
const containerWidth = computed(() => (props.showRank ? "72vw" : "100vw"));
const toUserPage = () => {
  // 获取当前页面路径
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];

  // 如果当前不是用户页面才进行跳转
  if (currentPage.route !== "pages/user") {
    uni.navigateTo({
      url: "/pages/user",
    });
  }
};
</script>

<template>
  <view class="container" :style="{ width: containerWidth }">
    <Avatar
      :frame="true"
      :src="user.avatar"
      :onClick="toUserPage"
      :size="42"
    />
    <view class="user-details">
      <view class="user-name">
        <text>{{ user.nickName }}</text>
        <image
          class="user-name-image"
          src="../static/vip1.png"
          mode="widthFix"
        />
      </view>
      <view class="user-stats">
        <text class="level-tag level-tag-first">钻石1级</text>
        <text class="level-tag level-tag-second">{{ user.lvl }}</text>
        <view class="rank-tag">
          <view class="rank-tag-progress" :style="{ width: '40%' }" />
          <text class="rank-tag-text">{{ user.lvl }}/{{ user.lvlPoints }}</text>
        </view>
      </view>
    </view>
    <view v-if="showRank === true" class="rank-info">
      <image
        class="rank-info-image"
        src="../static/global-rank.png"
        mode="widthFix"
      />
      <text>本赛季</text>
      <text>暂未上榜</text>
      <!-- <text class="rank-number"
        >第<text :style="{ color: '#ffd700' }"
          >{{ user.points }}/{{ user.rankLvl }}</text
        >名</text
      > -->
    </view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  align-items: center;
  width: 72vw;
  padding-left: 15px;
  color: #fff;
}

.user-details {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}

.user-name {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.user-name > text:first-child {
  font-size: 13px;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-name-image {
  margin-left: 5px;
  width: 20px;
}

.user-stats {
  display: flex;
  gap: 5px;
}

.level-tag {
  text-align: center;
  line-height: 16px;
}

.level-tag-first {
  width: 40px;
  background: #5f51ff;
}

.level-tag-second {
  width: 30px;
  background: #09c504;
}

.level-tag,
.rank-tag {
  border-radius: 12px;
  font-size: 9px;
}

.rank-tag {
  position: relative;
  background-color: #00000038;
  width: 50px;
  height: 16px;
}

.rank-tag-progress {
  background: #ffa711;
  height: 100%;
  border-radius: 12px;
}

.rank-tag-text {
  position: absolute;
  top: 0;
  left: 5px;
  line-height: 16px;
}

.rank-info {
  text-align: left;
  font-size: 12px;
  position: relative;
  color: #b3b3b3;
  padding-left: 8px;
  display: flex;
  flex-direction: column;
}

.rank-info-image {
  position: absolute;
  top: -6px;
  left: -9px;
  width: 90px;
}

.rank-number {
  display: block;
}
</style>