乡村旅居视频播放 筑农详情顶部优化

src/pages.json

@@ -174,7 +174,10 @@
 		{
 			"path": "pages/assistingAgriculture/detail/detail",
 			"style": {
-				"navigationBarTitleText": "详情页"
+				"navigationBarTitleText": "商品详情",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationStyle": "custom",
+				"onReachBottomDistance": 50,
 			}
 		},
 		{
@@ -264,4 +267,4 @@
 	"globalStyle": {
 		"navigationStyle": "custom"
 	}
-}
\ No newline at end of file
+}

src/pages/assistingAgriculture/RuralTravel/RuralTravel.vue

@@ -55,15 +55,16 @@
             style="width: 32rpx; height: 32rpx"
           />
           <video
+            :class="{ 'no-progress-bar': !isFullScreen }"
+            :show-fullscreen-btn="true"
+            :show-play-btn="true"
+            :show-enter-play-btn="true"
             class="spe-img1"
             id="videoId"
             :src="videoList[0].videoUrl"
             @error="videoErrorCallback"
-            :danmu-list="danmuList"
-            enable-danmu
-            danmu-btn
             @play="play"
-            @fullscreenchange="fullscreenchange"
+            @fullscreenchange="handleFullscreenChange"
           ></video>
           <!--          <img-->
           <!--            class="spe-img"-->
@@ -188,6 +189,7 @@
             </view>
           </view>
         </view>
+        <view v-if="!hasMoreData" class="no-more-data">没有更多了</view>
       </view>
     </view>
     <fab position="3" />
@@ -230,7 +232,7 @@ const screenRef = ref(null);
 const backgroundBox = ref('');
 const border = ref('');
 const videoList = ref([]);
-
+const isFullScreen = ref(false);
 const locationFiltering = (index) => {
   switch (index) {
     case 0:
@@ -311,6 +313,9 @@ function fullscreenchange(e) {
     uni.createVideoContext('videoId').pause();
   }
 }
+function handleFullscreenChange(event) {
+  isFullScreen.value = !isFullScreen.value;
+}
 // //退出全屏时停止
 // function fullscreenchange (e){
 //   if(!e.detail.fullScreen){
@@ -362,16 +367,15 @@ const screenParams = (selectedItems, type) => {
   }
 };
 // 搜索
-// 搜索
 const toSearch = () => {
   xma.navigateTo({ url: '/pages/assistingAgriculture/searchPage/searchPage?prodTypes=10' });
 };
-
+const currentPage = ref(1);
 // 查询列表
 const getProd = (searchKeyword = '') => {
   const params = {
-    current: 1,
-    size: 10,
+    current: currentPage.value,
+    size: 3,
     ...(sortType.value && { sortType: sortType.value.sortMode }),
     ...(attractionIdList.value &&
       attractionIdList.value.length > 0 &&
@@ -394,9 +398,25 @@ const getProd = (searchKeyword = '') => {
       item.img = import.meta.env.VITE_APP_IMG_URL + item.pic;
       item.serveList = item.serviceList.slice(0, 3);
     });
-    cardList.value = res.data.records;
+    if (currentPage.value === 1) {
+      cardList.value = res.data.records;
+    } else {
+      cardList.value = cardList.value.concat(res.data.records);
+    }
+    // 判断是否还有更多数据
+    if (res.data.records.length < params.size) {
+      hasMoreData.value = false; // 没有更多数据
+    }
   });
 };
+// 页面滚动到底部触发加载更多
+onReachBottom(() => {
+  if (hasMoreData.value) {
+    currentPage.value++;
+    getProd();
+  }
+});
+const hasMoreData = ref(true);
 const resetParams = () => {
   if (sortRef.value || departureDateRef.value || scenicSpotsRef.value || screenRef.value) {
     sortType.value = null;
@@ -639,6 +659,10 @@ page {
   font-weight: normal;
   line-height: 30rpx;
   color: #666666;
+  height: 30rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .tag .wd-tag {
   margin-right: 10px;
@@ -653,11 +677,12 @@ page {
   color: #0974f5;
 }
 .price {
+  position: absolute;
   font-size: 28rpx;
   font-weight: bold;
   line-height: 28rpx;
   color: #fa5151;
-  margin-left: 160rpx;
+  margin-left: 300rpx;
 }
 .venue {
   display: flex;
@@ -721,4 +746,18 @@ uni-video {
   left: 20rpx;
   border-radius: 16rpx;
 }
+.no-more-data {
+  text-align: center;
+  padding: 20rpx;
+  color: #999;
+}
+/* 默认隐藏进度条 */
+.spe-img1::-webkit-media-controls-progress-panel {
+  display: none;
+}
+
+/* 当全屏时显示进度条 */
+.spe-img1.no-progress-bar::-webkit-media-controls-progress-panel {
+  display: block;
+}
 </style>

src/pages/assistingAgriculture/detail/detail.vue

@@ -3,12 +3,11 @@
     <!--    顶部搜索框-->
     <view class="top">
       <view class="top">
-        <Search
-          background="rgba(255, 255, 255, 0.8)"
-          backIcon="black"
-          iconSrc="/static/assistingAgriculture/assets/blackLeft.png"
-          placeholderText="请输入要搜索的内容"
-        ></Search>
+        <Search style="z-index: 99; width: 100%" :type="2" backgroundBox="#fff">
+          <view style="width: 100%; text-align: center; font-size: 36rpx; font-weight: bold">
+            商品详情
+          </view>
+        </Search>
       </view>
     </view>
     <!--    图片-->
@@ -97,7 +96,6 @@
 </template>
 
 <script setup>
-import Search from '../../../components/assistingAgriculture/index/Search.vue';
 import { ref } from 'vue';
 import { onShow } from '@dcloudio/uni-app';
 import {
@@ -237,18 +235,6 @@ function toSettle() {
 page {
   background-color: #f3f3f3;
 }
-.container {
-  position: relative;
-  left: 0rpx;
-  top: -45rpx;
-  opacity: 1;
-}
-.top {
-  width: 750rpx;
-  height: 128rpx;
-  margin-top: 40rpx;
-  background: #ffffff;
-}
 .nav {
   width: 750rpx;
 }
@@ -470,8 +456,4 @@ page {
   margin-top: -90rpx;
   margin-left: 400rpx;
 }
-::v-deep.icon {
-  width: 56rpx;
-  height: 56rpx;
-}
 </style>