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

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

@ -232,10 +232,10 @@
.comment-input { .comment-input {
flex: 1; flex: 1;
height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
height: 82rpx; margin: 16rpx;
padding: 16rpx; max-height: 400rpx;
box-sizing: border-box;
} }
.comment-input-content { .comment-input-content {
@ -248,6 +248,22 @@
.pr-16 { .pr-16 {
padding-right: 16rpx; 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 { .comment-input-img-container {
padding: 10rpx 16rpx 16rpx 16rpx; padding: 10rpx 16rpx 16rpx 16rpx;
} }

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

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

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

@ -156,26 +156,33 @@
</view> </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 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 class="flex-1 flex-row align-s">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10"> <view class="flex-1 comment-input-content flex-col jc-c mr-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 v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb">
<view data-type="image" @tap="comment_data_delete"> <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>
<u-icon propName="close-line" propSize="24rpx" propColor="#fff"></u-icon> <view data-type="image" @tap="comment_data_delete">
</view> <u-icon propName="close-line" propSize="24rpx" propColor="#fff"></u-icon>
</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> </view>
</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> </view>
</view> </view>
@ -221,26 +228,33 @@
</u-popup> </u-popup>
<!-- 添加评论弹出框 --> <!-- 添加评论弹出框 -->
<view v-if="is_add_comment" class="keyboard-input br-top-shadow" :style="'width:'+ windowWidth +'px;bottom:' + listener_height + 'px;'"> <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 class="flex-1 flex-col">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10"> <view class="comment-input-content flex-col jc-c">
<text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text> <view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb">
<view data-type="image" @tap="comment_data_delete"> <text class="size-12 cr-f text-line-1 mr-10">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<u-icon propName="close-line" propSize="24rpx" propColor="#fff"></u-icon> <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> </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" /> <view class="flex-row align-c jc-sb pt-10">
<component-upload :propMaxNum="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo propChooseFocus @callBack="upload_images_event"> <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="48rpx" propColor="#999"></u-icon> <u-icon propName="layout-module-single-images" propSize="40rpx" propColor="#999"></u-icon>
</component-upload> </component-upload>
</view>
<view v-if="form_images_list && form_images_list.length > 0" class="pr w h comment-input-img-container"> <button :disabled="isEmpty(comment_input_value)" size="mini" type="primary" class="margin-0" @tap="send_comment">{{$t('common.send')}}</button>
<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> </view>
</view> </view>
@ -347,6 +361,16 @@
ComponentLoading, ComponentLoading,
componentUpload componentUpload
}, },
watch: {
// 监听路由变化
listener_height(e) {
if (e > 0) {
this.handle_comment_input_value();
} else {
this.is_add_comment = false;
}
}
},
computed: { computed: {
// 视频列表高度 // 视频列表高度
swiperStyle() { swiperStyle() {
@ -622,7 +646,15 @@
console.error('get_last_or_next_data_list error:', error); 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 切换处理逻辑 // 实际的 swiper 切换处理逻辑
process_swiper_change(current) { process_swiper_change(current) {
try { try {
@ -789,6 +821,10 @@
console.error('comment_input_event error:', error); console.error('comment_input_event error:', error);
} }
}, },
// 阻止上传图片事件触发父级方法
upload_tap(e) {
e.stopPropagation()
},
// 图片上传回调 // 图片上传回调
upload_images_event(res) { upload_images_event(res) {
@ -812,7 +848,7 @@
}, },
upload_event() { upload_event() {
setTimeout(() => { setTimeout(() => {
this.is_add_comment = true; this.handle_comment_input_value();
}, 100); }, 100);
}, },
@ -928,10 +964,10 @@
if (this.$refs.commentRef) { if (this.$refs.commentRef) {
this.$refs.commentRef.blur(); this.$refs.commentRef.blur();
} }
if (e) { if (e) {
e.stopPropagation(); e.stopPropagation();
} }
} catch (error) { } catch (error) {
console.error('close_comment_modal error:', error); console.error('close_comment_modal error:', error);
@ -1028,11 +1064,11 @@
e.preventDefault(); e.preventDefault();
} }
const current_y = e?.touches[0]?.pageY || 0; const current_y = e?.touches[0]?.pageY || 0;
const move_y = current_y - this.comment_current_y; const move_y = current_y - this.comment_current_y;
// 小于3的时候不认为是有效滑动，避免因为手指抖动影响 // 小于3的时候不认为是有效滑动，避免因为手指抖动影响
if (move_y < 3) { if (move_y < 3) {
return; return;
} }
const distance = current_y - this.comment_start_y; const distance = current_y - this.comment_start_y;
@ -1701,7 +1737,7 @@
try { try {
//#ifndef H5 //#ifndef H5
this.active_dropdown_id = null; this.active_dropdown_id = null;
this.is_add_comment = true; this.handle_comment_input_value();
this.active_dropdown_id = null; this.active_dropdown_id = null;
//#endif //#endif
} catch (error) { } catch (error) {

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

@ -140,25 +140,46 @@
</view> </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 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 class="flex-row align-s gap-10 wh-auto ht-auto">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10"> <view class="flex-1 comment-input-content flex-col jc-c">
<text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text> <view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10">
<view data-type="image" @tap="comment_data_delete"> <text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<iconfont name="icon-close-line" size="24rpx" color="#fff"></iconfont> <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> </view>
<view class="flex-row align-c gap-10 wh-auto ht-auto pr-16 box-border-box"> <!-- #ifdef H5 -->
<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" /> <view class="pt-4 flex-row align-c">
<component-upload :propMaxNum="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo @call-back="upload_images_event"> <button :disabled="isEmpty(comment_input_value)" size="mini" type="primary" class="comment-btn" @tap="send_comment">{{$t('common.send')}}</button>
<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"> <!-- #endif -->
<view v-for="(item, index) in form_images_list" :key="index" class="comment-input-img pr"> <!-- #ifndef H5 -->
<iconfont name="icon-close" size="10" color="#000" class="comment-input-img-close" :data-index="index" @tap="comment_input_img_close"></iconfont> <view v-if="!isEmpty(comment_input_value)" class="pt-4 flex-row align-c">
<image :src="item.url" :data-index="index" @tap="upload_show_event" mode="aspectFill" class="wh-auto ht-auto"></image> <button size="mini" type="primary" class="margin-0" @tap="send_comment">{{$t('common.send')}}</button>
</view>
</view> </view>
<!-- #endif -->
</view> </view>
</view> </view>
</view> </view>
@ -205,24 +226,30 @@
</component-popup> </component-popup>
<!-- 添加评论弹出框 --> <!-- 添加评论弹出框 -->
<view v-if="is_add_comment" class="keyboard-input br-top-shadow" :style="'width:100%;bottom:' + listener_height + 'px;'"> <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 class="flex-col gap-10">
<view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10"> <view class="comment-input-content flex-col jc-c">
<text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text> <view v-if="!isEmpty(comments_reply_data)" class="comment-reply-content flex-row align-c jc-sb gap-10">
<view data-type="image" @tap="comment_data_delete"> <text class="size-12 cr-f text-line-1">@{{ comments_reply_data.user.user_name_view }}:{{ comments_reply_data.content }}</text>
<iconfont name="icon-close-line" size="24rpx" color="#fff"></iconfont> <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> </view>
<view class="flex-row align-c gap-10 wh-auto ht-auto pr-16 box-border-box"> <view class="flex-row align-c jc-sb wh-auto">
<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" />
<component-upload :propMaxNum="propMaxNum" :propPathType="editor_path_type" propSlot propSingleCall propIsAllInfo propChooseFocus @call-back="upload_images_event" @chooseFocus="upload_event"> <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> <iconfont name="icon-layout-module-single-images" size="40rpx" color="#999"></iconfont>
</component-upload> </component-upload>
</view>
<view v-if="form_images_list.length > 0" class="pr w h comment-input-img-container"> <button :disabled="isEmpty(comment_input_value)" size="mini" type="primary" class="margin-0" @tap="send_comment">{{$t('common.send')}}</button>
<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> </view>
</view> </view>