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

修改短视频nvue页面

master
于肖磊 2026-03-05 18:26:24 +08:00
parent 9edd0c9fdd
commit 8262b07a65
2 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/plugins/video/components/comment-info.vue
View File

@ -10,7 +10,7 @@
<iconfont name="icon-ellipsis" color="#999" size="28rpx" />
</view>
<!-- 下拉菜单 -->
<view v-if="drop_down_visible" class="dropdown-menu" @tap.stop>
<view v-if="drop_down_visible && dropdownOptions && Array.isArray(dropdownOptions)" class="dropdown-menu" @tap.stop>
<view v-for="(item, index) in dropdownOptions.filter(item => (propComment.is_can_delete == 1 && item.type == 'delete') || (propComment.is_can_report == 1 && item.type == 'report'))" :key="index" class="dropdown-item" :data-value="item" @tap="handle_dropdown_item_click">
<text>{{ item.label }}</text>
</view>

62
pages/plugins/video/detail/detail.nvue
View File

@ -1,6 +1,6 @@
<template>
<view :class="theme_view" :style="width_height_style">
<view v-if="display_video_list.length > 0" class="content pr" :style="width_height_style">
<view v-if="display_video_list && display_video_list.length > 0" class="content pr" :style="width_height_style">
<!-- 搜索框 -->
<view v-if="!show_comment_modal" class="header-top" :style="top_content_style + menu_button_info">
<view id="search-height" class="flex-row align-c">
@ -96,12 +96,12 @@
<!-- 评论内容区域 -->
<scroll-view class="comment-list" scroll-y :scroll-top="comment_scroll_top" show-scrollbar="false" scroll-with-animation @scrolltolower="handle_comment_to_lower_scroll" @scroll="handle_comment_scroll">
<view class="comment-scroll">
<template v-if="active_comments.length > 0">
<template v-if="active_comments && active_comments.length > 0">
<view class="comment-item flex-col" v-for="(comment_item, index) in active_comments" :key="index">
<commentInfoComponent class="wh-auto ht-auto" :propComment="comment_item" :propId="comment_item.id" :propDropDownVisible="active_dropdown_id == comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like" @toggle_dropdown="handle_toggle_dropdown" @dropdown_item_click="handle_dropdown_item_click"></commentInfoComponent>
<!-- 子评论 -->
<view class="sub-comment flex-col jc-c gap-10 mt-10">
<view v-if="comment_item.sub_comments && comment_item.sub_comments.length > 0 && comment_item.show_sub_comment" class="sub-comment-list flex-col jc-c">
<view v-if="comment_item.sub_comments && Array.isArray(comment_item.sub_comments) && comment_item.sub_comments.length > 0 && comment_item.show_sub_comment" class="sub-comment-list flex-col jc-c">
<view class="sub-comment-item flex-row align-s gap-10" v-for="(sub_comment_item, sub_comment_index) in comment_item.sub_comments" :key="sub_comment_index">
<commentInfoComponent class="wh-auto ht-auto" :propComment="sub_comment_item" :propId="sub_comment_item.id" :propDropDownVisible="active_dropdown_id == sub_comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like" @toggle_dropdown="handle_toggle_dropdown" @dropdown_item_click="handle_dropdown_item_click"></commentInfoComponent>
</view>
@ -153,7 +153,7 @@
<iconfont name="icon-layout-module-single-images" size="32rpx" color="#999"></iconfont>
</component-upload>
</view>
<view v-if="form_images_list.length > 0" class="pr w h comment-input-img-container">
<view v-if="form_images_list && form_images_list.length > 0" class="pr w h comment-input-img-container">
<view v-for="(item, index) in form_images_list" :key="index" class="comment-input-img pr">
<iconfont name="icon-close" size="10" color="#000" class="comment-input-img-close" :data-index="index" @tap="comment_input_img_close"></iconfont>
<image :src="item.url" :data-index="index" @tap="upload_show_event" mode="aspectFill" class="wh-auto ht-auto"></image>
@ -176,7 +176,7 @@
<!-- 主要内容区域 -->
<view class="report-body">
<!-- 第一层：举报原因选择 -->
<view v-if="report_type_list.length > 0" class="report-section">
<view v-if="report_type_list && report_type_list.length > 0" class="report-section">
<view class="report-label">{{$t('video-detail.video-detail.rfsdfg')}}<text class="ml-10">*</text></view>
<view class="flex-row align-c gap-10 flex-wrap">
<view v-for="(mainItem, main_index) in report_type_list" :key="main_index" class="flex-row align-c" :data-index="main_index" @tap="select_main_reason">
@ -189,7 +189,7 @@
</view>
<!-- 第二层：具体类型选择（当有主类别选中时显示） -->
<view class="report-section mt-20" v-if="current_main_index >= 0 && report_type_list[current_main_index]">
<view class="report-section mt-20" v-if="current_main_index >= 0 && report_type_list[current_main_index] && report_type_list[current_main_index].data">
<view class="report-label">{{$t('video-detail.video-detail.fsdf33')}}<text class="ml-10">*</text></view>
<view class="flex-row align-c gap-10 flex-wrap">
<view v-for="(subItem, sub_index) in report_type_list[current_main_index].data" :key="sub_index" class="flex-row align-c" :data-index="sub_index" @tap="select_sub_reason">
@ -218,7 +218,7 @@
<iconfont name="icon-layout-module-single-images" size="48rpx" color="#999"></iconfont>
</component-upload>
</view>
<view v-if="form_images_list.length > 0" class="pr w h comment-input-img-container">
<view v-if="form_images_list && form_images_list.length > 0" class="pr w h comment-input-img-container">
<view v-for="(item, index) in form_images_list" :key="index" class="comment-input-img pr">
<iconfont name="icon-close" size="10" color="#000" class="comment-input-img-close" :data-index="index" @tap="comment_input_img_close"></iconfont>
<image :src="item.url" :data-index="index" @tap="upload_show_event" mode="aspectFill" class="wh-auto ht-auto"></image>
@ -247,6 +247,9 @@
import componentPopup from '@/components/popup/popup';
import componentUpload from '@/components/upload/upload';
import componentCommon from '@/components/common/common';
// 多语言
import { initVueI18n } from '@dcloudio/uni-i18n';
const { t } = initVueI18n()
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO || H5
@ -344,11 +347,15 @@
},
// 当前播放视频的索引
current_video_index() {
return this.video_data_list.findIndex(item => item.id == this.current_video_id);
if (this.video_data_list && this.video_data_list.length > 0) {
return this.video_data_list.findIndex(item => item.id == this.current_video_id);
} else {
return -1;
}
},
// 如果是第一个或者最后一个的情况下，取消无限轮播
close_circular() {
if (this.video_data_list.length > 0) {
if (this.video_data_list && this.video_data_list.length > 0) {
return this.video_data_list[0].id == this.current_video_id || this.video_data_list[this.video_data_list.length - 1].id == this.current_video_id;
} else {
return true
@ -374,7 +381,7 @@
app.globalData.page_event_onshow_handle();
// 视频播放
if (!this.is_manual_pause && this.create_video_contexts[this.current_index]) {
if (!this.is_manual_pause && this.create_video_contexts && this.create_video_contexts[this.current_index]) {
this.video_play_event(this.create_video_contexts[this.current_index]);
}
@ -497,7 +504,7 @@
},
fail: (err) => {
this.data_list_loding_status = 2;
this.data_list_loding_msg = this.$t('common.internet_error_tips');
this.data_list_loding_msg = t('common.internet_error_tips');
}
});
},
@ -595,12 +602,12 @@
setTimeout(() => {
//#ifdef H5
if (this.video_contexts[this.current_index]) { // 当前播放的视频索引为0
if (this.video_contexts && this.video_contexts[this.current_index]) { // 当前播放的视频索引为0
this.video_play_event(this.video_contexts[this.current_index], true);
}
//#endif
//#ifndef H5
if (this.create_video_contexts[this.current_index]) { // 当前播放的视频索引为0
if (this.create_video_contexts && this.create_video_contexts[this.current_index]) { // 当前播放的视频索引为0
this.video_play_event(this.create_video_contexts[this.current_index], true);
}
//#endif
@ -630,7 +637,7 @@
// 先暂停所有视频，确保不会有后台播放
this.pause_all_videos_except(current);
const id = this.display_video_list[current].id;
const id = this?.display_video_list[current]?.id || '';
// 更新状态
this.current_index = current;
this.paused = false;
@ -644,7 +651,7 @@
const url = new URL(location.href);
url.searchParams.set('id', id);
// 替换URL路径，保持查询参数不变
const pathname = location.href.split('?')[0];
const pathname = location.href?.split('?')[0] || '';
history.replaceState(null, '', pathname + url.search);
//#endif
const index = this.video_data_list.findIndex(item => item.id == id);
@ -710,7 +717,7 @@
// 安全播放当前视频
play_current_video_safely(index) {
// 优先使用 uni.createVideoContext
if (this.create_video_contexts[index]) {
if (this.create_video_contexts && this.create_video_contexts[index]) {
this.video_play_event(this.create_video_contexts[index]);
return;
}
@ -855,8 +862,9 @@
// 上传图片预览
upload_show_event(e) {
const index = e?.currentTarget?.dataset?.index || 0;
uni.previewImage({
current: this.form_images_list[e.currentTarget.dataset.index].url,
current: this?.form_images_list[index]?.url || '',
urls: this.form_images_list.map(item => item.url),
});
},
@ -994,7 +1002,7 @@
const type = e?.target?.dataset?.type || 'header';
// 如果是滚动区域内滚动到顶部才可以拖拽，如果是头部拖拽的话，一直都可以
if ((this.comment_scroll_top <= 5 && type == 'scroll') || type == 'header') {
this.comment_start_y = e.touches[0].pageY;
this.comment_start_y = e?.touches[0]?.pageY || 0;
this.comment_current_y = this.comment_start_y;
this.move_distance = 0;
}
@ -1004,7 +1012,7 @@
const type = e?.target?.dataset?.type || 'header';
// 如果是滚动区域内滚动到顶部才可以拖拽，如果是头部拖拽的话，一直都可以
if ((this.comment_scroll_top <= 5 && type == 'scroll') || type == 'header') {
this.comment_current_y = e.touches[0].pageY;
this.comment_current_y = e?.touches[0]?.pageY || 0;
this.move_distance = this.comment_current_y - this.comment_start_y;
}
},
@ -1045,7 +1053,7 @@
video_comments_id: new_video_comments_id, // 如果父级评论id为0说明没有父级id，所以取当前id
reply_comments_id: reply_comments_id, // 如果父级评论id为0说明没有父级id，所以回复id为0
content: comment_text,
images: this.form_images_list.length > 0 ? this.form_images_list[0].url : '',
images: this.form_images_list.length > 0 ? (this.form_images_list[0]?.url || '') : '',
},
dataType: 'json',
success: res => {
@ -1088,12 +1096,12 @@
this.form_images_list = [];
this.comment_input_value = '';
this.comments_reply_data = {};
this.input_placeholder = this.$t('video-detail.video-detail.98yyuf');
this.input_placeholder = t('video-detail.video-detail.98yyuf');
} else {
if (app.globalData.is_login_check(res.data)) {
app.globalData.showToast(res.data.msg);
} else {
app.globalData.showToast(this.$t('common.sub_error_retry_tips'));
app.globalData.showToast(t('common.sub_error_retry_tips'));
}
}
}
@ -1292,7 +1300,7 @@
// 视频进度条拖动完成触发事件
handle_slider_change(e) {
const seek_time = e.detail.value;
if (this.create_video_contexts[this.current_index]) {
if (this.create_video_contexts && this.create_video_contexts[this.current_index]) {
this.create_video_contexts[this.current_index].seek(seek_time);
this.current_video_progress = seek_time;
}
@ -1525,15 +1533,15 @@
*/
submit_report() {
// 获取选中的举报原因和具体类型
const main_reason = this.report_type_list[this.current_main_index];
const sub_reason = main_reason.data[this.current_sub_index];
const main_reason = this.report_type_list[this.current_main_index] || {};
const sub_reason = main_reason?.data[this.current_sub_index] || '';
// 调用举报接口
uni.request({
url: app.globalData.get_request_url("report", "index", "video"),
method: 'POST',
data: {
id: this.report_comment_id,
reason: main_reason.name,
reason: main_reason?.name || '',
type: sub_reason
},
dataType: 'json',
@ -1589,4 +1597,4 @@
</script>
<style lang="scss" scoped>
@import './detail.css';
</style>
</style>