| | |
| | | mode="aspectFit"></image> |
| | | </view> |
| | | <video v-if="index >= currentIndex - videoLiveOffset && index <= currentIndex + videoLiveOffset" |
| | | :id="'video' + index" :ref="'video' + index" :src="item.videoUrl" |
| | | :autoplay="index === currentIndex" :controls="isControls" :loop="true" |
| | | :object-fit="item.videoFit" :enable-progress-gesture="false" :show-center-play-btn="false" |
| | | :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)" |
| | | @click="togglePlay(index)" @timeupdate="onTimeUpdate($event)" |
| | | :id="'video' + index" :ref="'video' + index" :src="item.videoUrl" :autoplay="index === currentIndex" |
| | | :controls="isControls" :loop="true" :object-fit="item.videoFit" :enable-progress-gesture="false" |
| | | :show-center-play-btn="false" :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)" @click="togglePlay(index)" @timeupdate="onTimeUpdate($event)" |
| | | @loadedmetadata="onLoadedMetadata($event)" @waiting="videoWaiting(index)"></video> |
| | | <view class="fullscreen-btn"> |
| | | <image class="fullscreen-icon" :src="isFullScreen ? off_screen : on_screen" mode="aspectFit" |
| | |
| | | |
| | | |
| | | <!-- 悬挂商品链接层 --> |
| | | <view class="goods-link-warp" v-if="item.goodsList.length > 0"> |
| | | <view class="goods-link-warp" :style="{ bottom: marginBottom + 55 + 'px' }" v-if="item.goodsList.length > 0"> |
| | | <view class="goods-link"> |
| | | <swiper @change="goodsChange" :autoplay="true" :interval="4000" style="height: 120rpx;"> |
| | | <swiper-item v-for="goods in item.goodsList" :key="goods.goodsId"> |
| | |
| | | <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> |
| | | <text class="original-price" |
| | | v-if="goods.originalPrice">¥{{ goods.originalPrice }}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | |
| | | <!-- 视频信息层 --> |
| | | <view class="video-info" :style="{ bottom: marginBottom + 20 + 'px' }"> |
| | | <view style="width: 100%; position: relative;" @click="jumpToSearch"> |
| | | <view style="width: 100%; position: relative;"> |
| | | <text class="video-author">@{{ item.authorName }}</text> |
| | | <text class="iconfont" style="position: absolute;right: 42px;bottom: 50rpx;"></text> |
| | | <text class="iconfont" @click="jumpToSearch" |
| | | style="position: absolute;right: 42px;bottom: 50rpx;"></text> |
| | | </view> |
| | | <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;"> |
| | | <text class="video-title">{{ item.title }}</text> |
| | | <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag.id">#{{ tag.tagName |
| | | }}</text> |
| | | <text class="video-tag" v-for="(tag, index) in item.tagList" |
| | | :key="tag.id">#{{ tag.tagName }}</text> |
| | | </view> |
| | | |
| | | </view> |
| | |
| | | <text @click="openReply(comment)" class="reply-btu time">回复</text> |
| | | <text v-if="!comment.hasThumbsUp" class="thumbs-up time iconfont" |
| | | @click="thubmsUp(comment.id, index, null)"><text |
| | | v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{ comment.thumbsUpNum |
| | | }}</text></text> |
| | | v-show="comment.thumbsUpNum > 0" |
| | | class="thumbs-num">{{ comment.thumbsUpNum }}</text></text> |
| | | <text v-else class="thumbs-up time iconfont" |
| | | @click="cancelThumbsUp(comment.id, index, null)"><text |
| | | v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{ comment.thumbsUpNum |
| | | }}</text></text> |
| | | v-show="comment.thumbsUpNum > 0" |
| | | class="thumbs-num">{{ comment.thumbsUpNum }}</text></text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | <text @click="openReply(comment, reply)" class="reply-btu time">回复</text> |
| | | <text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont" |
| | | @click="thubmsUp(reply.id, index, replyIndex)"><text |
| | | v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{ reply.thumbsUpNum |
| | | }}</text></text> |
| | | v-show="reply.thumbsUpNum > 0" |
| | | class="thumbs-num">{{ reply.thumbsUpNum }}</text></text> |
| | | <text v-else class="thumbs-up time iconfont" |
| | | @click="cancelThumbsUp(reply.id, index, replyIndex)"><text |
| | | v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{ reply.thumbsUpNum |
| | | }}</text></text> |
| | | v-show="reply.thumbsUpNum > 0" |
| | | class="thumbs-num">{{ reply.thumbsUpNum }}</text></text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | import { mapState, mapMutations } from 'vuex' |
| | | import { setPopupRedisTime, getPopupAcitivty } from '@/api/popup.js' |
| | | import { changeCollect } from "@/api/collect.js"; |
| | | import { saveShare, saveShareClickRecord } from "@/api/share.js"; |
| | | import { saveShare, saveShareClickRecord} from "@/api/share.js"; |
| | | import { getSessionId, userAction,userShare } from "@/api/userAction.js"; |
| | | import { silentLogin } from "@/api/connect.js"; |
| | | 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" |
| | | import {addPrizeNum} from '@/api/prize.js' |
| | | export default { |
| | | components: { TopBar, ActivityPopup }, |
| | | computed: { |
| | |
| | | similarlyNomore: false, // 是否还有更多相似视频 |
| | | similaryVideoIndex: 0, // 相似视频的播放位置 |
| | | similarlyLoading: false, // 相似视频加载 |
| | | marginBottom: 0 // 底部安全区域 |
| | | marginBottom: 0 ,// 底部安全区域 |
| | | pageSessionNo:"", |
| | | shareId:"", |
| | | actionParam:{ |
| | | sessionId:'', |
| | | actionType:"PAGE", |
| | | joinType:"SELF", |
| | | pageCode:"RECOMMEND_VIDEO", |
| | | pageParams:"{}", |
| | | pageStatus:"JOIN", |
| | | pageType:"LIST" |
| | | }, |
| | | shareParam:{ |
| | | pageCode:"RECOMMEND_VIDEO", |
| | | shareOption:"{}", |
| | | pageType:"LIST" |
| | | }, |
| | | } |
| | | }, |
| | | onShow() { |
| | | getSessionId().then(res=>{ |
| | | console.log('res',JSON.stringify(res)) |
| | | this.pageSessionNo = res.data.data |
| | | if(this.pageSessionNo){ |
| | | let param = Object.assign({},this.actionParam); |
| | | this.actionParam.sessionId = this.pageSessionNo |
| | | param.sessionId = this.pageSessionNo |
| | | userAction(param) |
| | | } |
| | | }) |
| | | |
| | | this.openActivityPopup() |
| | | |
| | |
| | | this.totalHidenTime += duration |
| | | } |
| | | }, |
| | | onHide() { |
| | | this.startHidenTime = Date.now() |
| | | }, |
| | | onUnload() { |
| | | let param = Object.assign({},this.actionParam); |
| | | if (this.sendOnShow)return |
| | | param.pageStatus = "LEAVE" |
| | | userAction(param) |
| | | }, |
| | | onHide() { |
| | | this.startHidenTime = Date.now() |
| | | let param = Object.assign({},this.actionParam); |
| | | this.sendOnShow = true; |
| | | param.pageStatus = "LEAVE" |
| | | userAction(param) |
| | | }, |
| | | onLoad(option) { |
| | | |
| | | console.log('-----------分享出的数据---------->', option) |
| | |
| | | const shareType = params.shareType; |
| | | const videoId = params.videoId; |
| | | queryParam.videoId = videoId |
| | | this.actionParam.joinType = "SCAN"; |
| | | this.actionParam.pageParams = JSON.stringify(params); |
| | | |
| | | console.log('解析参数:', { shareType, videoId }); |
| | | } |
| | | const token = storage.getAccessToken(); |
| | |
| | | this.wxSilentLogin(() => { |
| | | // 判断是不是点击分享链接进来的 |
| | | if (option.userId && option.videoId) { |
| | | this.actionParam.joinType = "SHARE"; |
| | | this.actionParam.pageParams = JSON.stringify(option); |
| | | queryParam.videoId = option.videoId |
| | | // 保存分享点击记录 |
| | | saveShareClickRecord({ refId: option.videoId, shareUserId: option.userId }) |
| | |
| | | // } |
| | | |
| | | // }) |
| | | console.log(videoInfo) |
| | | return { |
| | | title: videoInfo.title, |
| | | path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}`, |
| | | imageUrl: videoInfo.coverUrl |
| | | } |
| | | // 保存分享记录 |
| | | |
| | | // 返回一个Promise |
| | | return new Promise((resolve) => { |
| | | this.shareId = ''; |
| | | this.shareParam.shareOption = JSON.stringify({ |
| | | id:this.activityId |
| | | }) |
| | | userShare(this.shareParam).then(res => { |
| | | this.shareId = res.data.data; |
| | | let param = { |
| | | addType:"SHARE_GOODS_VIDEO", |
| | | extend:"", |
| | | } |
| | | let extend = {shareId:this.shareId} |
| | | param.extend = JSON.stringify(extend) |
| | | addPrizeNum(param); |
| | | // 当获取到shareId后,再resolve分享配置 |
| | | resolve({ |
| | | title: videoInfo.title, |
| | | path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}&shareId=${this.shareId}`, |
| | | imageUrl: videoInfo.coverUrl, |
| | | success(e) { |
| | | console.log("分享成功", e); |
| | | }, |
| | | fail(e) { |
| | | console.log('分享失败', e); |
| | | } |
| | | }); |
| | | }).catch(err => { |
| | | // 处理错误情况,例如使用默认参数 |
| | | console.error('获取分享ID失败', err); |
| | | resolve({ |
| | | title: videoInfo.title, |
| | | path: `/pages/tabbar/index/home?videoId=${videoInfo.id}&userId=${userInfo.id}`, |
| | | imageUrl: videoInfo.coverUrl |
| | | }); |
| | | }); |
| | | }); |
| | | }, |
| | | methods: { |
| | | async openActivityPopup() { |
| | |
| | | this.videoNoMore = true; |
| | | return; |
| | | } |
| | | this.videoQuery.pageNumber++; |
| | | if (res.data.code === 200) { |
| | | this.videoQuery.pageNumber++; |
| | | } |
| | | |
| | | }) |
| | | } else { |
| | |
| | | this.videoNoMore = true; |
| | | return; |
| | | } |
| | | this.videoQuery.pageNumber++; |
| | | if (res.data.code === 200) { |
| | | this.videoQuery.pageNumber++; |
| | | } |
| | | |
| | | }) |
| | | } |
| | |
| | | /* 商品链接悬挂层样式 */ |
| | | .goods-link-warp { |
| | | position: absolute; |
| | | bottom: 160px; |
| | | bottom: 100px; |
| | | left: 20px; |
| | | color: #f8f8f8; |
| | | z-index: 10; |