diff --git a/pages/plugins/video/detail/detail.vue b/pages/plugins/video/detail/detail.vue
index 782b0f24..45a73c4c 100644
--- a/pages/plugins/video/detail/detail.vue
+++ b/pages/plugins/video/detail/detail.vue
@@ -1,10 +1,21 @@
-
+
+
+
-
-
-
+
+
+
▶
@@ -18,22 +29,30 @@
{{ video_item.comment_obj.count }}
-
+
分享
-
- @{{ video_item.userNick }}
- {{ video_item.videoContent }}
+
+
+
+
+
+ 张博士防辐射近视眼镜
+ ¥210.00
+
+
+
+
-
- {{ formatTime(current_video_progress) }} / {{ formatTime(current_video_duration) }}
+
+ {{ format_time(current_video_progress) }} / {{ format_time(current_video_duration) }}
@@ -96,6 +115,8 @@
+
+
@@ -106,14 +127,33 @@
import loadingComponent from '@/pages/plugins/video/components/loading.vue';
import commentInfoComponent from '@/pages/plugins/video/components/comment-info.vue';
import commentMoreComponent from '@/pages/plugins/video/components/comment-more.vue';
+ import searchComponent from '@/pages/plugins/video/components/search.vue';
+ import componentSharePopup from '@/components/share-popup/share-popup';
+ // 状态栏高度
+ var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
+ // #ifdef MP-TOUTIAO
+ bar_height = 0;
+ // #endif
export default {
components: {
loadingComponent,
commentInfoComponent,
- commentMoreComponent
+ commentMoreComponent,
+ searchComponent,
+ componentSharePopup
},
data() {
return {
+ // 5,7,0 是误差,10 是下边距,bar_height是不同小程序下的导航栏距离顶部的高度
+ // #ifdef MP
+ top_content_style: 'padding-top:' + (bar_height + 5) + 'px;padding-bottom:10px;',
+ // #endif
+ // #ifdef H5 || MP-TOUTIAO
+ top_content_style: 'padding-top:' + (bar_height + 7) + 'px;padding-bottom:10px;',
+ // #endif
+ // #ifdef APP
+ top_content_style: 'padding-top:' + bar_height + 'px;padding-bottom:10px;',
+ // #endif
videoData: videoList,
display_video_list: [],
current_index: 0,
@@ -135,6 +175,9 @@
comment_input_value: '',
propMaxNum: 1,
form_images_list: [],
+ menu_button_info: '',
+ share_info: {},
+ params: {},
};
},
computed: {
@@ -152,22 +195,66 @@
return this.videoData[0].id == this.current_video_id || this.videoData[this.videoData.length - 1].id == this.current_video_id;
}
},
- onLoad() {
- // 初始化显示数据
- this.init_display_data();
- },
- onReady() {
- this.videoData.forEach((item, index) => {
- this.video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
+ onLoad(params) {
+ // 调用公共事件方法
+ app.globalData.page_event_onload_handle(params);
+
+ // 设置参数
+ this.setData({
+ params: app.globalData.launch_params_handle(params),
});
- setTimeout(() => {
- if (this.video_contexts[0]) { // 当前播放的视频索引为0
- this.video_contexts[0].play();
- }
- }, 200);
+ },
+ mounted() {
+ this.init();
},
methods: {
isEmpty,
+ init() {
+ // 初始化显示数据
+ this.init_display_data();
+ // 更新分享信息
+ this.update_share_info(this.display_video_list[0]);
+
+ this.display_video_list.forEach((item, index) => {
+ this.video_contexts[index] = uni.createVideoContext(`video_${index}`, this);
+ });
+ setTimeout(() => {
+ if (this.video_contexts[0]) { // 当前播放的视频索引为0
+ this.video_contexts[0].play();
+ }
+ }, 200);
+ // 小程序下,获取小程序胶囊的宽度
+ let menu_button_info = 'max-width:100%';
+ // #ifndef MP-TOUTIAO
+ // #ifdef MP
+ // 判断是否有胶囊
+ const is_current_single_page = app.globalData.is_current_single_page();
+ // 如果有胶囊的时候,做处理
+ if (is_current_single_page == 0) {
+ const custom = uni.getMenuButtonBoundingClientRect();
+ menu_button_info = `max-width:calc(100% - ${custom.width + 10}px);`;
+ this.get_top_content_style(custom.height);
+ }
+ // #endif
+ // #endif
+ this.setData({
+ menu_button_info: menu_button_info,
+ });
+ },
+ update_share_info(data) {
+ const info = {
+ title: data.title || '',
+ desc: data.desc || '',
+ path: '/pages/plugins/video/detail/detail',
+ query: app.globalData.json_to_url_params(this.params),
+ img: data.poster_url || ''
+ }
+ this.setData({
+ share_info: info,
+ });
+ // 分享菜单处理
+ app.globalData.page_share_handle(info);
+ },
// 初始化显示数据
init_display_data() {
this.current_video_id = this.videoData[0].id;
@@ -177,7 +264,32 @@
this.getVideoByIndex(2) // 下两个元素
];
},
-
+ get_top_content_style(custom_height) {
+ // 获取搜索区域的高度
+ setTimeout(() => {
+ const query = uni.createSelectorQuery().in(this);
+ // 选择我们想要的元素
+ query.select('.search-height').boundingClientRect((res) => {
+ if ((res || null) != null) {
+ // 判断搜索跟胶囊的大小间隔
+ const top_height = custom_height == 0 ? 0 : (res.height - custom_height) / 2;
+ let top_content_style = '';
+ // #ifdef MP
+ top_content_style = 'padding-top:' + (bar_height + 5 - top_height) + 'px;padding-bottom:10px;';
+ // #endif
+ // #ifdef H5 || MP-TOUTIAO
+ top_content_style = 'padding-top:' + (bar_height + 7 - top_height) + 'px;padding-bottom:10px;';
+ // #endif
+ // #ifdef APP
+ top_content_style = 'padding-top:' + bar_height - top_height + 'px;padding-bottom:10px;';
+ // #endif
+ this.setData({
+ top_content_style: top_content_style
+ });
+ }
+ }).exec(); // 执行查询
+ }, 500);
+ },
// 安全获取视频数据的方法,处理索引超限情况
getVideoByIndex(index) {
// 处理负数索引
@@ -323,12 +435,13 @@
if (this.video_contexts[previousIndex]) {
this.video_contexts[previousIndex].pause();
}
-
- this.current_index = current;
- this.paused = false;
- this.current_video_progress = 0;
- this.current_video_duration = 0;
- this.is_seeking = false;
+ this.setData({
+ current_index: current,
+ paused: false,
+ current_video_progress: 0,
+ current_video_duration: 0,
+ is_seeking: false,
+ })
// 更新当前播放视频的ID
this.current_video_id = this.display_video_list[current].id;
// 当滑动到边界时更新显示数据
@@ -364,6 +477,8 @@
// 预加载当前index之后的视频
this.update_display_data();
}
+ // 更新分享信息
+ this.update_share_info(this.display_video_list[current]);
setTimeout(() => {
// 播放当前视频
@@ -424,7 +539,7 @@
// 评论拖拽开始
handle_comment_touch_start(e) {
// 只有滚动到顶部时才允许拖拽
- if (this.comment_scroll_top === 0) {
+ if (this.comment_scroll_top <= 5) {
this.comment_start_y = e.touches[0].pageY;
this.comment_current_y = this.comment_start_y;
this.move_distance = 0;
@@ -433,7 +548,7 @@
// 评论拖拽中
handle_comment_touch_move(e) {
// 只有滚动到顶部时才允许拖拽
- if (this.comment_scroll_top === 0) {
+ if (this.comment_scroll_top <= 5) {
this.comment_current_y = e.touches[0].pageY;
this.move_distance = this.comment_current_y - this.comment_start_y;
}
@@ -442,7 +557,7 @@
// 评论拖拽结束
handle_comment_touch_end(e) {
// 只有滚动到顶部时才允许拖拽
- if (this.comment_scroll_top === 0) {
+ if (this.comment_scroll_top <= 5) {
const move_distance = this.comment_current_y - this.comment_start_y;
// 如果拖拽距离足够大,关闭评论弹窗
if (move_distance > 150) {
@@ -526,19 +641,25 @@
comment.show_sub_comment = false;
}
},
- handle_share(video) {
- uni.showToast({
- title: '分享',
- icon: 'none'
- });
+ handle_share() {
+ if ((this.$refs.share || null) != null) {
+ this.$refs.share.init({
+ status: true,
+ share_info: this.share_info,
+ });
+ }
},
handle_time_update(e) {
if (this.is_seeking) return;
+ let duration = this.current_video_duration;
if (e.detail.duration > 0 && this.current_video_duration === 0) {
- this.current_video_duration = e.detail.duration;
+ duration = e.detail.duration;
}
- this.current_video_progress = e.detail.currentTime;
+ this.setData({
+ current_video_duration: duration,
+ current_video_progress: e.detail.currentTime,
+ });
},
handle_slider_changing() {
@@ -598,13 +719,24 @@
}, 100);
},
- formatTime(seconds) {
+ format_time(seconds) {
if (isNaN(seconds) || seconds < 0) {
return '00:00';
}
const min = Math.floor(seconds / 60);
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/search-record`, false);
+ },
+ // 关闭推荐商品
+ product_close_event() {
+ console.log('121245');
}
}
};
@@ -642,7 +774,7 @@
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
- font-size: 160rpx;
+ font-size: 80rpx;
color: rgba(255, 255, 255, 0.6);
}
@@ -681,19 +813,60 @@
margin-top: 10rpx;
}
- .bottom-info {
+ .product-card {
position: absolute;
+ width: 440rpx;
bottom: 180rpx;
left: 30rpx;
color: #fff;
- text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
+ padding: 16rpx;
+ background: #DDDDDD;
+ border-radius: 8rpx;
z-index: 10;
+ .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;
+ }
}
.author {
font-size: 36rpx;
font-weight: bold;
}
+ ::v-deep .uni-video-container {
+ background: transparent;
+ }
+ .video-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ background: #000;
+ background-size: cover;
+ background-position: center;
+ transform: scale(3);
+ filter: blur(100rpx);
+ opacity: 0.7;
+ }
.video-content {
display: block;
@@ -704,9 +877,9 @@
.progress-bar-container {
position: absolute;
- bottom: 120rpx;
- left: 30rpx;
- right: 30rpx;
+ bottom: 60rpx;
+ left: 20rpx;
+ right: 20rpx;
display: flex;
align-items: center;
z-index: 11;
@@ -824,5 +997,23 @@
width: 50rpx;
height: 50rpx;
}
+
+ // 搜索
+ .header-top {
+ padding-left: 12px;
+ box-sizing: border-box;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 9;
+ width: 100%;
+ }
+ .header-top {
+ ::v-deep .search-bar {
+ background:#D8D8D8;
+ opacity: 0.27;
+ border-color: transparent;
+ }
+ }
diff --git a/pages/plugins/video/detail/video_list.json b/pages/plugins/video/detail/video_list.json
index e54ccc70..8a903f4e 100644
--- a/pages/plugins/video/detail/video_list.json
+++ b/pages/plugins/video/detail/video_list.json
@@ -6,7 +6,7 @@
"videoContent": "第一条视频",
"fabulous_count": 1,
"videoUrl": "http://8.146.211.120:8080/upload/douyin/e6fddef474951cc15f5aeb99219b4a91.mp4",
- "posterUrl": "http://8.146.211.120:8080/upload/notes/ce5082f76cc9bd82a2bd97ce8b45ea32.jpg",
+ "poster_url": "http://8.146.211.120:8080/upload/notes/ce5082f76cc9bd82a2bd97ce8b45ea32.jpg",
"userHead": "http://8.146.211.120:8080/upload/notes/8f5ebdab07f9fb592895bd3f0f230ea9.jpg",
"comment_obj": {
"count": 2,
@@ -49,7 +49,7 @@
"videoContent": "第二条视频",
"fabulous_count": 1,
"videoUrl": "http://8.146.211.120:8080/upload/douyin/0985b0f3879c7dca9f6c1c6fb59d4a79.mp4",
- "posterUrl": "http://8.146.211.120:8080/upload/background/dab42015a50709f68a75306a572aaaca.jpg",
+ "poster_url": "http://8.146.211.120:8080/upload/background/dab42015a50709f68a75306a572aaaca.jpg",
"userHead": "http://8.146.211.120:8080/upload/background/735feb718119ea7e5f206be7b4410dd6.jpg",
"comment_obj": {
"count": 0,
@@ -63,7 +63,7 @@
"videoContent": "第三条视频内容",
"fabulous_count": 1,
"videoUrl": "http://8.146.211.120:8080/upload/douyin/a4832a9a37b44196b49c646db148ec65.mp4",
- "posterUrl": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
+ "poster_url": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
"userHead": "http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg",
"comment_obj": {
"count": 1,
@@ -85,7 +85,7 @@
"videoContent": "第四条视频内容",
"fabulous_count": 1,
"videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4",
- "posterUrl": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
+ "poster_url": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
"userHead": "http://8.146.211.120:8080/upload/notes/b11b2d741a5132b0d733a9861c9f6c7c.jpg",
"comment_obj": {
"count": 1,
@@ -107,7 +107,7 @@
"videoContent": "第五条视频内容",
"fabulous_count": 1,
"videoUrl": "http://shopxo.com/static/upload/video/goods/2019/01/14/1547458876723311.mp4",
- "posterUrl": "",
+ "poster_url": "",
"userHead": "",
"comment_obj": {
"count": 1,
@@ -129,7 +129,7 @@
"videoContent": "第六条视频内容",
"fabulous_count": 1,
"videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267246598639.mp4",
- "posterUrl": "",
+ "poster_url": "",
"userHead": "",
"comment_obj": {
"count": 1,
@@ -151,7 +151,7 @@
"videoContent": "第七条视频内容",
"fabulous_count": 1,
"videoUrl": "http://8.146.211.120:8080/upload/douyin/a4832a9a37b44196b49c646db148ec65.mp4",
- "posterUrl": "",
+ "poster_url": "",
"userHead": "",
"comment_obj": {
"count": 1,
@@ -173,7 +173,7 @@
"videoContent": "第八条视频内容",
"fabulous_count": 1,
"videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4",
- "posterUrl": "",
+ "poster_url": "",
"userHead": "",
"comment_obj": {
"count": 1,
diff --git a/pages/plugins/video/index/index.vue b/pages/plugins/video/index/index.vue
index 86ec3f42..1ce3d33d 100644
--- a/pages/plugins/video/index/index.vue
+++ b/pages/plugins/video/index/index.vue
@@ -184,7 +184,7 @@ export default {
},
navigate_to_detail(e) {
const item = e.currentTarget.dataset.value;
- app.globalData.url_open(`/pages/plugins/video/detail/detail?videoId=${item.detailId}`, false);
+ app.globalData.url_open(`/pages/plugins/video/detail/detail?id=${item.detailId}`, false);
},
on_scroll_lower_event() {
this.loadMore();
@@ -279,7 +279,7 @@ export default {
/* #endif */
/* 推荐视频列表 */
.recommend-videos {
- padding: 0 16rpx 20rpx 16rpx;
+ padding: 20rpx 16rpx;
.video-grid {
column-count: 2;
column-gap: 10px;
diff --git a/pages/plugins/video/search/search-record.vue b/pages/plugins/video/search/search-record.vue
index 805d67a3..e3bd43f5 100644
--- a/pages/plugins/video/search/search-record.vue
+++ b/pages/plugins/video/search/search-record.vue
@@ -4,7 +4,7 @@