| | |
| | | <template> |
| | | <view class="video-container"> |
| | | <top-bar selectedTitleIndex="home" textColor="white" @changeTab="topBarChange" class="topBar"></top-bar> |
| | | <!-- 视频加载 --> |
| | | <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading> |
| | | <!-- 视频列表 --> |
| | |
| | | :autoplay="index === currentIndex" |
| | | :controls="false" |
| | | :loop="true" |
| | | :object-fit="item.objectFit" |
| | | :object-fit="item.videoFit" |
| | | :enable-progress-gesture="false" |
| | | :show-center-play-btn="false" |
| | | class="video-item" |
| | |
| | | @touchstart.stop="handleTouchStart" |
| | | @touchmove.stop="handleTouchMove" |
| | | @touchend.stop="handleTouchEnd" |
| | | :style="{bottom: marginBottom + 'px'}" |
| | | class="container"> |
| | | <!-- 进度条 - 整个区域可拖动 --> |
| | | <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }"> |
| | |
| | | |
| | | |
| | | <!-- 视频信息层 --> |
| | | <view class="video-info"> |
| | | <view class="video-info" :style="{bottom: marginBottom + 20 + 'px'}"> |
| | | <view> |
| | | <text class="video-author">@{{item.authorName}}</text> |
| | | <text class="video-author" @click="jumpToSearch">@{{item.authorName}}</text> |
| | | </view> |
| | | <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;"> |
| | | <text class="video-title">{{item.title}}</text> |
| | |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 右侧互动按钮 --> |
| | | <!-- 右侧互动按钮 --> |
| | | <view class="action-buttons"> |
| | | <view class="avatar-container"> |
| | | <image class="avatar" @click="jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image> |
| | |
| | | <text class="iconfont"></text> |
| | | </view> |
| | | </view> |
| | | <view class="action-item" @click="toggleCollect(item, index)"> |
| | | <text class="iconfont" v-if="item.collected"></text> |
| | | <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.collectNum}}</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> |
| | | |
| | |
| | | </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, saveShareClickRecord } from "@/api/share.js"; |
| | | import { silentLogin } from "@/api/connect.js"; |
| | | import { getUserInfo } from "@/api/members"; |
| | | import storage from "@/utils/storage.js"; |
| | | import TopBar from "@/components/TopBar.vue"; |
| | | |
| | | export default { |
| | | components: {TopBar}, |
| | | computed: { |
| | | hasPlayTime() { |
| | | return this.sliderFormatTime(this.progress > 0 ? this.duration * this.progress / 100 : 0); |
| | |
| | | pageNumber: 1, |
| | | pageSize: 10, |
| | | videoFrom: 'recommend' |
| | | } |
| | | }, |
| | | marginBottom: 0 // 底部安全区域 |
| | | } |
| | | }, |
| | | onShow() { |
| | |
| | | this.startHidenTime = Date.now() |
| | | }, |
| | | onLoad(option) { |
| | | this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom |
| | | const token = storage.getAccessToken(); |
| | | if (! token) { |
| | | this.wxSilentLogin(() => { |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | jumpToSearch() { |
| | | uni.navigateTo({ |
| | | url: '/pages/video/video-search' |
| | | }); |
| | | }, |
| | | // 切换顶部导航栏 |
| | | topBarChange(titleObj) { |
| | | if (titleObj.index === 'home') { |
| | | uni.switchTab({ |
| | | url: titleObj.pagePath |
| | | }); |
| | | } else { |
| | | uni.redirectTo({ |
| | | url: titleObj.pagePath |
| | | }); |
| | | } |
| | | }, |
| | | // 静默登录 |
| | | wxSilentLogin(callback) { |
| | | //获取code |
| | |
| | | } |
| | | }) |
| | | }, |
| | | // 点赞/取消点赞 |
| | | 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%; |
| | |
| | | .custom-share-btn::after { |
| | | border: none; |
| | | } |
| | | .topBar { |
| | | position: fixed; |
| | | top: 20rpx; |
| | | left: 20rpx; |
| | | z-index: 1000 |
| | | } |
| | | </style> |