zyronon
2 years ago
1 changed files with 0 additions and 331 deletions
@ -1,331 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id="home-index"> |
|
||||||
<SlideRowList |
|
||||||
name="baseSlide" |
|
||||||
:canMove="canMove" |
|
||||||
v-model:active-index="baseActiveIndex"> |
|
||||||
<SlideItem> |
|
||||||
<SlideRowList |
|
||||||
style="height: calc(100% - 50rem);" |
|
||||||
v-model:active-index="activeIndex" |
|
||||||
indicatorType="home" |
|
||||||
> |
|
||||||
<SlideItem> |
|
||||||
<SlideColumnList> |
|
||||||
<SlideItem style="background: tan"> |
|
||||||
<p>12</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
<p>111111111111</p> |
|
||||||
</SlideItem> |
|
||||||
<SlideItem style="background: red;"> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
<p>222222222222</p> |
|
||||||
</SlideItem> |
|
||||||
<SlideItem style="background: yellow"> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
<p>3333333333333</p> |
|
||||||
</SlideItem> |
|
||||||
</SlideColumnList> |
|
||||||
</SlideItem> |
|
||||||
<SlideItem> |
|
||||||
<SlideColumnVirtualList |
|
||||||
ref="virtualList" |
|
||||||
:list="videos" |
|
||||||
:renderSlide="render" |
|
||||||
v-model:active-index="videoActixveIndex" |
|
||||||
@end="end" |
|
||||||
> |
|
||||||
</SlideColumnVirtualList> |
|
||||||
</SlideItem> |
|
||||||
</SlideRowList> |
|
||||||
<Footer v-bind:init-tab="1"/> |
|
||||||
</SlideItem> |
|
||||||
<SlideItem style="font-size: 40px;overflow:auto;"> |
|
||||||
<Uploader |
|
||||||
ref="uploader" |
|
||||||
:isOnThisPage="baseActiveIndex === 1" |
|
||||||
:author="this.videos[this.videoActiveIndex]?.author" |
|
||||||
@toggleCanMove="e => this.canMove = e" |
|
||||||
@back="baseActiveIndex = 0" |
|
||||||
@showFollowSetting="showFollowSetting = true" |
|
||||||
@showFollowSetting2="showFollowSetting2 = true" |
|
||||||
/> |
|
||||||
</SlideItem> |
|
||||||
</SlideRowList> |
|
||||||
|
|
||||||
<Comment v-model="isCommenting"/> |
|
||||||
|
|
||||||
<Share v-model="isSharing" |
|
||||||
ref="share" |
|
||||||
page-id="home-index" |
|
||||||
@dislike="dislike" |
|
||||||
:videoId="videos[videoActiveIndex]?.id" |
|
||||||
:canDownload="videos[videoActiveIndex]?.canDownload" |
|
||||||
@play-feedback="showPlayFeedback = true" |
|
||||||
@shareToFriend="delayShowDialog(e => this.shareToFriend = true)" |
|
||||||
@showDouyinCode="showDouyinCode = true" |
|
||||||
@showShare2WeChatZone="shareType = 2" |
|
||||||
@share2WeChat="shareType = 3" |
|
||||||
@share2QQZone="shareType = 4" |
|
||||||
@share2QQ="shareType = 5" |
|
||||||
@share2Webo="shareType = 8" |
|
||||||
@download="shareType = 9" |
|
||||||
/> |
|
||||||
|
|
||||||
<PlayFeedback v-model="showPlayFeedback"/> |
|
||||||
|
|
||||||
<DouyinCode v-model="showDouyinCode"/> |
|
||||||
|
|
||||||
|
|
||||||
<ShareTo v-model:type="shareType" |
|
||||||
:videoId="videos[videoActiveIndex]?.id" |
|
||||||
:canDownload="videos[videoActiveIndex]?.canDownload" |
|
||||||
/> |
|
||||||
|
|
||||||
<FollowSetting |
|
||||||
@showChangeNote="delayShowDialog( e => this.showChangeNote = true)" |
|
||||||
@showBlockDialog="delayShowDialog(e => this.showBlockDialog = true)" |
|
||||||
@showShare="delayShowDialog( e => this.isSharing = true)" |
|
||||||
v-model="showFollowSetting"/> |
|
||||||
|
|
||||||
<FollowSetting2 |
|
||||||
@cancelFollow="$refs.uploader.cancelFollow()" |
|
||||||
v-model="showFollowSetting2"/> |
|
||||||
|
|
||||||
<BlockDialog v-model="showBlockDialog"/> |
|
||||||
|
|
||||||
<ConfirmDialog |
|
||||||
title="设置备注名" |
|
||||||
ok-text="确认" |
|
||||||
v-model:visible="showChangeNote" |
|
||||||
> |
|
||||||
<Search mode="light" v-model="test" :isShowSearchIcon="false"/> |
|
||||||
</ConfirmDialog> |
|
||||||
|
|
||||||
<ShareToFriend v-model="shareToFriend"/> |
|
||||||
|
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script lang="jsx"> |
|
||||||
import Video1 from "../../components/Video.vue"; |
|
||||||
import Comment from "../../components/Comment"; |
|
||||||
import Share from "../../components/Share"; |
|
||||||
import SlideColumnList from "../../components/slide/SlideColumnList"; |
|
||||||
import SlideRowList from "../../components/slide/SlideRowList"; |
|
||||||
import PlayFeedback from "./components/PlayFeedback"; |
|
||||||
import FromBottomDialog from "../../components/dialog/FromBottomDialog"; |
|
||||||
import ShareTo from "./components/ShareTo"; |
|
||||||
import DouyinCode from "../../components/DouyinCode"; |
|
||||||
import Uploader from "../me/Uploader"; |
|
||||||
import FollowSetting from "./components/FollowSetting"; |
|
||||||
import BlockDialog from "../message/components/BlockDialog"; |
|
||||||
import Search from "../../components/Search"; |
|
||||||
import ConfirmDialog from "../../components/dialog/ConfirmDialog"; |
|
||||||
import FollowSetting2 from "./components/FollowSetting2"; |
|
||||||
import Dom from "../../utils/dom"; |
|
||||||
import ShareToFriend from "./components/ShareToFriend"; |
|
||||||
import resource from "../../assets/data/resource.js"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "HomeIndex", |
|
||||||
components: { |
|
||||||
FromBottomDialog, |
|
||||||
SlideColumnList, |
|
||||||
SlideRowList, |
|
||||||
Video1, |
|
||||||
Comment, |
|
||||||
Share, |
|
||||||
Uploader, |
|
||||||
PlayFeedback, |
|
||||||
ShareTo, |
|
||||||
DouyinCode, |
|
||||||
FollowSetting, |
|
||||||
FollowSetting2, |
|
||||||
BlockDialog, |
|
||||||
Search, |
|
||||||
ConfirmDialog, |
|
||||||
ShareToFriend |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
videos: [], |
|
||||||
isCommenting: false, |
|
||||||
isSharing: false, |
|
||||||
canMove: true, |
|
||||||
|
|
||||||
shareType: -1, |
|
||||||
|
|
||||||
showPlayFeedback: false, |
|
||||||
showShareDuoshan: false, |
|
||||||
showShareDialog: false, |
|
||||||
showShare2WeChatZone: false, |
|
||||||
showDouyinCode: false, |
|
||||||
showFollowSetting: false, |
|
||||||
showFollowSetting2: false, |
|
||||||
showBlockDialog: false, |
|
||||||
showChangeNote: false, |
|
||||||
shareToFriend: false, |
|
||||||
|
|
||||||
test: '', |
|
||||||
|
|
||||||
videoActiveIndex: 0, |
|
||||||
baseActiveIndex: 0, |
|
||||||
activeIndex: 1, |
|
||||||
totalSize: 52, |
|
||||||
pageSize: 10, |
|
||||||
pageNo: 0, |
|
||||||
loading: false, |
|
||||||
render: (item, itemIndex, play) => { |
|
||||||
return ( |
|
||||||
<div className={`base-slide-item video-slide-item video-slide-item-${itemIndex}`} data-index={itemIndex}> |
|
||||||
<Video1 |
|
||||||
isPlay={play} |
|
||||||
video={item} |
|
||||||
index={itemIndex} |
|
||||||
onShowComments={e => this.isCommenting = true} |
|
||||||
onShowShare={e => this.isSharing = true} |
|
||||||
onGoUserInfo={e => this.baseActiveIndex = 1} |
|
||||||
onGoMusic={e => this.$nav('/home/music')} |
|
||||||
v-model={[this.videos[itemIndex], 'video']} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
videoActiveIndex(newVal, oldVal) { |
|
||||||
// console.log('videoActiveIndex', newVal, oldVal) |
|
||||||
new Dom(`.v-${newVal}-video`).trigger('play') |
|
||||||
setTimeout(() => { |
|
||||||
new Dom(`.v-${oldVal}-video`).trigger('stop') |
|
||||||
}, 200) |
|
||||||
if (newVal >= this.videos.length - 3 && newVal < this.totalSize) { |
|
||||||
if (this.loading) return |
|
||||||
this.pageNo++ |
|
||||||
this.getData() |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
created() { |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.height = document.body.clientHeight |
|
||||||
this.width = document.body.clientWidth |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
this.getData() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
delayShowDialog(cb) { |
|
||||||
setTimeout(() => { |
|
||||||
cb() |
|
||||||
}, 400) |
|
||||||
}, |
|
||||||
dislike() { |
|
||||||
this.$refs.virtualList.dislike(this.videos[10]) |
|
||||||
this.videos[this.currentSlideItemIndex] = this.videos[10] |
|
||||||
this.$notice('操作成功，将减少此类视频的推荐') |
|
||||||
}, |
|
||||||
async getData() { |
|
||||||
if (process.env.NODE_ENV !== 'development') { |
|
||||||
this.totalSize = 11 |
|
||||||
// return this.videos = this.$clone(this.localVideos) |
|
||||||
// await this.$sleep(200) |
|
||||||
// return this.videos = this.$clone(this.webVideos) |
|
||||||
return this.videos = this.$clone(resource.videos) |
|
||||||
} |
|
||||||
this.loading = true |
|
||||||
let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize}) |
|
||||||
console.log(res) |
|
||||||
this.loading = false |
|
||||||
if (res.code === this.SUCCESS) { |
|
||||||
this.totalSize = res.data.total |
|
||||||
this.videos = this.videos.concat(res.data.list) |
|
||||||
// this.videos = this.$clone(this.localVideos) |
|
||||||
} else { |
|
||||||
this.pageNo-- |
|
||||||
} |
|
||||||
}, |
|
||||||
t(e) { |
|
||||||
console.log('ttttt', e) |
|
||||||
}, |
|
||||||
end() { |
|
||||||
this.$notice('暂时没有更多了') |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style lang="less"> |
|
||||||
#home-index { |
|
||||||
height: 100%; |
|
||||||
width: 100%; |
|
||||||
//z-index: 4; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue