优化首页页面
This commit is contained in:
zyronon
parent
3d0628cb33
commit
39938c1cd2
@ -5,7 +5,7 @@
|
||||
<!--</template>-->
|
||||
<template>
|
||||
<div class="bg-video" v-bind:style="{'height':height+'px'}">
|
||||
<video :src="video.videoUrl" ref="video" muted :autoplay="!disabled" loop>
|
||||
<video :src="video.videoUrl" poster="../assets/img/poster/1.jpg" ref="video" muted :autoplay="play" loop>
|
||||
<p> 您的浏览器不支持 video 标签。</p>
|
||||
</video>
|
||||
<div class="float-container" v-if="true" @click.stop="togglePlayVideo">
|
||||
@ -125,7 +125,7 @@ export default {
|
||||
return -1
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
play: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return true
|
||||
@ -143,40 +143,6 @@ export default {
|
||||
return {left: this.pageX + 'px'}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
disabled: {
|
||||
immediate: true,
|
||||
handler(v) {
|
||||
// console.log('disabled', this.currentVideoId, v)
|
||||
this.isPlaying = !v
|
||||
if (!v) {
|
||||
// this.$store.commit('setCurrentVideoId', this.currentVideoId)
|
||||
setTimeout(() => {
|
||||
let video = this.$refs.video
|
||||
video.currentTime = 0
|
||||
// let fun = e => {
|
||||
// this.currentTime = Math.ceil(e.target.currentTime)
|
||||
// this.pageX = this.currentTime * this.step
|
||||
// }
|
||||
// video.addEventListener('timeupdate', fun)
|
||||
// video.addEventListener('loadedmetadata', e => {
|
||||
// this.duration = video.duration
|
||||
// if (this.duration > 60) {
|
||||
// this.step = this.width / Math.floor(this.duration)
|
||||
// } else {
|
||||
// video.removeEventListener('timeupdate', fun)
|
||||
// }
|
||||
// })
|
||||
video.play()
|
||||
})
|
||||
} else {
|
||||
if (this.$refs.video) {
|
||||
this.$refs.video.pause()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 0,
|
||||
@ -185,7 +151,7 @@ export default {
|
||||
pageX: 0,
|
||||
height: 0,
|
||||
width: 0,
|
||||
isPlaying: !this.disabled,
|
||||
isPlaying: !this.play,
|
||||
isAttention: false,
|
||||
line: null,
|
||||
point: null,
|
||||
@ -223,6 +189,29 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
$duration(v) {
|
||||
if (!v) return
|
||||
let m = Math.floor(v / 60)
|
||||
// let s = v % 60
|
||||
let s = Math.round(v % 60)
|
||||
let str = ''
|
||||
if (m === 0) {
|
||||
str = '00'
|
||||
} else if (m > 0 && m < 10) {
|
||||
str = '0' + m
|
||||
} else {
|
||||
str = m
|
||||
}
|
||||
str += ':'
|
||||
if (s === 0) {
|
||||
str += '00'
|
||||
} else if (s > 0 && s < 10) {
|
||||
str += '0' + s
|
||||
} else {
|
||||
str += s
|
||||
}
|
||||
return str
|
||||
},
|
||||
attention() {
|
||||
let option = this.$refs['attention-option']
|
||||
option.classList.add('attention')
|
||||
@ -275,23 +264,29 @@ export default {
|
||||
this.lVideo.isLoved = !this.lVideo.isLoved
|
||||
this.$emit('update:video', this.lVideo)
|
||||
},
|
||||
start(e) {
|
||||
this.pageX = e.touches[0].pageX
|
||||
},
|
||||
move(e) {
|
||||
if (this.isPlaying)return
|
||||
this.isMove = true
|
||||
let video = this.$refs.video
|
||||
video.pause()
|
||||
this.pageX = e.touches[0].pageX
|
||||
// console.log(this.step)
|
||||
this.currentTime = Math.ceil(Math.ceil(e.touches[0].pageX) / this.step)
|
||||
this.$stopPropagation(e)
|
||||
globalMethods.$stopPropagation(e)
|
||||
},
|
||||
end(e) {
|
||||
if (this.isPlaying)return
|
||||
console.log('end', e)
|
||||
setTimeout(() => {
|
||||
this.isMove = false
|
||||
}, 1000)
|
||||
let video = this.$refs.video
|
||||
video.currentTime = this.currentTime
|
||||
video.currentTime = this.currentTime = Math.ceil(Math.ceil(e.changedTouches[0].pageX) / this.step)
|
||||
video.play()
|
||||
// this.$stopPropagation(e)
|
||||
globalMethods.$stopPropagation(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,17 +73,28 @@ export default {
|
||||
if (this.currentSlideItemIndex >= this.defaultVirtualItemTotal) {
|
||||
startIndex = this.currentSlideItemIndex - (this.defaultVirtualItemTotal + 1) / 2
|
||||
}
|
||||
console.log('start',startIndex)
|
||||
this.list.slice(startIndex, startIndex + 5).map(
|
||||
(item, index) => {
|
||||
this.slideList.appendChild(this.getInsEl(item, startIndex + index))
|
||||
let el = null
|
||||
//自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
|
||||
if (startIndex + index === this.currentSlideItemIndex) {
|
||||
el = this.getInsEl(item, startIndex + index, true)
|
||||
} else {
|
||||
el = this.getInsEl(item, startIndex + index)
|
||||
}
|
||||
this.slideList.appendChild(el)
|
||||
})
|
||||
let that = this
|
||||
// $(".video-slide-item").each(function () {
|
||||
// $(this).css('top',
|
||||
// ((that.currentSlideItemIndex) > 1 ? (that.currentSlideItemIndex - 2) : (that.currentSlideItemIndex - 3))
|
||||
// *
|
||||
// that.wrapperHeight)
|
||||
// })
|
||||
if (that.currentSlideItemIndex > 2) {
|
||||
this.checkChildren()
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(0px,
|
||||
${-this.currentSlideItemIndex * this.wrapperHeight}px, 0px)`)
|
||||
$(".video-slide-item").each(function () {
|
||||
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
let endLength = oldVal.length + 3
|
||||
newVal.slice(oldVal.length, endLength).map((item, index) => {
|
||||
@ -102,6 +113,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted: async function () {
|
||||
await this.checkChildren()
|
||||
if (this.virtual) {
|
||||
this.currentSlideItemIndex = this.activeIndex
|
||||
this.list.slice(this.currentSlideItemIndex, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
|
||||
@ -111,8 +123,8 @@ export default {
|
||||
await this.checkChildren()
|
||||
},
|
||||
methods: {
|
||||
getInsEl(item, index) {
|
||||
let slideVNode = this.renderSlide(item, index)
|
||||
getInsEl(item, index, play = false) {
|
||||
let slideVNode = this.renderSlide(item, index, play)
|
||||
const app = Vue.createApp({
|
||||
render() {
|
||||
return slideVNode
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
// baseUrl: 'http://192.168.0.105//index.php/v1',
|
||||
// filePreview:'http://192.168.0.105/static/uploads/',
|
||||
baseUrl: 'http://192.168.10.164//index.php/v1',
|
||||
filePreview:'http://192.168.10.164/static/uploads/'
|
||||
baseUrl: 'http://192.168.0.105//index.php/v1',
|
||||
filePreview:'http://192.168.0.105/static/uploads/',
|
||||
// baseUrl: 'http://192.168.10.164//index.php/v1',
|
||||
// filePreview:'http://192.168.10.164/static/uploads/'
|
||||
}
|
||||
75
src/pages/Test.vue
Normal file
75
src/pages/Test.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="Test">
|
||||
<BaseHeader>
|
||||
<template v-slot:center>
|
||||
<span class="f16">申报学校信息</span>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<SlideColumnList
|
||||
ref="slideList"
|
||||
direction="column"
|
||||
>
|
||||
<SlideItem v-for="(item,index) of videos" :key="index">
|
||||
<Video1
|
||||
v-model:video="videos[index]"
|
||||
@showComments="isCommenting = !isCommenting"
|
||||
@showShare="isSharing = !isSharing"
|
||||
@goUserInfo="baseActiveIndex = 1"
|
||||
></Video1>
|
||||
</SlideItem>
|
||||
</SlideColumnList>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Test",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
videos: [
|
||||
{
|
||||
"id": "d2f55373-80dd-4c14-93a7-7a40e9cbf049",
|
||||
"posterUrl": "images/20210815/0.png",
|
||||
"videoUrl": "http://qy9rc9xff.hn-bkt.clouddn.com/9.mp4",
|
||||
"title": "",
|
||||
"likeNum": null,
|
||||
"commentNum": null,
|
||||
"sharedNum": null,
|
||||
"duration": null,
|
||||
"musicId": "126f9654-450b-466c-8003-085199a7f9b9",
|
||||
"browseCount": 0,
|
||||
"createTime": "1629683008",
|
||||
"createBy": "3e301843-e8bb-41c0-8240-9c4b42a17341",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../assets/scss/index";
|
||||
|
||||
.Test {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -178,7 +178,23 @@ export default {
|
||||
components: {SlideColumnList, SlideRowList, Video1, Comment, Share, Me},
|
||||
data() {
|
||||
return {
|
||||
webVideos: [],
|
||||
webVideos: [
|
||||
{
|
||||
"id": "d2f55373-80dd-4c14-93a7-7a40e9cbf049",
|
||||
"posterUrl": "images/20210815/0.png",
|
||||
"videoUrl": "http://qy9rc9xff.hn-bkt.clouddn.com/9.mp4",
|
||||
"title": "",
|
||||
"likeNum": null,
|
||||
"commentNum": null,
|
||||
"sharedNum": null,
|
||||
"duration": null,
|
||||
"musicId": "126f9654-450b-466c-8003-085199a7f9b9",
|
||||
"browseCount": 0,
|
||||
"createTime": "1629683008",
|
||||
"createBy": "3e301843-e8bb-41c0-8240-9c4b42a17341",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
videos: [],
|
||||
localVideos: [
|
||||
{
|
||||
@ -301,16 +317,17 @@ export default {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
loading: false,
|
||||
render: (item, itemIndex) => {
|
||||
render: (item, itemIndex, play) => {
|
||||
return (
|
||||
<div className="base-slide-item video-slide-item" data-index={itemIndex}>
|
||||
<Video1 disabled={itemIndex !== 0}
|
||||
video={item}
|
||||
index={itemIndex}
|
||||
onShowComments={e => this.isCommenting = true}
|
||||
onShowShare={e => this.isSharing = true}
|
||||
onGoUserInfo={e => this.baseActiveIndex = 1}
|
||||
v-model={[this.videos[itemIndex], 'video']}
|
||||
<Video1
|
||||
play={play}
|
||||
video={item}
|
||||
index={itemIndex}
|
||||
onShowComments={e => this.isCommenting = true}
|
||||
onShowShare={e => this.isSharing = true}
|
||||
onGoUserInfo={e => this.baseActiveIndex = 1}
|
||||
v-model={[this.videos[itemIndex], 'video']}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
@ -352,6 +369,7 @@ export default {
|
||||
if (res.code === this.SUCCESS_CODE) {
|
||||
this.totalSize = res.data.count
|
||||
this.videos = this.videos.concat(res.data.list)
|
||||
|
||||
// this.videos = this.$clone(this.localVideos)
|
||||
} else {
|
||||
this.pageNo--
|
||||
|
||||
@ -40,11 +40,13 @@ import PasswordLogin from "../pages/login/PasswordLogin";
|
||||
import VerificationCode from "../pages/login/VerificationCode";
|
||||
import RetrievePassword from "../pages/login/RetrievePassword";
|
||||
import Help from "../pages/login/Help";
|
||||
import Test from "../pages/Test";
|
||||
|
||||
const routes = [
|
||||
// {path: '', component: Music},
|
||||
// {path: '/', component: Index},
|
||||
{path: '/', component: Index2},
|
||||
{path: '/test', component: Test},
|
||||
{path: '/home', component: Index},
|
||||
{path: '/attention', component: Attention},
|
||||
{path: '/publish', component: Publish},
|
||||
|
||||
@ -197,29 +197,6 @@ export default {
|
||||
break;
|
||||
}
|
||||
},
|
||||
$duration(v) {
|
||||
if (!v) return
|
||||
let m = Math.floor(v / 60)
|
||||
// let s = v % 60
|
||||
let s = Math.round(v % 60)
|
||||
let str = ''
|
||||
if (m === 0) {
|
||||
str = '00'
|
||||
} else if (m > 0 && m < 10) {
|
||||
str = '0' + m
|
||||
} else {
|
||||
str = m
|
||||
}
|
||||
str += ':'
|
||||
if (s === 0) {
|
||||
str += '00'
|
||||
} else if (s > 0 && s < 10) {
|
||||
str += '0' + s
|
||||
} else {
|
||||
str += s
|
||||
}
|
||||
return str
|
||||
},
|
||||
$sleep(duration) {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(resolve, duration)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user