shoot-miniprograms/src/components/UserHeader.vue

<script setup>
import { computed } from "vue";
import Avatar from "@/components/Avatar.vue";
const props = defineProps({
  showRank: {
    type: Boolean,
    default: false,
  },
  user: {
    type: Object,
    default: () => ({
      nickName: "",
      avatarUrl: "",
      lvl: 0,
      points: 0,
      rankLvl: 0,
      lvlPoints: 0,
    }),
  },
});
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.avatarUrl" :onClick="toUserPage" />
    <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 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-image {
  margin-left: 5px;
  width: 20px;
}

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

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

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

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

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

.rank-tag {
  position: relative;
  background-color: #00000038;
  width: 55px;
  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;
}

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

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