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

修改nvue页面处理

master
于肖磊 2026-03-10 18:01:33 +08:00
parent cbb6bbe7f2
commit 2c0df1a74d
3 changed files with 67 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locale/index.js
View File

@ -9,6 +9,7 @@ let i18nConfig = {
silentTranslationWarn: true,
messages: {
"zh": zh,
"zh-Hans": zh,
"en": en
}
}

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

@ -6,7 +6,7 @@
<text class="comment-user">{{ propComment.user.user_name_view }}</text>
<view class="pr" style="margin-left: 20rpx;">
<!-- 直接实现下拉菜单 -->
<view :id="'comment-option-' + propId" class="comment-option" @tap.stop="toggle_dropdown">
<view ref="commentOption" class="comment-option" @tap.stop="toggle_dropdown">
<u-icon propName="ellipsis" propColor="#999" propSize="28rpx"></u-icon>
</view>
<!-- 下拉菜单 -->
@ -16,8 +16,8 @@
<!-- #ifndef APP-NVUE -->
<view v-if="drop_down_visible && dropdownOptions && Array.isArray(dropdownOptions)" class="dropdown-menu" @tap.stop></view>
<!-- #endif -->
<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 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.stop="handle_dropdown_item_click">
<text style="font-size: 28rpx;color: #666;">{{ item.label }}</text>
</view>
</view>
</view>
@ -48,17 +48,24 @@
const app = getApp();
//#ifdef APP-NVUE
import i18n from '@/locale/index.js';
const dom = weex.requireModule('dom');
// nvue页面在方法中使用时的处理
import { initVueI18n } from '@dcloudio/uni-i18n';
import en from '@/locale/en.json'
import zhHans from '@/locale/zh.json'
const messages = { en, 'zh-Hans': zhHans }
const { t } = initVueI18n(messages)
//#endif
import { isEmpty } from '@/common/js/common/common.js';
export default {
import { isEmpty } from '@/common/js/common/common.js';
export default {
//#ifdef APP-NVUE
i18n,
i18n,
//#endif
props: {
propComment: {
type: Object,
default: () => {
return {};
return {};
},
},
propId: {
@ -76,48 +83,53 @@
}
},
data() {
return {
return {
// 下拉菜单选项数据
dropdownOptions: [],
// 下拉菜单位置信息
dropdownMenuTop: 0
dropdownMenuTop: 0,
dropdownMenuLeft: 0
};
},
mounted() {
this.init();
},
computed: {
// 使用computed属性映射props状态
// 使用 computed 属性映射 props 状态
drop_down_visible() {
return this.propDropDownVisible;
return this.propDropDownVisible;
},
// 下拉菜单样式
dropdownMenuStyle() {
return `top: ${this.dropdownMenuTop}px;`
return `top: ${this.dropdownMenuTop}px;`;
}
},
methods: {
methods: {
isEmpty,
init() {
const label1 = $t('common.delete');
const label2 = $t('common.report');
console.log(label1, label2);
//#ifdef APP-NVUE
this.dropdownOptions = [
{ label: label1, type: 'delete' },
{ label: label2, type: 'report' }
{ label: t('common_delete'), type: 'delete' },
{ label: t('common_complaint'), type: 'report' }
]
//#endif
//#ifndef APP-NVUE
this.dropdownOptions = [
{ label: $t('common.delete'), type: 'delete' },
{ label: $t('common.complaint'), type: 'report' }
]
//#endif
},
// 回复
comment_reply(e) {
console.log('124545');
this.$emit('comment_reply', this.propComment, e);
},
// 点赞
comment_like(e) {
if (!app.globalData.is_single_page_check()) {
return false;
return false;
}
var user = app.globalData.get_user_info(this, 'comment_like', e);
var user= app.globalData.get_user_info(this, 'comment_like', e);
if (user != false) {
this.$emit('comment_like', this.propId, e);
}
@ -145,34 +157,35 @@
getDropdownPosition() {
try {
// #ifdef APP-NVUE
// nvue 环境使用 dom 模块
const dom = weex.requireModule('dom');
const commentOptionEl = document.getElementById(`comment-option-${this.propId}`);
// nvue 环境使用 dom 模块的 getComponentRect 方法
const commentOptionEl = this.$refs.commentOption;
if (commentOptionEl) {
dom.getComponentRect(commentOptionEl, (res) => {
if (res && res.size) {
const { top, left, width } = res.size;
// 计算菜单位置：在触发元素下方，右侧对齐
this.dropdownMenuTop = top;
this.dropdownMenuTop = top + 20;
}
});
}
// #endif
} catch (error) {
console.error('getDropdownPosition error:', error);
console.error('获取下拉菜单位置失败:', error);
}
},
// 处理下拉菜单项点击
handle_dropdown_item_click(e) {
if (!app.globalData.is_single_page_check()) {
return false;
e.stopPropagation();
return false;
}
var user = app.globalData.get_user_info(this, 'comment_like', e);
if (user != false) {
const item = e.currentTarget.dataset.value || {};
this.$emit('dropdown_item_click', this.propId, item);
}
e.stopPropagation();
}
}
}
@ -224,10 +237,12 @@
/* 下拉菜单样式 */
.dropdown-menu {
/* #ifndef APP-NVUE */
position: fixed;
position: absolute;
right: 0;
/* #endif */
/* #ifdef APP-NVUE */
position: fixed;
right: 30rpx;
/* #endif */
background: #ffffff;
border-radius: 8rpx;
@ -235,6 +250,7 @@
border: 1rpx solid #e5e5e5;
min-width: 160rpx;
z-index: 9999;
top: 100%;
margin-top: 8rpx;
padding: 10rpx 0;
}

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

@ -147,8 +147,8 @@
<u-icon propName="close-line" propSize="24rpx" propColor="#fff"></u-icon>
</view>
</view>
<view class="flex-row align-c gap-10 wh-auto ht-auto pr-16 box-border-box">
<input :value="comment_input_value" class="comment-input" type="text" confirm-type="send" :adjust-position="false" :placeholder="$t('video-detail.video-detail.98yyuf')" @focus="add_comment" @input="comment_input_event" @confirm="send_comment" />
<view class="flex-row align-c wh-auto ht-auto pr-16 box-border-box" :style="window_more_style">
<input :value="comment_input_value" class="comment-input" style="margin-right: 20rpx;" type="text" confirm-type="send" :adjust-position="false" :placeholder="$t('video-detail.video-detail.98yyuf')" @focus="add_comment" @input="comment_input_event" @confirm="send_comment" />
<component-upload :propMaxNum="1" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo @call-back="upload_images_event">
<u-icon propName="layout-module-single-images" propSize="32rpx" propColor="#999"></u-icon>
</component-upload>
@ -167,12 +167,6 @@
<!-- 举报弹窗 -->
<u-popup ref="popupReportRef" propMode="bottom" class="pointer-events-auto" :propTitle="$t('video-detail.video-detail.rfsdfg')" :propCloseable="true" @change="popup_report_close_event" @callBack="submit_report">
<view class="report-content">
<!-- 顶部按钮区域 -->
<view class="report-header flex-row align-c jc-sb">
<view class="report-btn cr-6" @tap="popup_report_close_event">{{$t('common.cancel')}}</view>
<view class="report-title flex-1">{{$t('video-detail.video-detail.rfsdfg')}}</view>
<view class="report-btn cr-blue" @tap="submit_report">{{$t('common.confirm')}}</view>
</view>
<!-- 主要内容区域 -->
<view class="report-body">
<!-- 第一层：举报原因选择 -->
@ -212,8 +206,8 @@
<u-icon propName="close-line" propSize="24rpx" propColor="#fff"></u-icon>
</view>
</view>
<view class="flex-row align-c gap-10 wh-auto ht-auto pr-16 box-border-box">
<input :value="comment_input_value" :focus="is_add_comment" class="comment-input" type="text" confirm-type="done" :adjust-position="false" :auto-blur="true" :placeholder="input_placeholder" @input="comment_input_event" @blur="() => is_add_comment = false" @confirm="send_comment" />
<view class="flex-row align-c wh-auto ht-auto pr-16 box-border-box" :style="window_more_style">
<input :value="comment_input_value" :focus="is_add_comment" class="comment-input" style="margin-right: 20rpx;" type="text" confirm-type="done" :adjust-position="false" :auto-blur="true" :placeholder="input_placeholder" @input="comment_input_event" @blur="() => is_add_comment = false" @confirm="send_comment" />
<component-upload :propMaxNum="1" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo @call-back="upload_images_event">
<u-icon propName="layout-module-single-images" propSize="48rpx" propColor="#999"></u-icon>
</component-upload>
@ -248,7 +242,13 @@
import componentCommon from '@/components/common/common';
// 多语言
//#ifdef APP-NVUE
import i18n from '@/locale/index.js';
import i18n from '@/locale/index.js';
// nvue页面在方法中使用时的处理
import { initVueI18n } from '@dcloudio/uni-i18n';
import en from '@/locale/en.json'
import zhHans from '@/locale/zh.json'
const messages = { en, 'zh-Hans': zhHans }
const { t } = initVueI18n(messages)
//#endif
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@ -1705,9 +1705,11 @@
// 处理不同操作
if (obj.type == 'delete') {
// 确认删除
const tips = t('common.warm_tips');
const content = t('common.delete_confirm_tips');
uni.showModal({
title: $t('common.warm_tips'),
content: $t('common.delete_confirm_tips'),
title: tips,
content: content,
success: (res) => {
if (res.confirm) {
// 调用删除接口
@ -1914,8 +1916,10 @@
// 键盘显示时，切换输入框
add_comment() {
try {
this.show_comment_modal = true;
this.move_distance = 0;
//#ifndef H5
this.is_add_comment = true;
this.active_dropdown_id = null;
//#endif
} catch (error) {
console.error('add_comment error:', error);
}
@ -2200,9 +2204,9 @@
.comment-input {
flex: 1;
font-size: 28rpx;
height: 50rpx;
height: 82rpx;
padding: 16rpx;
box-sizing: content-box;
box-sizing: border-box;
}
.comment-input-content {