MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bf

Browse Source
This commit is contained in:
zyronon 2023-02-20 02:08:17 +08:00
parent 2da4bc37cf
commit 9eef092e17
1 changed files with 0 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

331
src/pages/home/Index2.vue
View File

@ -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>