From c9928dd4f6d25e2339ea1400f59ec58674a927a7 Mon Sep 17 00:00:00 2001 From: zxl <763096477@qq.com> Date: 星期四, 19 六月 2025 20:07:42 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev --- pages/tabbar/index/home.vue | 290 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 219 insertions(+), 71 deletions(-) diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue index 56e7996..ade53fe 100644 --- a/pages/tabbar/index/home.vue +++ b/pages/tabbar/index/home.vue @@ -9,75 +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> @@ -111,6 +134,12 @@ <text class="iconfont"></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"></text> + </button> + + </view> </view> </swiper-item> @@ -203,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() { @@ -211,6 +244,8 @@ }, data() { return { + currentImgIndex: 0, // 鎾斁鍒扮鍑犲紶鍥�--绱㈠紩 + currentGoodsIndex: 0, // 鎾斁鍒扮鍑犱釜鍟嗗搧--绱㈠紩 currentTime: 0, formartDuration: '', duration: 0, @@ -276,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 @@ -286,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); @@ -604,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); }, // 鏀惰棌/鍙栨秷鏀惰棌 @@ -644,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 @@ -657,6 +778,7 @@ const duration = Date.now() - this.startPauseTime this.totalPauseTime += duration } + }, // 瑙嗛鏆傚仠浜嬩欢 @@ -733,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() { @@ -794,7 +916,7 @@ .video-info { width: 70%; position: absolute; - bottom: 70px; + bottom: 20px; left: 20px; color: #f8f8f8; z-index: 10; @@ -868,6 +990,7 @@ } .goods-link { position: relative; + width: 450rpx; margin: 20rpx 0; padding: 12rpx; background-color: rgba(255, 255, 255, 0.9); @@ -876,6 +999,7 @@ } .goods-container { + width: 100%; display: flex; align-items: center; } @@ -898,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 { @@ -1164,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