wxapp_shuibei/components/findFundsCard/index.vue

<template>
  <view class="article-card">
    <view @click="toDetail(localItem)" class="article-content">
      <view class="article-content">
        <view class="image-container">
          <image
            :src="localItem.images[0]"
            mode="aspectFill"
            class="main-image"
          ></image>
          <!-- {{ localItem.images[0] }} -->
          <!-- <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.description }}</text>
          </view>
        </view>
      </view>
      <view class="article-footer">
        <view class="author-detail" @click="toPersonal">
          <image
            :src="`${localItem.contactAvatar}`"
            class="small-avatar"
          ></image>

          <text class="author-name">{{ localItem.contactName }}</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="#f73842"
            v-show="localItem.likeMark"
            :class="['liked', { 'animated heartBeat': showAnimation }]"
          ></uni-icons>
          <text class="like-count">{{ localItem.likeCount || 0 }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { likeFundsAPI } from "@/api/find_fund";
import { useDebounce } from "@/hooks/useDebounceThrottle";
import { useSafeNavigate } from "@/hooks/useSafeNavigate";
import { useAppStore } from "@/stores/app";
// 头像baseUrl
const baseUrl = "http://sb-admin.oss-cn-shenzhen.aliyuncs.com/";
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.uid) === Number(appStore.uid)) {
    return uni.switchTab({ url: "/pages/user/index" });
  }
  // 其它用户跳到 用户个人页
  uni.navigateTo({ url: `/pages/user/personal?id=${localItem.value.uid}` });
}

// 点赞
async function handleLike() {
  try {
    const { code } = await likeFundsAPI(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 safeNavigateTo(`/pages/article_create/edit?id=${item.id}`);
  // }
  console.log("点击详情");
  safeNavigateTo(`/pages/users/funds_detail/index?id=${item.id}`);
};
// 预览图片
const previewImage = (item) => {
  console.log(item[0]);

  // 预览图片，支持多张图片传数组
  uni.previewImage({
    urls: item,
    current: item[0],
    indicator: "default",
    loop: true,
  });
};
</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>