<template>
|
<view>
|
<view class="page">
|
|
<up-sticky bgColor="#fff">
|
<view class="card-footer">
|
<view class="user-info">
|
<up-avatar :src="filmInfo?.avatar" size="60rpx" shape="circle" />
|
<view class="user-text">
|
<text class="nickname">{{ filmInfo?.nickname }}</text>
|
</view>
|
</view>
|
<view class="opera-info">
|
<button class="custom-btn">关注</button>
|
<up-icon name="/static/common/share2.png" size="40rpx" color="#999" @click="openSharePopup" />
|
</view>
|
</view>
|
</up-sticky>
|
|
<scroll-view class="content" scroll-y>
|
<view class="swiper-container">
|
<swiper :current="currentNum" @change="onSwiperChange" circular :autoplay="false"
|
class="custom-swiper">
|
<swiper-item v-for="(item, index) in filmPictureList" :key="index" class="swiper-item">
|
<image :src="item" mode="aspectFill" class="swiper-image" @tap="previewImage(index)" />
|
</swiper-item>
|
</swiper>
|
<view class="indicator-num">
|
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ filmPictureList.length }}</text>
|
</view>
|
</view>
|
|
<view class="article-content">
|
<view class="title content-item">
|
<text>{{ filmInfo?.coverTitle }}</text>
|
</view>
|
|
<view class="content-item">
|
<!-- <rich-text :nodes="filmInfo.filmContent" /> -->
|
<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>
|
</view>
|
</view>
|
|
<up-line></up-line>
|
|
<view class="comment">
|
<view class="writer-view" @click="showCommentLayer">
|
<up-icon name="chat-fill" size="60rpx" />
|
<view class="comment-operation">
|
<up-text size="12px" text="说点什么......" margin="0 0 0 20rpx" color="#B9B9B9" />
|
</view>
|
</view>
|
|
<!-- 示例评论项，comment-item 可替换为实际组件 -->
|
<!-- <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" />-->
|
<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"
|
:isLiked="item.isLike"
|
:id="item.id"
|
:child="item.child"
|
:filmInfo="filmInfo"
|
@reply="(id) => showCommentLayer(id)"
|
@like="handleCommentLike"
|
/>
|
</view>
|
</scroll-view>
|
|
<!-- 固定底部输入框 -->
|
<view class="comment-box">
|
<view class="input-row">
|
<view class="comment-input" @click="showCommentLayer">
|
<up-text size="12px" text="说点什么......" margin="0 0 0 20rpx" color="#B9B9B9" />
|
</view>
|
<!-- <up-icon name="heart" size="60rpx" color="#B9B9B9" label="11" />-->
|
<!-- <up-icon name="star" size="60rpx" color="#B9B9B9" label="22" />-->
|
<up-icon
|
name="heart"
|
size="60rpx"
|
:color="liked ? '#FF0000' : '#B9B9B9'"
|
:label="filmInfo?.voLikeCount || 0"
|
@click="toggleLike"
|
/>
|
<up-icon
|
name="star"
|
size="60rpx"
|
:color="collected ? '#FFD700' : '#B9B9B9'"
|
:label="filmInfo?.voCollectCount || 0"
|
@click="toggleFavorite"
|
/>
|
|
<up-icon
|
name="chat"
|
size="60rpx"
|
color="#B9B9B9"
|
:label="filmInfo?.voCommentCount || 0"
|
@click="showCommentLayer"
|
/>
|
<!-- <up-icon name="chat" size="60rpx" color="#B9B9B9" label="33" /> -->
|
</view>
|
</view>
|
|
|
</view>
|
|
<comment-popup v-model="commentShow" :film-id="filmInfo?.id" :parent-id="commentParendId"
|
@success="handleCommentSuccess" />
|
|
<!-- 自定义分享弹窗 -->
|
<share-popup
|
v-model:show="showSharePopup"
|
:share-data="shareData"
|
/>
|
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
import { onLoad } from '@dcloudio/uni-app'
|
import { useGlobal } from '@/composables/useGlobal'
|
const { $http, $message, $store } = useGlobal()
|
|
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,
|
username: '图墙精选',
|
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg'
|
})
|
|
const liked = ref(false) // 是否已点赞
|
const collected = ref(false) // 是否已收藏
|
|
const sharePopupShow = ref(false)
|
|
import SharePopup from '@/components/share-popup.vue'
|
|
// 分享弹窗控制
|
const showSharePopup = ref(false)
|
|
const shareData = ref({
|
title: '',
|
desc: '',
|
image: '',
|
url: ''
|
})
|
|
// 打开分享弹窗
|
const openSharePopup = () => {
|
// 设置分享内容
|
shareData.value = {
|
title: filmInfo.value?.coverTitle || '分享内容',
|
desc: filmInfo.value?.filmContent?.substring(0, 50) || '',
|
image: filmPictureList.value[0] || '',
|
url: `https://您的域名/sub-pages/film-list/film-detail?id=${filmInfo.value?.id}`
|
}
|
showSharePopup.value = true
|
}
|
|
|
// 复制链接
|
const copyLink = () => {
|
sharePopupShow.value = false
|
uni.setClipboardData({
|
data: `https://你的域名/sub-pages/film-list/film-detail?id=${filmInfo.value?.id}`,
|
success: () => $message.showToast('链接已复制')
|
})
|
}
|
|
|
onLoad((options: any) => {
|
const theme = uni.getStorageSync('theme') || 'light'
|
console.log('theme:', theme)
|
|
// 获取传递来的参数
|
console.log('传入参数:', options)
|
|
// 示例：你传过来的参数可能是这样 ?id=123&type=test
|
const id = options.id
|
const type = options.type
|
console.log('id:', id, 'type:', type)
|
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
|
}
|
|
const previewImage = (index: number) => {
|
uni.previewImage({
|
current: filmPictureList.value[index],
|
urls: filmPictureList.value
|
})
|
}
|
|
// film-detail.vue
|
const showCommentLayer = (parentId?: number) => {
|
console.log('点击了评论按钮',parentId)
|
commentShow.value = true
|
// 如果有parentId，说明是回复评论，需要设置parentId
|
// 如果没有parentId，说明是直接评论，不需要设置parentId
|
commentParendId.value = parentId ? String(parentId) : ''
|
}
|
|
const handleCommentSuccess = (data) => {
|
// 例如重新请求评论列表
|
// fetchCommentList();
|
// 重新获取评论列表
|
getCommentList(filmId.value)
|
commentShow.value = false
|
commentParendId.value = '' // 清除父评论ID
|
};
|
|
onShow(() => {
|
|
});
|
|
// 处理评论点赞
|
const handleCommentLike = async (commentId: number) => {
|
console.log('点击了评论点赞', commentId)
|
try {
|
const res = await $http.request('post', '/v2/comment-likes/commentLikes/edit', {
|
data: { commentId }
|
})
|
|
if (res.code === 0) {
|
// 更新评论列表中的点赞状态和数量
|
const updateCommentLike = (comments: CommentDTO[]) => {
|
comments.forEach(comment => {
|
if (comment.id === commentId) {
|
comment.isLike = !comment.isLike
|
comment.likeCount += comment.isLike ? 1 : -1
|
}
|
if (comment.child && comment.child.length > 0) {
|
updateCommentLike(comment.child)
|
}
|
})
|
}
|
|
updateCommentLike(commentList.value)
|
// 根据当前点赞状态显示对应提示
|
const comment = findCommentById(commentList.value, commentId)
|
$message.showToast(comment?.isLike ? '点赞成功' : '取消点赞')
|
}
|
} catch (error) {
|
console.error('评论点赞失败:', error)
|
$message.showToast('操作失败')
|
}
|
}
|
|
// 添加一个辅助函数来查找评论
|
const findCommentById = (comments: CommentDTO[], id: number): CommentDTO | undefined => {
|
for (const comment of comments) {
|
if (comment.id === id) {
|
return comment
|
}
|
if (comment.child && comment.child.length > 0) {
|
const found = findCommentById(comment.child, id)
|
if (found) return found
|
}
|
}
|
return undefined
|
}
|
|
const filmInfo = ref<FilmInfo>()
|
|
const filmPictureList = ref<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)
|
// 设置初始状态
|
console.log("filmInfo.value.isLiked", data.liked)
|
liked.value =data.liked || false
|
collected.value = data.collected || false
|
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;
|
}
|
}
|
|
const toggleLike = async () => {
|
console.log("toggleLike",filmInfo.value)
|
if (!filmInfo.value) return
|
|
const api = liked.value ? '/v2/film-likes/filmLikes/edit' : '/v2/film-likes/filmLikes/edit'
|
|
try {
|
const res = await $http.request('post', api, {
|
data: { filmId: filmInfo.value.id }
|
})
|
|
if (res.code === 0) {
|
// 更新本地状态
|
liked.value = !liked.value
|
filmInfo.value.voLikeCount += liked.value ? 1 : -1
|
|
// 提示信息
|
$message.showToast(liked.value ? '点赞成功' : '取消点赞')
|
}
|
} catch (error) {
|
console.error('点赞失败:', error)
|
$message.showToast('操作失败')
|
}
|
}
|
|
const toggleFavorite = async () => {
|
console.log("toggleFavorite",filmInfo.value)
|
if (!filmInfo.value) return
|
|
const api = collected.value ? '/v2/film-collects/filmCollects/edit' : '/v2/film-collects/filmCollects/edit'
|
|
try {
|
const res = await $http.request('post', api, {
|
data: { filmId: filmInfo.value.id }
|
})
|
|
if (res.code === 0) {
|
// 更新本地状态
|
collected.value = !collected.value
|
filmInfo.value.voCollectCount += collected.value ? 1 : -1
|
|
// 提示信息
|
$message.showToast(collected.value ? '收藏成功' : '取消收藏')
|
}
|
} catch (error) {
|
console.error('收藏失败:', error)
|
$message.showToast('操作失败')
|
}
|
}
|
|
// 小程序分享配置
|
defineExpose({
|
onShareAppMessage() {
|
return {
|
title: filmInfo.value?.coverTitle || '分享内容',
|
path: `/sub-pages/film-list/film-detail?id=${filmInfo.value?.id}`,
|
imageUrl: filmPictureList.value[0] || '',
|
desc: filmInfo.value?.filmContent?.substring(0, 50) || ''
|
}
|
},
|
// 分享到朋友圈
|
onShareTimeline() {
|
return {
|
title: filmInfo.value?.coverTitle || '分享内容',
|
query: `id=${filmInfo.value?.id}`,
|
imageUrl: filmPictureList.value[0] || ''
|
}
|
}
|
})
|
|
</script>
|
|
|
<style scoped>
|
.page {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #fff;
|
}
|
|
.swiper-container {
|
position: relative;
|
width: 100%;
|
height: 500rpx;
|
}
|
|
.custom-swiper {
|
width: 100%;
|
height: 100%;
|
}
|
|
.swiper-item {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
|
}
|
|
.swiper-image {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.indicator-num {
|
position: absolute;
|
top: 20rpx;
|
right: 20rpx;
|
padding: 4rpx 12rpx;
|
background-color: rgba(0, 0, 0, 0.4);
|
border-radius: 20rpx;
|
}
|
|
.indicator-num__text {
|
color: #fff;
|
font-size: 24rpx;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.card-footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10rpx;
|
background-color: #FFFFFF;
|
}
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
|
.user-text {
|
font-size: 30rpx;
|
line-height: 30px;
|
margin-left: 10rpx;
|
|
.nickname {
|
font-weight: bold;
|
display: block;
|
color: #646464;
|
letter-spacing: 2rpx;
|
}
|
|
.date {
|
font-size: 12px;
|
color: #aaa;
|
margin-top: 10rpx;
|
}
|
}
|
}
|
|
.opera-info {
|
display: flex;
|
align-items: center;
|
|
text {
|
margin-left: 10rpx;
|
font-size: 12px;
|
}
|
}
|
|
.content {
|
.annotation {
|
margin-top: 10rpx;
|
font-size: 20rpx;
|
color: #646464;
|
}
|
}
|
|
.comment {
|
margin: 10rpx;
|
|
// border-top: 1rpx solid #EBEBEB;
|
.writer-view {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
|
.comment-operation {
|
font-size: 18rpx;
|
background-color: #F4F4F6;
|
height: 30px;
|
line-height: 30px;
|
border-radius: 20px;
|
width: 92%;
|
}
|
}
|
|
|
}
|
|
.article-content {
|
padding: 10rpx;
|
font-size: 32rpx;
|
letter-spacing: 1rpx;
|
|
.title {
|
font-size: 36rpx;
|
font-weight: bold;
|
}
|
|
.content-item {
|
margin-bottom: 20rpx;
|
}
|
}
|
|
|
.comment-box {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
padding: 20rpx 20rpx;
|
background-color: #fff;
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
z-index: 999;
|
height: 100rpx;
|
|
.input-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 80%;
|
|
.comment-input {
|
width: 300rpx;
|
background-color: #F4F4F6;
|
border-radius: 50rpx;
|
height: 60rpx;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.flex-input {
|
flex: 1;
|
margin-right: 10rpx;
|
}
|
}
|
|
.comment-popup {
|
margin: 20rpx;
|
|
.comment-btn-view {
|
margin-top: 20rpx;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.comment-btn-icon {
|
display: flex;
|
}
|
|
.comment-btn {}
|
}
|
</style>
|
|
|
<style scoped>
|
.custom-btn {
|
/* background-color: #ff4d4f; */
|
margin: 0 10rpx;
|
/* 自定义背景色 */
|
color: #ff4d4f;
|
/* 字体颜色 */
|
font-size: 20rpx;
|
/* 字体大小 */
|
border-radius: 50rpx;
|
/* 圆角 */
|
padding: 10rpx 20rpx;
|
/* 内边距 */
|
border: 1px solid #ff4d4f;
|
/* 去除边框 */
|
line-height: 1;
|
}
|
|
.custom-btn::after {
|
border: none;
|
/* 去除点击阴影边框 */
|
}
|
</style>
|
|
<style scoped>
|
.page {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.content {
|
flex: 1;
|
overflow-y: auto;
|
padding-bottom: 180rpx;
|
/* 留出评论区高度，避免遮挡 */
|
}
|
|
.share-popup {
|
background: #fff;
|
padding: 30rpx;
|
border-top-left-radius: 20rpx;
|
border-top-right-radius: 20rpx;
|
min-height: 300rpx;
|
}
|
.share-title {
|
text-align: center;
|
font-size: 32rpx;
|
margin-bottom: 30rpx;
|
color: #333;
|
}
|
.share-options {
|
display: flex;
|
justify-content: space-around;
|
margin-bottom: 30rpx;
|
padding: 20rpx 0;
|
}
|
.share-btn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
width: 120rpx;
|
}
|
.share-icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-bottom: 10rpx;
|
}
|
.share-btn text {
|
font-size: 24rpx;
|
color: #666;
|
margin-top: 10rpx;
|
}
|
.share-cancel {
|
text-align: center;
|
color: #888;
|
font-size: 28rpx;
|
padding: 20rpx 0;
|
border-top: 1px solid #eee;
|
margin-top: 20rpx;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
// 分享按钮样式
|
.share-btn {
|
background: none;
|
border: none;
|
padding: 0;
|
margin: 0;
|
line-height: normal;
|
|
&::after {
|
border: none;
|
}
|
}
|
|
// 分享弹窗样式
|
.share-popup {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 9999;
|
|
.share-mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
|
.share-content {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
border-radius: 20rpx 20rpx 0 0;
|
padding: 30rpx;
|
}
|
}
|
</style>
|
