sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改视频播放评论子评论处理

master
于肖磊 2025-09-18 15:49:58 +08:00
parent 3a46b8d824
commit d068331e50
1 changed files with 109 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
pages/plugins/video/detail/detail.vue
View File

@ -4,22 +4,22 @@
<swiper-item v-for="(video, index) in videoData" :key="video.id">
<view class="video-container" @tap="toggle_play_pause">
<video class="video" :src="video.videoUrl" :poster="video.posterUrl" :id="`video_${index}`" :loop="true" :controls="false" :show-center-play-btn="false" :show-play-btn="false" object-fit="contain" @timeupdate="handleTimeUpdate"></video>
<video class="video" :src="video.videoUrl" :poster="video.posterUrl" :id="`video_${index}`" :loop="true" :controls="false" :show-center-play-btn="false" :show-play-btn="false" object-fit="contain" @timeupdate="handle_time_update"></video>
<text v-if="paused && current_index === index" class="play-icon">▶</text>
<!-- Right Action Bar -->
<view class="right-actions">
<view class="action-item" @tap.stop="handle_like(video)">
<iconfont name="icon-givealike" :color="video.isLike ? '#fff' : ''" size="60rpx"></iconfont>
<iconfont name="icon-givealike" :color="video.isLike ? '#fff' : ''" size="60rpx" />
<text class="action-text">{{ video.fabulous_count }}</text>
</view>
<view class="action-item" @tap.stop="handle_comment(video)">
<iconfont name="icon-comment" color="#fff" size="60rpx"></iconfont>
<iconfont name="icon-comment" color="#fff" size="60rpx" />
<text class="action-text">{{ video.comment_obj.count }}</text>
</view>
<view class="action-item" @tap.stop="handleShare(video)">
<iconfont name="icon-share-solid" color="#fff" size="60rpx"></iconfont>
<view class="action-item" @tap.stop="handle_share(video)">
<iconfont name="icon-share-solid" color="#fff" size="60rpx" />
<text class="action-text">分享</text>
</view>
</view>
@ -32,11 +32,8 @@
<!-- Progress Bar -->
<view class="progress-bar-container" v-if="current_index === index">
<slider class="progress-slider" :value="current_video_progress" :max="current_video_duration"
@change="handleSliderChange" @changing="handleSliderChanging" block-size="14"
activeColor="#FFFFFF" backgroundColor="rgba(255, 255, 255, 0.4)" />
<text
class="time-display">{{ formatTime(current_video_progress) }} / {{ formatTime(current_video_duration) }}</text>
<slider class="progress-slider" :value="current_video_progress" :max="current_video_duration" @change="handle_slider_change" @changing="handle_slider_changing" block-size="14" activeColor="#FFFFFF" backgroundColor="rgba(255, 255, 255, 0.4)" />
<text class="time-display">{{ formatTime(current_video_progress) }} / {{ formatTime(current_video_duration) }}</text>
</view>
</view>
</swiper-item>
@ -55,7 +52,40 @@
<view class="comment-info">
<view class="comment-user">{{ comment.userNick }}</view>
<view class="comment-text">{{ comment.content }}</view>
<view class="comment-time">{{ comment.time }}</view>
<view class="comment-operation flex-row align-c jc-sb">
<view class="comment-operation-left flex-row align-c gap-10">
<view class="comment-time">{{ comment.time }}</view>
<view class="comment-like" :data-comment-id="comment.id" @click="comment_reply">回复</view>
</view>
<view class="comment-operation-right flex-row align-c gap-5">
<iconfont name="icon-givealike-o-fine" color="#000" size="28rpx" />
<view class="comment-like-num">{{ comment.likeNum || 0 }}</view>
</view>
</view>
<!-- 子评论 -->
<view class="sub-comment flex-col jc-c">
<view class="sub-comment-title" @tap="toggle_sub_comment">—— 展开{{ comment.subComments ? comment.subComments.length || 0 : 0 }}条回复 <iconfont name="icon-arrow-down" color="#000" size="28rpx" /></view>
<view v-if="comment.subComments && comment.subComments.length > 0" class="sub-comment-list">
<view class="sub-comment-item" v-for="(sub_comment, sub_comment_index) in comment.subComments" :key="sub_comment_index">
<view class="comment-user">{{ comment.userNick }}</view>
<view class="comment-text">{{ comment.content }}</view>
<view class="comment-operation flex-row align-c jc-sb">
<view class="comment-operation-left flex-row align-c gap-10">
<view class="comment-time">{{ comment.time }}</view>
<view class="comment-like" :data-comment-id="comment.id" @click="comment_reply">回复</view>
</view>
<view class="comment-operation-right flex-row align-c gap-5">
<iconfont name="icon-givealike-o-fine" color="#000" size="28rpx" />
<view class="comment-like-num">{{ comment.likeNum || 0 }}</view>
</view>
</view>
</view>
</view>
<view class="sub-comment-more flex-row align-c">
<view class="sub-comment-more-btn" @tap="toggle_sub_comment">展开<iconfont name="icon-arrow-down" color="#000" size="28rpx" /></view>
<view class="sub-comment-more-btn" @tap="toggle_sub_comment">收起<iconfont name="icon-arrow-down" color="#000" size="28rpx" /></view>
</view>
</view>
</view>
</view>
</scroll-view>
@ -76,20 +106,11 @@
// CommentModal
},
data() {
const filledHeartSvg =
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fe2c55"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>`;
const outlineHeartSvg =
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /></svg>`;
const commentSvg =
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path></svg>`;
const shareSvg =
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>`;
return {
videoData: [{
id: '1',
is_fabulous: 1,
userNick: 'WX: MAMBA_4EVER24',
userNick: '',
videoContent: '新视频来啦！',
fabulous_count: 1,
videoUrl: 'http://8.146.211.120:8080/upload/douyin/e6fddef474951cc15f5aeb99219b4a91.mp4',
@ -102,19 +123,21 @@
userHead: 'http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg',
userNick: '评论员A',
content: '这视频太酷了！',
time: '2024-07-07 10:00:00'
time: '2024-07-07 10:00:00',
likeNum: 1,
}, {
id: 'c2',
userHead: 'http://8.146.211.120:8080/upload/notes/590118acb7cda2039657d464fdc285d6.jpg',
userNick: '评论员B',
content: '沙发！',
time: '2024-07-07 09:30:00'
time: '2024-07-07 09:30:00',
likeNum: 0,
}]
}
}, {
id: '2',
is_fabulous: 0,
userNick: 'WX: MAMBA_4EVER24',
userNick: '',
videoContent: '第二条视频',
fabulous_count: 1,
videoUrl: 'http://8.146.211.120:8080/upload/douyin/0985b0f3879c7dca9f6c1c6fb59d4a79.mp4',
@ -127,7 +150,7 @@
}, {
id: '3',
is_fabulous: 1,
userNick: 'WX: MAMBA_4EVER24',
userNick: '',
videoContent: '第三条视频内容',
fabulous_count: 1,
videoUrl: 'http://8.146.211.120:8080/upload/douyin/a4832a9a37b44196b49c646db148ec65.mp4',
@ -152,10 +175,6 @@
is_seeking: false,
show_comment_modal: false,
active_comments: {},
filledHeartIcon: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(filledHeartSvg),
outlineHeartIcon: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(outlineHeartSvg),
commentIcon: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(commentSvg),
shareIcon: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(shareSvg),
comment_start_y: 0, // 评论开始拖拽位置
comment_current_y: 0, // 评论当前拖拽位置
move_distance: 0,
@ -166,14 +185,13 @@
return this.show_comment_modal ? `height: calc(30% + ${this.move_distance}px);` : 'height: 100%;';
},
commentContentStyle() {
return this.show_comment_modal ? `transform: translateY(10px); height: calc(70% - ${this.move_distance}px);` : `transform: translateY(0); height: 70%;`
return this.show_comment_modal ? `transform: translateY(3px); height: calc(70% - ${this.move_distance}px);` : `transform: translateY(0); height: 70%;`
},
},
onReady() {
this.videoData.forEach((item, index) => {
this.video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
});
// Start playing the first video
setTimeout(() => {
if (this.video_contexts[0]) {
this.video_contexts[0].play();
@ -182,9 +200,7 @@
},
methods: {
handleSwiperChange(event) {
const {
current
} = event.detail;
const { current } = event.detail;
const previousIndex = this.current_index;
if (this.video_contexts[previousIndex]) {
@ -289,14 +305,14 @@
}
},
handleShare(video) {
handle_share(video) {
uni.showToast({
title: '分享',
icon: 'none'
});
},
handleTimeUpdate(e) {
handle_time_update(e) {
if (this.is_seeking) return;
if (e.detail.duration > 0 && this.current_video_duration === 0) {
this.current_video_duration = e.detail.duration;
@ -304,11 +320,11 @@
this.current_video_progress = e.detail.currentTime;
},
handleSliderChanging() {
handle_slider_changing() {
this.is_seeking = true;
},
handleSliderChange(e) {
handle_slider_change(e) {
const seek_time = e.detail.value;
if (this.video_contexts[this.current_index]) {
this.video_contexts[this.current_index].seek(seek_time);
@ -334,7 +350,6 @@
<style lang="scss" scoped>
.content,
.swiper-container,
swiper-item,
.video-container {
width: 100%;
height: 100vh;
@ -356,14 +371,14 @@
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
font-size: 80px;
font-size: 160rpx;
color: rgba(255, 255, 255, 0.6);
}
.right-actions {
position: absolute;
right: 10px;
bottom: 100px;
right: 20rpx;
bottom: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
@ -375,52 +390,52 @@
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
margin-top: 40rpx;
}
.user-avatar {
width: 50px;
height: 50px;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
border: 2px solid #fff;
border: 4rpx solid #fff;
}
.icon {
width: 35px;
height: 35px;
width: 70rpx;
height: 70rpx;
}
.action-text {
font-size: 14px;
margin-top: 5px;
font-size: 28rpx;
margin-top: 10rpx;
}
.bottom-info {
position: absolute;
bottom: 90px;
left: 15px;
bottom: 180rpx;
left: 30rpx;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
z-index: 10;
}
.author {
font-size: 18px;
font-size: 36rpx;
font-weight: bold;
}
.video-content {
display: block;
font-size: 15px;
margin-top: 8px;
font-size: 30rpx;
margin-top: 16rpx;
max-width: 70%;
}
.progress-bar-container {
position: absolute;
bottom: 60px;
left: 15px;
right: 15px;
bottom: 120rpx;
left: 30rpx;
right: 30rpx;
display: flex;
align-items: center;
z-index: 11;
@ -428,14 +443,14 @@
.progress-slider {
flex: 1;
margin: 0 10px;
margin: 0 20rpx;
}
.time-display {
color: #fff;
font-size: 12px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
width: 90px;
font-size: 24rpx;
text-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.6);
width: 180rpx;
text-align: right;
}
@ -457,16 +472,16 @@
width: 100%;
height: 70%;
background-color: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.comment-header {
padding: 15px;
border-bottom: 1px solid #eee;
padding: 30rpx;
border-bottom: 2rpx solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
@ -474,29 +489,30 @@
.comment-count {
font-weight: bold;
font-size: 16px;
font-size: 32rpx;
}
.close-btn {
font-size: 20px;
font-size: 40rpx;
color: #999;
}
.comment-list {
flex: 1;
padding: 15px;
padding: 30rpx;
box-sizing: border-box;
}
.comment-item {
display: flex;
margin-bottom: 15px;
margin-bottom: 30rpx;
}
.comment-avatar {
width: 40px;
height: 40px;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 10px;
margin-right: 20rpx;
}
.comment-info {
@ -504,42 +520,44 @@
}
.comment-user {
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
font-size: 24rpx;
color: #999999;
line-height: 34rpx;
}
.comment-text {
font-size: 14px;
margin-bottom: 5px;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
}
.comment-time {
font-size: 12px;
color: #999;
font-size: 28rpx;
color: #999999;
line-height: 34rpx;
}
.comment-input-container {
display: flex;
padding: 10px;
border-top: 1px solid #eee;
padding: 20rpx;
border-top: 2rpx solid #eee;
}
.comment-input {
flex: 1;
border: 1px solid #eee;
border-radius: 4px;
padding: 8px;
font-size: 14px;
border: 2rpx solid #eee;
border-radius: 8rpx;
padding: 16rpx;
font-size: 28rpx;
}
.send-btn {
margin-left: 10px;
padding: 8px 15px;
margin-left: 20rpx;
padding: 16rpx 30rpx;
background-color: #ff4757;
color: white;
border: none;
border-radius: 4px;
font-size: 14px;
border-radius: 8rpx;
font-size: 28rpx;
}
</style>