添加音乐页面，吐槽下bscroll并不好用

4 years ago · 835b8f6a48
58 changed files with 2532 additions and 149 deletions
--- a/README.md
+++ b/README.md
@ -1,6 +1,13 @@
				@@ -1,6 +1,13 @@
 # 此代码仅供学习，请勿用于商业用途
+
 # 使用 Vue 模仿抖音, 本项目持续更新

 ### 开源不易，麻烦给个 Star★ 吧(☺️ 右上角点击 ★Star，轻轻松松，一秒钟 🤣)！我会根据大家的关注度和个人时间持续更新代码！

 目前由于视频没有上传到github，需要自己src/assets/video目录下 创建名字为1-10的mp4
+
+TODO
+
+#### 图片懒加载
+
+#### 点击喜欢，特效
--- a/public/index.html
+++ b/public/index.html
@ -41,6 +41,8 @@
				@@ -41,6 +41,8 @@
    <script crossorigin="anonymous"
            integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
            src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
+
 </head>
 <body>
 <noscript>
--- a/src/assets/img/icon/avatar/0.png
+++ b/src/assets/img/icon/avatar/0.png
--- a/src/assets/img/icon/components/h9=.webp
+++ b/src/assets/img/icon/components/h9=.webp
--- a/src/assets/img/icon/components/h9n.webp
+++ b/src/assets/img/icon/components/h9n.webp
--- a/src/assets/img/icon/components/h9o.webp
+++ b/src/assets/img/icon/components/h9o.webp
--- a/src/assets/img/icon/components/h9p.webp
+++ b/src/assets/img/icon/components/h9p.webp
--- a/src/assets/img/icon/components/h9q.webp
+++ b/src/assets/img/icon/components/h9q.webp
--- a/src/assets/img/icon/components/h9r.webp
+++ b/src/assets/img/icon/components/h9r.webp
--- a/src/assets/img/icon/components/h9s.webp
+++ b/src/assets/img/icon/components/h9s.webp
--- a/src/assets/img/icon/components/h9t.webp
+++ b/src/assets/img/icon/components/h9t.webp
--- a/src/assets/img/icon/components/h9u.webp
+++ b/src/assets/img/icon/components/h9u.webp
--- a/src/assets/img/icon/components/h9v.webp
+++ b/src/assets/img/icon/components/h9v.webp
--- a/src/assets/img/icon/components/h9w.webp
+++ b/src/assets/img/icon/components/h9w.webp
--- a/src/assets/img/icon/components/h9x.webp
+++ b/src/assets/img/icon/components/h9x.webp
--- a/src/assets/img/icon/components/h9y.webp
+++ b/src/assets/img/icon/components/h9y.webp
--- a/src/assets/img/icon/components/h9z.webp
+++ b/src/assets/img/icon/components/h9z.webp
--- a/src/assets/img/icon/components/im0.webp
+++ b/src/assets/img/icon/components/im0.webp
--- a/src/assets/img/icon/components/im1.webp
+++ b/src/assets/img/icon/components/im1.webp
--- a/src/assets/img/icon/components/im2.webp
+++ b/src/assets/img/icon/components/im2.webp
--- a/src/assets/img/icon/components/im3.webp
+++ b/src/assets/img/icon/components/im3.webp
--- a/src/assets/img/icon/components/img.webp
+++ b/src/assets/img/icon/components/img.webp
--- a/src/assets/img/icon/components/imh.webp
+++ b/src/assets/img/icon/components/imh.webp
--- a/src/assets/img/icon/components/imi.webp
+++ b/src/assets/img/icon/components/imi.webp
--- a/src/assets/img/icon/components/imj.webp
+++ b/src/assets/img/icon/components/imj.webp
--- a/src/assets/img/icon/components/imk.webp
+++ b/src/assets/img/icon/components/imk.webp
--- a/src/assets/img/icon/components/iml.webp
+++ b/src/assets/img/icon/components/iml.webp
--- a/src/assets/img/icon/components/imm.webp
+++ b/src/assets/img/icon/components/imm.webp
--- a/src/assets/img/icon/components/imn.webp
+++ b/src/assets/img/icon/components/imn.webp
--- a/src/assets/img/icon/components/imo.webp
+++ b/src/assets/img/icon/components/imo.webp
--- a/src/assets/img/icon/components/imp.webp
+++ b/src/assets/img/icon/components/imp.webp
--- a/src/assets/img/icon/components/imq.webp
+++ b/src/assets/img/icon/components/imq.webp
--- a/src/assets/img/icon/components/imr.webp
+++ b/src/assets/img/icon/components/imr.webp
--- a/src/assets/img/icon/components/ims.webp
+++ b/src/assets/img/icon/components/ims.webp
--- a/src/assets/img/icon/components/imt.webp
+++ b/src/assets/img/icon/components/imt.webp
--- a/src/assets/img/icon/components/imu.webp
+++ b/src/assets/img/icon/components/imu.webp
--- a/src/assets/img/icon/components/imv.webp
+++ b/src/assets/img/icon/components/imv.webp
--- a/src/assets/img/icon/components/imw.webp
+++ b/src/assets/img/icon/components/imw.webp
--- a/src/assets/img/icon/components/imx.webp
+++ b/src/assets/img/icon/components/imx.webp
--- a/src/assets/img/icon/components/imy.webp
+++ b/src/assets/img/icon/components/imy.webp
--- a/src/assets/img/icon/components/imz.webp
+++ b/src/assets/img/icon/components/imz.webp
--- a/src/assets/img/icon/components/video/heart1.png
+++ b/src/assets/img/icon/components/video/heart1.png
--- a/src/assets/img/icon/components/video/pink.png
+++ b/src/assets/img/icon/components/video/pink.png
--- a/src/assets/img/icon/dv2.webp
+++ b/src/assets/img/icon/dv2.webp
--- a/src/assets/img/icon/f1c.webp
+++ b/src/assets/img/icon/f1c.webp
--- a/src/assets/img/icon/g+x.webp
+++ b/src/assets/img/icon/g+x.webp
--- a/src/assets/img/icon/loved
+++ b/src/assets/img/icon/loved
@ -1 +0,0 @@
				@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539708547888" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="1477" fill="#e73a57"></path></svg>
