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

修改输入框处理逻辑

master
于肖磊 2026-03-18 17:52:21 +08:00
parent 084e5d1395
commit ccac3bcd0c
5 changed files with 176 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
App.vue
View File

@ -7,10 +7,10 @@
data: {
// 基础配置
// 数据接口请求地址
request_url:'https://d1.shopxo.vip/',
request_url:'https://new.shopxo.vip/',
// 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
static_url:'https://d1.shopxo.vip/',
static_url:'https://new.shopxo.vip/',
// 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
system_type: 'default',

22
pages/plugins/video/detail/detail-nvue.css
View File

@ -232,10 +232,10 @@
.comment-input {
flex: 1;
height: 40rpx;
font-size: 28rpx;
height: 82rpx;
padding: 16rpx;
box-sizing: border-box;
margin: 16rpx;
max-height: 400rpx;
}
.comment-input-content {
@ -248,6 +248,22 @@
.pr-16 {
padding-right: 16rpx;
}
.pt-8 {
padding-top: 16rpx;
}
.pt-4 {
padding-top: 8rpx;
}
.mr-10 {
margin-right: 20rpx;
}
.pr-10 {
padding-right: 20rpx;
}
.pt-10 {
padding-top: 20rpx;
}
.comment-input-img-container {
padding: 10rpx 16rpx 16rpx 16rpx;
}

25
pages/plugins/video/detail/detail.css
View File

@ -117,11 +117,11 @@
.product-card .product-close {
position: absolute;
right: -10rpx;
top: -14rpx;
height: 30rpx;
display: flex;
align-items: center;
background: #fff;
top: -14rpx;
height: 30rpx;
display: flex;
align-items: center;
background: #fff;
border-radius: 50%;
}
@ -270,16 +270,25 @@
gap: 40rpx;
}
.comment-input-container {
display: flex;
padding: 20rpx;
border-top: 2rpx solid #eee;
box-sizing: border-box;
}
.pt-8 {
padding-top: 16rpx;
}
.pt-4 {
padding-top: 8rpx;
}
.comment-input {
flex: 1;
font-size: 28rpx;
height: 50rpx;
padding: 16rpx;
min-height: 40rpx;
margin: 16rpx;
max-height: 400rpx;
color: #000;
box-sizing: content-box;
}

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

@ -156,26 +156,33 @@
</view>
<view v-if="base_config_data && base_config_data.is_video_comments_add && base_config_data.is_video_comments_add == 1" class="comment-input-container">
<view class="comment-input-content flex-col jc-c">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10">
<text class="size-12 cr-f text-line-1">@{{ isEmpty(comments_reply_data.user) ? '' : comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<view data-type="image" @tap="comment_data_delete">
<u-icon propName="close-line" propSize="24rpx" propColor="#fff"></u-icon>
</view>
</view>
<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 mr-10" 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="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo @callBack="upload_images_event">
<u-icon propName="layout-module-single-images" propSize="40rpx" propColor="#999"></u-icon>
</component-upload>
</view>
<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">
<image :src="item.url" :data-index="index" @tap="upload_show_event" mode="aspectFill" class="comment-input-img"></image>
<view class="form-img-icon flex-row align-c jc-c" @tap="comment_input_img_close">
<u-icon propName="close" propSize="30rpx" propColor="#000" class="flex-row align-c jc-c" :data-index="index"></u-icon>
<view class="flex-1 flex-row align-s">
<view class="flex-1 comment-input-content flex-col jc-c mr-10">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb">
<text class="size-12 cr-f text-line-1 mr-10">@{{ isEmpty(comments_reply_data.user) ? '' : comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<view data-type="image" @tap="comment_data_delete">
<u-icon propName="close-line" propSize="24rpx" propColor="#fff"></u-icon>
</view>
</view>
<view class="flex-row align-s pr-16 box-border-box" @tap="add_comment">
<text :class="'flex-1 comment-input text-line-1 ' + (isEmpty(comment_input_value) ? 'cr-grey' : 'cr-black')">{{ isEmpty(comment_input_value) ? $t('video-detail.video-detail.98yyuf') : comment_input_value }}</text>
<view class="pt-8" @tap="upload_tap">
<component-upload :propMaxNum="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo @callBack="upload_images_event">
<u-icon propName="layout-module-single-images" propSize="40rpx" propColor="#999"></u-icon>
</component-upload>
</view>
</view>
<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">
<image :src="item.url" :data-index="index" @tap="upload_show_event" mode="aspectFill" class="comment-input-img"></image>
<view class="form-img-icon flex-row align-c jc-c" @tap="comment_input_img_close">
<u-icon propName="close" propSize="30rpx" propColor="#000" class="flex-row align-c jc-c" :data-index="index"></u-icon>
</view>
</view>
</view>
</view>
<view v-if="!isEmpty(comment_input_value)" class="pt-4 flex-row align-c">
<button size="mini" type="primary" class="margin-0" @tap="send_comment">{{$t('common.send')}}</button>
</view>
</view>
</view>
@ -221,26 +228,33 @@
</u-popup>
<!-- 添加评论弹出框 -->
<view v-if="is_add_comment" class="keyboard-input br-top-shadow" :style="'width:'+ windowWidth +'px;bottom:' + listener_height + 'px;'">
<view class="comment-input-content flex-col jc-c">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10">
<text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<view data-type="image" @tap="comment_data_delete">
<u-icon propName="close-line" propSize="24rpx" propColor="#fff"></u-icon>
<view class="flex-1 flex-col">
<view class="comment-input-content flex-col jc-c">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb">
<text class="size-12 cr-f text-line-1 mr-10">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<view data-type="image" @tap="comment_data_delete">
<u-icon propName="close-line" propSize="24rpx" propColor="#fff"></u-icon>
</view>
</view>
<view class="flex-row align-c pr-16 box-border-box">
<textarea ref="commentRef" :value="comment_input_value" :focus="is_add_comment" class="comment-input mr-10 cr-black" placeholder-class="cr-grey" auto-height maxlength="500" :show-confirm-bar="false" :adjust-position="false" :placeholder="$t('video-detail.video-detail.98yyuf')" @input="comment_input_event" @confirm="send_comment" />
</view>
<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">
<image :src="item.url" :data-index="index" @tap="upload_show_event" mode="aspectFill" class="comment-input-img"></image>
<view class="form-img-icon flex-row align-c jc-c" @tap="comment_input_img_close">
<u-icon propName="close" propSize="30rpx" propColor="#000" class="flex-row align-c jc-c" :data-index="index"></u-icon>
</view>
</view>
</view>
</view>
<view class="flex-row align-c wh-auto ht-auto pr-16 box-border-box" :style="window_more_style">
<input ref="commentRef" :value="comment_input_value" :focus="is_add_comment" class="comment-input" style="margin-right: 20rpx;" type="text" confirm-type="send" :adjust-position="false" :auto-blur="true" :placeholder="$t('video-detail.video-detail.98yyuf')" @input="comment_input_event" @blur="() => is_add_comment = false" @confirm="send_comment" />
<component-upload :propMaxNum="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo propChooseFocus @callBack="upload_images_event">
<u-icon propName="layout-module-single-images" propSize="48rpx" propColor="#999"></u-icon>
<view class="flex-row align-c jc-sb pt-10">
<component-upload :propMaxNum="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo propChooseFocus @call-back="upload_images_event" @chooseFocus="upload_event">
<u-icon propName="layout-module-single-images" propSize="40rpx" propColor="#999"></u-icon>
</component-upload>
</view>
<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">
<image :src="item.url" :data-index="index" @tap="upload_show_event" mode="aspectFill" class="comment-input-img"></image>
<view class="form-img-icon flex-row align-c jc-c" @tap="comment_input_img_close">
<u-icon propName="close" propSize="30rpx" propColor="#000" class="flex-row align-c jc-c" :data-index="index"></u-icon>
</view>
</view>
<button :disabled="isEmpty(comment_input_value)" size="mini" type="primary" class="margin-0" @tap="send_comment">{{$t('common.send')}}</button>
</view>
</view>
</view>
@ -347,6 +361,16 @@
ComponentLoading,
componentUpload
},
watch: {
// 监听路由变化
listener_height(e) {
if (e > 0) {
this.handle_comment_input_value();
} else {
this.is_add_comment = false;
}
}
},
computed: {
// 视频列表高度
swiperStyle() {
@ -622,7 +646,15 @@
console.error('get_last_or_next_data_list error:', error);
}
},
// 评论输入框内容改变一下，确保能正常展开
handle_comment_input_value() {
this.is_add_comment = true;
const data = this.comment_input_value;
this.comment_input_value = '';
setTimeout(() => {
this.comment_input_value = data;
}, 100);
},
// 实际的 swiper 切换处理逻辑
process_swiper_change(current) {
try {
@ -789,6 +821,10 @@
console.error('comment_input_event error:', error);
}
},
// 阻止上传图片事件触发父级方法
upload_tap(e) {
e.stopPropagation()
},
// 图片上传回调
upload_images_event(res) {
@ -812,7 +848,7 @@
},
upload_event() {
setTimeout(() => {
this.is_add_comment = true;
this.handle_comment_input_value();
}, 100);
},
@ -928,10 +964,10 @@
if (this.$refs.commentRef) {
this.$refs.commentRef.blur();
}
if (e) {
e.stopPropagation();
}
if (e) {
e.stopPropagation();
}
} catch (error) {
console.error('close_comment_modal error:', error);
@ -1028,11 +1064,11 @@
e.preventDefault();
}
const current_y = e?.touches[0]?.pageY || 0;
const move_y = current_y - this.comment_current_y;
// 小于3的时候不认为是有效滑动，避免因为手指抖动影响
if (move_y < 3) {
return;
const current_y = e?.touches[0]?.pageY || 0;
const move_y = current_y - this.comment_current_y;
// 小于3的时候不认为是有效滑动，避免因为手指抖动影响
if (move_y < 3) {
return;
}
const distance = current_y - this.comment_start_y;
@ -1701,7 +1737,7 @@
try {
//#ifndef H5
this.active_dropdown_id = null;
this.is_add_comment = true;
this.handle_comment_input_value();
this.active_dropdown_id = null;
//#endif
} catch (error) {

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

@ -140,25 +140,46 @@
</view>
<view v-if="base_config_data && base_config_data.is_video_comments_add && base_config_data.is_video_comments_add == 1" class="comment-input-container">
<view class="comment-input-content flex-col jc-c">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10">
<text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<view data-type="image" @tap="comment_data_delete">
<iconfont name="icon-close-line" size="24rpx" color="#fff"></iconfont>
<view class="flex-row align-s gap-10 wh-auto ht-auto">
<view class="flex-1 comment-input-content flex-col jc-c">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10">
<text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<view data-type="image" @tap="comment_data_delete">
<iconfont name="icon-close-line" size="24rpx" color="#fff"></iconfont>
</view>
</view>
<view class="flex-row align-s gap-10 wh-auto ht-auto pr-16 box-border-box">
<!-- #ifdef H5 -->
<textarea :value="comment_input_value" class="comment-input wh-auto cr-black" placeholder-class="cr-grey" auto-height :show-confirm-bar="false" :maxlength="500" :adjust-position="false" :placeholder="input_placeholder" @focus="add_comment" @input="comment_input_event" />
<!-- #endif -->
<!-- #ifndef H5 -->
<view :class="'comment-input text-line-1 ' + (isEmpty(comment_input_value) ? 'cr-grey' : 'cr-black')" @tap="add_comment">{{ isEmpty(comment_input_value) ? input_placeholder : comment_input_value }}</view>
<!-- #endif -->
<view class="pt-8">
<component-upload :propMaxNum="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo @call-back="upload_images_event">
<iconfont name="icon-layout-module-single-images" size="40rpx" color="#999"></iconfont>
</component-upload>
</view>
</view>
<view v-if="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>
</view>
</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="input_placeholder" @focus="add_comment" @input="comment_input_event" @confirm="send_comment" />
<component-upload :propMaxNum="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo @call-back="upload_images_event">
<iconfont name="icon-layout-module-single-images" size="40rpx" color="#999"></iconfont>
</component-upload>
<!-- #ifdef H5 -->
<view class="pt-4 flex-row align-c">
<button :disabled="isEmpty(comment_input_value)" size="mini" type="primary" class="comment-btn" @tap="send_comment">{{$t('common.send')}}</button>
</view>
<view v-if="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>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<view v-if="!isEmpty(comment_input_value)" class="pt-4 flex-row align-c">
<button size="mini" type="primary" class="margin-0" @tap="send_comment">{{$t('common.send')}}</button>
</view>
<!-- #endif -->
</view>
</view>
</view>
@ -205,24 +226,30 @@
</component-popup>
<!-- 添加评论弹出框 -->
<view v-if="is_add_comment" class="keyboard-input br-top-shadow" :style="'width:100%;bottom:' + listener_height + 'px;'">
<view class="comment-input-content flex-col jc-c">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10">
<text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<view data-type="image" @tap="comment_data_delete">
<iconfont name="icon-close-line" size="24rpx" color="#fff"></iconfont>
<view class="flex-col gap-10">
<view class="comment-input-content flex-col jc-c">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10">
<text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<view data-type="image" @tap="comment_data_delete">
<iconfont name="icon-close-line" size="24rpx" color="#fff"></iconfont>
</view>
</view>
<view class="flex-row align-c gap-10 wh-auto ht-auto pr-16 box-border-box">
<textarea ref="commentInput" :value="comment_input_value" :focus="is_add_comment" class="comment-input wh-auto cr-black" placeholder-class="cr-grey" auto-height :show-confirm-bar="false" :maxlength="500" :adjust-position="false" :auto-blur="true" :placeholder="input_placeholder" @input="comment_input_event" @blur="() => is_add_comment = false" @confirm="send_comment" />
</view>
<view v-if="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>
</view>
</view>
</view>
<view class="flex-row align-c gap-10 wh-auto ht-auto pr-16 box-border-box">
<input ref="commentInput" :value="comment_input_value" :focus="is_add_comment" class="comment-input" type="text" confirm-type="send" :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 jc-sb wh-auto">
<component-upload :propMaxNum="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo propChooseFocus @call-back="upload_images_event" @chooseFocus="upload_event">
<iconfont name="icon-layout-module-single-images" size="40rpx" color="#999"></iconfont>
</component-upload>
</view>
<view v-if="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>
</view>
<button :disabled="isEmpty(comment_input_value)" size="mini" type="primary" class="margin-0" @tap="send_comment">{{$t('common.send')}}</button>
</view>
</view>
</view>