优化

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)搭建。相信不管你是处于哪个段位的工程师，本项目都能帮助到你。
 
 ## 功能点

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;

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: '',
   })
 })

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">