Browse Source

优化首页页面

pull/19/head
zyronon 4 years ago
parent
commit
39938c1cd2
  1. 75
      src/components/Video.vue
  2. 30
      src/components/slide/SlideColumnList.vue
  3. 8
      src/config/index.js
  4. 75
      src/pages/Test.vue
  5. 36
      src/pages/home/Index2.vue
  6. 2
      src/router/index.js
  7. 23
      src/utils/global-methods.js

75
src/components/Video.vue

@ -5,7 +5,7 @@ @@ -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 { @@ -125,7 +125,7 @@ export default {
return -1
}
},
disabled: {
play: {
type: Boolean,
default: () => {
return true
@ -143,40 +143,6 @@ export default { @@ -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 { @@ -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 { @@ -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 { @@ -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)
}
}
}

30
src/components/slide/SlideColumnList.vue

@ -73,17 +73,28 @@ export default { @@ -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
//0jqtrigger 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 { @@ -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 { @@ -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

8
src/config/index.js

@ -1,6 +1,6 @@ @@ -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

@ -0,0 +1,75 @@ @@ -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>

36
src/pages/home/Index2.vue

@ -178,7 +178,23 @@ export default { @@ -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 { @@ -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 { @@ -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--

2
src/router/index.js

@ -40,11 +40,13 @@ import PasswordLogin from "../pages/login/PasswordLogin"; @@ -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},

23
src/utils/global-methods.js

@ -197,29 +197,6 @@ export default { @@ -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…
Cancel
Save