diff --git a/package-lock.json b/package-lock.json index 2481c4b..b18662c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2683,6 +2683,14 @@ "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=", "dev": true }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "babel-eslint": { "version": "10.1.0", "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz", @@ -3707,8 +3715,7 @@ "commander": { "version": "2.20.3", "resolved": "https://registry.nlark.com/commander/download/commander-2.20.3.tgz", - "integrity": "sha1-/UhehMA+tIgcIHIrpIA16FMa6zM=", - "dev": true + "integrity": "sha1-/UhehMA+tIgcIHIrpIA16FMa6zM=" }, "commondir": { "version": "1.0.1", @@ -5836,8 +5843,7 @@ "follow-redirects": { "version": "1.14.1", "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz", - "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=", - "dev": true + "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=" }, "for-in": { "version": "1.0.2", @@ -8060,6 +8066,14 @@ "integrity": "sha1-Hcuei0G7RlJXm8XUyOumFwO7RX8=", "dev": true }, + "mockjs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz", + "integrity": "sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==", + "requires": { + "commander": "*" + } + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz", diff --git a/package.json b/package.json index a8de120..52aaf81 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,11 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "axios": "^0.21.1", "core-js": "^3.6.5", "lodash": "^4.17.21", "mitt": "^2.1.0", + "mockjs": "^1.1.0", "pinyin": "^2.9.0", "swiper": "^6.7.5", "vue": "^3.0.0", diff --git a/src/api/index.js b/src/api/index.js new file mode 100644 index 0000000..7dd094e --- /dev/null +++ b/src/api/index.js @@ -0,0 +1,5 @@ +import videos from './videos' + +export default { + videos, +} diff --git a/src/api/videos.js b/src/api/videos.js new file mode 100644 index 0000000..d1214f2 --- /dev/null +++ b/src/api/videos.js @@ -0,0 +1,19 @@ +import request from "../utils/request"; + +export default { + me(params, data) { + return request({url: '/me', method: 'post', params, data}) + }, + my(params, data) { + return request({url: '/my', method: 'post', params, data}) + }, + private(params, data) { + return request({url: '/private', method: 'post', params, data}) + }, + like(params, data) { + return request({url: '/like', method: 'post', params, data}) + }, + collect(params, data) { + return request({url: '/collect', method: 'post', params, data}) + }, +} \ No newline at end of file diff --git a/src/components/Loading.vue b/src/components/Loading.vue index 4fa6551..5b40f7b 100644 --- a/src/components/Loading.vue +++ b/src/components/Loading.vue @@ -1,12 +1,18 @@ @@ -14,13 +20,25 @@ export default { @import "../assets/scss/index"; .Loading { - position: fixed; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - display: flex; - justify-content: space-between; - width: 2.2rem; + + &.normal { + width: 100%; + height: 4rem; + display: flex; + justify-content: center; + align-items: center; + } + + + &.full { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: flex; + justify-content: space-between; + width: 2.2rem; + } .circle { width: 1rem; diff --git a/src/components/Posters.vue b/src/components/Posters.vue index 2723f78..1c701d7 100644 --- a/src/components/Posters.vue +++ b/src/components/Posters.vue @@ -27,7 +27,7 @@ export default { if (num < 1000) { return num } else { - return num / 10000 + 'w' + return parseInt(num / 10000) + 'w' } } } diff --git a/src/components/slide/SlideColumnList.vue b/src/components/slide/SlideColumnList.vue index d3b687b..c9419d2 100644 --- a/src/components/slide/SlideColumnList.vue +++ b/src/components/slide/SlideColumnList.vue @@ -204,8 +204,8 @@ export default { && this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2 && this.currentSlideItemIndex <= this.list.length - 3 ) { - let res = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`) - // console.log(res) + let videos = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`) + // console.log(videos) if (res.length === 0) { this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex)) this.appInsMap.get($("#base-slide-list .video-slide-item:first").data('index')).unmount() diff --git a/src/components/slide/SlideRowList.vue b/src/components/slide/SlideRowList.vue index 5b4e1c4..a5e329d 100644 --- a/src/components/slide/SlideRowList.vue +++ b/src/components/slide/SlideRowList.vue @@ -186,6 +186,8 @@ export default { this.startTime = Date.now() }, touchMove(e) { + // this.$stopPropagation(e) + if (!this.canMove) return; this.moveXDistance = e.touches[0].pageX - this.startLocationX this.moveYDistance = e.touches[0].pageY - this.startLocationY diff --git a/src/config/index.js b/src/config/index.js new file mode 100644 index 0000000..37a75f0 --- /dev/null +++ b/src/config/index.js @@ -0,0 +1,3 @@ +export default { + baseUrl: 'http://test.test.com' +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 3dfd42e..dc1908a 100644 --- a/src/main.js +++ b/src/main.js @@ -1,45 +1,17 @@ import * as Vue from 'vue' import App from './App.vue' import mitt from 'mitt' - import './assets/scss/index.scss' - -import BaseHeader from "./components/BaseHeader.vue" -import SlideList from "./components/slide/SlideList"; -import SlideItem from "./components/slide/SlideItem"; -import Video from "./components/Video"; -import Footer from "./components/Footer"; - - +import './mock'// 导入 mock 数据处理 +import api from './api' import router from "./router"; import store from "./store"; -import globalMethods from './utils/global-methods' -import SlideRowList from "./components/slide/SlideRowList"; -import SlideColumnList from "./components/slide/SlideColumnList"; -import Mask from "./components/Mask"; -import NoMore from "./components/NoMore"; -import Indicator from "./components/Indicator"; -import Back from "./components/Back"; +import mixin from "./utils/mixin"; -const mixin = { - methods: { - ...globalMethods - } -} const app = Vue.createApp(App) +app.config.globalProperties.$api = {...api} app.provide('mitt', mitt()) -app.component('BaseHeader', BaseHeader) -app.component('SlideList', SlideList) -app.component('SlideRowList', SlideRowList) -app.component('SlideColumnList', SlideColumnList) -app.component('SlideItem', SlideItem) -app.component('Indicator', Indicator) -app.component('Video1', Video) -app.component('Footer', Footer) -app.component('Mask', Mask) -app.component('NoMore', NoMore) -app.component('back', Back) app.mixin(mixin) app.use(router) app.use(store) diff --git a/src/mock/index.js b/src/mock/index.js new file mode 100644 index 0000000..d0feef5 --- /dev/null +++ b/src/mock/index.js @@ -0,0 +1,74 @@ +import Mock from 'mockjs' + +Mock.setup({ + timeout: '500-1000' +}) + +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) +}()) + +let pageSize = 15 +!(function my() { + // 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: 8} + data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + Mock.mock(/my/, Mock.mock({data, code: 200, msg: '',})) +}()) + +!(function private1() { + let data = {total: Mock.Random.natural(1, 20)} + data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + Mock.mock(/private/, Mock.mock({data, code: 200, msg: '',})) +}()) + +!(function like() { + let data = {total: Mock.Random.natural(1, 20)} + data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + Mock.mock(/like/, Mock.mock({data, code: 200, msg: '',})) +}()) +!(function collect() { + let data = {total: Mock.Random.natural(1, 20)} + data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + Mock.mock(/collect/, Mock.mock({data, code: 200, msg: '',})) +}()) diff --git a/src/pages/me/Me2.vue b/src/pages/me/Me2.vue index 6b188d4..2012a86 100644 --- a/src/pages/me/Me2.vue +++ b/src/pages/me/Me2.vue @@ -65,50 +65,47 @@ - -
暂时没有更多了
+ + + - -
暂时没有更多了
+ + + - -
暂时没有更多了
+ + + - -
暂时没有更多了
+ + + - - - - - - - - -