From 60e5c5ea203b64d30857a0fa24b9bb7f03ab904a Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 18 六月 2025 23:09:29 +0800
Subject: [PATCH] 补签

---
 pages/tabbar/index/home.vue |  295 ++++++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 220 insertions(+), 75 deletions(-)

diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 9ba0f38..ade53fe 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -9,78 +9,98 @@
       @change="onSwiperChange"
     >
       <swiper-item v-for="(item, index) in videoList" :key="item.id">
-		<!-- 鎾斁鎸夐挳锛堜粎褰撹棰戞殏鍋滄椂鏄剧ず锛� -->
-		<view 
-		  class="play-icon" 
-		  @click="togglePlay(index)"
-		  v-if="!currentVideoIsPlaying"
-		>
-		  <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
-		</view>
-        <video 
-          :id="'video'+index"
-		  :ref="'video'+index"
-          :src="item.videoUrl"
-          :autoplay="currentIndex === index"
-          :controls="false"
-          :loop="true"
-		  :object-fit="item.objectFit"
-		  :enable-progress-gesture="false"
-          class="video-item"
-          @play="onPlay(item.id, index)"
-          @pause="onPause(index)"
-          @ended="onEnded(index)"
-		  @click="togglePlay(index)"
-		  @timeupdate="onTimeUpdate($event)"
-		  @loadedmetadata="onLoadedMetadata($event)"
-		  
-        ></video>
-		<!-- 鑷畾涔夋帶鍒舵潯 -->
-		<view 
-			@touchstart="handleTouchStart"
-			@touchmove="handleTouchMove"
-			@touchend="handleTouchEnd"
-			class="container">
-		  <!-- 杩涘害鏉� - 鏁翠釜鍖哄煙鍙嫋鍔� -->
-		  <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
-			  <!-- 鏄剧ず褰撳墠杩涘害 -->
-			  <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
+		<view style="width: 100%;height: 100%;" v-if="item.videoContentType === 'video'">
+			  <!-- 鎾斁鎸夐挳锛堜粎褰撹棰戞殏鍋滄椂鏄剧ず锛� -->
 			  <view 
-			    class="progress-bar" 
-			    id="progressBar"
+				class="play-icon" 
+				@click="togglePlay(index)"
+				v-if="!currentVideoIsPlaying"
 			  >
-			  			  
-			    <!-- 宸插～鍏呴儴鍒� -->
-			    <view class="progress-fill" :style="{ width: progress + '%' }"></view>
+				<image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
 			  </view>
-		  </view>
-		  
-		  
-		  
+			  <video
+				:id="'video'+index"
+				:ref="'video'+index"
+				:src="item.videoUrl"
+				:autoplay="currentIndex === index"
+				:controls="false"
+				:loop="true"
+				:object-fit="item.objectFit"
+				:enable-progress-gesture="false"
+				class="video-item"
+				@play="onPlay(item.id, index)"
+				@pause="onPause(index)"
+				@ended="onEnded(index)"
+				@click="togglePlay(index)"
+				@timeupdate="onTimeUpdate($event)"
+				@loadedmetadata="onLoadedMetadata($event)"
+				
+			  ></video>
+			  <!-- 鑷畾涔夋帶鍒舵潯 -->
+			  <view 
+				@touchstart="handleTouchStart"
+				@touchmove="handleTouchMove"
+				@touchend="handleTouchEnd"
+				class="container">
+				<!-- 杩涘害鏉� - 鏁翠釜鍖哄煙鍙嫋鍔� -->
+				<view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
+				  <!-- 鏄剧ず褰撳墠杩涘害 -->
+				  <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
+				  <view 
+					class="progress-bar" 
+					id="progressBar"
+				  >
+							  
+					<!-- 宸插～鍏呴儴鍒� -->
+					<view class="progress-fill" :style="{ width: progress + '%' }"></view>
+				  </view>
+				</view>
+			  </view>
+		</view>
+		<view style="width: 100%; height: 100%;" v-else-if="item.videoContentType === 'img'">
+		  <uni-swiper-dot 
+			:info="item.imgs" 
+			:current="currentImgIndex" 
+			mode="round" 
+			style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"
+			:dots-styles="{width: 24, bottom: 24,selectedBackgroundColor: 'green', backgroundColor: 'gray'}"
+			>
+		    <swiper class="swiper-box" @change="imgChange" :autoplay="true" :interval="3000">
+		      <swiper-item v-for="img in item.imgs" :key="img">
+		        <view class="swiper-item">
+		          <!-- 璋冩暣 image 鏍峰紡锛屼娇鍏跺眳涓笖鎸夋瘮渚嬬缉鏀� -->
+		          <image 
+		            :src="img" 
+		            mode="aspectFit" 
+		            style="width: 100%; height: 100%; display: block; margin: 0 auto;"
+		          ></image>
+		        </view>
+		      </swiper-item>
+		    </swiper>
+		  </uni-swiper-dot>
 		</view>
 		
