shoot-miniprograms/src/components/UserHeader.vue

<script setup>
import { computed } from "vue";
const props = defineProps({
  showRank: {
    type: Boolean,
    default: false,
  },
  user: {
    type: Object,
    default: () => ({
      nickName:'',
      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 }">
    <view class="avatar" @click="toUserPage">
      <image src="../static/avatar-frame.png" mode="widthFix" />
      <image src="../static/avatar.png" mode="widthFix" />
    </view>
    <view class="user-details">
      <view class="user-name">
        <text>{{ user.nickName }}</text>
        <image src="../static/vip1.png" mode="widthFix" />
      </view>
      <view class="user-stats">
        <text class="level-tag">钻石1级</text>
        <text class="level-tag">{{ user.lvl }}</text>
        <view class="rank-tag">
          <view :style="{ width: '40%' }" />
          <text>{{ user.lvl }}/{{ user.lvlPoints }}</text>
        </view>
      </view>
    </view>
    <view v-if="showRank === true" 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;
}

.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar > image:first-child {
  position: absolute;
  width: 55px;
  height: 55px;
}

.avatar > image {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.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-child {
  width: 45px;
  background: #5f51ff;
}
.level-tag:nth-child(2) {
  width: 30px;
  background: #09c504;
}

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

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

.rank-tag > view:first-child {
  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: 10px;
  position: relative;
  color: #b3b3b3;
  padding-left: 8px;
}

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

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