From 9e4ae356ed626e3089f31d5b40fb10a476efe7c4 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期三, 13 八月 2025 16:34:51 +0800
Subject: [PATCH] 购物车点击事件，分享视频封面问题

---
 pages/tabbar/index/home.vue |  124 ++++++++++++++++++++++++++++++++++++++---
 1 files changed, 114 insertions(+), 10 deletions(-)

diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 1214d3a..0a5d6c2 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -34,14 +34,18 @@
 				:ref="'video'+index"
 				:src="item.videoUrl"
 				:autoplay="index === currentIndex"
-				:controls="false"
+				:controls="isControls"
 				:loop="true"
 				:object-fit="item.videoFit"
 				:enable-progress-gesture="false"
 				:show-center-play-btn="false"
-				:show-progress="true"
-				:show-fullscreen-btn="true"
+				:show-progress="false"
+				:show-fullscreen-btn="isControls"
+				:show-play-btn="isControls"
+				:show-mute-btn="false"
 				class="video-item"
+				
+				@fullscreenchange="onFullscreenChange"
 				@play="onPlay(item.id, index)"
 				@pause="onPause(index)"
 				@ended="onEnded(index)"
@@ -50,6 +54,14 @@
 				@loadedmetadata="onLoadedMetadata($event)"
 				@waiting="videoWaiting(index)"
 			  ></video>
+			   <view class="fullscreen-btn">
+			        <image 
+			          class="fullscreen-icon" 
+			          :src="isFullScreen ? off_screen : on_screen"
+			          mode="aspectFit"
+					  @click="requestFullScreen('video'+index,item)"
+			        ></image>
+			    </view>
 			  <!-- 鑷畾涔夋帶鍒舵潯 -->
 			  <view
 				@touchstart.stop="handleTouchStart"
@@ -73,6 +85,7 @@
 				</view>
 			  </view>
 		</view>
+		
 		<view style="width: 100%; height: 100%;" v-else-if="item.videoContentType === 'img'">
 		  <uni-swiper-dot
 			:info="item.imgs"
@@ -125,7 +138,7 @@
         <view class="video-info" :style="{bottom: marginBottom + 20 + 'px'}">
 		  <view style="width: 100%; position: relative;">
 			  <text class="video-author">@{{item.authorName}}</text>
-			  <text class="iconfont" @click="jumpToSearch" style="position: absolute;right: 45px;">&#xe64e;</text>
+			  <text class="iconfont" @click="jumpToSearch" style="position: absolute;right: 42px;bottom: 50rpx;">&#xe64e;</text>
 		  </view>
           <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;">
 			  <text class="video-title">{{item.title}}</text>
@@ -269,7 +282,8 @@
 import { getUserInfo } from "@/api/members";
 import storage from "@/utils/storage.js";
 import TopBar from "@/components/TopBar.vue";
-
+import { nextTick } from "vue";
+import {getVideoCover } from "@/api/common.js"
 export default {
   components: {TopBar},
   computed: {
@@ -279,6 +293,10 @@
   },
   data() {
     return {
+		isControls:false,
+		on_screen: require('@/pages/tabbar/index/static/on_screen.png'),
+		off_screen: require('@/pages/tabbar/index/static/off_screen.png'),
+		isFullScreen:false,
 		isTouch:false,
 		userId :'',
 		currentImgIndex: 0, // 鎾斁鍒扮鍑犲紶鍥�--绱㈠紩
@@ -445,12 +463,76 @@
 		shareUser: userInfo.id
 	}
 	saveShare(data)
-  	return {
-  		title: videoInfo.title,
-  		path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}`,
-  	}
+	// getVideoCover(videoInfo.id).then(res =>{
+	// 	if(res.statusCode === 200){
+	// 		imageUrl = res.data.data
+	// 		console.log(imageUrl)
+	// 		return {
+	// 			title: videoInfo.title,
+	// 			path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}`,
+	// 			imageUrl: imageUrl
+	// 		}
+	// 	}
+		
+	// })
+	console.log(videoInfo)
+	return {
+		title: videoInfo.title,
+		path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}`,
+		imageUrl: videoInfo.coverUrl
+	}
+	// 淇濆瓨鍒嗕韩璁板綍
+	
+	
+	
+  	
   },
-  methods: {  
+  methods: {
+	   // 鎴彇瑙嗛褰撳墠甯�
+	   captureVideoFrame(videoCtx) {
+	     return new Promise((resolve) => {
+	       videoCtx.requestFrame(() => {
+	         wx.canvasToTempFilePath({
+	           canvasId: 'shareCanvas',
+	           success: (res) => resolve(res),
+	           fail: () => resolve({ tempFilePath: '/assets/default-cover.jpg' })
+	         });
+	       });
+	     });
+	   },
+	  requestFullScreen(id,item){
+		  console.log(item)
+		 
+		  const videoContext = uni.createVideoContext(id, this)
+		  // 鏍规嵁瑙嗛鏂瑰悜鍐冲畾鍏ㄥ睆鏂瑰悜
+		    const direction = this.shouldUseLandscape(item) ? 90 : 0;
+		    
+		    // 鍏堟殏鍋滆棰戯紙閬垮厤鍒囨崲鏃剁殑澹伴煶闂锛�
+		    // videoContext.pause();
+	
+		  // 璇锋眰鍏ㄥ睆
+		   videoContext.requestFullScreen({
+		     direction: direction,
+		   });
+		   
+		   
+	  },
+	  shouldUseLandscape(item) {
+		if(item.videoFit === 'cover'){
+			return false
+		}
+	    // 榛樿妯睆锛堟牴鎹笟鍔￠渶姹傝皟鏁达級
+	    return true;
+	  },
+	  // 鍏ㄥ睆鐘舵�佸彉鍖栦簨浠�
+	      onFullscreenChange(e) {
+	        console.log('鍏ㄥ睆鐘舵�佸彉鍖�:', e.detail.fullScreen)
+			if(e.detail.fullScreen){
+				 this.isControls = true;
+			}else{
+				this.isControls = false;
+			}
+	      },
 	  getUserId(){
 		  const {id} = uni.getStorageSync('user_info_obj_dev')
 		  this.userId = id;
@@ -1178,6 +1260,28 @@
 </script>
 
 <style scoped>
+	.fullscreen-btn {
+		position: absolute;
+		right: 45rpx;
+		bottom: 70rpx;
+	  width: 60rpx;
+	  height: 60rpx;
+	  border-radius: 50%;
+	  background-color: rgba(0, 0, 0, 0.4);
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+	  z-index: 999;
+	  backdrop-filter: blur(10rpx);
+	  border: 1rpx solid rgba(255, 255, 255, 0.2);
+
+	}
+	/* 鍥炬爣鏍峰紡 */
+	.fullscreen-icon {
+	  width: 36rpx;
+	  height: 36rpx;
+	  opacity: 0.9;
+	}
 	::v-deep .custom-tabbar {
 		border-top: none !important;
 	}

--
Gitblit v1.8.0