sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改视频播放逻辑

master
于肖磊 2025-09-17 15:57:42 +08:00
parent 714bfd4c9b
commit f876295964
7 changed files with 141 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pages.json
View File

@ -2035,28 +2035,40 @@
{
"path": "index/index",
"style": {
"enablePullDownRefresh": true,
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
"navigationStyle": "custom",
// #endif
"enablePullDownRefresh": false,
"navigationBarTitleText": ""
}
},
{
"path": "detail/detail",
"style": {
"enablePullDownRefresh": true,
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
"navigationStyle": "custom",
// #endif
"enablePullDownRefresh": false,
"navigationBarTitleText": ""
}
},
{
"path": "search/search-record",
"style": {
"enablePullDownRefresh": true,
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
"navigationStyle": "custom",
// #endif
"enablePullDownRefresh": false,
"navigationBarTitleText": ""
}
},
{
"path": "search/search",
"style": {
"enablePullDownRefresh": true,
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
"navigationStyle": "custom",
// #endif
"enablePullDownRefresh": false,
"navigationBarTitleText": ""
}
}

2
pages/plugins/video/components/loading.vue
View File

@ -12,7 +12,7 @@
<script>
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.more-history-btn {
font-weight: 400;
font-size: 28rpx;

6
pages/plugins/video/components/search.vue
View File

@ -1,7 +1,9 @@
<template>
<view class="search-bar pr">
<view v-if="propsIsDisabled" class="search-mask" @tap="disabled_search"></view>
<view class="search-iconfont-container">
<iconfont name="icon-search-fine"></iconfont>
</view>
<input type="text" v-model="search_query" placeholder="请输入您的搜索内容" @input="handle_search" />
<view class="search-line"></view>
<view class="search-button" @tap="perform_search">搜索</view>
@ -58,7 +60,7 @@ export default {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
/* 搜索框 */
.search-bar {
display: flex;
@ -68,7 +70,7 @@ export default {
border: 2rpx solid #313131;
height: 100%;
margin: 0 24rpx;
.iconfont-container {
.search-iconfont-container {
padding: 16rpx 30rpx;
padding-right: 20rpx;
}

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

@ -258,7 +258,7 @@
};
</script>
<style>
<style lang="scss" scoped>
.content,
.swiper-container,
swiper-item,

38
pages/plugins/video/index/index.vue
View File

@ -4,9 +4,11 @@
<view class="wh-auto ht-auto pr">
<!-- 搜索框 -->
<view class="header-top">
<view class="wh-auto ht-auto" :style="top_content_style">
<view class="ht-auto" :style="top_content_style + menu_button_info">
<view class="search-height">
<search-component :propsSearchQuery="search_query" :propsIsDisabled="true" @disabledSearch="handle_search"/>
</view>
</view>
<template v-if="recommend_videos.length > 0">
<!-- 导航栏 -->
@ -80,6 +82,7 @@ export default {
isLoadingMore: false,
data_list_loding_status: 1,
data_list_loding_msg: '',
menu_button_info: '',
};
},
mounted() {
@ -97,11 +100,13 @@ export default {
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
setTimeout(() => {
this.setData({
menu_button_info: menu_button_info,
data_list_loding_status: 0,
recommend_videos: [
{
@ -136,6 +141,32 @@ export default {
});
}, 10000);
},
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);
},
handle_search() {
// 跳转到搜索记录页面
app.globalData.url_open(`/pages/plugins/video/search/search-record`, false);
@ -185,7 +216,7 @@ export default {
};
</script>
<style>
<style lang="scss" scoped>
.header-top {
position: sticky;
top: 0;
@ -239,8 +270,7 @@ export default {
/* #ifdef MP-WEIXIN | APP-PLUS */
.tabs-scroll {
::v-deep ::-webkit-scrollbar
{
::v-deep ::-webkit-scrollbar {
width: 0rpx!important;
height: 0rpx!important;
background-color: transparent;

41
pages/plugins/video/search/search-record.vue
View File

@ -1,14 +1,16 @@
<template>
<view class="wh-auto ht pr search-record-container">
<!-- 搜索框 -->
<view class="header-top flex-row align-c">
<view class="header-top" :style="top_content_style + menu_button_info">
<view class="search-height flex-row align-c">
<view class="cp" @tap="handle_back">
<iconfont name="icon-arrow-left " size="32rpx" color="#333" class="mr-10"></iconfont>
</view>
<view class="wh-auto ht-auto" :style="top_content_style">
<view class="wh-auto ht-auto">
<search-component :propsSearchQuery="search_query" @search="handle_search" />
</view>
</view>
</view>
<!-- 搜索历史记录 -->
<view class="search-history flex-col jc-c align-c">
<view v-for="(history, index) in search_history" :key="index" class="wh-auto history-item flex-row align-c jc-sb">
@ -115,9 +117,39 @@ export default {
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
});
},
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);
},
// 返回
handle_back() {
@ -154,7 +186,7 @@ export default {
};
</script>
<style>
<style lang="scss" scoped>
.search-record-container {
background: #fff;
}
@ -164,7 +196,8 @@ export default {
top: 0;
background: #fff;
z-index: 9;
padding-left: 40rpx;
padding-left: 24rpx;
box-sizing: border-box;
}
/* #ifdef MP-WEIXIN | APP-PLUS */

42
pages/plugins/video/search/search.vue
View File

@ -4,14 +4,16 @@
<view class="wh-auto ht-auto pr">
<!-- 搜索框 -->
<view class="header-top">
<view class="header-search flex-row align-c">
<view class="header-search" :style="top_content_style + menu_button_info">
<view class="search-height flex-row align-c">
<view class="cp" @tap="handle_back">
<iconfont name="icon-arrow-left " size="32rpx" color="#333" class="mr-10"></iconfont>
</view>
<view class="wh-auto ht-auto" :style="top_content_style">
<view class="wh-auto ht-auto">
<search-component :propsSearchQuery="search_query" @search="handle_search" />
</view>
</view>
</view>
<!-- 导航栏 -->
<view class="nav-tabs flex-row align-s jc-sb gap-10">
<view class="tabs-scroll-content">
@ -174,10 +176,13 @@ export default {
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,
});
// 获取头部的高度
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
@ -195,6 +200,32 @@ export default {
.exec(); // 执行查询
}, 500);
},
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);
},
handle_search(e) {
this.search_query = e;
if (this.search_query.trim() == '') {
@ -269,7 +300,7 @@ export default {
};
</script>
<style>
<style lang="scss" scoped>
.header-top {
position: sticky;
top: 0;
@ -277,7 +308,8 @@ export default {
z-index: 9;
}
.header-search {
margin-left: 24rpx;
padding-left: 24rpx;
box-sizing: border-box;
}
/* 导航栏 */
.nav-tabs {