+		
 		<!-- 鎮寕鍟嗗搧閾炬帴灞� -->
-		<view class="goods-link-warp">
+		<view class="goods-link-warp" v-if="item.goodsList.length > 0">
 			<view class="goods-link">
-			  <view class="goods-container">
-			    <!-- 鍟嗗搧鍥剧墖 -->
-			    <image class="goods-image" :src="item.goods.imageUrl" mode="aspectFill"></image>
-			    
-			    <!-- 鍟嗗搧淇℃伅 -->
-			    <view class="goods-info">
-			      <text class="goods-name">{{item.goods.name}}</text>
-			      <view class="price-section">
-			        <text class="current-price">楼{{item.goods.price}}</text>
-			        <text class="original-price" v-if="item.goods.originalPrice">楼{{item.goods.originalPrice}}</text>
-			      </view>
-			      <text class="sales-count">{{item.goods.saleNum}}浜哄凡璐�</text>
-			    </view>
-			    
-			    <!-- 璐拱鎸夐挳 -->
-			    <view class="buy-button">
-			      <text>璐拱</text>
-			    </view>
-			  </view>
+			  <swiper @change="goodsChange" :autoplay="true" :interval="4000" style="height: 120rpx;">
+				<swiper-item v-for="goods in item.goodsList" :key="goods.goodsId">
+				  <view class="goods-container" @click="jumpToPay(item.id)">
+					<!-- 鍟嗗搧鍥剧墖 -->
+					<image class="goods-image" :src="goods.thumbnail" mode="aspectFill"></image>
+					
+					<!-- 鍟嗗搧淇℃伅 -->
+					<view class="goods-info">
+					  <text class="goods-name">{{goods.goodsName}}</text>
+					  <view class="price-section">
+						<text class="current-price">楼{{goods.price}}</text>
+						<text class="original-price" v-if="goods.originalPrice">楼{{goods.originalPrice}}</text>
+					  </view>
+					</view>
+				  </view>
+				</swiper-item>
+			  </swiper>
 			</view>
 		</view>
 		
@@ -114,6 +134,12 @@
             <text class="iconfont">&#xe7f7;</text>
             <text style="font-size: 10px;font-weight: lighter;">{{item.commentNum}}</text>
           </view>
+		  <view class="action-item">
+			  <button open-type="share" class="custom-share-btn" :data-obj="item">
+			        <text class="iconfont">&#xe602;</text>
+			      </button>
+		     
+		  </view>
         </view>
 		
       </swiper-item>
@@ -206,6 +232,10 @@
 <script>
 import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment, thubmsUpComment, cancelThubmsUpComment } from "@/api/video.js";
 import { changeCollect } from "@/api/collect.js";
