From 4789476b3fe734b4366ce72079330cea32a4997d Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期五, 06 六月 2025 18:04:20 +0800
Subject: [PATCH] 1.评论
---
sub-pages/film-list/film-detail.vue | 130 +++++++++++++++++++++++++++---------------
1 files changed, 83 insertions(+), 47 deletions(-)
diff --git a/sub-pages/film-list/film-detail.vue b/sub-pages/film-list/film-detail.vue
index 2f4e4e9..398d5c7 100644
--- a/sub-pages/film-list/film-detail.vue
+++ b/sub-pages/film-list/film-detail.vue
@@ -31,15 +31,20 @@
<view class="article-content">
<view class="title content-item">
- <text>{{ filmInfo.coverTitle }}</text>
+ <text>{{ filmInfo?.coverTitle }}</text>
</view>
<view class="content-item">
<!-- <rich-text :nodes="filmInfo.filmContent" /> -->
- <up-parse :content="filmInfo.filmContent"></up-parse>
+ <up-parse :content="filmInfo?.filmContent" :tag-style="{
+ p: 'margin-bottom: 16px; line-height: 1.6;',
+ h3: 'font-size: 18px; font-weight: bold; margin: 20px 0;',
+ hr: 'margin: 24px 0; border: none; border-top: 1px solid #ccc;'
+ }" />
+ <!-- <view v-html="filmInfo.filmContent||'暂无'" class="rich" style="overflow: scroll;"></view> -->
</view>
<view class="annotation content-item">
- <text>{{ formatRelativeTime(filmInfo.createTime) }} 美国</text>
+ <text>{{ formatRelativeTime(filmInfo?.createTime) }} 美国</text>
</view>
</view>
@@ -54,9 +59,10 @@
</view>
<!-- 示例评论项，comment-item 可替换为实际组件 -->
- <comment-item avatar="https://img.yzcdn.cn/vant/cat.jpeg" nickname="图墙精选" :isAuthor="true"
- content="如果路线里全是常规景区..." :images="urls2" date="2天前" address="湖北" :likes="30"
- @reply="showCommentLayer" />
+ <comment-item v-for="(item, index) in commentList" :avatar="item.picture"
+ :nickname="item.commentUserName" :isAuthor="item.createBy === filmInfo.createBy"
+ :content="item.content" :images="getImageList(item)" :date="item.createTime" address="湖北"
+ :likes="item.likeCount" :child="item.child" :filmInfo="filmInfo" @reply="showCommentLayer" />
</view>
</scroll-view>
@@ -73,7 +79,8 @@
</view>
</view>
- <comment-popup v-model="commentShow" />
+ <comment-popup v-model="commentShow" :film-id="filmInfo?.id" :parent-id="commentParendId"
+ @success="handleCommentSuccess" />
</view>
</template>
@@ -85,12 +92,17 @@
import { useGlobal } from '@/composables/useGlobal'
const { $http, $message, $store } = useGlobal()
-import { FilmInfo,FilmPicture } from '@/types/index'
+import { FilmInfo, FilmPicture, CommentDTO } from '@/types/index'
import { formatRelativeTime } from '@/utils/time'
// Swiper 当前页
const currentNum = ref(0)
const commentShow = ref(false)
+
+const commentParendId = ref<String>('')
+
+const commentList = ref<CommentDTO[]>([])
+const filmId = ref<string>(''); // 本地变量
const user = reactive({
id: 3,
@@ -98,17 +110,8 @@
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg'
})
-const urls2 = ref<string[]>([
- 'https://img.yzcdn.cn/vant/cat.jpeg'
-])
-const desc = ref(`
- 😭……
- 刚从新疆旅游回来，真的踩了好多坑！！...<br/>
- #新疆是个好地方 #新疆旅行攻略...
- `)
-
-onLoad((options:any) => {
+onLoad((options: any) => {
const theme = uni.getStorageSync('theme') || 'light'
console.log('theme:', theme)
@@ -119,10 +122,36 @@
const id = options.id
const type = options.type
console.log('id:', id, 'type:', type)
- if(id){
+ if (id) {
+ filmId.value = id
getFilmInfoById(id)
+ getCommentList(id)
}
})
+
+const getImageList = (item: any): string[] => {
+ if (!item || !item.filmPictures || typeof item.filmPictures !== 'string') {
+ return [];
+ }
+
+ try {
+ const pictures = JSON.parse(item.filmPictures);
+ return Array.isArray(pictures) ? pictures.map((p: any) => p.url) : [];
+ } catch (e) {
+ console.error('filmPictures JSON parse error:', e, item.filmPictures);
+ return [];
+ }
+};
+
+
+
+const getCommentList = async (id: string) => {
+ $message.showLoading()
+ const { data } = await $http.request('get', '/api/comment/getCommentByFilmId?filmId=' + id, {})
+ commentList.value = data
+ console.log("评论", data)
+ $message.hideLoading()
+}
const onSwiperChange = (e: any) => {
currentNum.value = e.detail.current
@@ -139,44 +168,51 @@
commentShow.value = true
}
+const handleCommentSuccess = (data) => {
+ // 例如重新请求评论列表
+ // fetchCommentList();
+ getCommentList(filmId.value)
+ commentShow.value = false
+};
+
onShow(() => {
-
+
});
const filmInfo = ref<FilmInfo>()
const filmPictureList = ref<string[]>([])
-const getFilmInfoById = async (id:String)=>{
+const getFilmInfoById = async (id: String) => {
const {
- code, data
- } = await $http.request('get', '/api/filmWorks/list/view', {
- params: {
- id: id
- }
- })
- if (code == 0) {
- filmInfo.value=data
- console.log("详情",filmInfo.value)
- if(data && data.filmPictures){
- // 只获取里面的url
- // filmPictureList.value=JSON.parse(data.filmPictures) as Array<FilmPicture>
- const tmpPicture = JSON.parse(data.filmPictures) as FilmPicture[]
- filmPictureList.value = tmpPicture.map(item => item.url)
- // 如果 filmPictureList.value是空的情况下，则把封面放入到图片列表中
- // debugger;
- if (filmPictureList.value.length === 0) {
- filmPictureList.value.push(data.coverUrl)
+ code, data
+ } = await $http.request('get', '/api/filmWorks/list/view', {
+ params: {
+ id: id
}
- }else{
- if (filmPictureList.value.length === 0) {
- filmPictureList.value.push(data.coverUrl)
+ })
+ if (code == 0) {
+ filmInfo.value = data
+ console.log("详情", filmInfo.value)
+ if (data && data.filmPictures) {
+ // 只获取里面的url
+ // filmPictureList.value=JSON.parse(data.filmPictures) as Array<FilmPicture>
+ const tmpPicture = JSON.parse(data.filmPictures) as FilmPicture[]
+ filmPictureList.value = tmpPicture.map(item => item.url)
+ // 如果 filmPictureList.value是空的情况下，则把封面放入到图片列表中
+ // debugger;
+ if (filmPictureList.value.length === 0) {
+ filmPictureList.value.push(data.coverUrl)
+ }
+ } else {
+ if (filmPictureList.value.length === 0) {
+ filmPictureList.value.push(data.coverUrl)
+ }
}
+ console.log("图片列表", filmPictureList.value)
+ } else {
+ $message.showToast('系统异常，无法获取数据')
+ return null;
}
- console.log("图片列表",filmPictureList.value)
- } else {
- $message.showToast('系统异常，无法获取数据')
- return null;
- }
}
</script>
--
Gitblit v1.9.3