pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

save

pull/29/head
hhh 3 years ago
parent
063b3b5616
commit
aad126623c
12 changed files with 166 additions and 751 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      src/components/BaseMarquee.vue
  2. 91
      src/components/BaseMusic.vue
  3. 92
      src/components/slide/BVideo.vue
  4. 44
      src/components/slide/ItemDesc.vue
  5. 89
      src/components/slide/ItemToolbar.vue
  6. 2
      src/main.js
  7. 1
      src/pages/slideHooks/VInfinite.vue
  8. 546
      src/pages/slideHooks/index.vue
  9. 16
      src/utils/bus.js
  10. 7
      src/utils/const_var.js
  11. 9
      src/utils/hooks/useNav.js
  12. 7
      src/utils/index.jsx

13
src/components/BaseMarquee.vue
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
<template>
<div class="marquee" :class="name+'-marquee'" ref="marquee">
<div class="marquee" ref="marquee">
<span class="text" ref="marqueeText">
{{ text }}<span class="space"></span>
{{ text }}<span class="space"></span>
@ -18,17 +18,6 @@ export default { @@ -18,17 +18,6 @@ export default {
type: String,
default: ''
},
name: {
type: String,
default: ''
},
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
isPlay: {
type: Boolean,
default: () => {
return true
}
},
},
data() {
return {

91
src/components/BaseMusic.vue
Unescape View File

@ -1,83 +1,28 @@ @@ -1,83 +1,28 @@
<template>
<div class="music-wrapper" :class="name+'-music'" ref="musicWrapper">
<template v-if="!isStop">
<img class="music1" src="../assets/img/icon/home/music1.png" alt="">
<img class="music2" src="../assets/img/icon/home/music2.png" alt="">
</template>
<div class="music-bg" ref="musicBg">
<img class="music" :src="cover">
<div class="music-wrapper">
<img class="music1" :style="style" src="../assets/img/icon/home/music1.png" alt="">
<img class="music2" :style="style" src="../assets/img/icon/home/music2.png" alt="">
<div class="music-bg" :style="style" @click.stop="bus.emit('nav','/home/music')">
<img class="music" :src="props.cover">
</div>
</div>
</template>
<script>
import Dom from "../utils/dom";
import {nextTick} from "vue";
import BaseButton from "./BaseButton";
<script setup>
import {computed, inject} from "vue";
import bus from "../utils/bus";
export default {
name: "BaseMusic",
components: {
BaseButton
const props = defineProps({
cover: {
type: String,
default: ''
},
props: {
cover: {
type: String,
default: ''
},
name: {
type: String,
default: ''
},
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
isPlay: {
type: Boolean,
default: () => {
return true
}
},
},
data() {
return {
isStop: false,
musicBg: null,
}
},
methods: {
// triggerPause() {
// new Dom('.music-wrapper').trigger('pause')
// },
// triggerStart() {
// new Dom('.music-wrapper').trigger('start')
// },
pause() {
this.isStop = true
this.musicBg.css('webkitAnimationPlayState', 'isZooming.value')
},
stop() {
this.isStop = true
this.musicBg.css('webkitAnimationPlayState', 'paused')
},
start() {
this.isStop = false
this.musicBg.css('webkitAnimationPlayState', 'running')
}
},
mounted() {
nextTick(() => {
//直接document.querySelectorAll，找不到dom，必须用$refs的方式
this.musicBg = new Dom(this.$refs.musicBg)
})
const isPlaying = inject('isPlaying')
const style = computed(() => {
return {webkitAnimationPlayState: isPlaying.value ? 'running' : 'paused'}
})
new Dom(this.$refs.musicWrapper).on('pause', this.pause)
new Dom(this.$refs.musicWrapper).on('start', this.start)
new Dom(this.$refs.musicWrapper).on('stop', this.stop)
if (this.isPlay) {
this.start()
} else {
this.stop()
}
})
}
}
</script>
<style lang="less">

92
src/components/slide/BVideo.vue
Unescape View File

@ -10,16 +10,16 @@ @@ -10,16 +10,16 @@
:autoplay="isPlay" loop>
<p> 您的浏览器不支持 video 标签。</p>
</video>
<img src="../../assets/img/icon/play-white.png" class="pause" v-if="paused">
<img src="../../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
<div class="float" :style="{opacity: isUp?0:1}">
<div :style="{opacity:isMove ? 0:1}" class="normal">
<ItemToolbar v-model:item="localItem"
:index="index"
:position="position"
v-bind="$attrs"
/>
<ItemDesc
v-model:item="localItem"
:index="index"
:position="position"
/>
<div v-if="isMy" class="comment-status">
<div class="comment">
@ -68,6 +68,9 @@ import Dom from "../../utils/dom"; @@ -68,6 +68,9 @@ import Dom from "../../utils/dom";
import Loading from "../Loading";
import ItemToolbar from "./ItemToolbar";
import ItemDesc from "./ItemDesc";
import bus from "../../utils/bus";
import {SlideItemPlayStatus} from "../../utils/const_var";
import {computed} from "vue";
export default {
name: "BVideo",
@ -76,6 +79,12 @@ export default { @@ -76,6 +79,12 @@ export default {
ItemToolbar,
ItemDesc
},
provide() {
return {
// isPlaying: computed(() => this.status)
isPlaying: computed(() => this.isPlaying)
}
},
props: {
item: {
type: Object,
@ -128,12 +137,16 @@ export default { @@ -128,12 +137,16 @@ export default {
},
positionName() {
return 'item-' + Object.values(this.position).join('-')
},
isPlaying() {
return this.status === SlideItemPlayStatus.Play
}
},
data() {
return {
loading: false,
paused: false,
status: this.isPlay ? SlideItemPlayStatus.Play : SlideItemPlayStatus.Pause,
duration: 0,
step: 0,
currentTime: -1,
@ -142,20 +155,16 @@ export default { @@ -142,20 +155,16 @@ export default {
last: {x: 0, time: 0},
height: 0,
width: 0,
isPlaying: this.isPlay,
isAttention: false,
isMove: false,
isSingleClick: false,
test: [1, 2],
localItem: this.item,
progressBarRect: {},
videoScreenHeight: 0,
videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`
videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
}
},
mounted() {
console.log('position',this.position)
console.log('item',this.item)
this.height = document.body.clientHeight
this.width = document.body.clientWidth
let video = this.$refs.video
@ -208,67 +217,42 @@ export default { @@ -208,67 +217,42 @@ export default {
// eventTester("durationchange", '资源长度改变'); //资源长度改变
// eventTester("volumechange", '音量改变'); //音量改变
//这里不能用this.name，因为class可能还没绑上去。可以找不到dom
let videoWrapper = new Dom(this.$refs.videoWrapper)
videoWrapper.on('play', this.play)
videoWrapper.on('stop', this.stop)
videoWrapper.on('singleClick', () => {
if (this.isPlaying) {
this.pause()
} else {
this.play()
//这里playg事件，触发之后，会马上触发一次waiting事件。就很烦，会出现点完播放之后闪一下loading的情况，所以用一个变量来规避一下
this.isSingleClick = true
setTimeout(() => {
this.isSingleClick = false
}, 300)
}
this.loading = false
})
bus.on('singleClickBroadcast', this.click)
},
unmounted() {
bus.off('singleClickBroadcast', this.click)
},
methods: {
click(val) {
if (this.item.id === val) {
if (this.status === SlideItemPlayStatus.Play) {
this.pause()
} else {
this.play()
//这里playg事件，触发之后，会马上触发一次waiting事件。就很烦，会出现点完播放之后闪一下loading的情况，所以用一个变量来规避一下
// this.isSingleClick = true
setTimeout(() => {
// this.isSingleClick = false
}, 300)
}
this.loading = false
}
},
play() {
new Dom(`.${this.tag}-marquee`).trigger('start')
new Dom(`.${this.tag}-music`).trigger('start')
// console.log('trigger-play')
this.isPlaying = true
this.paused = false
this.status = SlideItemPlayStatus.Play
if (this.currentTime !== -1) {
this.$refs.video.currentTime = this.currentTime
}
this.$refs.video.volume = 1
this.$refs.video.play()
},
stop() {
new Dom(`.${this.tag}-marquee`).trigger('stop')
new Dom(`.${this.tag}-music`).trigger('stop')
// console.log('trigger-stop')
this.$refs.video.pause()
this.paused = false
this.isPlaying = false
this.$refs.video.currentTime = 0
},
pause() {
new Dom(`.${this.tag}-marquee`).trigger('pause')
new Dom(`.${this.tag}-music`).trigger('pause')
// console.log('trigger-pause')
this.status = SlideItemPlayStatus.Pause
this.$refs.video.pause()
this.paused = true
this.isPlaying = false
},
formatNumber(v) {
return Utils.formatNumber(v)
},
$duration(v) {
return Utils.$duration(v)
},
attention() {
let option = this.$refs['attention-option']
option.classList.add('attention')
setTimeout(() => {
this.isAttention = true
}, 1000)
},
touchstart(e) {
Utils.$stopPropagation(e)
this.start.x = e.touches[0].pageX

44
src/components/slide/ItemDesc.vue
Unescape View File

@ -2,18 +2,19 @@ @@ -2,18 +2,19 @@
import {reactive} from "vue";
import BaseMarquee from "../BaseMarquee";
import bus from "../../utils/bus";
const {item, index, isMy, isUp, isPlay} = defineProps({
const props = defineProps({
item: {
type: Object,
default: () => {
return {}
}
},
index: {
type: Number,
position: {
type: Object,
default: () => {
return -1
return {}
}
},
isMy: {
@ -22,19 +23,6 @@ const {item, index, isMy, isUp, isPlay} = defineProps({ @@ -22,19 +23,6 @@ const {item, index, isMy, isUp, isPlay} = defineProps({
return false
}
},
isUp: {
type: Boolean,
default: () => {
return false
}
},
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
isPlay: {
type: Boolean,
default: () => {
return true
}
},
})
const state = reactive({
@ -45,28 +33,24 @@ const state = reactive({ @@ -45,28 +33,24 @@ const state = reactive({
</script>
<template>
<div class="item-desc">
<div class="content ml1r mb1r" v-if="!isMy">
<div class="location-wrapper" v-if=" item.city || item.address">
<div class="content ml1r mb1r" v-if="!props.isMy">
<div class="location-wrapper" v-if=" props.item.city || item.address">
<div class="location">
<img src="../../assets/img/icon/location.webp" alt="">
<span>{{ item.city }}</span>
<template v-if="item.address">
<span>{{ props.item.city }}</span>
<template v-if="props.item.address">
<div class="gang"></div>
</template>
<span>{{ item.address }}</span>
<span>{{ props.item.address }}</span>
</div>
</div>
<div class="name mb1r fb" @click.stop="$emit('goUserInfo')">@{{ item.author.nickname }}</div>
<div class="name mb1r fb" @click.stop="$emit('goUserInfo')">@{{ props.item.author.nickname }}</div>
<div class="description mb1r">
{{ item.desc }}
{{ props.item.desc }}
</div>
<div class="music" @click.stop="$nav('/music')">
<div class="music" @click.stop="bus.emit('nav','/home/music')">
<img src="../../assets/img/icon/music.svg" alt="" class="music-image">
<BaseMarquee :key="state.name"
:name="state.name"
:isPlay="isPlay"
:text="item.music.title"
@click.stop="$emit('goMusic')"/>
<BaseMarquee :text="props.item.music.title"/>
</div>
</div>
<div v-else class="comment-status">

89
src/components/slide/ItemToolbar.vue
Unescape View File

@ -1,23 +1,15 @@ @@ -1,23 +1,15 @@
<script setup>
import BaseMusic from "../BaseMusic";
import Utils from "../../utils";
import {reactive} from "vue";
import bus from "../../utils/bus";
import {cloneDeep} from "lodash";
import {reactive,} from "vue";
const {item, index, isMy, isUp, isPlay, position} = defineProps({
const props = defineProps({
item: {
type: Object,
default: () => {
return {}
}
},
index: {
type: Number,
default: () => {
return -1
}
},
position: {
type: Object,
default: () => {
@ -30,38 +22,25 @@ const {item, index, isMy, isUp, isPlay, position} = defineProps({ @@ -30,38 +22,25 @@ const {item, index, isMy, isUp, isPlay, position} = defineProps({
return false
}
},
isUp: {
type: Boolean,
default: () => {
return false
}
},
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
isPlay: {
type: Boolean,
default: () => {
return true
}
},
})
const emit = defineEmits(['update:item'])
const state = reactive({
isAttention: false,
})
function loved(e, index) {
let old = cloneDeep(item)
old.isLoved = !old.isLoved
emit('update:item', old)
// bus.emit('update:item', {position, item: old})
const emit = defineEmits([
'update:item',
'goUserInfo',
'showComments',
'showShare',
'goMusic',
])
const state = reactive({})
function loved() {
Utils.updateItem(props, 'isLoved', !props.item.isLoved, emit)
}
function attention() {
// let option = this.$refs['attention-option']
// option.classList.add('attention')
// setTimeout(() => {
// this.isAttention = true
// }, 1000)
function attention(e) {
e.currentTarget.classList.add('attention')
setTimeout(() => {
Utils.updateItem(props, 'isAttention', true, emit)
}, 1000)
}
</script>
@ -69,10 +48,10 @@ function attention() { @@ -69,10 +48,10 @@ function attention() {
<template>
<div class="toolbar mb1r">
<div class="avatar-ctn mb4r">
<img class="avatar" :src="item.author.avatar" alt=""
<img class="avatar" :src="props.item.author.avatar" alt=""
@click.stop="$emit('goUserInfo')">
<transition name="fade">
<div v-if="!state.isAttention" @click.stop="attention" class="options" ref="attention-option">
<div v-if="!props.item.isAttention" @click.stop="attention" class="options">
<img class="no" src="../../assets/img/icon/add-light.png" alt="">
<img class="yes" src="../../assets/img/icon/ok-red.png" alt="">
</div>
@ -81,32 +60,34 @@ function attention() { @@ -81,32 +60,34 @@ function attention() {
</div>
<div class="love mb2r" @click.stop="loved($event)">
<div>
<img src="../../assets/img/icon/love.svg" class="love-image" v-if="!item.isLoved">
<img src="../../assets/img/icon/loved.svg" class="love-image" v-if="item.isLoved">
<img src="../../assets/img/icon/love.svg" class="love-image" v-if="!props.item.isLoved">
<img src="../../assets/img/icon/loved.svg" class="love-image" v-if="props.item.isLoved">
</div>
<span>{{ Utils.formatNumber(item.digg_count) }}</span>
<span>{{ Utils.formatNumber(props.item.digg_count) }}</span>
</div>
<div class="message mb2r" @click.stop="$emit('showComments')">
<!-- <div class="message mb15p" @click.stop="showComment">-->
<img src="../../assets/img/icon/message.svg" alt="" class="message-image">
<span>{{ Utils.formatNumber(item.comment_count) }}</span>
<span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
</div>
<div class="message mb2r" @click.stop="$emit('showComments')">
<img src="../../assets/img/icon/star-white.png" alt="" class="message-image">
<span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
</div>
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
<span>{{ Utils.formatNumber(item.share_count) }}</span>
<span>{{ Utils.formatNumber(props.item.share_count) }}</span>
</div>
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
<img src="../../assets/img/icon/menu-white.png" alt="" class="share-image">
</div>
<!-- <BaseMusic-->
<!-- :cover="props.item.music.cover"-->
<!-- @click.stop="$nav('/home/music')"-->
<!-- /> -->
<BaseMusic
:cover="item.music.cover"
:key="state.name"
:name="state.name"
:isPlay="isPlay"
@click.stop="$emit('goMusic')"
:cover="props.item.music.cover"
/>
</div>
</template>
<style scoped lang="less">

2
src/main.js
Unescape View File

@ -14,7 +14,7 @@ const vConsole = new VConsole(); @@ -14,7 +14,7 @@ const vConsole = new VConsole();
const app = Vue.createApp(App)
app.config.globalProperties.$api = {...api}
app.config.unwrapInjectedRef = true
const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
app.provide('mitt', mitt())
app.mixin(mixin)

1
src/pages/slideHooks/VInfinite.vue
Unescape View File

@ -195,6 +195,7 @@ function canNext(isNext) { @@ -195,6 +195,7 @@ function canNext(isNext) {
<div class="slide">
<div class="slide-list flex-direction-column"
ref="wrapperEl"
@click="null"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"

546
src/pages/slideHooks/index.vue
Unescape View File

@ -52,19 +52,23 @@ @@ -52,19 +52,23 @@
<script setup lang="jsx">
import H from './H'
import V from './V'
import VInfinite from './VInfinite.vue'
import SlideItem from './SlideItem'
import SlideVideo from "../../components/slide/SlideVideo";
import SlideUser from "../../components/slide/SlideUser";
import SlideImgs from "../../components/slide/SlideAlbum";
import BVideo from "../../components/slide/BVideo";
import resource from "../../assets/data/resource.js";
import {onMounted, onUnmounted, reactive} from "vue";
import enums from "../../utils/enums";
import bus from "../../utils/bus";
import Dom from "../../utils/dom";
import {useNav} from "../../utils/hooks/useNav";
const nav = useNav()
const videos = resource.videos.slice(0,5).map(v => {
v.type = 'recommend-video'
return v
})
const state = reactive({
baseIndex: 0,
@ -79,522 +83,7 @@ const state = reactive({ @@ -79,522 +83,7 @@ const state = reactive({
// type: 'imgs',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
// },
{
type: 'recommend-video',
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
video: 'http://douyin.ttentau.top/0.mp4',
"video_data_size": 26829508,
"duration": 427780,
"desc": "我不管我们宿舍第一好看",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 10480000,
"comment_count": 79000,
"download_count": 6,
"play_count": 0,
"share_count": 119000,
"forward_count": 0,
"collect_count": 3,
"sort": 195,
"is_top": 0,
"city": "北京",
address: '中央戏剧学院',
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
"create_time": "1630423555",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "敬礼变装",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "宿舍",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声-小高快起来跳舞",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "1",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: enums.DISPLAY_TYPE.ALL,
},
"city": "",
"province": '北京',
"country": "",
"location": "",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
"follower_count": 235000,
"aweme_count": 1796000,
"nickname": "我是小睿耶",
certification: '',
"phone": "",
"sex": "",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 0
}
},
{
type: 'recommend-video',
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
video: 'http://douyin.ttentau.top/0.mp4',
"video_data_size": 26829508,
"duration": 427780,
"desc": "我不管我们宿舍第一好看",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 10480000,
"comment_count": 79000,
"download_count": 6,
"play_count": 0,
"share_count": 119000,
"forward_count": 0,
"collect_count": 3,
"sort": 195,
"is_top": 0,
"city": "北京",
address: '中央戏剧学院',
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
"create_time": "1630423555",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "敬礼变装",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "宿舍",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声-小高快起来跳舞",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "1",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: enums.DISPLAY_TYPE.ALL,
},
"city": "",
"province": '北京',
"country": "",
"location": "",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
"follower_count": 235000,
"aweme_count": 1796000,
"nickname": "我是小睿耶",
certification: '',
"phone": "",
"sex": "",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 0
}
},
{
type: 'recommend-video',
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
video: 'http://douyin.ttentau.top/0.mp4',
"video_data_size": 26829508,
"duration": 427780,
"desc": "我不管我们宿舍第一好看",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 10480000,
"comment_count": 79000,
"download_count": 6,
"play_count": 0,
"share_count": 119000,
"forward_count": 0,
"collect_count": 3,
"sort": 195,
"is_top": 0,
"city": "北京",
address: '中央戏剧学院',
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
"create_time": "1630423555",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "敬礼变装",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "宿舍",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声-小高快起来跳舞",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "1",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: enums.DISPLAY_TYPE.ALL,
},
"city": "",
"province": '北京',
"country": "",
"location": "",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
"follower_count": 235000,
"aweme_count": 1796000,
"nickname": "我是小睿耶",
certification: '',
"phone": "",
"sex": "",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 0
}
},
{
type: 'recommend-video',
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
video: 'http://douyin.ttentau.top/0.mp4',
"video_data_size": 26829508,
"duration": 427780,
"desc": "我不管我们宿舍第一好看",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 10480000,
"comment_count": 79000,
"download_count": 6,
"play_count": 0,
"share_count": 119000,
"forward_count": 0,
"collect_count": 3,
"sort": 195,
"is_top": 0,
"city": "北京",
address: '中央戏剧学院',
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
"create_time": "1630423555",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "敬礼变装",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "宿舍",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声-小高快起来跳舞",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "1",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: enums.DISPLAY_TYPE.ALL,
},
"city": "",
"province": '北京',
"country": "",
"location": "",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
"follower_count": 235000,
"aweme_count": 1796000,
"nickname": "我是小睿耶",
certification: '',
"phone": "",
"sex": "",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 0
}
},
{
type: 'recommend-video',
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
video: 'http://douyin.ttentau.top/0.mp4',
"video_data_size": 26829508,
"duration": 427780,
"desc": "我不管我们宿舍第一好看",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 10480000,
"comment_count": 79000,
"download_count": 6,
"play_count": 0,
"share_count": 119000,
"forward_count": 0,
"collect_count": 3,
"sort": 195,
"is_top": 0,
"city": "北京",
address: '中央戏剧学院',
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
"create_time": "1630423555",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "敬礼变装",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "宿舍",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声-小高快起来跳舞",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "1",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: enums.DISPLAY_TYPE.ALL,
},
"city": "",
"province": '北京',
"country": "",
"location": "",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
"follower_count": 235000,
"aweme_count": 1796000,
"nickname": "我是小睿耶",
certification: '',
"phone": "",
"sex": "",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 0
}
},
{
type: 'recommend-video',
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
video: 'http://douyin.ttentau.top/0.mp4',
"video_data_size": 26829508,
"duration": 427780,
"desc": "我不管我们宿舍第一好看",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 10480000,
"comment_count": 79000,
"download_count": 6,
"play_count": 0,
"share_count": 119000,
"forward_count": 0,
"collect_count": 3,
"sort": 195,
"is_top": 0,
"city": "北京",
address: '中央戏剧学院',
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
"create_time": "1630423555",
"creator_id": "93864497380",
"status": 1,
"topics": [
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "敬礼变装",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
{
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
"name": "宿舍",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
}
],
"music": {
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
"title": "@穷电影创作的原声-小高快起来跳舞",
"creator_id": "93864497380",
"create_time": "1630423555",
"status": 1
},
"author": {
"id": "1",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: enums.DISPLAY_TYPE.ALL,
},
"city": "",
"province": '北京',
"country": "",
"location": "",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
"follower_count": 235000,
"aweme_count": 1796000,
"nickname": "我是小睿耶",
certification: '',
"phone": "",
"sex": "",
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 0
}
},
...videos
],
isCommenting: false,
@ -617,15 +106,21 @@ const state = reactive({ @@ -617,15 +106,21 @@ const state = reactive({
onMounted(() => {
bus.on('singleClick', () => {
new Dom(`.v-${state.baseIndex}-${state.navIndex}-${state.itemIndex}-item`).trigger('singleClick')
let id = ''
if (state.navIndex === 5) {
id = state.recommendVideos[state.itemIndex].id
}
bus.emit('singleClickBroadcast', id)
})
bus.on('update:item', val => {
console.log('val', val)
const {baseIndex, navIndex, itemIndex} = val.position
if (navIndex === 5) {
// state.recommendVideos[itemIndex] = val.item
state.recommendVideos[itemIndex] = val.item
}
})
bus.on('nav', path => {
nav(path)
})
})
onUnmounted(() => {
bus.offAll()
@ -646,7 +141,7 @@ function render(item, itemIndex, play, position) { @@ -646,7 +141,7 @@ function render(item, itemIndex, play, position) {
position={{...position, itemIndex}}
onShowComments={e => state.isCommenting = true}
onShowShare={e => state.isSharing = true}
onGoUserInfo={e => state.baseActiveIndex = 1}
onGoUserInfo={e => state.baseIndex = 1}
/>
}
return node
@ -705,6 +200,7 @@ function render(item, itemIndex, play, position) { @@ -705,6 +200,7 @@ function render(item, itemIndex, play, position) {
.h {
width: 90vw;
height: 80vh;
//height: calc(100vh - @footer-height);
overflow: hidden;
.red {

16
src/utils/bus.js
Unescape View File

@ -7,12 +7,24 @@ export default { @@ -7,12 +7,24 @@ export default {
} else {
cbs = [cb]
}
if (cbs.length > 10) {
console.error('eventMap', this.eventMap)
}
this.eventMap.set(eventType, cbs)
},
off(eventType) {
off(eventType, fn) {
let cbs = this.eventMap.has(eventType);
if (cbs) {
this.eventMap.delete(eventType);
if (fn) {
let cbs = this.eventMap.get(eventType)
let rIndex = cbs.findIndex(v => v === fn)
if (rIndex > -1) {
cbs.splice(rIndex, 1)
}
this.eventMap.set(eventType, cbs)
} else {
this.eventMap.delete(eventType);
}
}
},
offAll() {

7
src/utils/const_var.js
Unescape View File

@ -35,3 +35,10 @@ export const SlideAlbumPlayStatus = { @@ -35,3 +35,10 @@ export const SlideAlbumPlayStatus = {
HORIZONTAL: 0,
VERTICAL: 1,
}
/*播放状态*/
export const SlideItemPlayStatus = {
Play: 'Play',
Stop: 'Stop',
Pause: 'Pause',
}

9
src/utils/hooks/useNav.js
Unescape View File

@ -0,0 +1,9 @@ @@ -0,0 +1,9 @@
import {useRouter} from "vue-router";
export function useNav() {
const router = useRouter()
return (path, query = {}) => {
router.push({path, query})
}
}

7
src/utils/index.jsx
Unescape View File

@ -7,6 +7,7 @@ import Config from '../config' @@ -7,6 +7,7 @@ import Config from '../config'
import NoticeDialog from "../components/dialog/NoticeDialog";
import dayjs from 'dayjs'
import bus from "./bus";
import {cloneDeep} from "lodash";
export default {
require2(url) {
@ -372,4 +373,10 @@ export default { @@ -372,4 +373,10 @@ export default {
getDistance(start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
},
updateItem(props, key, val, emit) {
let old = cloneDeep(props.item)
old[key] = val
emit('update:item', old)
bus.emit('update:item', {position: props.position, item: old})
}
}

Write Preview
Loading…
Cancel
Save