2024-06-19 11:29:08 +00:00
|
|
|
|
<template>
|
2024-06-20 15:36:19 +00:00
|
|
|
|
<view class="cardbox">
|
|
|
|
|
<view class="cardbox-top">
|
|
|
|
|
<view class="cardbox-img">
|
|
|
|
|
<img class="cardbox-img-min" :src="info.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 class="cardbox-bttom-img">
|
|
|
|
|
<up-avatar :src="info.userImage"></up-avatar>
|
|
|
|
|
<up-text :lines="1" :text="info.userName" ></up-text>
|
|
|
|
|
</view> -->
|
|
|
|
|
</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>
|
|
|
|
|
<!-- {{info.likeNumber==0?'':info.likeNumber}} -->
|
|
|
|
|
<!-- <up-icon v-if="info.isComments" @click="toComments" name="chat-fill" color="#ff0004" size="28"></up-icon>
|
|
|
|
|
<up-icon v-else name="chat" @click="toComments" color="#ff0004" size="28"></up-icon>
|
|
|
|
|
{{info.commentsNumber==0?'':info.commentsNumber}} -->
|
|
|
|
|
<!-- {{info.collectionNumber==0?'':info.collectionNumber}} -->
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
2024-06-19 11:29:08 +00:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
2024-06-20 15:36:19 +00:00
|
|
|
|
import { onMounted, reactive, ref, defineProps, defineEmits } from "vue";
|
|
|
|
|
const emit = defineEmits(["ClickCollection", "ClickLike"]);
|
|
|
|
|
const ab = "/static/image/imgerr.png";
|
|
|
|
|
const errorImg = () => {
|
|
|
|
|
info.cover = "/static/image/imgerr.png";
|
|
|
|
|
};
|
|
|
|
|
const aaa = ref("name");
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
id: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: ""
|
|
|
|
|
},
|
|
|
|
|
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: String,
|
|
|
|
|
default: ""
|
|
|
|
|
},
|
|
|
|
|
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,
|
|
|
|
|
});
|
|
|
|
|
const toLike = () => {
|
|
|
|
|
info.isLike = !info.isLike;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
ggg();
|
|
|
|
|
})
|
2024-06-19 11:29:08 +00:00
|
|
|
|
</script>
|
2024-06-20 15:36:19 +00:00
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2024-06-19 11:29:08 +00:00
|
|
|
|
.cardbox-top{
|
2024-06-20 15:36:19 +00:00
|
|
|
|
height: 70%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
2024-06-19 11:29:08 +00:00
|
|
|
|
}
|
|
|
|
|
.cardbox{
|
2024-06-20 15:36:19 +00:00
|
|
|
|
height: 100%;
|
|
|
|
|
color: #000;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: column;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-radius: 20rpx;
|
2024-06-19 11:29:08 +00:00
|
|
|
|
}
|
|
|
|
|
.cardbox-img{
|
2024-06-20 15:36:19 +00:00
|
|
|
|
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>
|