修改图片显示处理

master
于肖磊 2026-03-19 12:03:15 +08:00
parent 45ba0da9ba
commit 4a08899e27
5 changed files with 64 additions and 35 deletions

View File

@ -304,5 +304,6 @@
.comment-images { .comment-images {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
border-radius: 8rpx;
} }
</style> </style>

View File

@ -245,6 +245,12 @@
font-size: 28rpx; font-size: 28rpx;
} }
.product-image {
width: 100rpx;
height: 100rpx;
border-radius: 8rpx;
}
.comment-send-button { .comment-send-button {
color: #fff; color: #fff;
font-size: 26rpx; font-size: 26rpx;

View File

@ -101,6 +101,7 @@
.product-card .product-image { .product-card .product-image {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
border-radius: 8rpx;
} }
.product-card .product-name { .product-card .product-name {
font-weight: 500; font-weight: 500;

View File

@ -40,8 +40,8 @@
<view v-if="!isEmpty(video_item.goods) && base_config_data && base_config_data.is_video_detail_show_goods && base_config_data.is_video_detail_show_goods == 1" class="product-card"> <view v-if="!isEmpty(video_item.goods) && base_config_data && base_config_data.is_video_detail_show_goods && base_config_data.is_video_detail_show_goods == 1" class="product-card">
<view class="flex-col"> <view class="flex-col">
<view v-if="video_item.show_goods" class="flex-row align-c product-card-item mb-10" :data-id="video_item.id" @tap.stop="handle_product_card_item"> <view v-if="video_item.show_goods" class="flex-row align-c product-card-item mb-10" :data-id="video_item.id" @tap.stop="handle_product_card_item">
<view style="width: 100rpx;height:100rpx;"> <view class="product-image">
<image :src="video_item.goods.images" mode="aspectFill" style="width: 100rpx;height:100rpx;"></image> <image :src="video_item.goods.images" mode="aspectFill" class="product-image"></image>
</view> </view>
<view class="flex-1 flex-col align-sb jc-c ml-10"> <view class="flex-1 flex-col align-sb jc-c ml-10">
<text class="product-name text-line-1 mb-10">{{ video_item.goods.title }}</text> <text class="product-name text-line-1 mb-10">{{ video_item.goods.title }}</text>
@ -54,7 +54,7 @@
<view class="product-button" :data-id="video_item.id" @tap.stop="handle_product_button"> <view class="product-button" :data-id="video_item.id" @tap.stop="handle_product_button">
<view class="product-button-left flex-row align-c"> <view class="product-button-left flex-row align-c">
<u-icon propName="cart-have" propSize="30rpx" propColor="#F5C366"></u-icon> <u-icon propName="cart-have" propSize="30rpx" propColor="#F5C366"></u-icon>
<text class="size-14 cr-f ml-10">{{$t('common.buy')}} {{$t('common.goods')}}</text> <text class="size-14 cr-f ml-10">{{$t('common.buy')}}{{$t('common.goods')}}</text>
</view> </view>
<u-icon propName="angle-right" propSize="30rpx" propColor="#fff"></u-icon> <u-icon propName="angle-right" propSize="30rpx" propColor="#fff"></u-icon>
</view> </view>
@ -1126,8 +1126,9 @@
try { try {
this.active_dropdown_id = null; this.active_dropdown_id = null;
let comment_text = this.comment_input_value; let comment_text = this.comment_input_value;
if (!comment_text.trim()) return; if (!comment_text.trim()) {
app.globalData.showToast('请填写评论内容');
};
// video_id 视频id video_comments_id 父级评论id id 当前评论id // video_id 视频id video_comments_id 父级评论id id 当前评论id
let new_video_comments_id = 0; let new_video_comments_id = 0;
let reply_comments_id = 0 let reply_comments_id = 0
@ -1150,6 +1151,8 @@
success: res => { success: res => {
const data = res.data; const data = res.data;
if (data.code == 0) { if (data.code == 0) {
// 关闭输入框
this.is_add_comment = false;
const new_data = data.data; const new_data = data.data;
// 没有回复时的评论 // 没有回复时的评论
if (new_video_comments_id == 0) { if (new_video_comments_id == 0) {
@ -1160,13 +1163,6 @@
page: 0, page: 0,
sub_comments: [], sub_comments: [],
}) })
this.video_data_list.forEach(item => {
if (item.id == this.current_video_id) {
item.comments_count++;
}
})
// this.video_data_list = this.video_data_list;
this.$set(this, 'video_data_list', this.video_data_list)
this.comment_scroll_top = 0 + Math.random(); // 添加主评论时滚动到最顶部 this.comment_scroll_top = 0 + Math.random(); // 添加主评论时滚动到最顶部
} else { } else {
this.active_comments.forEach(item => { this.active_comments.forEach(item => {
@ -1183,6 +1179,15 @@
} }
}) })
} }
// 更新视频数据
const videoItem = this.video_data_list.find(item => item.id == this.current_video_id);
if (videoItem) {
videoItem.comments_list = this.active_comments;
if (new_video_comments_id == 0) {
videoItem.comments_count++;
}
}
this.$set(this, 'video_data_list', this.video_data_list);
// 清空输入框,更新数据内容 // 清空输入框,更新数据内容
this.active_comments = this.active_comments; this.active_comments = this.active_comments;
this.form_images_list = []; this.form_images_list = [];
@ -1649,12 +1654,12 @@
// 保留当前评论 // 保留当前评论
filteredComments.push(comment); filteredComments.push(comment);
} }
// 删除之后更新评论数据 // 更新视频数据
this.video_data_list.forEach(item => { const videoItem = this.video_data_list.find(item => item.id == this.current_video_id);
if (item.id == this.current_video_id) { if (videoItem) {
item.comments_count = filteredComments.length; videoItem.comments_list = filteredComments;
} videoItem.comments_count = filteredComments.length;
}) }
// 更新数据 // 更新数据
this.active_comments = filteredComments; this.active_comments = filteredComments;
// this.video_data_list = this.video_data_list; // this.video_data_list = this.video_data_list;

View File

@ -64,7 +64,7 @@
<view class="product-button" :data-id="video_item.id" @tap.stop="handle_product_button"> <view class="product-button" :data-id="video_item.id" @tap.stop="handle_product_button">
<view class="product-button-left flex-row align-c gap-10"> <view class="product-button-left flex-row align-c gap-10">
<iconfont name="icon-cart-have" color="#F5C366" size="30rpx"></iconfont> <iconfont name="icon-cart-have" color="#F5C366" size="30rpx"></iconfont>
<text class="size-14 cr-f">{{$t('common.buy')}} {{$t('common.goods')}}</text> <text class="size-14 cr-f">{{$t('common.buy')}}{{$t('common.goods')}}</text>
</view> </view>
<iconfont name="icon-angle-right" color="#fff" size="30rpx"></iconfont> <iconfont name="icon-angle-right" color="#fff" size="30rpx"></iconfont>
</view> </view>
@ -864,12 +864,20 @@
if (move_distance > 0) { if (move_distance > 0) {
// //
if (this.current_video_index <= 0) { if (this.current_video_index <= 0) {
app.globalData.showToast('已经是第一个视频了'); setTimeout(() => {
if (!this.show_comment_modal) {
app.globalData.showToast('已经是第一个视频了');
}
}, 0);
} }
} else { } else {
// //
if (this.current_video_index >= this.video_data_list.length - 1) { if (this.current_video_index >= this.video_data_list.length - 1) {
app.globalData.showToast('已经是最后一个视频了'); setTimeout(() => {
if (!this.show_comment_modal) {
app.globalData.showToast('已经是最后一个视频了');
}
}, 0);
} }
} }
@ -1185,7 +1193,9 @@
// //
send_comment() { send_comment() {
let comment_text = this.comment_input_value; let comment_text = this.comment_input_value;
if (!comment_text.trim()) return; if (!comment_text.trim()) {
app.globalData.showToast('请填写评论内容');
};
// video_id id video_comments_id id id id // video_id id video_comments_id id id id
let new_video_comments_id = 0; let new_video_comments_id = 0;
@ -1209,6 +1219,8 @@
success: res => { success: res => {
const data = res.data; const data = res.data;
if (data.code == 0) { if (data.code == 0) {
//
this.is_add_comment = false;
const new_data = data.data; const new_data = data.data;
// //
if (new_video_comments_id == 0) { if (new_video_comments_id == 0) {
@ -1219,14 +1231,9 @@
page: 0, page: 0,
sub_comments: [], sub_comments: [],
}) })
this.video_data_list.forEach(item => {
if (item.id == this.current_video_id) {
item.comments_count++;
}
})
this.setData({ this.setData({
video_data_list: this.video_data_list, comment_scroll_top: Date.now(), //
comment_scroll_top: 0 + Math.random() //
}) })
} else { } else {
this.active_comments.forEach(item => { this.active_comments.forEach(item => {
@ -1243,9 +1250,18 @@
} }
}) })
} }
//
const videoItem = this.video_data_list.find(item => item.id == this.current_video_id);
if (videoItem) {
videoItem.comments_list = this.active_comments;
if (new_video_comments_id == 0) {
videoItem.comments_count++;
}
}
// , // ,
this.setData({ this.setData({
active_comments: this.active_comments, active_comments: this.active_comments,
video_data_list: this.video_data_list,
form_images_list: [], form_images_list: [],
comment_input_value: '', comment_input_value: '',
comments_reply_data: {}, comments_reply_data: {},
@ -1630,12 +1646,12 @@
// //
filteredComments.push(comment); filteredComments.push(comment);
} }
// //
this.video_data_list.forEach(item => { const videoItem = this.video_data_list.find(item => item.id == this.current_video_id);
if (item.id == this.current_video_id) { if (videoItem) {
item.comments_count = filteredComments.length; videoItem.comments_list = filteredComments;
} videoItem.comments_count = filteredComments.length;
}) }
// //
this.setData({ this.setData({
active_comments: filteredComments, active_comments: filteredComments,