shoot-miniprograms/src/components/Avatar.vue

<script setup>
import { ref, onMounted, watch } from "vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { getLvlImage } = store;
const { config } = storeToRefs(store);
const props = defineProps({
  src: {
    type: String,
    default: "",
  },
  rankLvl: {
    type: Number,
    default: undefined,
  },
  onClick: {
    type: Function,
    default: () => {},
  },
  rank: {
    type: Number,
    default: 0,
  },
  size: {
    type: Number,
    default: 45,
  },
  borderColor: {
    type: String,
    default: "",
  },
});
const avatarFrame = ref("");
watch(
  () => [config.value, props.rankLvl],
  () => {
    if (props.rankLvl !== undefined) {
      avatarFrame.value = getLvlImage(props.rankLvl);
    }
  },
  {
    immediate: true,
  }
);
</script>

<template>
  <view class="avatar" @click="onClick">
    <image
      v-if="avatarFrame"
      :src="avatarFrame"
      mode="widthFix"
      :style="{
        width: Number(size) + 10 + 'px',
        height: Number(size) + 10 + 'px',
      }"
      class="avatar-frame"
    />
    <image
      v-if="rank === 1"
      src="../static/champ1.png"
      mode="widthFix"
      class="avatar-rank"
    />
    <image
      v-if="rank === 2"
      src="../static/champ2.png"
      mode="widthFix"
      class="avatar-rank"
    />
    <image
      v-if="rank === 3"
      src="../static/champ3.png"
      mode="widthFix"
      class="avatar-rank"
    />
    <view v-if="rank > 3" class="rank-view">{{ rank }}</view>
    <image
      :src="src || '../static/user-icon.png'"
      mode="widthFix"
      :style="{
        width: size + 'px',
        height: size + 'px',
        minHeight: size + 'px',
        borderColor: borderColor || '#fff',
      }"
      class="avatar-image"
    />
  </view>
</template>

<style scoped>
.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-frame {
  position: absolute;
}
.avatar-rank,
.rank-view {
  position: absolute;
  width: 20px;
  height: 15px;
  top: -6px;
  right: -4px;
}
.rank-view {
  background-color: #6d6d6d;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.avatar-image {
  border-radius: 50%;
  border: 1px solid #fff;
}
</style>