1.评论

tj

2025-06-06 4789476b3fe734b4366ce72079330cea32a4997d

 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>