优化me页面
This commit is contained in:
parent
f56be1a3fe
commit
2a1e1a7bb7
1
.gitignore
vendored
1
.gitignore
vendored
@ -21,3 +21,4 @@ pnpm-debug.log*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
/php_backend
|
||||
@ -2,18 +2,19 @@ import request from "../utils/request";
|
||||
|
||||
export default {
|
||||
me(params, data) {
|
||||
return request({url: '/me', method: 'post', params, data})
|
||||
return request({url: '/me', method: 'get', params, data})
|
||||
},
|
||||
my(params, data) {
|
||||
return request({url: '/my', method: 'post', params, data})
|
||||
// console.log('api - params',params)
|
||||
return request({url: '/me/my', method: 'get', params, data})
|
||||
},
|
||||
private(params, data) {
|
||||
return request({url: '/private', method: 'post', params, data})
|
||||
return request({url: '/me/private1', method: 'get', params, data})
|
||||
},
|
||||
like(params, data) {
|
||||
return request({url: '/like', method: 'post', params, data})
|
||||
return request({url: '/me/like', method: 'get', params, data})
|
||||
},
|
||||
collect(params, data) {
|
||||
return request({url: '/collect', method: 'post', params, data})
|
||||
return request({url: '/me/collect', method: 'get', params, data})
|
||||
},
|
||||
}
|
||||
@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div class="posters">
|
||||
<div class="poster-item" v-for="i in list">
|
||||
<img class="poster" :src="i.src" alt="">
|
||||
<div class="num">
|
||||
<img class="poster" :src="$imgPreview(i.poster)" alt="">
|
||||
<div class="num" v-if="mode === 'normal'">
|
||||
<img class="love" src="../assets/img/icon/love.svg" alt="">
|
||||
<span>{{ likeNum(i.like) }}</span>
|
||||
<span>{{ $likeNum(i.likeNum) }}</span>
|
||||
</div>
|
||||
<div v-else class="date">
|
||||
<div class="day">{{ getDay(i.createTime) }}</div>
|
||||
<div class="month">{{ getMonth(i.createTime) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -20,14 +24,45 @@ export default {
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
likeNum(num) {
|
||||
if (num < 1000) {
|
||||
return num
|
||||
} else {
|
||||
return parseInt(num / 10000) + 'w'
|
||||
getDay(time) {
|
||||
let date = new Date(time * 1000)
|
||||
return date.getDate()
|
||||
},
|
||||
getMonth(time) {
|
||||
let date = new Date(time * 1000)
|
||||
let month = date.getMonth() + 1
|
||||
switch (month) {
|
||||
case 1:
|
||||
return '一月'
|
||||
case 2:
|
||||
return '二月'
|
||||
case 3:
|
||||
return '三月'
|
||||
case 4:
|
||||
return '四月'
|
||||
case 5:
|
||||
return '五月'
|
||||
case 6:
|
||||
return '六月'
|
||||
case 7:
|
||||
return '七月'
|
||||
case 8:
|
||||
return '八月'
|
||||
case 9:
|
||||
return '九月'
|
||||
case 10:
|
||||
return '十月'
|
||||
case 11:
|
||||
return '十一月'
|
||||
case 12:
|
||||
return '十二月'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -55,16 +90,37 @@ export default {
|
||||
.num {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
bottom: .5rem;
|
||||
left: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.love {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
left: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 1.4rem;
|
||||
color: black;
|
||||
background: white;
|
||||
padding: .6rem;
|
||||
border-radius: .6rem;
|
||||
|
||||
.day{
|
||||
font-weight: bold;
|
||||
}
|
||||
.month{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export default {
|
||||
baseUrl: 'http://test.test.com'
|
||||
baseUrl: 'http://192.168.0.105//index.php/v1',
|
||||
filePreview:'http://192.168.0.105//static/uploads/'
|
||||
}
|
||||
@ -2,7 +2,7 @@ import * as Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import mitt from 'mitt'
|
||||
import './assets/scss/index.scss'
|
||||
import './mock'// 导入 mock 数据处理
|
||||
// import './mock'// 导入 mock 数据处理
|
||||
import api from './api'
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import Mock from 'mockjs'
|
||||
import globalMethods from '../utils/global-methods'
|
||||
import {da} from "pinyin/data/dict-zi-web";
|
||||
|
||||
Mock.setup({
|
||||
timeout: '500-1000'
|
||||
@ -48,13 +50,33 @@ Mock.Random.extend({
|
||||
}())
|
||||
|
||||
let pageSize = 15
|
||||
!(function my() {
|
||||
Mock.mock(/my/, options => {
|
||||
let params = globalMethods.$parseURL(options.url).params
|
||||
params.pageNo = ~~params.pageNo
|
||||
params.pageSize = ~~params.pageSize
|
||||
params.total = ~~params.total
|
||||
// console.log(params)
|
||||
// let data = {total: Mock.Random.natural(1, 20)}
|
||||
// data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
|
||||
let data = {total: 14}
|
||||
data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
|
||||
// data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
|
||||
let data = {
|
||||
total: params.total === -1 ? 20 : params.total,
|
||||
pageNo: params.pageNo,
|
||||
pageSize: params.pageSize
|
||||
}
|
||||
let listLength = 0
|
||||
if (params.pageNo !== 0) {
|
||||
let remainder = data.total - (params.pageNo * params.pageSize)
|
||||
listLength = remainder > params.pageSize ? params.pageSize : remainder
|
||||
} else {
|
||||
listLength = data.total > params.pageSize ? params.pageSize : data.total
|
||||
}
|
||||
data[`list|${listLength}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
|
||||
// console.log(data)
|
||||
Mock.mock(/my/, Mock.mock({data, code: 200, msg: '',}))
|
||||
}())
|
||||
return Mock.mock({data, code: 200, msg: '',})
|
||||
})
|
||||
|
||||
|
||||
!(function private1() {
|
||||
// let data = {total: Mock.Random.natural(1, 20)}
|
||||
|
||||
@ -78,31 +78,89 @@
|
||||
v-model:active-index="contentIndex">
|
||||
<SlideItem class="SlideItem"
|
||||
@touchmove="move"
|
||||
@scroll="scroll"
|
||||
:style="isScroll?'overflow: auto;':''">
|
||||
<Posters v-if="videos.my.total !== -1" :list="videos.my.list"></Posters>
|
||||
<Loading v-else :is-full-screen="false"></Loading>
|
||||
<no-more/>
|
||||
</SlideItem>
|
||||
<SlideItem class="SlideItem"
|
||||
@touchmove="move"
|
||||
:style="isScroll?'overflow: auto;':''">
|
||||
<Posters v-if="videos.private.total !== -1" :list="videos.private.list"></Posters>
|
||||
<Loading v-else :is-full-screen="false"></Loading>
|
||||
<no-more/>
|
||||
<Loading v-if="loadings.loading0" :is-full-screen="false"></Loading>
|
||||
<no-more v-else/>
|
||||
</SlideItem>
|
||||
<SlideItem class="SlideItem"
|
||||
@touchmove="'move'"
|
||||
:style="isScroll?'overflow: auto;':''">
|
||||
<div class="notice">
|
||||
<img src="../../assets/img/icon/me/lock-gray.png" alt="">
|
||||
<span>只有你能看到设为私密的作品和日常</span>
|
||||
</div>
|
||||
<Posters v-if="videos.private.total !== -1" mode="private" :list="videos.private.list"></Posters>
|
||||
<Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
|
||||
<no-more v-else/>
|
||||
</SlideItem>
|
||||
<SlideItem class="SlideItem"
|
||||
@touchmove="move"
|
||||
:style="isScroll?'overflow: auto;':''">
|
||||
<div class="notice">
|
||||
<img src="../../assets/img/icon/me/lock-gray.png" alt="">
|
||||
<span>只有你能看到自己的喜欢列表</span>
|
||||
</div>
|
||||
<Posters v-if="videos.like.total !== -1" :list="videos.like.list"></Posters>
|
||||
<Loading v-else :is-full-screen="false"></Loading>
|
||||
<no-more/>
|
||||
<Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
|
||||
<no-more v-else/>
|
||||
</SlideItem>
|
||||
<SlideItem class="SlideItem"
|
||||
@touchmove="move"
|
||||
:style="isScroll?'overflow: auto;':''">
|
||||
<Posters v-if="videos.collect.total !== -1" :list="videos.collect.list"></Posters>
|
||||
<Loading v-else :is-full-screen="false"></Loading>
|
||||
<no-more/>
|
||||
<div class="notice">
|
||||
<img src="../../assets/img/icon/me/lock-gray.png" alt="">
|
||||
<span>只有你能看到自己的收藏列表</span>
|
||||
</div>
|
||||
<div class="collect" ref="collect">
|
||||
<div class="video" v-if=" videos.collect.video.list.length">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<img src="../../assets/img/icon/me/video-whitegray.png" alt="">
|
||||
<span>视频</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>全部</span>
|
||||
<back direction="right"></back>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item"
|
||||
v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
|
||||
<img class="poster" :src="$imgPreview(i.poster)" alt="">
|
||||
<div class="num">
|
||||
<img class="love" src="../../assets/img/icon/love.svg" alt="">
|
||||
<span>{{ $likeNum(i.likeNum) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="audio" v-if=" videos.collect.video.list.length">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<img src="../../assets/img/icon/me/music-whitegray.png" alt="">
|
||||
<span>音乐</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>全部</span>
|
||||
<back direction="right"></back>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item"
|
||||
v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
|
||||
<img class="poster" :src="$imgPreview(i.poster)" alt="">
|
||||
<div class="title">用户创作的原声用户创作的原声用户创作的原声
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
|
||||
<no-more v-else/>
|
||||
</SlideItem>
|
||||
</SlideRowList>
|
||||
</div>
|
||||
@ -215,6 +273,7 @@
|
||||
import Posters from '../../components/Posters'
|
||||
import Footer from "../../components/Footer";
|
||||
import Indicator from '../../components/Indicator'
|
||||
import {nextTick} from 'vue'
|
||||
|
||||
export default {
|
||||
name: "Me",
|
||||
@ -246,7 +305,8 @@ export default {
|
||||
videos: {
|
||||
my: {
|
||||
list: [],
|
||||
total: -1
|
||||
total: -1,
|
||||
pageNo: 0
|
||||
},
|
||||
private: {
|
||||
list: [],
|
||||
@ -257,11 +317,24 @@ export default {
|
||||
total: -1
|
||||
},
|
||||
collect: {
|
||||
video: {
|
||||
list: [],
|
||||
total: -1
|
||||
total: -1,
|
||||
},
|
||||
audio: {
|
||||
list: [],
|
||||
total: -1,
|
||||
}
|
||||
},
|
||||
},
|
||||
slideRowListHeight: 0
|
||||
pageSize: 15,
|
||||
slideRowListHeight: 0,
|
||||
loadings: {
|
||||
loading0: false,
|
||||
loading1: false,
|
||||
loading2: false,
|
||||
loading3: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -287,42 +360,66 @@ export default {
|
||||
this.refs.headerHeight = this.$refs.header.offsetHeight
|
||||
this.refs.descHeight = this.$refs.desc.offsetHeight
|
||||
this.refs.defaultVideoSlideRowListHeight = this.$refs.videoSlideRowList.wrapperHeight
|
||||
// this.refs.videoSlideRowListHeight = this.$refs.videoSlideRowList.wrapperHeight
|
||||
this.changeIndex(0, null)
|
||||
})
|
||||
this.videoItemHeight = this.bodyWidth / 3 * 1.2 + 2
|
||||
// console.log('videoItemHeight',this.videoItemHeight)
|
||||
},
|
||||
methods: {
|
||||
async getScrollAreaHeight(index = this.contentIndex) {
|
||||
let scrollAreaHeight = 0
|
||||
if (index === 3) {
|
||||
await nextTick(async () => {
|
||||
scrollAreaHeight = this.$refs.collect.clientHeight + 60 + 40
|
||||
})
|
||||
} else {
|
||||
scrollAreaHeight = Math.ceil(this.videos[Object.keys(this.videos)[index]].list.length / 3) * this.videoItemHeight
|
||||
switch (index) {
|
||||
case 0:
|
||||
scrollAreaHeight += 60
|
||||
break
|
||||
case 1:
|
||||
scrollAreaHeight += 60 + 40
|
||||
break
|
||||
case 2:
|
||||
scrollAreaHeight += 60 + 40
|
||||
break
|
||||
}
|
||||
}
|
||||
return scrollAreaHeight
|
||||
},
|
||||
async changeIndex(newVal, oldVal) {
|
||||
// console.log('oldVal',oldVal)
|
||||
if (this.videos[Object.keys(this.videos)[newVal]].total === -1) {
|
||||
if (this.loadings['loading' + newVal]) return
|
||||
let videoOb = this.videos[Object.keys(this.videos)[newVal]]
|
||||
if (newVal === 3) {
|
||||
if (videoOb.video.total === -1) {
|
||||
this.loadings['loading' + newVal] = true
|
||||
let res = await this.$api.videos.collect({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
|
||||
this.loadings['loading' + newVal] = false
|
||||
if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data
|
||||
}
|
||||
} else {
|
||||
if (videoOb.total === -1) {
|
||||
this.loadings['loading' + newVal] = true
|
||||
let res
|
||||
switch (newVal) {
|
||||
case 0:
|
||||
res = await this.$api.videos.my()
|
||||
res = await this.$api.videos.my({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
|
||||
if (res.code === this.SUCCESS_CODE) this.videos.my = res.data
|
||||
this.$console(this.videos)
|
||||
break
|
||||
case 1:
|
||||
res = await this.$api.videos.private()
|
||||
res = await this.$api.videos.private({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
|
||||
if (res.code === this.SUCCESS_CODE) this.videos.private = res.data
|
||||
this.$console(this.videos)
|
||||
break
|
||||
case 2:
|
||||
res = await this.$api.videos.like()
|
||||
res = await this.$api.videos.like({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
|
||||
if (res.code === this.SUCCESS_CODE) this.videos.like = res.data
|
||||
this.$console(this.videos)
|
||||
break
|
||||
case 3:
|
||||
res = await this.$api.videos.collect()
|
||||
if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data
|
||||
this.$console(this.videos)
|
||||
break
|
||||
}
|
||||
this.loadings['loading' + newVal] = false
|
||||
}
|
||||
let posterHeight = Math.ceil(this.videos[Object.keys(this.videos)[newVal]].total / 3) * this.videoItemHeight
|
||||
// console.log('posterHeight', posterHeight)
|
||||
}
|
||||
let scrollAreaHeight = await this.getScrollAreaHeight(newVal)
|
||||
|
||||
// debugger
|
||||
|
||||
@ -332,24 +429,50 @@ export default {
|
||||
let screenSlideRowListHeight = this.slideRowListHeight + Math.abs(transformY)
|
||||
// console.log('slideRowListHeight', slideRowListHeight)
|
||||
// debugger
|
||||
if (posterHeight + 60 < screenSlideRowListHeight) {
|
||||
if (scrollAreaHeight < screenSlideRowListHeight) {
|
||||
this.refs.videoSlideRowListHeight = screenSlideRowListHeight
|
||||
}
|
||||
if (posterHeight + 60 > screenSlideRowListHeight) {
|
||||
this.refs.videoSlideRowListHeight = posterHeight + 60
|
||||
if (scrollAreaHeight > screenSlideRowListHeight) {
|
||||
this.refs.videoSlideRowListHeight = scrollAreaHeight
|
||||
}
|
||||
if (posterHeight + 60 > this.refs.defaultVideoSlideRowListHeight) {
|
||||
if (scrollAreaHeight > this.refs.defaultVideoSlideRowListHeight) {
|
||||
this.refs.videoSlideRowListHeight = this.refs.defaultVideoSlideRowListHeight
|
||||
}
|
||||
} else {
|
||||
if (posterHeight + 60 < this.refs.defaultVideoSlideRowListHeight) {
|
||||
// this.$setCss(this.$refs.videoSlideRowList, 'height', posterHeight + 'px')
|
||||
this.refs.videoSlideRowListHeight = posterHeight + 60
|
||||
if (scrollAreaHeight < this.refs.defaultVideoSlideRowListHeight) {
|
||||
this.refs.videoSlideRowListHeight = scrollAreaHeight
|
||||
} else {
|
||||
this.refs.videoSlideRowListHeight = this.refs.defaultVideoSlideRowListHeight
|
||||
}
|
||||
}
|
||||
},
|
||||
async loadMoreData() {
|
||||
if (this.loadings['loading' + this.contentIndex]) return
|
||||
let videoOb = this.videos[Object.keys(this.videos)[this.contentIndex]]
|
||||
if (videoOb.total > videoOb.list.length) {
|
||||
videoOb.pageNo++
|
||||
this.loadings['loading' + this.contentIndex] = true
|
||||
let res
|
||||
switch (this.contentIndex) {
|
||||
case 0:
|
||||
res = await this.$api.videos.my({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
|
||||
break
|
||||
case 1:
|
||||
res = await this.$api.videos.private({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
|
||||
break
|
||||
case 2:
|
||||
res = await this.$api.videos.like({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
|
||||
break
|
||||
case 3:
|
||||
res = await this.$api.videos.collect({pageNo: videoOb.pageNo, pageSize: this.pageSize,})
|
||||
break
|
||||
}
|
||||
this.loadings['loading' + this.contentIndex] = false
|
||||
if (res.code === this.SUCCESS_CODE) {
|
||||
videoOb.list = videoOb.list.concat(res.data.list)
|
||||
}
|
||||
}
|
||||
},
|
||||
touchStart(e) {
|
||||
this.$refs.scroll.style.transition = 'none'
|
||||
this.fixedLocationY = this.startLocationY = e.touches[0].pageY
|
||||
@ -358,14 +481,24 @@ export default {
|
||||
move(e) {
|
||||
(!this.isScroll) && e.preventDefault();
|
||||
},
|
||||
touchMove(e) {
|
||||
async scroll() {
|
||||
if (this.indicatorFixed) {
|
||||
let scrollAreaHeight = await this.getScrollAreaHeight()
|
||||
let SlideItems = document.querySelectorAll('.SlideItem')
|
||||
let SlideItem = SlideItems[this.contentIndex]
|
||||
if (scrollAreaHeight - this.refs.videoSlideRowListHeight < SlideItem.scrollTop + 60) {
|
||||
this.loadMoreData()
|
||||
}
|
||||
}
|
||||
},
|
||||
async touchMove(e) {
|
||||
let canTransformY = this.refs.descHeight - this.floatHeight
|
||||
let touchMoveDistance = e.touches[0].pageY - this.startLocationY
|
||||
let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
|
||||
|
||||
// console.log('move-pageMoveDistance', pageMoveDistance)
|
||||
// console.log('move-touchMoveDistance', touchMoveDistance)
|
||||
|
||||
|
||||
//页面已经滚动到头了,往下划动,要把header图放大
|
||||
if (pageMoveDistance > 0) {
|
||||
this.$refs.scroll.style.transform = `translate3d(0,0,0)`
|
||||
if (pageMoveDistance < 400) {
|
||||
@ -376,23 +509,40 @@ export default {
|
||||
this.moveYDistance = 400
|
||||
}
|
||||
} else {
|
||||
let posterHeight = Math.ceil(this.videos[Object.keys(this.videos)[this.contentIndex]].total / 3) * this.videoItemHeight
|
||||
if (this.refs.videoSlideRowListHeight > posterHeight + 60 && Math.abs(touchMoveDistance) > 30) {
|
||||
let scrollAreaHeight = await this.getScrollAreaHeight()
|
||||
//往下划动
|
||||
if (touchMoveDistance > 0) {
|
||||
//如果可滚动区的高度大于posterHeight,并且移动超过30,就直接滚到顶
|
||||
if (this.refs.videoSlideRowListHeight > scrollAreaHeight && Math.abs(touchMoveDistance) > 20) {
|
||||
this.$refs.scroll.style.transition = 'all .2s'
|
||||
this.$refs.scroll.style.transform = `translate3d(0,0,0)`
|
||||
this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
|
||||
this.moveYDistance = 0
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
this.changeIndex(this.contentIndex, this.contentIndex)
|
||||
let SlideItems = document.querySelectorAll('.SlideItem')
|
||||
SlideItems.forEach(SlideItem => {
|
||||
SlideItem.style.overflow = 'auto'
|
||||
SlideItem.scrollTop = 0
|
||||
})
|
||||
SlideItems.forEach(SlideItem => {
|
||||
SlideItem.style.overflow = 'hidden'
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
if (this.indicatorFixed) {
|
||||
let SlideItems = document.querySelectorAll('.SlideItem')
|
||||
let SlideItem = SlideItems[this.contentIndex]
|
||||
|
||||
if (!this.isScroll) {
|
||||
SlideItem.style.overflow = 'auto'
|
||||
SlideItem.scrollTop = Math.abs(pageMoveDistance) - this.refs.descHeight + this.floatHeight
|
||||
}
|
||||
|
||||
if (scrollAreaHeight - this.refs.videoSlideRowListHeight < SlideItem.scrollTop + 60) {
|
||||
this.loadMoreData()
|
||||
}
|
||||
|
||||
if (SlideItem.scrollTop === 0 && (e.touches[0].pageY - this.fixedLocationY) > 0) {
|
||||
this.isScroll = this.indicatorFixed = false
|
||||
SlideItem.style.overflow = 'hidden'
|
||||
@ -403,6 +553,7 @@ export default {
|
||||
if (this.slideRowListHeight > this.refs.videoSlideRowListHeight) return
|
||||
if (this.refs.defaultVideoSlideRowListHeight > this.refs.videoSlideRowListHeight) {
|
||||
let endTransformY = Math.abs(canTransformY) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight)
|
||||
console.log('endTransformY',endTransformY)
|
||||
let moveTransformY = Math.abs(pageMoveDistance) < Math.abs(endTransformY) ? pageMoveDistance : -endTransformY
|
||||
this.$refs.scroll.style.transform = `translate3d(0,${moveTransformY}px,0)`
|
||||
this.floatFixed = Math.abs(moveTransformY) > 100
|
||||
@ -424,7 +575,7 @@ export default {
|
||||
let canTransformY = this.refs.descHeight - this.floatHeight
|
||||
let touchMoveDistance = e.changedTouches[0].pageY - this.startLocationY
|
||||
let pageMoveDistance = this.moveYDistance + touchMoveDistance * 1.2
|
||||
console.log('end-pageMoveDistance', pageMoveDistance)
|
||||
// console.log('end-pageMoveDistance', pageMoveDistance)
|
||||
|
||||
let endTransformY = Math.abs(canTransformY) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight)
|
||||
if (this.indicatorFixed) {
|
||||
@ -438,6 +589,7 @@ export default {
|
||||
this.moveYDistance = 0
|
||||
this.floatShowName = this.floatFixed = this.isScroll = false
|
||||
} else {
|
||||
|
||||
if (this.slideRowListHeight > this.refs.videoSlideRowListHeight) {
|
||||
return this.moveYDistance = 0
|
||||
}
|
||||
@ -497,7 +649,6 @@ export default {
|
||||
this.moveYDistance = 0
|
||||
this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false
|
||||
let SlideItems = document.querySelectorAll('.SlideItem')
|
||||
// let SlideItem = SlideItems[this.contentIndex]
|
||||
SlideItems.forEach(SlideItem => {
|
||||
SlideItem.style.overflow = 'auto'
|
||||
SlideItem.scrollTop = 0
|
||||
@ -566,12 +717,146 @@ export default {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.no-more {
|
||||
font-size: 1.4rem;
|
||||
padding: 10px;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
.scroll {
|
||||
|
||||
.notice {
|
||||
font-size: 1.2rem;
|
||||
height: 4rem;
|
||||
color: $second-text-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 1.2rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.collect {
|
||||
.video {
|
||||
background: $active-main-bg;
|
||||
border-radius: .5rem;
|
||||
margin: .7rem;
|
||||
padding: 1rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: gainsboro;
|
||||
|
||||
img {
|
||||
height: 2rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: 33.33% 33.33% 33.33%;
|
||||
|
||||
.item {
|
||||
height: calc(33.33vw * 1.3);
|
||||
padding: .2rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
border-radius: .4rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: .5rem;
|
||||
left: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.love {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.audio {
|
||||
background: $active-main-bg;
|
||||
border-radius: .5rem;
|
||||
margin: .7rem;
|
||||
padding: 1rem;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: gainsboro;
|
||||
|
||||
img {
|
||||
height: 1.5rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: 33.33% 33.33% 33.33%;
|
||||
|
||||
.item {
|
||||
padding: .2rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.poster {
|
||||
border-radius: .4rem;
|
||||
width: 100%;
|
||||
height: calc((100vw - 3.4rem) / 3);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: .5rem;
|
||||
color: $second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.float {
|
||||
position: fixed;
|
||||
|
||||
@ -3,6 +3,7 @@ import SelectDialog from "../components/dialog/SelectDialog";
|
||||
import SimpleConfirmDialog from "../components/dialog/SimpleConfirmDialog";
|
||||
import ConfirmDialog from "../components/dialog/ConfirmDialog";
|
||||
import Loading from "../components/Loading";
|
||||
import Config from '../config'
|
||||
|
||||
export default {
|
||||
$showLoading() {
|
||||
@ -152,13 +153,13 @@ export default {
|
||||
return
|
||||
return console.log(JSON.stringify(v, null, 4))
|
||||
},
|
||||
$randomNum(minNum,maxNum){
|
||||
switch(arguments.length){
|
||||
$randomNum(minNum, maxNum) {
|
||||
switch (arguments.length) {
|
||||
case 1:
|
||||
return parseInt(Math.random()*minNum+1,10);
|
||||
return parseInt(Math.random() * minNum + 1, 10);
|
||||
break;
|
||||
case 2:
|
||||
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
|
||||
break;
|
||||
default:
|
||||
return 0;
|
||||
@ -191,5 +192,41 @@ export default {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(resolve, duration)
|
||||
})
|
||||
},
|
||||
$parseURL(url) {
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
return {
|
||||
host: a.hostname,
|
||||
port: a.port,
|
||||
query: a.search,
|
||||
params: (function () {
|
||||
const ret = {}
|
||||
const seg = a.search.replace(/^\?/, '')
|
||||
.split('&')
|
||||
const len = seg.length
|
||||
let i = 0
|
||||
let s
|
||||
for (; i < len; i++) {
|
||||
if (!seg[i]) {
|
||||
continue
|
||||
}
|
||||
s = seg[i].split('=')
|
||||
ret[s[0]] = s[1]
|
||||
}
|
||||
return ret
|
||||
}()),
|
||||
hash: a.hash.replace('#', ''),
|
||||
}
|
||||
},
|
||||
$imgPreview(url) {
|
||||
return Config.filePreview + url
|
||||
},
|
||||
$likeNum(num) {
|
||||
if (num < 1000) {
|
||||
return num
|
||||
} else {
|
||||
return parseInt(num / 10000) + 'w'
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -8,7 +8,6 @@ import globalMethods from './global-methods'
|
||||
const instance = axios.create({
|
||||
baseURL: config.baseUrl,
|
||||
timeout: 60000,
|
||||
withCredentials: true
|
||||
})
|
||||
// request拦截器
|
||||
instance.interceptors.request.use((config) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user