wxapp_shuibei/components/articleCard/index.vue

<template>
  <view class="article-card">
    <view @click="toDetail(localItem)" class="article-content">
      <view class="image-container">
        <image :src="localItem.coverImage" mode="aspectFill" class="main-image"></image>
        <view class="video-image-right-icon"v-if="item.type === 2">
          <text class='iconfont icon-sanjiaoxing'></text>
        </view>
        <view class="status-box" v-if="item.status !== 2">
          <view class="item-status">
            <uni-icons v-if="item.status === 1" color="#fff" type="eye" size="30"></uni-icons>
            <uni-icons v-if="item.status === 3" color="#fff" type="eye-slash" size="30"></uni-icons>
            <uni-icons v-if="item.status === 0" customPrefix="iconfont" color="#fff" type="icon-caogaoxiang"
              size="30"></uni-icons>
            <view class="text">{{ articleStatusMap[item.status] }}</view>
          </view>
        </view>
      </view>
      <view class="content-box">
        <view class="title-container">
          <text class="title line2">{{ localItem.title }}</text>
        </view>
      </view>
    </view>
    <view class="article-footer">
      <view class="author-detail" @click="toPersonal">
        <image :src="localItem.usePicture" class="small-avatar"></image>
        <text class="author-name">{{ localItem.userName }}</text>
      </view>
      <view class="interaction" @click.stop="handleLike">
        <uni-icons customPrefix="iconfont" type="icon-dianzan" size="16" v-show="!localItem.likeMark"
          class="unlike"></uni-icons>
        <uni-icons customPrefix="iconfont" type="icon-dianzanxuanzhong" size="16" color="red"
          v-show="localItem.likeMark" :class="['liked', { 'animated heartBeat': showAnimation }]"></uni-icons>
        <text class="like-count">{{ localItem.likeCount }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { setUserState } from "@/api/book"
import { useDebounce } from '@/hooks/useDebounceThrottle'
import { useSafeNavigate } from '@/hooks/useSafeNavigate'
import { useAppStore } from "@/stores/app";

const { safeNavigateTo } = useSafeNavigate()

const props = defineProps({
  item: { type: Object, required: true },
  likeAnimationIds: { type: Array, default: () => [] },
});
const emit = defineEmits(["like", "detail"]);
const appStore = useAppStore();

// 创建本地响应式副本
const localItem = ref({ ...props.item });

// 控制动画显示
const showAnimation = ref(false);

const articleStatusMap = {
  0: "草稿",
  1: "审核中",
  2: "已发布",
  3: "审核被拒绝",
};

// 监听外部 item 变化，同步到本地
watch(
  () => props.item,
  (newItem) => {
    localItem.value = { ...newItem };
  },
  { deep: true }
);

// 跳转其它用户
function toPersonal() {
  // 点自己的头像直接到我的tabbar页
  if (Number(localItem.value.userId) === Number(appStore.uid)) {
    return uni.switchTab({ url: '/pages/user/index' })
  }
  // 其它用户跳到 用户个人页
  uni.navigateTo({ url: `/pages/user/personal?id=${localItem.value.userId}` });
}

// 点赞
async function handleLike() {
  try {
    const { code } = await setUserState({
      type: 0,
      bookId: localItem.value.id,
    });

    const wasLiked = localItem.value.likeMark;
    localItem.value.likeMark = !wasLiked;

    if (localItem.value.likeMark) {
      showAnimation.value = true;
      localItem.value.likeCount++;
    } else {
      showAnimation.value = false;
      localItem.value.likeCount--;
    }
  } catch (error) {
    console.error("handleLike", error);
  }
}

// 跳转详情
const toDetail = (item) => {
  // 草稿和审核被拒绝跳到编辑页
  if (item?.status === 0 || item?.status === 3) {
    return uni.navigateTo(`/pages/article_create/edit?id=${item.id}`)
  }
  // console.log('点击详情', item)
  if (item.type === 2) {
    safeNavigateTo(`/pages/video/video_details?id=${item.id}&videoType=list`)
  } else {
    safeNavigateTo(`/pages/article_details/index?id=${item.id}`)
  }
}
</script>

<style lang="scss" scoped>
.article-card {
  width: 100%;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .article-content {
    position: relative;

    .image-container {
      position: relative;
      width: 100%;

      .main-image {
        width: 100%;
        max-height: 400rpx;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
        position: relative;
      }

      .status-box {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;

        .item-status {
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .content-box {
      padding: 16rpx;

      .title-container {
        margin-bottom: 8rpx;

        .title {
          font-size: 14px;
          color: #333;
          font-weight: bold;
          line-height: 1.4;
        }
      }
    }
  }

  .article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx;

    .author-detail {
      display: flex;
      align-items: center;

      .small-avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 8rpx;
      }

      .author-name {
        font-size: 12px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120rpx;
      }
    }

    .interaction {
      display: flex;
      align-items: center;

      .like-count {
        font-size: 26rpx;
        color: #999;
        margin-left: 6rpx;
      }

      .unlike {}

      .liked {}
    }
  }
}
</style>