修改搜索内容显示
于肖磊
parent
c39d60a344
commit
cf02ab1b27
|
|
@ -21,22 +21,24 @@
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
.play-icon-bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #fff;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
.play-icon-iconfont {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.play-icon .play-icon-bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #fff;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.play-icon .play-icon-iconfont {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.right-actions {
|
||||
|
|
@ -81,44 +83,46 @@
|
|||
left: 30rpx;
|
||||
color: #fff;
|
||||
z-index: 99;
|
||||
.product-card-item {
|
||||
background: #DDDDDD;
|
||||
padding: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.product-image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
.product-name {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.product-price {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FF1919;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.product-close {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -14rpx;
|
||||
}
|
||||
.product-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 300rpx;
|
||||
height: 88rpx;
|
||||
padding: 0 20rpx;
|
||||
background: rgba(40, 40, 40, 0.45);
|
||||
border-radius: 88rpx;
|
||||
border: 2rpx solid rgba(151, 151, 151, 0.53);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card .product-card-item {
|
||||
background: #DDDDDD;
|
||||
padding: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.product-card .product-image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
.product-card .product-name {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.product-card .product-price {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FF1919;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.product-card .product-close {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
top: -14rpx;
|
||||
}
|
||||
|
||||
.product-card .product-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 300rpx;
|
||||
height: 88rpx;
|
||||
padding: 0 20rpx;
|
||||
background: rgba(40, 40, 40, 0.45);
|
||||
border-radius: 88rpx;
|
||||
border: 2rpx solid rgba(151, 151, 151, 0.53);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.author {
|
||||
|
|
@ -202,6 +206,7 @@
|
|||
.comment-content {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
transition: all 0.35s linear;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 30rpx;
|
||||
border-top-right-radius: 30rpx;
|
||||
|
|
@ -232,12 +237,13 @@
|
|||
.comment-list {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.comment-scroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-list .comment-scroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
|
|
@ -269,9 +275,9 @@
|
|||
flex: 1;
|
||||
border: 2rpx solid #eee;
|
||||
border-radius: 16rpx;
|
||||
// padding-right: 16rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.pr-16 {
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
|
|
@ -335,7 +341,7 @@
|
|||
font-size: 30rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// 搜索
|
||||
/* 搜索 */
|
||||
.header-top {
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -345,13 +351,12 @@
|
|||
z-index: 9;
|
||||
width: 100%;
|
||||
}
|
||||
.header-top {
|
||||
::v-deep .search-bar {
|
||||
background:#D8D8D8;
|
||||
opacity: 0.27;
|
||||
border-color: transparent;
|
||||
}
|
||||
.header-top ::v-deep .search-bar {
|
||||
background:#D8D8D8;
|
||||
opacity: 0.27;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.keyboard-input {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -324,12 +324,15 @@
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
// 视频列表高度
|
||||
swiperStyle() {
|
||||
return this.show_comment_modal ? (this.move_distance > 0 ? `height: calc(30% + ${this.move_distance}px);` : 'height: 30%;') : 'height: 100%;';
|
||||
},
|
||||
// 评论内容区域高度
|
||||
commentContentStyle() {
|
||||
return this.show_comment_modal && this.move_distance > 0 ? `transform: translateY(3px); height: calc(70% + 20rpx - ${this.move_distance}px);` : `transform: translateY(0); height: calc(70% + 20rpx);`;
|
||||
},
|
||||
// 当前播放视频的索引
|
||||
current_video_index() {
|
||||
return this.video_data_list.findIndex(item => item.id == this.current_video_id);
|
||||
},
|
||||
|
|
@ -431,7 +434,10 @@
|
|||
|
||||
this.get_video_detail(this.current_video_id);
|
||||
},
|
||||
// 获取视频详情
|
||||
/*
|
||||
* 获取视频详情
|
||||
* @param {*} id 视频id
|
||||
*/
|
||||
get_video_detail(id) {
|
||||
// 获取数据
|
||||
uni.request({
|
||||
|
|
@ -468,7 +474,12 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
// 获取视频列表
|
||||
/*
|
||||
* 获取视频列表
|
||||
* @param {*} id 视频id
|
||||
* @param {*} is_last 是否获取上一批数据
|
||||
* @param {*} is_next 是否获取下一批数据
|
||||
*/
|
||||
get_last_or_next_data_list(id, is_last = 0, is_next = 0) {
|
||||
// 获取数据
|
||||
uni.request({
|
||||
|
|
@ -532,13 +543,14 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
// 更新所有视频信息
|
||||
this.setData({
|
||||
video_data_list: this.video_data_list,
|
||||
current_index: is_last == 1 && is_next == 1 ? (new_index == this.video_data_list.length - 1 ? 2 : (new_index == this.video_data_list.length - 2 ? 1 : 0)) : this.current_index,
|
||||
});
|
||||
|
||||
if (is_last == 1 && is_next == 1) {
|
||||
// 更新数据信息
|
||||
// 更新显示数据数据信息
|
||||
this.update_display_data();
|
||||
|
||||
setTimeout(() => {
|
||||
|
|
@ -723,7 +735,7 @@
|
|||
this.video_play_event(videoContext);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 更新分享信息
|
||||
update_share_info(data) {
|
||||
const info = {
|
||||
|
|
@ -737,11 +749,11 @@
|
|||
share_info: info,
|
||||
});
|
||||
// 分享菜单处理
|
||||
app.globalData.page_share_handle(info);
|
||||
|
||||
// 更新页面标题
|
||||
app.globalData.page_share_handle(info);
|
||||
|
||||
// 更新页面标题
|
||||
uni.setNavigationBarTitle({title: data.title});
|
||||
},
|
||||
},
|
||||
|
||||
// 安全的视频播放事件处理
|
||||
video_play_event(videoContext, is_first_play = false) {
|
||||
|
|
@ -788,7 +800,9 @@
|
|||
return this.video_data_list[index];
|
||||
},
|
||||
|
||||
// 更新显示数据
|
||||
/*
|
||||
* 更新显示的视频数据
|
||||
*/
|
||||
update_display_data() {
|
||||
let list = [];
|
||||
// 如果当前索引为0，只显示当前元素和下一个元素
|
||||
|
|
@ -815,12 +829,12 @@
|
|||
this.setData({
|
||||
display_video_list: list
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
// 评论输入框事件
|
||||
comment_input_event(e) {
|
||||
this.comment_input_value = e.detail.value;
|
||||
},
|
||||
},
|
||||
|
||||
// 图片上传回调
|
||||
upload_images_event(res) {
|
||||
|
|
@ -832,7 +846,7 @@
|
|||
size: res.size,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// 上传图片预览
|
||||
upload_show_event(e) {
|
||||
|
|
@ -840,7 +854,7 @@
|
|||
current: this.form_images_list[e.currentTarget.dataset.index].url,
|
||||
urls: this.form_images_list.map(item => item.url),
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
// 评论输入图片删除
|
||||
comment_input_img_close(e) {
|
||||
|
|
@ -850,8 +864,8 @@
|
|||
this.setData({
|
||||
form_images_list: list,
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
// swiper-item 的位置发生改变时
|
||||
on_transition(e) {
|
||||
const dy = e.detail.dy;
|
||||
|
|
@ -867,12 +881,12 @@
|
|||
direction: status,
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
// 播放
|
||||
handle_play() {
|
||||
this.setData({ paused: false, is_manual_pause: false });
|
||||
},
|
||||
},
|
||||
|
||||
// 收藏
|
||||
handle_like(e) {
|
||||
|
|
@ -997,7 +1011,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 评论
|
||||
send_comment() {
|
||||
let comment_text = this.comment_input_value;
|
||||
|
|
@ -1074,7 +1088,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
// 展开子评论
|
||||
open_sub_comment(id, is_level) {
|
||||
|
|
@ -1115,7 +1129,7 @@
|
|||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// 收起子评论
|
||||
close_sub_comment(id) {
|
||||
|
|
@ -1123,8 +1137,8 @@
|
|||
if (comment) {
|
||||
comment.show_sub_comment = false;
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
// 分享事件
|
||||
handle_share() {
|
||||
if ((this.$refs.share || null) != null) {
|
||||
|
|
@ -1133,7 +1147,7 @@
|
|||
share_info: this.share_info,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// 更新视频数据信息
|
||||
get_video_data_detail(id) {
|
||||
|
|
@ -1160,7 +1174,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
// 更新点赞数量
|
||||
set_givethumbs_num(id, comments_id) {
|
||||
|
|
@ -1228,8 +1242,22 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
// 主评论回复
|
||||
comment_reply(comments) {
|
||||
this.active_dropdown_id = null;
|
||||
if (!isEmpty(comments)) {
|
||||
this.setData({
|
||||
comments_data: comments,
|
||||
});
|
||||
}
|
||||
},
|
||||
// 删除评论数据
|
||||
comment_data_delete() {
|
||||
this.setData({
|
||||
comments_data: {},
|
||||
});
|
||||
},
|
||||
// 播放进度变化时触发
|
||||
handle_time_update(e) {
|
||||
if (this.is_seeking) return;
|
||||
|
|
@ -1249,29 +1277,16 @@
|
|||
current_video_progress: e.detail.currentTime,
|
||||
});
|
||||
},
|
||||
|
||||
// 视频进度条拖动时触发事件
|
||||
handle_slider_changing() {
|
||||
this.is_seeking = true;
|
||||
},
|
||||
// 主评论回复
|
||||
comment_reply(comments) {
|
||||
this.active_dropdown_id = null;
|
||||
if (!isEmpty(comments)) {
|
||||
this.setData({
|
||||
comments_data: comments,
|
||||
});
|
||||
}
|
||||
},
|
||||
comment_data_delete() {
|
||||
this.setData({
|
||||
comments_data: {},
|
||||
});
|
||||
},
|
||||
// 评论点赞
|
||||
comment_like(id) {
|
||||
this.active_dropdown_id = null;
|
||||
this.set_givethumbs_num(this.current_video_id, id);
|
||||
},
|
||||
// 视频进度条拖动完成触发事件
|
||||
handle_slider_change(e) {
|
||||
const seek_time = e.detail.value;
|
||||
if (this.create_video_contexts[this.current_index]) {
|
||||
|
|
@ -1284,7 +1299,7 @@
|
|||
this.is_seeking = false;
|
||||
}, 100);
|
||||
},
|
||||
|
||||
// 视频进度条时间显示
|
||||
format_time(seconds) {
|
||||
if (isNaN(seconds) || seconds < 0) {
|
||||
return '00:00';
|
||||
|
|
@ -1293,9 +1308,11 @@
|
|||
const sec = Math.floor(seconds % 60);
|
||||
return `${min < 10 ? '0' : ''}${min}:${sec < 10 ? '0' : ''}${sec}`;
|
||||
},
|
||||
// 返回上一页
|
||||
handle_back() {
|
||||
app.globalData.page_back_prev_event();
|
||||
},
|
||||
// 跳转搜索记录页面
|
||||
handle_search() {
|
||||
// 跳转到搜索记录页面
|
||||
app.globalData.url_open(`/pages/plugins/video/search-record/search-record`, false);
|
||||
|
|
@ -1312,6 +1329,7 @@
|
|||
video_data_list: this.video_data_list
|
||||
})
|
||||
},
|
||||
// 点击商品卡片触发事件
|
||||
handle_product_card_item(e) {
|
||||
const id = e?.currentTarget?.dataset?.id || '';
|
||||
const data = this.video_data_list.find(item => item.id == id);
|
||||
|
|
@ -1319,6 +1337,7 @@
|
|||
app.globalData.url_open(data.goods.goods_url);
|
||||
}
|
||||
},
|
||||
// 点击购买商品按钮触发事件
|
||||
handle_product_button(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
this.video_data_list.forEach((item, index) => {
|
||||
|
|
@ -1407,6 +1426,7 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
// 删除评论数据处理
|
||||
delete_comment_handle(comment_id) {
|
||||
// 删除成功，从active_comments中移除对应数据
|
||||
if (this.active_comments && Array.isArray(this.active_comments)) {
|
||||
|
|
@ -1489,23 +1509,6 @@
|
|||
current_sub_index: 0,
|
||||
});
|
||||
},
|
||||
// 新的举报弹窗相关方法
|
||||
onMain_reasonChange(e) {
|
||||
const value = parseInt(e.detail.value);
|
||||
this.setData({
|
||||
current_main_index: value,
|
||||
current_sub_index: -1,
|
||||
});
|
||||
},
|
||||
|
||||
onSub_reasonChange(e) {
|
||||
const value = parseInt(e.detail.value);
|
||||
if (this.current_main_index >= 0) {
|
||||
this.setData({
|
||||
current_sub_index: value,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 直接选择主原因（用于一行显示的点击）
|
||||
select_main_reason(e) {
|
||||
|
|
@ -1529,6 +1532,9 @@
|
|||
});
|
||||
}
|
||||
},
|
||||
/*
|
||||
* 提交举报
|
||||
*/
|
||||
submit_report() {
|
||||
// 获取选中的举报原因和具体类型
|
||||
const main_reason = this.report_type_list[this.current_main_index];
|
||||
|
|
@ -1560,6 +1566,7 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
// 键盘显示时，切换输入框
|
||||
add_comment() {
|
||||
//#ifndef H5
|
||||
this.is_add_comment = true;
|
||||
|
|
@ -1593,6 +1600,6 @@
|
|||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './detail.css';
|
||||
<style lang="scss" scoped>
|
||||
@import './detail.css';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,111 +7,111 @@
|
|||
/* 导航栏 */
|
||||
.nav-tabs {
|
||||
position: sticky;
|
||||
top: 110rpx;
|
||||
width: 100%;
|
||||
padding: 0 16rpx 20rpx 24rpx;
|
||||
z-index: 9;
|
||||
background: transparent; // 默认透明背景
|
||||
transition: background-color 0.3s ease; // 添加背景色过渡动画
|
||||
|
||||
&.nav-tabs-sticky {
|
||||
background: #fff; // 粘性状态时背景变白
|
||||
}
|
||||
|
||||
.tabs-scroll-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 48rpx;
|
||||
}
|
||||
.tab-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
background: transparent; /* 默认透明背景 */
|
||||
transition: background-color 0.3s ease; /* 添加背景色过渡动画 */
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #333333;
|
||||
}
|
||||
.nav-tabs.nav-tabs-sticky {
|
||||
background: #fff; /* 粘性状态时背景变白 */
|
||||
}
|
||||
|
||||
.tab-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background-color: #333;
|
||||
transition: width 0.6s ease;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.nav-tabs .tabs-scroll-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 48rpx;
|
||||
}
|
||||
.nav-tabs .tab-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
width: 52rpx;
|
||||
}
|
||||
.nav-tabs .tab-item.active {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav-tabs .tab-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background-color: #333;
|
||||
transition: width 0.6s ease;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #333;
|
||||
}
|
||||
.nav-tabs .tab-item.active::after {
|
||||
width: 52rpx;
|
||||
}
|
||||
|
||||
.nav-tabs .tab-item.active {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* #ifdef MP-WEIXIN | APP-PLUS */
|
||||
.tabs-scroll {
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 0rpx!important;
|
||||
height: 0rpx!important;
|
||||
background-color: transparent;
|
||||
}
|
||||
.tabs-scroll ::v-deep ::-webkit-scrollbar {
|
||||
width: 0rpx!important;
|
||||
height: 0rpx!important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
/* 推荐视频列表 */
|
||||
.recommend-videos {
|
||||
padding: 10rpx 24rpx 24rpx 24rpx;
|
||||
.video-grid {
|
||||
column-count: 2;
|
||||
column-gap: 20rpx;
|
||||
}
|
||||
|
||||
.video-card {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 20rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-thumbnail {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-info {
|
||||
padding: 20rpx;
|
||||
padding-top: 10rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.video-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.video-date,
|
||||
.video-likes {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-videos .video-grid {
|
||||
column-count: 2;
|
||||
column-gap: 20rpx;
|
||||
}
|
||||
|
||||
.recommend-videos .video-card {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 20rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.recommend-videos .video-thumbnail {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.recommend-videos .video-info {
|
||||
padding: 20rpx;
|
||||
padding-top: 10rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.recommend-videos .video-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.recommend-videos .video-date,
|
||||
.recommend-videos .video-likes {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.tabs-scroll-image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</view>
|
||||
<template v-if="tabs.length > 0">
|
||||
<!-- 导航栏 -->
|
||||
<view class="nav-tabs" :class="{ 'nav-tabs-sticky': is_nav_sticky }">
|
||||
<view class="nav-tabs" :class="{ 'nav-tabs-sticky': is_nav_sticky }" :style="nav_sticky_style">
|
||||
<scroll-view scroll-x :show-scrollbar="false" class="tabs-scroll nowrap">
|
||||
<view class="tabs-scroll-content">
|
||||
<view v-for="(item, index) in tabs" :key="index" class="tab-item flex-row align-c gap-5" :class="{ active: current_tabs_index === index }" :data-index="index" :data-id="item.id" @tap="switch_tab">
|
||||
|
|
@ -110,7 +110,13 @@ export default {
|
|||
header_padding_left: '',
|
||||
slider_list: [],
|
||||
is_nav_sticky: false, // 控制nav-tabs是否处于粘性状态
|
||||
nav_sticky_threshold: 50 // 粘性阈值，与CSS中的top值对应
|
||||
// #ifdef H5 || MP-TOUTIAO
|
||||
nav_sticky_threshold: 55, // 粘性阈值，与CSS中的top值对应
|
||||
// #endif
|
||||
// #ifdef MP || APP
|
||||
nav_sticky_threshold: bar_height + 53, // 粘性阈值，与CSS中的top值对应
|
||||
// #endif
|
||||
nav_sticky_style: '',
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
|
|
@ -242,9 +248,12 @@ export default {
|
|||
// 滚动事件处理
|
||||
on_scroll_event(e) {
|
||||
const scrollTop = e.detail.scrollTop;
|
||||
console.log(this.nav_sticky_threshold);
|
||||
|
||||
// 当滚动距离大于等于阈值时，设置nav-tabs为粘性状态（背景变白）
|
||||
this.setData({
|
||||
is_nav_sticky: scrollTop >= this.nav_sticky_threshold
|
||||
is_nav_sticky: scrollTop >= this.nav_sticky_threshold,
|
||||
nav_sticky_style: 'top:' + this.nav_sticky_threshold * 2 + 'rpx;',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,78 +13,32 @@
|
|||
}
|
||||
|
||||
/* #ifdef MP-WEIXIN | APP-PLUS */
|
||||
.tabs-scroll {
|
||||
::v-deep ::-webkit-scrollbar
|
||||
{
|
||||
.tabs-scroll ::v-deep ::-webkit-scrollbar {
|
||||
width: 0rpx!important;
|
||||
height: 0rpx!important;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
/* 推荐视频列表 */
|
||||
.recommend-videos {
|
||||
padding: 0 16rpx 20rpx 16rpx;
|
||||
.video-grid {
|
||||
column-count: 2;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.video-card {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-thumbnail {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-info {
|
||||
padding: 20rpx;
|
||||
padding-top: 10rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.video-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.video-date,
|
||||
.video-likes {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-history {
|
||||
padding: 20rpx 40rpx 24rpx 40rpx;
|
||||
gap: 40rpx;
|
||||
border-bottom: 2rpx solid #EDEDED;
|
||||
.search-history-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.more-history-btn {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
line-height: 40rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-history .search-history-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.search-history .more-history-btn {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
line-height: 40rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 热门搜索 */
|
||||
|
|
@ -96,11 +50,12 @@
|
|||
.hot-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
.tabs-scroll-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hot-tabs .tabs-scroll-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.hot-tab-item {
|
||||
|
|
|
|||
|
|
@ -14,117 +14,120 @@
|
|||
width: 100%;
|
||||
padding: 0 24rpx 20rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
.tabs-scroll-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
gap: 48rpx;
|
||||
}
|
||||
.nav-tabs-filter {
|
||||
padding-top: 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tab-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 16rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #333333;
|
||||
}
|
||||
.nav-tabs .tabs-scroll-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
gap: 48rpx;
|
||||
}
|
||||
.nav-tabs .nav-tabs-filter {
|
||||
padding-top: 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-tabs .tab-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 16rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.nav-tabs .tab-item.active {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tab-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background-color: #333;
|
||||
transition: width 0.6s ease;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.nav-tabs .tab-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background-color: #333;
|
||||
transition: width 0.6s ease;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
width: 52rpx;
|
||||
}
|
||||
.nav-tabs .tab-item.active::after {
|
||||
width: 52rpx;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #333;
|
||||
}
|
||||
.nav-tabs .tab-item.active {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.nav-tabs {
|
||||
align-items: center;
|
||||
.nav-tabs-filter {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.nav-tabs .nav-tabs-filter {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifdef MP-WEIXIN | APP-PLUS */
|
||||
.tabs-scroll {
|
||||
::v-deep ::-webkit-scrollbar
|
||||
{
|
||||
width: 0rpx!important;
|
||||
height: 0rpx!important;
|
||||
background-color: transparent;
|
||||
}
|
||||
.tabs-scroll ::v-deep ::-webkit-scrollbar {
|
||||
width: 0rpx!important;
|
||||
height: 0rpx!important;
|
||||
background-color: transparent;
|
||||
}
|
||||
/* #endif */
|
||||
/* 推荐视频列表 */
|
||||
.recommend-videos {
|
||||
padding: 20rpx 0;
|
||||
.video-grid {
|
||||
padding: 0 24rpx;
|
||||
column-count: 2;
|
||||
column-gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-card {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.recommend-videos .video-grid {
|
||||
padding: 0 24rpx;
|
||||
column-count: 2;
|
||||
column-gap: 10px;
|
||||
/* 添加这些样式确保滚动事件能正常触发 */
|
||||
min-height: 100%;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.video-thumbnail {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.recommend-videos .video-card {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-info {
|
||||
padding: 20rpx;
|
||||
padding-top: 10rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.recommend-videos .video-thumbnail {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.video-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.recommend-videos .video-info {
|
||||
padding: 20rpx;
|
||||
padding-top: 10rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.video-date,
|
||||
.video-likes {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
.recommend-videos .video-title {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.recommend-videos .video-date,
|
||||
.recommend-videos .video-likes {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
/* 筛选条件弹窗样式 */
|
||||
|
|
@ -168,14 +171,14 @@
|
|||
.nav-list-more {
|
||||
padding: 20rpx 40rpx;
|
||||
}
|
||||
::v-deep .popup {
|
||||
.popup-mask {
|
||||
z-index: 8 !important;
|
||||
}
|
||||
.popup-content {
|
||||
z-index: 8 !important;
|
||||
}
|
||||
::v-deep .popup .popup-content {
|
||||
z-index: 8 !important;
|
||||
}
|
||||
::v-deep .popup .popup-mask {
|
||||
z-index: 8 !important;
|
||||
}
|
||||
.recommend-scroll {
|
||||
height: calc(100vh - 223rpx);
|
||||
/* 使用更精确的高度计算 */
|
||||
height: calc(100vh - 240rpx); /* 增加一些高度确保滚动空间 */
|
||||
min-height: 500px; /* 设置最小高度 */
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view class="wh-auto ht-auto pr video-container">
|
||||
<view class="wh-auto ht-auto pr">
|
||||
<template v-if="tabs.length > 0">
|
||||
<template v-if="category_list.length > 0">
|
||||
<!-- 搜索框 -->
|
||||
<view class="header-top">
|
||||
<view class="header-search" :style="top_content_style + menu_button_info">
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</view>
|
||||
<!-- 推荐视频卡片区域 -->
|
||||
<view class="recommend-videos">
|
||||
<scroll-view scroll-y :show-scrollbar="false" class="recommend-scroll" @scrolltolower="on_scroll_lower_event" lower-threshold="60" scroll-with-animation="true">
|
||||
<scroll-view scroll-y :show-scrollbar="false" class="recommend-scroll" @scrolltolower="on_scroll_lower_event" lower-threshold="150" scroll-with-animation="true" enhanced="true">
|
||||
<template v-if="recommend_videos.length > 0">
|
||||
<view class="video-grid">
|
||||
<view v-for="(item, index) in recommend_videos" :key="index" class="video-card" :data-id="item.id" @tap="navigate_to_detail">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<view class="video-date">{{ item.add_time_date }}</view>
|
||||
<view class="video-likes flex-row align-c gap-4">
|
||||
<iconfont name="icon-givealike-o-fine" size="24rpx"></iconfont>
|
||||
<text>{{ item.access_count }}</text>
|
||||
<text>{{ item.give_thumbs_count }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -125,7 +125,6 @@ export default {
|
|||
top_content_style: 'padding-top:' + bar_height + 'px;padding-bottom:10px;',
|
||||
// #endif
|
||||
search_query: '',
|
||||
tabs: ['推荐', 'DIV装修', '商城管理', '多商户', '多门店', '客服','多门店', '客服'],
|
||||
currentTab: 0,
|
||||
recommend_videos: [],
|
||||
isLoadingMore: false,
|
||||
|
|
@ -212,6 +211,7 @@ export default {
|
|||
// 初始化搜索页数据
|
||||
this.init_data();
|
||||
},
|
||||
// 获取初始化数据
|
||||
init_data () {
|
||||
uni.request({
|
||||
url: app.globalData.get_request_url("searchinit", "index", "video"),
|
||||
|
|
@ -254,9 +254,11 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 返回上一页
|
||||
handle_back() {
|
||||
app.globalData.page_back_prev_event();
|
||||
},
|
||||
// 搜索按钮点击事件
|
||||
handle_search(e) {
|
||||
this.setData({
|
||||
search_query: e,
|
||||
|
|
@ -313,8 +315,8 @@ export default {
|
|||
this.setData({
|
||||
recommend_videos: this.recommend_videos,
|
||||
page: new_page,
|
||||
page_total: data.page_total,
|
||||
goods_bottom_line_status: new_page >= data.page_total,
|
||||
page_total: responseData.page_total,
|
||||
goods_bottom_line_status: new_page >= responseData.page_total,
|
||||
data_list_loding_status: 0
|
||||
})
|
||||
} else {
|
||||
|
|
@ -341,34 +343,12 @@ export default {
|
|||
}
|
||||
},
|
||||
on_scroll_lower_event() {
|
||||
debugger;
|
||||
this.load_more();
|
||||
},
|
||||
load_more() {
|
||||
debugger;
|
||||
// 加载更多数据的逻辑
|
||||
if (this.is_more_loading) {
|
||||
// 添加额外的检查条件
|
||||
if (this.page >= this.page_total) {
|
||||
return;
|
||||
}
|
||||
this.is_more_loading = true;
|
||||
setTimeout(() => {
|
||||
// 假设这里加载了更多的视频数据
|
||||
const data = this.recommend_videos;
|
||||
const newVideos = [
|
||||
{
|
||||
thumbnail_url: 'http://shopxo.com/static/upload/images/plugins_homemiddleadv/2019/04/22/1555929400479636.jpg',
|
||||
title: '新视频标题',
|
||||
date: '2025-06-13',
|
||||
likes: 1500,
|
||||
detailId: '5'
|
||||
}
|
||||
];
|
||||
data.push(...newVideos);
|
||||
this.setData({
|
||||
recommend_videos: data,
|
||||
is_more_loading: false,
|
||||
});
|
||||
}, 20000);
|
||||
// 加载更多数据
|
||||
this.load_recommend_videos();
|
||||
},
|
||||
toggle_filter_popup() {
|
||||
this.filter_popup_status = !this.filter_popup_status;
|
||||
|
|
|
|||
Loading…
Reference in New Issue