优化

2023-02-11 18:00:25 +08:00 · 2023-02-11 18:00:25 +08:00 · 42aaf7e602
commit 42aaf7e602
parent fd9e26e32a
4 changed files with 105 additions and 85 deletions
--- 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)搭建。相信不管你是处于哪个段位的工程师，本项目都能帮助到你。

 ## 功能点
--- 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">
    <div class="share">
      <div class="title">
@ -279,7 +279,7 @@ export default {

  .title {
    font-size: 14rem;
-    padding: 20px;
+    padding: 20rem;
    position: relative;
    display: flex;
    align-items: center;
--- 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: '',
  })
 })
--- 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)"
              >
              </VInfinite>
            </SlideItem>
@ -107,6 +107,24 @@
    <Comment page-id="slideHook" v-model="state.commentVisible"
             @close="closeComments"
    />
+
+    <Share v-model="state.isSharing"
+           ref="share"
+           page-id="slideHook"
+           @dislike="dislike"
+           :videoId="state.recommendVideos[state.itemIndex]?.id"
+           :canDownload="state.recommendVideos[state.itemIndex]?.canDownload"
+           @play-feedback="state.showPlayFeedback = true"
+           @showShareDuoshan="delayShowDialog(e => state.showShareDuoshan = true)"
+           @shareToFriend="delayShowDialog(e => state.shareToFriend = true)"
+           @showDouyinCode="state.showDouyinCode = true"
+           @showShare2WeChatZone="state.shareType = 2"
+           @share2WeChat="state.shareType = 3"
+           @share2QQZone="state.shareType = 4"
+           @share2QQ="state.shareType = 5"
+           @share2Webo="state.shareType = 8"
+           @download="state.shareType = 9"
+    />
  </div>
 </template>

@ -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 = <img src={item.src} style="height:100%;"/>
@ -280,6 +315,9 @@ function render(item, itemIndex, play, position) {
  if (item.type === 'user') {
    node = <SlideUser/>
  }
+  if (item.type === 'send-video') {
+    node = <video src={item.src} style="height:100%;"/>
+  }
  if (item.type === 'recommend-video') {
    node = <BVideo
        isPlay={false}
@ -292,16 +330,6 @@ function render(item, itemIndex, play, position) {
  return node
 }

-
-//   if (item.type === 'send-video') {
-//     node = <video src={item.src} style="height:100%;"/>
-//   }
-//   if (item.type === 'user') {
-//     node = <SlideUser onClose={this.t} modelValue={item}/>
-//   }
-//   return node
-// }
-
 </script>

 <style scoped lang="less">