shoot-miniprograms/src/components/UserHeader.vue

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

  // 如果当前不是用户页面才进行跳转
  if (currentPage.route !== "pages/user") {
    uni.navigateTo({
      url: "/pages/user",
    });
  }
};
const toRankListPage = () => {
  uni.navigateTo({
    url: "/pages/rank-list",
  });
};
watch(
  () => [config.value, user.value],
  ([n_config, n_user]) => {
    const rankInfos = n_config.randInfos || [];
    if (n_user.id && rankInfos.length) {
      rankInfos.some((r, index) => {
        if (r.upgrade_scores && r.upgrade_scores > n_user.scores) {
          nextLvlPoints.value = r.upgrade_scores;
          return true;
        }
        return false;
      });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<template>
  <view class="container" :style="{ width: containerWidth }">
    <block v-if="user.id">
      <Avatar
        :rankLvl="user.rankLvl"
        :src="user.avatar"
        :onClick="toUserPage"
        :size="42"
      />
      <view class="user-details" :onClick="toUserPage">
        <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">段位积分</text>
          <!-- <text class="level-tag level-tag-second">LV{{ user.lvl }}</text> -->
          <view class="rank-tag">
            <view
              class="rank-tag-progress"
              :style="{
                width: `${(Math.max(user.scores, 0) / nextLvlPoints) * 100}%`,
              }"
            />
            <text class="rank-tag-text">
              {{ Math.max(user.scores, 0) }}/{{ nextLvlPoints }}
            </text>
          </view>
        </view>
      </view>
      <view v-if="showRank === true" class="rank-info" @click="toRankListPage">
        <image
          class="rank-info-image"
          src="../static/global-rank.png"
          mode="widthFix"
        />
        <block v-if="user.ranking > 0 && rankData.rank.length">
          <text>本赛季全国</text>
          <text class="rank-number"
            >第<text :style="{ color: '#ffd700' }"
              >{{ user.ranking }}/{{ rankData.rank.length }}</text
            >名</text
          >
        </block>
        <block v-else>
          <text>本赛季</text>
          <text>暂未上榜</text>
        </block>
      </view>
    </block>
    <block v-else>
      <view class="signin">
        <image src="../static/user-icon.png" mode="widthFix" />
        <view @click="() => (showModal = true)">
          <text>新来的弓箭手你好呀~</text>
          <view @click="onSignin">
            <text>微信登录</text>
            <image src="../static/enter-arrow-blue.png" mode="widthFix" />
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  align-items: center;
  width: 72vw;
  height: 50px;
  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: 180rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-name-image {
  margin-left: 5px;
  width: 40rpx;
  height: 40rpx;
}

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

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

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

.level-tag-second {
  width: 60rpx;
  background: #09c504;
}

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

.rank-tag {
  position: relative;
  background-color: #00000038;
  width: 150rpx;
  overflow: hidden;
}

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

.rank-tag-text {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 16px;
  width: 100%;
  text-align: center;
}

.rank-info {
  width: 70px;
  text-align: left;
  font-size: 12px;
  position: relative;
  color: #b3b3b3;
  padding-left: 8px;
  margin-left: 15rpx;
  display: flex;
  flex-direction: column;
}
.rank-info-image {
  position: absolute;
  top: -6px;
  left: -9px;
  width: 90px;
}
.rank-info > text {
  text-align: center;
}
.rank-number {
  display: block;
}
.signin {
  display: flex;
  align-items: center;
}
.signin > image {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.signin > view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: 12px;
  font-size: 14px;
}
.signin > view > view:last-child {
  display: flex;
  align-items: center;
}
.signin > view > view:last-child > text {
  color: #39a8ff;
  margin-top: 2px;
}
.signin > view > view:last-child > image {
  width: 15px;
  margin-top: 2px;
}
</style>