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

修改评论弹出框内容

master
于肖磊 2026-03-10 17:03:39 +08:00
parent dc48f2429d
commit afa7fe1937
6 changed files with 55 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages.json
View File

@ -2070,6 +2070,7 @@
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
"navigationStyle": "custom",
// #endif
// #ifdef MP-ALIPAY
"transparentTitle": "auto",
"titlePenetrate": "YES",
@ -2241,9 +2242,9 @@
"current": 0, //当前激活的模式(list 的索引项)
"list": [
{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
"name": "test", //模式名称
"path": "pages/plugins/video/detail/detail", //启动页面，必选
"query": "id=1" //启动参数，在页面的onLoad函数里面得到。
}
]
}

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

@ -73,12 +73,12 @@
data() {
return {
// 下拉菜单选项数据
dropdownOptions: [
{ label: this.$t('common.del'), type: 'delete' },
{ label: this.$t('common.complaint'), type: 'report' }
]
dropdownOptions: []
};
},
mounted() {
this.init();
},
computed: {
// 使用computed属性映射props状态
drop_down_visible() {
@ -87,8 +87,15 @@
},
methods: {
isEmpty,
init() {
this.dropdownOptions = [
{ label: '删除', type: 'delete' },
{ label: '举报', type: 'report' }
]
},
// 回复
comment_reply(e) {
console.log('124545');
this.$emit('comment_reply', this.propComment, e);
},
// 点赞
@ -110,9 +117,11 @@
});
},
// 切换下拉菜单
toggle_dropdown() {
toggle_dropdown(e) {
// 通知父组件切换当前组件的下拉菜单状态
this.$emit('toggle_dropdown', this.propId);
e.stopPropagation();
},
// 处理下拉菜单项点击
handle_dropdown_item_click(e) {
@ -174,7 +183,12 @@
/* 下拉菜单样式 */
.dropdown-menu {
/* #ifndef APP-NVUE */
position: absolute;
/* #endif */
/* #ifdef APP-NVUE */
position: fixed;
/* #endif */
background: #ffffff;
border-radius: 8rpx;
box-shadow: 0 6rpx 16rpx 0 rgba(0, 0, 0, 0.15);

4
pages/plugins/video/components/comment-more.vue
View File

@ -2,7 +2,7 @@
<view class="more-title flex-row align-c" @tap="comment_more_event">
<text class="more-title">{{ propText || $t('common.expand') }}</text>
<view class="ml-5">
<iconfont :name="propIconName" color="#999" size="20rpx" />
<u-icon :propName="propIconName" propColor="#999" propSize="20rpx"></u-icon>
</view>
</view>
</template>
@ -30,7 +30,7 @@ export default {
},
propIconName: {
type: String,
default: 'icon-arrow-down'
default: 'arrow-down'
},
},
methods: {

2
pages/plugins/video/components/loading.vue
View File

@ -4,7 +4,7 @@
<view class="more-history-btn-icon margin-right-xs">
<u-icon propName="reset" propSize="28rpx" propColor="#999"></u-icon>
</view>
<text>{{ propContent || $t('common.loading_in_text') }}</text>
<text style="font-size: 28rpx;color: #999999; line-height: 40rpx;">{{ propContent || $t('common.loading_in_text') }}</text>
</view>
</view>
</template>

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

@ -86,7 +86,7 @@
</template>
<!-- 评论弹窗 -->
<view v-if="show_comment_modal" class="comment-modal" :style="width_height_style" @tap="close_comment_modal">
<view v-if="show_comment_modal" class="comment-modal" :style="width_height_style">
<view class="comment-content bottom-line-exclude-bottom" @tap.stop :style="commentContentStyle">
<view class="comment-header" data-type="header" @tap.stop @touchstart.prevent="handle_comment_touch_start" @touchmove.prevent="handle_comment_touch_move" @touchend="handle_comment_touch_end">
<text class="comment-count">{{$t('common.comment')}}</text>
@ -94,16 +94,16 @@
</view>
<view class="flex-1 flex-row oh" :style="'width:' + windowWidth + 'px;'" data-type="scroll" @tap.stop @touchstart.prevent="handle_comment_touch_start" @touchmove.prevent="handle_comment_touch_move" @touchend="handle_comment_touch_end">
<!-- 评论内容区域 -->
<scroll-view class="flex-1 comment-list flex-row bg-red" scroll-y :scroll-top="comment_scroll_top" show-scrollbar="false" scroll-with-animation :scroll-with-touch="!is_dragging" @scrolltolower="handle_comment_to_lower_scroll" @scroll="handle_comment_scroll">
<scroll-view class="flex-1 comment-list flex-row" scroll-y :scroll-top="comment_scroll_top" show-scrollbar="false" scroll-with-animation :scroll-with-touch="!is_dragging" @scrolltolower="handle_comment_to_lower_scroll" @scroll="handle_comment_scroll">
<view class="comment-scroll" :style="'width:' + windowWidth + 'px;'">
<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" :style="window_more_style">
<commentInfoComponent :style="window_more_style" :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 && 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 :style="window_more_style" :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 class="sub-comment flex-col jc-c mt-10">
<view v-if="comment_item.sub_comments && Array.isArray(comment_item.sub_comments) && comment_item.sub_comments.length > 0 && comment_item.show_sub_comment" style="margin-buttom: 20rpx;" class="sub-comment-list flex-col jc-c">
<view v-for="(sub_comment_item, sub_comment_index) in comment_item.sub_comments" :key="sub_comment_index" class="sub-comment-item flex-row align-s" style="margin-bottom: 20rpx;">
<commentInfoComponent :style="window_sub_more_style" :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>
</view>
<template v-if="comment_item.comments_count > 0">
@ -118,7 +118,7 @@
<template v-if="comment_item.page != null && comment_item.page < comment_item.page_total">
<commentMoreComponent :style="window_more_style" :propId="comment_item.id" :propIsLevel="2" :propText="$t('common.expand')" @comment_more_event="open_sub_comment"></commentMoreComponent>
</template>
<commentMoreComponent :style="window_more_style" :propId="comment_item.id" :propText="$t('common.retract')" propIconName="icon-arrow-top" @comment_more_event="close_sub_comment"></commentMoreComponent>
<commentMoreComponent :style="window_more_style" :propId="comment_item.id" :propText="$t('common.retract')" propIconName="arrow-top" @comment_more_event="close_sub_comment"></commentMoreComponent>
</view>
</template>
</template>
@ -299,21 +299,27 @@
video_cleanup_timer: null, // 视频清理定时器
comment_scroll_debounce_timer: null, // 评论滚动防抖定时器
comment_move_throttle_timer: null, // 评论拖拽节流定时器
// 添加下拉菜单状态管理
active_dropdown_id: null, // 当前显示下拉菜单的评论ID
params: {},
header_padding_left: '',
report_type_list: [], // 举报类型列表
popup_report_status: false, // 举报弹窗状态
current_main_index: 0, // 默认选中第一个举报原因
current_sub_index: 0, // 默认选中第一个具体类型
report_comment_id: '', // 举报的评论id
comment_value: '',
is_add_comment: false,
// 监听键盘高度变化事件
listener_height: 0,
comments_reply_data: {},
editor_path_type: 'video',
is_manual_pause: false, // 是否手动暂停
windowWidth: 0,
windowHeight: 0,
windowHeight: 0,
padding_width: 0,
sub_comment_padding_left: 0,
};
},
components: {
@ -360,9 +366,12 @@
},
width_height_style() {
return `width: ${ this.windowWidth }px;height: ${ this.windowHeight }px;`;
},
window_more_style() {
return `width: ${ this.windowWidth - this.padding_width }px;`
},
window_more_style() {
return `width: ${ this.windowWidth - this.padding_width }px;`
},
window_sub_more_style() {
return `width: ${ this.windowWidth - this.sub_comment_padding_left }px;`
}
},
onLoad(params) {
@ -481,9 +490,10 @@
let padding_left = '';
// #ifdef MP-ALIPAY
padding_left = video_get_top_left_padding();
// #endif
this.padding_width = app.globalData.rpx_to_px(30);
// #endif
this.padding_width = app.globalData.rpx_to_px(30);
this.sub_comment_padding_left = app.globalData.rpx_to_px(80);
this.header_padding_left = padding_left;
this.menu_button_info = menu_button_info;
this.current_video_id = isEmpty(this.current_video_id) ? this.params.id : this.current_video_id;
@ -1092,8 +1102,9 @@
}
},
// 关闭评论区
close_comment_modal() {
close_comment_modal(e) {
try {
console.log('close_comment_modal', e.currentTarget.dataset.type);
this.active_dropdown_id = null;
this.show_comment_modal = false;
this.comment_scroll_top = 0 + Math.random(); // 关闭评论时滚动到最顶部
@ -1337,7 +1348,7 @@
// 展开子评论
open_sub_comment(id, is_level) {
try {
try {
console.log(id);
const comment = this.active_comments.find(item => item.id == id);
if (comment) {
@ -1679,6 +1690,7 @@
} else {
this.active_dropdown_id = comment_id;
}
console.log(this.active_dropdown_id);
} catch (error) {
console.error('handle_toggle_dropdown error:', error);
}

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

@ -118,7 +118,7 @@
<template v-if="comment_item.page != null && comment_item.page < comment_item.page_total">
<commentMoreComponent :propId="comment_item.id" :propIsLevel="2" :propText="$t('common.expand')" @comment_more_event="open_sub_comment"></commentMoreComponent>
</template>
<commentMoreComponent :propId="comment_item.id" :propText="$t('common.retract')" propIconName="icon-arrow-top" @comment_more_event="close_sub_comment"></commentMoreComponent>
<commentMoreComponent :propId="comment_item.id" :propText="$t('common.retract')" propIconName="arrow-top" @comment_more_event="close_sub_comment"></commentMoreComponent>
</view>
</template>
</template>