shoot-miniprograms/src/components/PointRankItem.vue

<script setup>
import { ref, watch } from "vue";
import Avatar from "@/components/Avatar.vue";

import useStore from "@/store";
import { storeToRefs } from "pinia";
const { user, device, online } = storeToRefs(useStore());

import { clickLikeAPI } from "@/apis";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  borderWidth: {
    type: Number,
    default: 1,
  },
});

const like = ref(props.data.ifLike);
const likeCount = ref(props.data.likeTotal || 0);

watch(
  () => props.data,
  (newVal) => {
    like.value = newVal.ifLike;
    likeCount.value = newVal.likeTotal || 0;
  }
);

const onClick = async () => {
  if (!user.value.id) return;
  if (user.value.id === props.data.id) {
    return uni.navigateTo({
      url: "/pages/my-like-list",
    });
  }
  like.value = !like.value;
  await clickLikeAPI(props.data.id, like.value);
  if (like.value) likeCount.value++;
  else likeCount.value--;
};
</script>

<template>
  <view class="rank-item" :style="{ borderWidth: borderWidth + 'rpx' }">
    <image v-if="data.rank === 1" src="../static/point-no1.png" />
    <image v-else-if="data.rank === 2" src="../static/point-no2.png" />
    <image v-else-if="data.rank === 3" src="../static/point-no3.png" />
    <text v-else>{{ data.rank || "" }}</text>
    <view>
      <Avatar :src="data.avatar || '../static/user-icon.png'" :size="36" />
      <view>
        <text class="truncate">{{ data.name }}</text>
        <view>
          <text>{{ data.totalDay }}天</text>
          <view />
          <text>平均{{ Number(data.averageRing.toFixed(1)) }}环</text>
        </view>
      </view>
    </view>
    <view class="item-info">
      <text>{{ data.weekArrow }}</text>
      <text>箭</text>
    </view>
    <view class="item-info">
      <text>{{ Math.round(data.weekArrow * 1.6) }}</text>
      <text>千卡</text>
    </view>
    <button hover-class="none" @click="onClick">
      <text>{{ likeCount }}</text>
      <image
        :src="`../static/like-${like ? 'on' : 'off'}.png`"
        mode="widthFix"
      />
    </button>
  </view>
</template>

<style scoped lang="scss">
.rank-item {
  margin: 0 20rpx;
  border-bottom: $uni-border;
  display: flex;
  align-items: center;
  background: $uni-white;
  height: 120rpx;
}
.rank-item > text:nth-child(1) {
  width: 52rpx;
  font-size: 28rpx;
  color: #333333;
  text-align: center;
}
.rank-item > image:nth-child(1) {
  width: 52rpx;
  height: 56rpx;
}
.rank-item > view:nth-child(2) {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}
.rank-item > view:nth-child(2) > view:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 22rpx;
  color: #aaaaaa;
  margin-left: 20rpx;
}
.rank-item > view:nth-child(2) > view:last-child > text:first-child {
  width: 200rpx;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 5rpx;
}
.rank-item > view:nth-child(2) > view:last-child > view {
  display: flex;
  align-items: center;
}
.rank-item > view:nth-child(2) > view:last-child > view > view {
  height: 20rpx;
  width: 1rpx;
  margin: 0 10rpx;
  background-color: #b3b3b3;
}
.item-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 20rpx;
  color: #777777;
  width: 20%;
}
.item-info > text:first-child {
  font-size: 28rpx;
  color: #333333;
  margin-right: 5rpx;
}
.rank-item > button:nth-child(5) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  color: #777777;
  padding-left: 20rpx;
  padding-right: 10rpx;
}
.rank-item > button:nth-child(5) > image {
  width: 24rpx;
  height: 22rpx;
  margin-top: 10rpx;
}
</style>