| | |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 右侧互动按钮 --> |
| | | <view class="action-buttons"> |
| | | <view class="avatar-container"> |
| | | <image class="avatar" @click="jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image> |
| | | <!-- 关注图标 - 使用绝对定位 --> |
| | | <view v-if="!item.subscribeThisAuthor" class="follow-icon" @click="subscribeAuth(index, item.authorId)"> |
| | | <text class="iconfont"></text> |
| | | </view> |
| | | </view> |
| | | <view class="action-item" @click="toggleCollect(item, index)"> |
| | | <text class="iconfont" v-if="item.collected"></text> |
| | | <text class="iconfont" v-else></text> |
| | | <text style="font-size: 10px;font-weight: lighter;">{{item.collectNum}}</text> |
| | | </view> |
| | | <view class="action-item" @click="showComments(item)"> |
| | | <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> |
| | | <!-- 右侧互动按钮 --> |
| | | <view class="action-buttons"> |
| | | <view class="avatar-container"> |
| | | <image class="avatar" @click="jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image> |
| | | <!-- 关注图标 - 使用绝对定位 --> |
| | | <view v-if="!item.subscribeThisAuthor" class="follow-icon" @click="subscribeAuth(index, item.authorId)"> |
| | | <text class="iconfont"></text> |
| | | </view> |
| | | </view> |
| | | <view class="action-item" @click="toggleThumbsUp(item, index)"> |
| | | <text class="iconfont" v-if="item.thumbsUp"></text> |
| | | <text class="iconfont" v-else></text> |
| | | <text style="font-size: 10px;font-weight: lighter;">{{item.thumbsUpNum}}</text> |
| | | </view> |
| | | <view class="action-item" @click="showComments(item)"> |
| | | <text class="iconfont"></text> |
| | | <text style="font-size: 10px;font-weight: lighter;">{{item.commentNum}}</text> |
| | | </view> |
| | | <view class="action-item" @click="toggleCollect(item, index)"> |
| | | <text class="iconfont" v-if="item.collected"></text> |
| | | <text class="iconfont" v-else></text> |
| | | <text style="font-size: 10px;font-weight: lighter;">{{item.collectNum}}</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> |
| | | </swiper> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment, thubmsUpComment, cancelThubmsUpComment } from "@/api/video.js"; |
| | | import { |
| | | getRecommendVideos, |
| | | savePlayRecord, |
| | | subscribe, |
| | | getVideoComments, |
| | | addVideoComment, |
| | | thubmsUpComment, |
| | | cancelThubmsUpComment, |
| | | changeThumbsUp, |
| | | } from "@/api/video.js"; |
| | | import { changeCollect } from "@/api/collect.js"; |
| | | import { saveShare } from "@/api/share.js"; |
| | | import storage from "@/utils/storage.js"; |
| | |
| | | pageNumber: 1, |
| | | pageSize: 10, |
| | | authorId: '', |
| | | videoFrom: '' |
| | | videoFrom: '', |
| | | keyword: '' |
| | | }, |
| | | marginBottom: 0, // 底部安全区域 |
| | | windowHeight: 0 // 可使用屏幕高度 |
| | |
| | | }, |
| | | onUnload() { |
| | | uni.removeStorageSync("playInfo"); |
| | | uni.removeStorageSync("searchPlayInfo"); |
| | | }, |
| | | onReady() { |
| | | |
| | |
| | | onLoad(option) { |
| | | this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom |
| | | this.windowHeight = uni.getSystemInfoSync().windowHeight |
| | | const playInfo = uni.getStorageSync("playInfo", playInfo); |
| | | const playInfo = uni.getStorageSync("playInfo"); |
| | | const searchPlayInfo = uni.getStorageSync("searchPlayInfo"); |
| | | if(playInfo) { |
| | | this.currentIndex = playInfo.playIndex; |
| | | this.videoList = playInfo.videoList; |
| | | console.log("拿到数据了",playInfo); |
| | | this.videoQuery.pageNumber = playInfo.pageNumber; |
| | | this.videoNoMore = playInfo.nomore; |
| | | this.videoQuery.authorId = option.authorId; |
| | |
| | | this.$nextTick(() => { |
| | | const videoContext = uni.createVideoContext(`video${this.currentIndex}`, this); |
| | | videoContext.play() |
| | | }) |
| | | } else if (searchPlayInfo) { // 搜索页跳转过来的数据略有不同 |
| | | this.currentIndex = searchPlayInfo.playIndex; |
| | | this.videoList = searchPlayInfo.videoList; |
| | | this.videoQuery.pageNumber = searchPlayInfo.pageNumber; |
| | | this.videoNoMore = searchPlayInfo.nomore; |
| | | this.videoQuery.keyword = searchPlayInfo.keyword; |
| | | this.videoQuery.videoFrom = option.videoFrom; |
| | | this.currentVideoIsPlaying = true; |
| | | this.$nextTick(() => { |
| | | const videoContext = uni.createVideoContext(`video${this.currentIndex}`, this); |
| | | videoContext.play() |
| | | }) |
| | | } else { |
| | | this.videoQuery.videoFrom = 'recommend'; |
| | |
| | | } |
| | | }) |
| | | }, |
| | | // 点赞/取消点赞 |
| | | toggleThumbsUp(item, index) { |
| | | let data = { |
| | | refId: item.id, |
| | | thumbsUpType: 'video' |
| | | } |
| | | const beforeThumbsUp = item.thumbsUp |
| | | const beforeThumbsUpNum = item.thumbsUpNum |
| | | if(item.thumbsUp) { |
| | | this.videoList[index].thumbsUp = false |
| | | this.videoList[index].thumbsUpNum -= 1 |
| | | } else { |
| | | this.videoList[index].thumbsUp = true |
| | | this.videoList[index].thumbsUpNum += 1 |
| | | } |
| | | changeThumbsUp(data).then(res => { |
| | | if(res.data.code !== 200) { |
| | | this.videoList[index].thumbsUp = beforeThumbsUp |
| | | this.videoList[index].thumbsUpNum = beforeThumbsUpNum |
| | | } |
| | | }) |
| | | }, |
| | | // 单击屏幕:暂停或继续播放 |
| | | togglePlay(index) { |
| | | console.log("单击视频", index); |
| | |
| | | .progress-text { |
| | | margin-top: 10px; |
| | | font-size: 14px; |
| | | color: #666; |
| | | color: #fff; |
| | | } |
| | | .swiper-box { |
| | | width: 100%; |