--- a/src/assets/img/icon/share-white-full.png
+++ b/src/assets/img/icon/share-white-full.png
--- a/src/assets/img/icon/share-white.png
+++ b/src/assets/img/icon/share-white.png
--- a/src/assets/img/icon/share.svg
+++ b/src/assets/img/icon/share.svg
@ -1 +0,0 @@
				@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539615220711" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14876" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M621.110023 141.28277c-10.939143-10.93505-26.768667-15.935947-40.191374-6.538927-12.669554 8.868995-12.56313 19.051915-12.56313 29.986965l0 158.582785c-224.199225 0-437.464423 185.92041-437.464423 410.119635 0 60.151985 27.340695 136.708592 54.682413 164.048263 32.810267-169.514765 202.328102-300.755832 382.78201-300.755832l0 160.538323c0 5.469572-0.460488 25.329898 10.044774 31.383778 16.101723 9.278317 28.231995-0.530073 33.701566-5.999644l270.0239-291.62487c10.93505-10.939143 14.326287-22.706141 14.326287-31.006178 0-12.707416-9.071609-25.953092-14.541181-31.422663L621.110023 141.28277z" p-id="14877" fill="#ffffff"></path></svg>
--- a/src/assets/img/icon/star-white.png
+++ b/src/assets/img/icon/star-white.png
--- a/src/components/Posters.vue
+++ b/src/components/Posters.vue
@ -8,7 +8,7 @@
				@@ -8,7 +8,7 @@
        <img class="love" src="../assets/img/icon/love.svg" alt="">
        <span>{{ $likeNum(i.digg_count) }}</span>
      </div>
-      <div v-else class="date">
+      <div class="date"  v-if="mode === 'date'">
        <div class="day">{{ getDay(i.create_time) }}</div>
        <div class="month">{{ getMonth(i.create_time) }}</div>
      </div>
