mcwl-pc/app/components/message/LikeMsg.vue

96 lines
2.7 KiB
Vue

<template>
<div>
<div
v-for="(item, index) in dataList"
:key="index"
@click="toDetail(item)"
class="bg-white h-20 rounded-lg p-3 mb-2 flex items-center justify-center cursor-pointer relative"
>
<div class="flex-1">
<div class="text-base ellipsis w-[600px]">{{ item.content }}</div>
<div class="text-[12px] text-gray-400 mt-1">{{ item.createTime }}</div>
</div>
<div class="w-10 h-10">
<img class="w-full h-full rounded-lg" :src="item.productImag" />
</div>
<div
v-if="item.isRead === 0"
class="w-2 h-2 rounded-full bg-[#ec7768] absolute top-2 right-2"
></div>
</div>
<n-empty v-if="dataList.length === 0" size="large" description="暂无数据!">
</n-empty>
<NConfigProvider>
<NMessageProvider>
<div v-if="isShowEditorPicture">
<PictureDetail @close-editor-picture="closeEditorPicture" ref="editUserInfoRef" :item="pictureDetail" @update-like="updateLike"/>
</div>
<Publish-picture v-if="isShowPublishPicture" type="edit" ref="PublishPictureRef" :form-data="publishPictureData" @close-publish-img="closePublishImg" />
</NMessageProvider>
</NConfigProvider>
</div>
</template>
<script setup lang="ts">
import { NConfigProvider, NMessageProvider } from "naive-ui";
import { useRouter } from 'vue-router';
const props = defineProps({
dataList: {
type: Object,
default: () => [],
},
});
const router = useRouter()
async function toDetail(item:any){
try{
const res = await request.get(`/advice/read?adviceId=${item.id}`)
if(res.code === 200){
// 0模型 1工作流 2图片
if(item.productType === 0){
router.push(`/model-details/${item.productId}`)
}else if(item.productType === 1){
router.push(`/workflow-details/${item.productId}`)
}else{
onEditPicture(item)
}
}
}catch(err){
console.log(err);
}
}
// 显示图片的详情
const pictureDetail = ref({})
const isShowEditorPicture = ref(false)
interface EditUserInfoType {
isVisible: boolean
}
const editUserInfoRef = ref<EditUserInfoType | null>(null)
async function onEditPicture(item) {
const res = await request.get(`/image/detail?id=${item.productId}`)
if(res.code === 200){
pictureDetail.value = res.data
}
isShowEditorPicture.value = true
nextTick(()=>{
if(editUserInfoRef.value){
editUserInfoRef.value.isVisible = true
}
})
}
function closeEditorPicture(){
isShowEditorPicture.value = false
}
</script>
<style scoped>
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>