gree_leran/components/CaseBox/CaseBox.vue

<template>
  <view class="cardbox">
    <view class="cardbox-top" @click="getInfo">
      <view class="cardbox-img">
        <img class="cardbox-img-min" :src="props.cover"  alt="加载" @error="errorImg" />
      </view>
      <view class="cardbox-text">
        <up-text :lines="1" :text="info.title" :bold="true" size="30rpx" ></up-text>
        <up-text :lines="3" :text="info.text"></up-text>
        <up-text :lines="1" :text="info.data" color="#bfbfbf"></up-text>
      </view>
    </view>
    <view class="cardbox-bttom">
      <view class="">
      </view>
      <view class="cardbox-icon">
        <up-icon v-if="info.isLike" @click="toLike" name="heart-fill" color="#ff0004" size="28"></up-icon>
        <up-icon v-else name="heart" @click="toLike" color="#ff0004" size="28"></up-icon>
        <up-icon v-if="info.isCollection" @click="toCollection" name="star-fill" color="#ff0004" size="28"></up-icon>
        <up-icon v-else name="star" @click="toCollection" color="#ff0004" size="28"></up-icon>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, reactive, ref, defineProps, defineEmits,watch } from "vue";
const emit = defineEmits(["ClickCollection", "ClickLike"]);
const ab = "/static/image/imgerr.png";
const errorImg = () => {
  info.cover;
};
const aaa = ref("name");
const props = defineProps({
  id: {
    type: Number,
    default: null
  },
  title: {
    type: String,
    default: "标题"
  },
  text: {
    type: String,
    default: "正文嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻徐"
  },
  data: {
    type: String,
    default: "日期"
  },
  cover: {
    type: String,
    default: "/static/image/imgerr.png"
  },
  userImage: {
    type: String,
    default: "地址"
  },
  userName: {
    type: String,
    default: "作者"
  },
  userId: {
    type: Number,
    default: null
  },
  isLike: {
    type: Boolean,
    default: false
  },
  likeNumber: {
    type: Number,
    default: 0
  },
  isComments: {
    type: Boolean,
    default: false
  },
  commentsNumber: {
    type: Number,
    default: 0
  },
  isCollection: {
    type: Boolean,
    default: false
  },
  collectionNumber: {
    type: Number,
    default: 0
  },
});
const info = reactive({
  id: "文章id",
  title: "标题",
  cover: "封面地址",
  text: "正文嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻徐",
  data: "发布于：2024-11-11",
  userImage: "",
  userName: "作者",
  userId: "作者id",
  isLike: false,
  likeNumber: 0,
  isComments: false,
  commentsNumber: 0,
  isCollection: false,
  collectionNumber: 0,
});
watch(props,(a)=>{
	// console.log("11111",a);
	ggg();
})
const toLike = () => {
  info.isLike = !info.isLike;
  console.log("sss",info)
  if (info.isLike) {
    info.likeNumber++;
  } else {
    info.likeNumber--;
  }
  console.log("点赞0")
  emit("ClickLike", {
    id: info.id,
    is: info.isLike
  });
  console.log("点赞1")
}
const toComments = () => {
  info.isComments = !info.isComments;
  if (info.isComments) {
    info.commentsNumber++;
  } else {
    info.commentsNumber--;
  }
}
const toCollection = () => {
  info.isCollection = !info.isCollection;
  if (info.isCollection) {
    info.collectionNumber++;
  } else {
    info.collectionNumber--;
  }
  emit("ClickCollection", {
    id: info.id,
    is: info.isCollection
  });
}
const ggg = () => {
  info.id = props.id;
  info.title = props.title;
  info.cover = props.cover;
  info.text = props.text;
  info.data = props.data;
  info.userImage = props.userImage;
  info.userName = props.userName;
  info.userId = props.userId;
  info.isLike = props.isLike;
  info.likeNumber = props.likeNumber;
  info.isComments = props.isComments;
  info.commentsNumber = props.commentsNumber;
  info.isCollection = props.isCollection;
  info.collectionNumber = props.collectionNumber;
}
const getInfo=()=>{
	uni.navigateTo({
	  url: "/pages/newsInfo/newsInfo"+"?id="+info.id,
	});
}
onMounted(() => {
  ggg();
})
</script>

<style lang="scss" scoped>
.cardbox-top{
  height: 70%;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.cardbox{
  height: 100%;
  color: #000;
  background-color: #fff;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 20rpx;
}
.cardbox-img{
  height: 90%;
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.cardbox-img .cardbox-img-min {
  width: 100%;
  // height: 100%;
  height: 100%;
  // width: 10%;
  object-fit: contain; /* 保持图片长宽比，并且完全显示图片 */
}
.cardbox-text{
  width: 47%;
  height: 90%;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
}
.cardbox-bttom {
  width: 90%;
  height: 10%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.cardbox-icon{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>