@ -29,7 +29,7 @@ export default {
				@@ -29,7 +29,7 @@ export default {
    },
    mode: {
      type: String,
-      default: 'normal'
+      default: 'normal'//date,none
    }
  },
  methods: {
--- a/src/components/Scroll.vue
+++ b/src/components/Scroll.vue
@ -0,0 +1,43 @@
				@@ -0,0 +1,43 @@
+<template>
+  <div class="scroll-wrapper" ref="wrapper" @scroll="scroll">
+    <div class="scroll-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Scroll",
+  props: {
+    fixedHeight: {
+      type: Number,
+      default: -1
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    async scroll() {
+      let wrapper = this.$refs.wrapper
+      if (this.fixedHeight !== -1) {
+        this.$emit('fixed', this.fixedHeight < wrapper.scrollTop)
+      }
+      if (wrapper.scrollHeight - wrapper.clientHeight < wrapper.scrollTop + 60) {
+        this.$emit('pulldown')
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../assets/scss/index";
+
+.scroll-wrapper {
+  overflow: auto;
+}
+</style>
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@ -27,11 +27,7 @@
				@@ -27,11 +27,7 @@
          <div class="love mb2r" @click.stop="loved($event)">
            <div>
              <img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
-              <img src="../assets/img/icon/loved.svg" class="love-image" v-else>
-              <!--                <transition name="love">-->
-              <!--                </transition>-->
-              <!--                <transition name="loved">-->
-              <!--                </transition>-->
+              <img src="../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
            </div>
            <span>{{ $likeNum(lVideo.digg_count) }}</span>
          </div>
@ -41,11 +37,11 @@
				@@ -41,11 +37,11 @@
            <span>{{ $likeNum(lVideo.comment_count) }}</span>
          </div>
          <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
-            <img src="../assets/img/icon/share.svg" alt="" class="share-image">
+            <img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
            <span>{{ $likeNum(lVideo.share_count) }}</span>
          </div>
          <div v-else class="share mb4r" @click.stop="$emit('showShare')">
-            <img src="../assets/img/icon/share.svg" alt="" class="share-image">
+            <img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
          </div>
          <BaseMusic
              :cover="lVideo.music.cover"
@ -364,19 +360,6 @@ export default {
				@@ -364,19 +360,6 @@ export default {
  transform: scale(0);
 }

-.comment-status-enter-active,
-.comment-status-leave-active {
-  transition: transform 0.5s linear;
-}
-
-.comment-status-move {
-  transition: transform 0.5s ease;
-}
-
-.comment-status-enter-from,
-.comment-status-leave-to {
-  transform: scale(0);
-}

 .video-wrapper {
  position: relative;
--- a/src/config/index.js
+++ b/src/config/index.js
@ -1,8 +1,8 @@
				@@ -1,8 +1,8 @@
 export default {
-  // baseUrl: 'http://192.168.0.103/index.php/v1',
-  // filePreview:'http://192.168.0.103/static/uploads/',
-  baseUrl: 'http://192.168.10.164/index.php/v1',
-  filePreview:'http://192.168.10.164/static/uploads/'
+  baseUrl: 'http://192.168.0.105/index.php/v1',
+  filePreview:'http://192.168.0.105/static/uploads/',
+  // baseUrl: 'http://192.168.10.164/index.php/v1',
+  // filePreview:'http://192.168.10.164/static/uploads/'
  // baseUrl: 'http://localhost/index.php/v1',
  // filePreview:'http://localhost/static/uploads/'
 }
--- a/src/pages/Test2.vue
+++ b/src/pages/Test2.vue
@ -1,7 +1,7 @@
				@@ -1,7 +1,7 @@
 <template>
  <div class="Test">
    <Video1
-        :play="true"
+        :is-play="false"
        :video="item"
        :index="0"
    />
--- a/src/pages/home/Music.vue
+++ b/src/pages/home/Music.vue
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@ -132,7 +132,7 @@
				@@ -132,7 +132,7 @@
                <img src="../../assets/img/icon/me/lock-gray.png" alt="">
                <span>只有你能看到设为私密的作品和日常</span>
              </div>
-              <Posters v-if="videos.private.total !== -1" mode="private" :list="videos.private.list"></Posters>
+              <Posters v-if="videos.private.total !== -1" mode="date" :list="videos.private.list"></Posters>
              <Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
              <no-more v-else/>
            </SlideItem>
				`@ -1 +0,0 @@` @@ -1 +0,0 @@
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539708547888" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="1477" fill="#e73a57"></path></svg>