diff --git a/README.md b/README.md index 9ed9389..5882a73 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,14 @@ ### 简体中文 | [English](README-en-US.md) ## 预览 - -### 注：电脑端请用Chrome手机模式访问 - -### 注：手机请用安卓Via浏览器预览。其他浏览器检测到页面内有视频会强制将视频全屏，并显示控制按钮，导致css和js都失效 - [在线预览DEMO](https://ttentau.github.io/ttentau/dy/) +### 注意：电脑端请用Chrome手机模式访问 +### 注意：安卓手机请用Via浏览器预览。其他浏览器检测到页面内有视频会强制将视频全屏，并显示控制按钮，导致css和js都失效 ## 简介 -**douyin** 是一个模仿抖音的移动端短视频项目，它基于 [vue 3](https://v3.cn.vuejs.org/), -[vite 2](https://cn.vitejs.dev/) +**douyin** 是一个模仿抖音的移动端短视频项目，它基于 [Vue 3](https://v3.cn.vuejs.org/), +[Vite](https://cn.vitejs.dev/) 实现。使用了最新的Vue全家桶技术栈，后台数据通过[mock-js](http://mockjs.com)搭建。相信不管你是处于哪个段位的工程师，本项目都能帮助到你。 ## 功能点 diff --git a/src/components/Share.vue b/src/components/Share.vue index a728dad..73fc02e 100644 --- a/src/components/Share.vue +++ b/src/components/Share.vue @@ -7,7 +7,7 @@ :show-heng-gang="false" :touch-moved="false" maskMode="light" - height="37rem" + height="370rem" mode="dark">
@@ -279,7 +279,7 @@ export default { .title { font-size: 14rem; - padding: 20px; + padding: 20rem; position: relative; display: flex; align-items: center; diff --git a/src/mock/index.js b/src/mock/index.js index 4574138..ea4765b 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -1,6 +1,7 @@ import Mock from 'mockjs' import globalMethods from '../utils' import resource from "../assets/data/resource.js"; +import {shuffle} from "lodash"; function getParams(options) { let params = globalMethods.$parseURL(options.url).params @@ -19,21 +20,28 @@ function getPage(options) { Mock.setup({ timeout: '500-1000' }) -let allRecommendVideos = [] +let allRecommendVideos = resource.videos.map(v => { + v.type = 'recommend-video' + return v +}) -for (let i = 0; i < 10; i++) { - allRecommendVideos = allRecommendVideos.concat(resource.videos) +for (let i = 0; i < 50; i++) { + allRecommendVideos = allRecommendVideos.concat( + shuffle(resource.videos) + .slice(0, 10) + .map(v => { + v.type = 'recommend-video' + return v + })) } Mock.mock(/recommended/, options => { - let page = getPage(options) - return Mock.mock({ - data: { - total: allRecommendVideos.length, - list: allRecommendVideos.slice(page.offset, page.limit), - }, code: 200, msg: '', - }) - } -) + let page = getPage(options) + return Mock.mock({ + data: { + total: allRecommendVideos.length, list: allRecommendVideos.slice(page.offset, page.limit), + }, code: 200, msg: '', + }) +}) // Mock.Random.extend({ // imgs: function (date) { @@ -84,9 +92,7 @@ Mock.mock(/my/, options => { console.log('mock', page) return Mock.mock({ data: { - pageNo: page.pageNo, - total: resource.my.length, - list: resource.my.slice(page.offset, page.limit), + pageNo: page.pageNo, total: resource.my.length, list: resource.my.slice(page.offset, page.limit), }, code: 200, msg: '', }) }) @@ -94,9 +100,7 @@ Mock.mock(/like/, options => { let page = getPage(options) return Mock.mock({ data: { - pageNo: page.pageNo, - total: resource.like.length, - list: resource.like.slice(page.offset, page.limit), + pageNo: page.pageNo, total: resource.like.length, list: resource.like.slice(page.offset, page.limit), }, code: 200, msg: '', }) }) @@ -104,9 +108,7 @@ Mock.mock(/private1/, options => { let page = getPage(options) return Mock.mock({ data: { - pageNo: page.pageNo, - total: resource.private1.length, - list: resource.private1.slice(page.offset, page.limit), + pageNo: page.pageNo, total: resource.private1.length, list: resource.private1.slice(page.offset, page.limit), }, code: 200, msg: '', }) }) @@ -114,12 +116,9 @@ Mock.mock(/collect/, options => { return Mock.mock({ data: { video: { - total: resource.videos.length, - list: resource.videos, - }, - music: { - total: resource.music.length, - list: resource.music, + total: resource.videos.length, list: resource.videos, + }, music: { + total: resource.music.length, list: resource.music, } }, code: 200, msg: '', }) @@ -128,10 +127,8 @@ 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), + pageNo: page.pageNo, // total: resource.my.length, + total: 50, list: resource.my.slice(page.offset, page.limit), }, code: 200, msg: '', }) }) @@ -139,9 +136,7 @@ Mock.mock(/historyOther/, options => { let page = getPage(options) return Mock.mock({ data: { - pageNo: page.pageNo, - total: 0, - list: [], + pageNo: page.pageNo, total: 0, list: [], }, code: 200, msg: '', }) }) diff --git a/src/pages/slideHooks/index.vue b/src/pages/slideHooks/index.vue index 9e93efd..75ff462 100644 --- a/src/pages/slideHooks/index.vue +++ b/src/pages/slideHooks/index.vue @@ -82,7 +82,7 @@ navIndex:5, }" @loadMore="loadMore" - @refresh="refresh" + @refresh="() => getData(true)" > @@ -107,6 +107,24 @@ + +
@@ -118,26 +136,26 @@ import SlideAlbum from "../../components/slide/SlideAlbum"; import SlideUser from "../../components/slide/SlideUser"; import BVideo from "../../components/slide/BVideo"; import Comment from "../../components/Comment"; +import Share from "../../components/Share"; import IndicatorHome from "../slide/IndicatorHome"; - -import resource from "../../assets/data/resource.js"; -import {onMounted, onUnmounted, provide, reactive, ref} from "vue"; +import {computed, onMounted, onUnmounted, reactive, ref} from "vue"; import bus, {EVENT_KEY} from "../../utils/bus"; import {useNav} from "../../utils/hooks/useNav"; import Utils from "@/utils"; -import {shuffle} from "lodash"; +import api from "@/api"; +import {useStore} from "vuex"; const nav = useNav() -const videos = resource.videos.slice().map(v => { - v.type = 'recommend-video' - return v -}) - function stop(e) { e.stopPropagation() } +const store = useStore() +const friends = computed(() => store.state.friends) +const bodyHeight = computed(() => store.state.bodyHeight) +const bodyWidth = computed(() => store.state.bodyWidth) + const subTypeRef = ref(null) const state = reactive({ baseIndex: 0, @@ -156,7 +174,6 @@ const state = reactive({ type: 'user', src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}` }, - // ...videos ], isSharing: false, @@ -182,32 +199,33 @@ const state = reactive({ subType: -1, //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType. subTypeIsTop: false, + totalSize: 0, + pageSize: 10, + pageNo: 0, }) -function loadMore() { +async function getData(refresh = false) { if (state.loading) return state.loading = true - console.log('loadMore') - setTimeout(() => { - state.recommendVideos = state.recommendVideos.concat(shuffle(resource.videos).slice(0, 10).map(v => { - v.type = 'recommend-video' - return v - })) - state.loading = false - }, 500) + let res = await api.videos.recommended({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize}) + console.log('loadMore-', 'refresh', refresh, res) + state.loading = false + if (res.code === 200) { + state.totalSize = res.data.total + if (refresh) { + state.recommendVideos = [] + } + state.recommendVideos = state.recommendVideos.concat(res.data.list) + } else { + state.pageNo-- + } } -function refresh() { - if (state.loading) return - state.loading = true - console.log('refresh') - setTimeout(() => { - state.recommendVideos = shuffle(resource.videos).slice(0, 5).map(v => { - v.type = 'recommend-video' - return v - }) - state.loading = false - }, 500) +function loadMore() { + if (!state.loading) { + state.pageNo++ + getData() + } } function showSubType(e) { @@ -233,7 +251,24 @@ function pageClick(e) { } } +function delayShowDialog(cb) { + setTimeout(() => { + cb() + }, 400) +} + +function dislike() { + // this.$refs.virtualList.dislike(this.videos[10]) + // this.videos[this.videoIndex] = this.videos[10] + // this.$notice('操作成功，将减少此类视频的推荐') +} + +function end() { + // this.$notice('暂时没有更多了') +} + onMounted(() => { + getData() bus.on('singleClick', () => { let id = '' if (state.navIndex === 4) { @@ -269,7 +304,7 @@ function closeComments() { } function render(item, itemIndex, play, position) { - console.log('item',item) + // console.log('item', item) let node if (item.type === 'img') { node = @@ -280,6 +315,9 @@ function render(item, itemIndex, play, position) { if (item.type === 'user') { node = } + if (item.type === 'send-video') { + node =