From c31a8def0ac90d86b8e8e345441bd28002a9ef2f Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期一, 16 六月 2025 20:14:52 +0800
Subject: [PATCH] add: 分享
---
sub-pages/film-list/film-detail.vue | 462 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 428 insertions(+), 34 deletions(-)
diff --git a/sub-pages/film-list/film-detail.vue b/sub-pages/film-list/film-detail.vue
index ab78d44..3d89490 100644
--- a/sub-pages/film-list/film-detail.vue
+++ b/sub-pages/film-list/film-detail.vue
@@ -1,17 +1,18 @@
<template>
<view>
<view class="page">
+
<up-sticky bgColor="#fff">
<view class="card-footer">
<view class="user-info">
- <up-avatar :src="user.avatar" size="60rpx" shape="circle" />
+ <up-avatar :src="filmInfo?.avatar" size="60rpx" shape="circle" />
<view class="user-text">
- <text class="nickname">{{ user.username }}</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" />
+ <up-icon name="/static/common/share2.png" size="40rpx" color="#999" @click="openSharePopup" />
</view>
</view>
</up-sticky>
@@ -20,25 +21,31 @@
<view class="swiper-container">
<swiper :current="currentNum" @change="onSwiperChange" circular :autoplay="false"
class="custom-swiper">
- <swiper-item v-for="(item, index) in list6" :key="index" class="swiper-item">
+ <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 }}/{{ list6.length }}</text>
+ <text class="indicator-num__text">{{ currentNum + 1 }}/{{ filmPictureList.length }}</text>
</view>
</view>
<view class="article-content">
<view class="title content-item">
- <text>我是标题标题我是标题标题我是标题标题我是标题标题</text>
+ <text>{{ filmInfo?.coverTitle }}</text>
</view>
<view class="content-item">
- <rich-text :nodes="desc" />
+ <!-- <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>4分钟前 美国</text>
+ <text>{{ formatRelativeTime(filmInfo?.createTime) }} 美国</text>
</view>
</view>
@@ -46,16 +53,34 @@
<view class="comment">
<view class="writer-view" @click="showCommentLayer">
- <up-icon name="chat-fill" size="60rpx" />
+ <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 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" />-->
+ <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>
@@ -65,24 +90,68 @@
<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="chat" size="60rpx" color="#B9B9B9" label="33" />
+<!-- <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" />
+ <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,
@@ -90,26 +159,87 @@
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg'
})
-const list6 = ref<string[]>([
- 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
- 'https://img.yzcdn.cn/vant/cat.jpeg',
- 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg'
-])
+const liked = ref(false) // 是否已点赞
+const collected = ref(false) // 是否已收藏
-const urls2 = ref<string[]>([
- 'https://img.yzcdn.cn/vant/cat.jpeg'
-])
+const sharePopupShow = ref(false)
-const desc = ref(`
- 😭……
- 刚从新疆旅游回来，真的踩了好多坑！！...<br/>
- #新疆是个好地方 #新疆旅行攻略...
- `)
+import SharePopup from '@/components/share-popup.vue'
-onLoad(() => {
+// 分享弹窗控制
+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
@@ -117,14 +247,190 @@
const previewImage = (index: number) => {
uni.previewImage({
- current: list6.value[index],
- urls: list6.value
+ current: filmPictureList.value[index],
+ urls: filmPictureList.value
})
}
-const showCommentLayer = () => {
- commentShow.value = true
+// 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>
@@ -354,4 +660,92 @@
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>
\ No newline at end of file
--
Gitblit v1.9.3