+import { saveShare, saveShareClickRecord } from "@/api/share.js";
+import { silentLogin } from "@/api/connect.js";
+import { getUserInfo } from "@/api/members";
+import storage from "@/utils/storage.js";
 export default {
   computed: {
 	    hasPlayTime() {
@@ -214,6 +244,8 @@
   },
   data() {
     return {
+		currentImgIndex: 0, // 鎾斁鍒扮鍑犲紶鍥�--绱㈠紩
+		currentGoodsIndex: 0, // 鎾斁鍒扮鍑犱釜鍟嗗搧--绱㈠紩
 		currentTime: 0,
 		formartDuration: '',
 		duration: 0,
@@ -279,7 +311,14 @@
     }
   },
   onShow() {
-	  this.loadVideos()
+	  // const token = storage.getAccessToken();
+	  // if (! token) {
+		 //  this.wxSilentLogin(() => {
+			//   this.loadVideos();
+		 //  })
+	  // } else { 
+	  // 	  this.loadVideos();
+	  // }
 	  // 濡傛灉瑙嗛鎸変笅鏆傚仠鍚庡垏鎹㈤〉闈㈠啀鍥炲埌椤甸潰鏃讹紝鍙畻鏆傚仠鏃堕棿锛堝洜涓烘殏鍋滄椂闂村拰绂诲紑椤甸潰鏃堕棿鏄噸澶嶇殑锛屽彧绠椾竴涓級
 	  if(this.startHidenTime !== 0 && this.currentVideoIsPlaying) {
 		  const duration = Date.now() - this.startHidenTime
@@ -289,14 +328,85 @@
   onHide() {
   	this.startHidenTime = Date.now()
   },
-  onLoad() {
-	  this.loadVideos();
+  onLoad(option) {
+	  const token = storage.getAccessToken();
+	  if (! token) {
+		  this.wxSilentLogin(() => {
+			  this.loadVideos();
+			  // 鍒ゆ柇鏄笉鏄偣鍑诲垎浜摼鎺ヨ繘鏉ョ殑
+			  if (option.userId && option.videoId) {
+				  // 淇濆瓨鍒嗕韩鐐瑰嚮璁板綍
+				  saveShareClickRecord({refId: option.videoId, shareUserId: option.userId})
+			  }
+		  })
+	  } else { 
+		this.loadVideos();
+	  }
   },
   onReady() {
     // 鍒濆鍖栬棰戜笂涓嬫枃
     this.initVideoContexts();
   },
+  onShareAppMessage(e) {
+	const userInfo = storage.getUserInfo();
+	if(!userInfo) {
+		console.log("鏈櫥褰曚笉鑳藉垎浜�");
+		return
+	}
+	const videoInfo = e.target.dataset.obj;
+	// 淇濆瓨鍒嗕韩璁板綍
+	const data = {
+		shareType: 'video',
+		refId: videoInfo.id,
+		shareUser: userInfo.id
+	}
+	saveShare(data)
+  	return {
+  		title: videoInfo.title,
+  		path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}`,
+  		imageUrl: videoInfo.coverUrl
+  	}
+  },
   methods: {
+	  // 闈欓粯鐧诲綍
+	  wxSilentLogin(callback) {
+		  //鑾峰彇code
+		  uni.login({
+		    success: (codeRes) => {
+		      if(codeRes.errMsg === "login:ok") {
+				// 闈欓粯鐧诲綍
+				silentLogin({code: codeRes.code}).then(res => {
+					storage.setAccessToken(res.data.data.accessToken);
+					storage.setRefreshToken(res.data.data.refreshToken);
+					//鑾峰彇鐢ㄦ埛淇℃伅
+					getUserInfo().then((user) => {
+					  storage.setUserInfo(user.data.result);
+					  storage.setHasLogin(true);
+					  callback()
+					});
+				})
+		      } else {
+		        uni.showToast({
+		          title: "绯荤粺寮傚父锛岃鑱旂郴绠＄悊鍛橈紒"
+		        })
+		      }
+		    },
+		  });
+	  },
+	  // 鐐瑰嚮鍟嗗搧璺宠浆
+	  jumpToPay(videoId) {
+		uni.navigateTo({
+			url: '/pages/video/video-goods-detail?videoId=' + videoId
+		});
+	  },
+	  // 杞挱鍥惧彉鍖�
+	  imgChange(e) {
+		  this.currentImgIndex = e.detail.current;
+	  },
+	  // 鍟嗗搧杞挱鍥惧彉鍖�
+	  goodsChange(e) {
+		  this.currentGoodsIndex = e.detail.current;
+	  },
 	  // 鑾峰彇杩涘害鏉＄殑浣嶇疆鍜屽昂瀵�
 	  getBarRect() {
 	    const query = uni.createSelectorQuery().in(this);
@@ -375,7 +485,7 @@
 			const videoId = this.commentForm.videoId;
 			this.commentForm = { // 璇勮琛ㄥ崟鏁版嵁
 				id: '',
-				videoId: '',
+				videoId: videoId,
 				commentContent: '',
 				replyId: '',
 				replyUserId: '',
@@ -607,6 +717,9 @@
 		if (this.videoContexts[this.currentIndex]) {
 			this.videoContexts[this.currentIndex].play();
 		}
+		// 璁剧疆褰撳墠鎾斁瑙嗛鐨勬�绘椂闀�
+		this.duration = this.videoList[this.currentIndex].videoDuration;
+		this.formartDuration = this.sliderFormatTime(this.duration);
     },
     
     // 鏀惰棌/鍙栨秷鏀惰棌
@@ -647,6 +760,11 @@
 		console.log(id, index, "瑙﹀彂鎾斁");
 		if(index === this.currentIndex) {
 			this.currentVideoIsPlaying = true;
+			if(! this.duration) {
+				// 璁剧疆褰撳墠鎾斁瑙嗛鐨勬�绘椂闀�
+				this.duration = this.videoList[this.currentIndex].videoDuration;
+				this.formartDuration = this.sliderFormatTime(this.duration);
+			}
 		} else {
 			this.currentVideoIsPlaying = false;
 			return
@@ -660,6 +778,7 @@
 			const duration = Date.now() - this.startPauseTime
 			this.totalPauseTime += duration
 		}
+		
     },
     
     // 瑙嗛鏆傚仠浜嬩欢
@@ -736,9 +855,9 @@
 	},
 	// 鑾峰彇瑙嗛鎬绘椂闀�
 	onLoadedMetadata(e) {
-	  this.duration = e.detail.duration;
-	  this.formartDuration = this.sliderFormatTime(this.duration);
-	  console.log("瑙嗛鎬绘椂闀�", this.duration);
+	  // this.duration = e.detail.duration;
+	  // this.formartDuration = this.sliderFormatTime(this.duration);
+	  // console.log("瑙嗛鎬绘椂闀�", this.duration);
 	},
 	// 淇濆瓨鎾斁璁板綍
 	async savePlayRecord() {
@@ -797,7 +916,7 @@
 	.video-info {
 	  width: 70%;
 	  position: absolute;
-	  bottom: 70px;
+	  bottom: 20px;
 	  left: 20px;
 	  color: #f8f8f8;
 	  z-index: 10;
@@ -871,6 +990,7 @@
 	}
 	.goods-link {
 	  position: relative;
+	  width: 450rpx;
 	  margin: 20rpx 0;
 	  padding: 12rpx;
 	  background-color: rgba(255, 255, 255, 0.9);
@@ -879,6 +999,7 @@
 	}
 	
 	.goods-container {
+	  width: 100%;
 	  display: flex;
 	  align-items: center;
 	}
@@ -901,11 +1022,13 @@
 	  font-size: 28rpx;
 	  color: #333;
 	  font-weight: bold;
-	  display: -webkit-box;
 	  -webkit-line-clamp: 2;
 	  -webkit-box-orient: vertical;
-	  overflow: hidden;
 	  margin-bottom: 8rpx;
+	  width: 280rpx; /* 闇�瑕佹寚瀹氬搴� */
+	  overflow: hidden;
+	  white-space: nowrap;
+	  text-overflow: ellipsis;
 	}
 	
 	.price-section {
@@ -1167,4 +1290,26 @@
 	  font-size: 14px;
 	  color: #666;
 	}
+	.swiper-box {
+	  width: 100%;
+	  height: 1400rpx;
+	}
+	.swiper-item {
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+	  width: 100%;
+	  height: 100%;
+	}
+	.custom-share-btn {
+	  font-size: unset;
+	  background: none;
+	  padding: 0;
+	  margin: 0;
+	  line-height: normal;
+	  border: none;
+	}
+	.custom-share-btn::after {
+	  border: none;
+	}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0