From abc5b15ff58b2cb8b1c05df1a3c95af0dc0e73a5 Mon Sep 17 00:00:00 2001 From: zyronon Date: Tue, 5 Oct 2021 17:59:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 34 ++++++- src/api/videos.js | 6 ++ src/assets/less/variables.less | 3 +- src/components/slide/Indicator.vue | 2 +- src/mock/index.js | 110 ++++++++++++++--------- src/pages/home/Music.vue | 24 +++-- src/pages/me/rightMenu/LookHistory.vue | 118 ++++++++++++++++++++----- 7 files changed, 219 insertions(+), 78 deletions(-) diff --git a/README.md b/README.md index 22c45ec..21b3ded 100644 --- a/README.md +++ b/README.md @@ -6,13 +6,41 @@ ## 开发进度 +☑ + 页面|进度 ---|--- -首页| ☑ -首页| +首页|50% +-- 音乐|☑ +-- 抖音音乐榜|☑ +-- 搜索|50%; +-- 直播|50%; +朋友|0% +消息|80% +我|90% +-- 关注|0 +-- 粉丝|0 +-- 编辑资料|☑ +-- 添加朋友|☑ +-- 我的音乐|30% +-- 抖音商城|0 +-- 我的订单|0 +-- 钱包|0 +-- 我的二维码|☑ +-- 我的二维码|☑ +-- 设置|30% +首页| +首页| +首页| +首页| +首页| +首页| +首页| +首页| +首页| ## 目标功能 - + - [x] 首页 - [x] 直播 - [x] 登录、注册 diff --git a/src/api/videos.js b/src/api/videos.js index 6f8bdc5..c082489 100644 --- a/src/api/videos.js +++ b/src/api/videos.js @@ -20,4 +20,10 @@ export default { recommended(params, data) { return request({url: '/video/recommended', method: 'get', params, data}) }, + historyVideo(params, data) { + return request({url: '/video/historyVideo', method: 'get', params, data}) + }, + historyOther(params, data) { + return request({url: '/video/historyOther', method: 'get', params, data}) + }, } \ No newline at end of file diff --git a/src/assets/less/variables.less b/src/assets/less/variables.less index 5f403a5..b8847e5 100644 --- a/src/assets/less/variables.less +++ b/src/assets/less/variables.less @@ -1,4 +1,5 @@ @footer-height: 6rem; -@header-height: 6rem; +@header-height: 6.1rem; +@indicator-height: 5rem; @padding-page: 1.5rem; \ No newline at end of file diff --git a/src/components/slide/Indicator.vue b/src/components/slide/Indicator.vue index e93ec82..6ef9f10 100644 --- a/src/components/slide/Indicator.vue +++ b/src/components/slide/Indicator.vue @@ -123,7 +123,7 @@ export default { .indicator-ctn { font-size: 1.4rem; width: 100%; - height: 5rem; + height: @indicator-height; top: 0; left: 0; right: 0; diff --git a/src/mock/index.js b/src/mock/index.js index bb0cb89..535ab74 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -35,52 +35,53 @@ Mock.mock(/recommended/, options => { } ) -Mock.Random.extend({ - imgs: function (date) { - return this.pick([ - require('../assets/img/poster/1.jpg'), - require('../assets/img/poster/2.jpg'), - require('../assets/img/poster/3.jpg'), - require('../assets/img/poster/4.jpg'), - require('../assets/img/poster/5.jpg'), - require('../assets/img/poster/6.jpg'), - require('../assets/img/poster/7.jpg'), - require('../assets/img/poster/8.jpg'), - require('../assets/img/poster/9.jpg'), - require('../assets/img/poster/10.jpg'), - require('../assets/img/poster/11.jpg'), - ]) - } -}) -!(function me() { - let my = {total: Mock.Random.natural(1, 20)} - my[`list|${my.total > 10 ? 10 : my.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] - - let private1 = {total: Mock.Random.natural(1, 20)} - private1[`list|${private1.total > 10 ? 10 : private1.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] - - let like = {total: Mock.Random.natural(1, 20)} - like[`list|${like.total > 10 ? 10 : like.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] - - let collect = {total: Mock.Random.natural(1, 20)} - collect[`list|${collect.total > 10 ? 10 : collect.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] - - const data = Mock.mock({ - 'data': { - my, - private: private1, - like, - collect - }, - code: 200, - msg: '', - }) - Mock.mock('me', data) -}()) +// Mock.Random.extend({ +// imgs: function (date) { +// return this.pick([ +// require('../assets/img/poster/1.jpg'), +// require('../assets/img/poster/2.jpg'), +// require('../assets/img/poster/3.jpg'), +// require('../assets/img/poster/4.jpg'), +// require('../assets/img/poster/5.jpg'), +// require('../assets/img/poster/6.jpg'), +// require('../assets/img/poster/7.jpg'), +// require('../assets/img/poster/8.jpg'), +// require('../assets/img/poster/9.jpg'), +// require('../assets/img/poster/10.jpg'), +// require('../assets/img/poster/11.jpg'), +// ]) +// } +// }) +// !(function me() { +// let my = {total: Mock.Random.natural(1, 20)} +// my[`list|${my.total > 10 ? 10 : my.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] +// +// let private1 = {total: Mock.Random.natural(1, 20)} +// private1[`list|${private1.total > 10 ? 10 : private1.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] +// +// let like = {total: Mock.Random.natural(1, 20)} +// like[`list|${like.total > 10 ? 10 : like.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] +// +// let collect = {total: Mock.Random.natural(1, 20)} +// collect[`list|${collect.total > 10 ? 10 : collect.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] +// +// const data = Mock.mock({ +// 'data': { +// my, +// private: private1, +// like, +// collect +// }, +// code: 200, +// msg: '', +// }) +// Mock.mock('me', data) +// }()) Mock.mock(/my/, options => { let page = getPage(options) + console.log('mock', page) return Mock.mock({ data: { pageNo: page.pageNo, @@ -94,7 +95,7 @@ Mock.mock(/like/, options => { return Mock.mock({ data: { pageNo: page.pageNo, - total: resource.my.length, + total: resource.like.length, list: resource.like.slice(page.offset, page.limit), }, code: 200, msg: '', }) @@ -104,7 +105,7 @@ Mock.mock(/private1/, options => { return Mock.mock({ data: { pageNo: page.pageNo, - total: resource.my.length, + total: resource.private1.length, list: resource.private1.slice(page.offset, page.limit), }, code: 200, msg: '', }) @@ -125,3 +126,24 @@ Mock.mock(/collect/, options => { }) }) +Mock.mock(/historyVideo/, options => { + let page = getPage(options) + return Mock.mock({ + data: { + pageNo: page.pageNo, + // total: resource.my.length, + total: 50, + list: resource.my.slice(page.offset, page.limit), + }, code: 200, msg: '', + }) +}) +Mock.mock(/historyOther/, options => { + let page = getPage(options) + return Mock.mock({ + data: { + pageNo: page.pageNo, + total: 0, + list: [], + }, code: 200, msg: '', + }) +}) \ No newline at end of file diff --git a/src/pages/home/Music.vue b/src/pages/home/Music.vue index 2563400..1ae894e 100644 --- a/src/pages/home/Music.vue +++ b/src/pages/home/Music.vue @@ -43,6 +43,7 @@ +
@@ -124,8 +125,10 @@ export default { showDouyinCode: false, audio: new Audio(), - - videos: resource.my, + total: 0, + pageNo: 0, + pageSize: 15, + videos: [], music: { name: '发如雪', @@ -159,17 +162,28 @@ export default { if (this.$route.query.name) { this.music = this.$route.query } + this.loadData(true) }, computed: {}, methods: { toggleCollect() { this.isCollect = !this.isCollect }, - async loadData() { + async loadData(init = false) { + if (this.loading) return + if (!init) { + if (this.total <= this.videos.length) { + return this.$notice('暂时没有更多了') + } + this.pageNo++ + } this.loading = true - await this.$sleep(1500) - this.videos = this.videos.concat(this.videos2) + let res = await this.$api.videos.my({pageNo: this.pageNo, pageSize: this.pageSize,}) this.loading = false + if (res.code === this.SUCCESS) { + this.videos = this.videos.concat(res.data.list) + this.total = res.data.total + } }, togglePlay() { this.isPlay = !this.isPlay diff --git a/src/pages/me/rightMenu/LookHistory.vue b/src/pages/me/rightMenu/LookHistory.vue index 6b099e1..2f15798 100644 --- a/src/pages/me/rightMenu/LookHistory.vue +++ b/src/pages/me/rightMenu/LookHistory.vue @@ -4,7 +4,7 @@ -