diff --git a/pages/plugins/video/detail/detail.css b/pages/plugins/video/detail/detail.css index 3e02f7df..257bcab6 100644 --- a/pages/plugins/video/detail/detail.css +++ b/pages/plugins/video/detail/detail.css @@ -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; diff --git a/pages/plugins/video/detail/detail.vue b/pages/plugins/video/detail/detail.vue index 6e13dd7f..90f99907 100644 --- a/pages/plugins/video/detail/detail.vue +++ b/pages/plugins/video/detail/detail.vue @@ -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 @@ } }; - diff --git a/pages/plugins/video/index/index.css b/pages/plugins/video/index/index.css index dd0f223f..e837d2dc 100644 --- a/pages/plugins/video/index/index.css +++ b/pages/plugins/video/index/index.css @@ -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; diff --git a/pages/plugins/video/index/index.vue b/pages/plugins/video/index/index.vue index affe03ca..65bacf06 100644 --- a/pages/plugins/video/index/index.vue +++ b/pages/plugins/video/index/index.vue @@ -23,7 +23,7 @@