优化slide

2021-12-23 01:44:04 +08:00 · 2021-12-23 01:44:04 +08:00 · 45b925351b
commit 45b925351b
parent 1d769ea43a
5 changed files with 273 additions and 34 deletions
--- a/src/components/slide/SlideImgs.vue
+++ b/src/components/slide/SlideImgs.vue
@ -0,0 +1,234 @@
+<template>
+  <div id="SlideImgs">
+    <div class="content" @click="toggle">
+      <SlideRowList
+          v-model:active-index="baseActiveIndex">
+        <SlideItem v-for="img in modelValue.imgs">
+          <img :src="img">
+        </SlideItem>
+      </SlideRowList>
+    </div>
+    <div class="progress-bar">
+      <div class="bar" v-for="(img,index) in modelValue.imgs">
+        <div class="progress"
+             :style="getWidth(index)"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import enums from "../../utils/enums";
+
+export default {
+  name: "SlideImgages",
+  components: {},
+  props: {
+    modelValue: {
+      type: Object,
+      default() {
+        return {
+          type: 'imgs',
+          imgs: [
+            new URL('../../assets/img/poster/0.jpg', import.meta.url).href,
+            new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
+            new URL('../../assets/img/poster/2.jpg', import.meta.url).href,
+            new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
+          ],
+          "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
+          video: 'http://douyin.ttentau.top/0.mp4',
+          "video_data_size": 26829508,
+          "duration": 427780,
+          "desc": "我不管我们宿舍第一好看",
+          "allow_download": 0,
+          "allow_duet": 0,
+          "allow_react": 0,
+          "allow_music": 1,
+          "allow_douplus": 1,
+          "allow_share": 1,
+          "digg_count": 10480000,
+          "comment_count": 79000,
+          "download_count": 6,
+          "play_count": 0,
+          "share_count": 119000,
+          "forward_count": 0,
+          "collect_count": 3,
+          "sort": 195,
+          "is_top": 0,
+          "city": "北京",
+          address: '中央戏剧学院',
+          "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
+          "create_time": "1630423555",
+          "creator_id": "93864497380",
+          "status": 1,
+          "topics": [
+            {
+              "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+              "name": "敬礼变装",
+              "creator_id": "93864497380",
+              "create_time": "1630423555",
+              "status": 1
+            },
+            {
+              "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+              "name": "宿舍",
+              "creator_id": "93864497380",
+              "create_time": "1630423555",
+              "status": 1
+            }
+          ],
+          "music": {
+            "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
+            "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
+            "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+            "title": "@穷电影创作的原声-小高快起来跳舞",
+            "creator_id": "93864497380",
+            "create_time": "1630423555",
+            "status": 1
+          },
+          "author": {
+            "id": "1",
+            "unique_id_modify_time": "1630393144",
+            "unique_id": "10040050",
+            "favoriting_count": 143,
+            "avatar": new URL('../img/icon/avatar/3.png', import.meta.url).href,
+            school: {
+              name: '中央戏剧学院',
+              department: null,
+              joinTime: null,
+              education: null,
+              displayType: enums.DISPLAY_TYPE.ALL,
+            },
+            "city": "",
+            "province": '北京',
+            "country": "",
+            "location": "",
+            "birthday": "2002-01-01",
+            "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+            "following_count": 66,
+            "follower_count": 235000,
+            "aweme_count": 1796000,
+            "nickname": "我是小睿耶",
+            certification: '',
+            "phone": "",
+            "sex": "",
+            "last_login_time": "1630423555",
+            "create_time": "1630423555",
+            "status": 1,
+            "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
+            "is_private": 0
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      baseActiveIndex: 0,
+      progress: 0,
+      cycleFn: null,
+      state: 'play',//stop,custom
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.cycleFn = () => {
+      if (this.state !== 'play') return cancelAnimationFrame(this.cycleFn)
+      if (this.progress < this.modelValue.imgs.length * 100) {
+        this.progress += .55
+        this.baseActiveIndex = parseInt(this.progress / 100)
+      } else {
+        this.progress = 0
+        // cancelAnimationFrame(this.cycleFn)
+      }
+      requestAnimationFrame(this.cycleFn)
+    }
+    requestAnimationFrame(this.cycleFn)
+  },
+  methods: {
+    toggle() {
+      if (this.state === 'stop') {
+        this.state = 'play'
+        requestAnimationFrame(this.cycleFn)
+      } else {
+        this.state = 'stop'
+      }
+    },
+    getWidth(index) {
+      if (this.progress >= (index + 1) * 100) return {width: '100%'}
+      return {width: `${this.progress - index * 100 < 0 ? 0 : this.progress - index * 100}%`}
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#SlideImgs {
+  position: relative;
+  background: black;
+  width: 100%;
+  //height: 100%;
+  height: calc(100vh - 5rem);
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .content {
+    width: 100vw;
+
+    .base-slide-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    img {
+      width: 100vw;
+    }
+
+  }
+
+  .progress-bar {
+    position: absolute;
+    width: 100vw;
+    bottom: 0;
+    display: flex;
+    box-sizing: border-box;
+    padding: 0 .5rem;
+    justify-content: space-between;
+
+    .bar {
+      border-radius: 1rem;
+      flex: 1;
+      margin: 0 .2rem;
+      height: .2rem;
+      background: gray;
+      position: relative;
+
+      .progress {
+        border-radius: 1rem;
+        position: absolute;
+        left: 0;
+        height: .2rem;
+        background: white;
+        //width: 100%;
+        //animation: start 3s linear;
+
+        @keyframes start {
+          0% {
+            width: 0;
+          }
+          100% {
+            width: 100%;
+          }
+        }
+      }
+
+    }
+  }
+}
+</style>
--- a/src/components/RecommendSlideUser.vue
+++ b/src/components/RecommendSlideUser.vue
@ -1,7 +1,7 @@
 <template>
  <div id="SlideUser">
    <div class="content">
-      <img class="close" src="../assets/img/icon/components/gray-close-full2.png" alt="">
+      <img @click="$emit('close')" class="close" src="../../assets/img/icon/components/gray-close-full2.png" alt="">
      <img class="avatar" :src="modelValue.avatar">
      <div class="name">{{ modelValue.name }}</div>
      <div class="age">{{ modelValue.age }}岁</div>
@ -10,7 +10,7 @@
        <div class="poster-item" v-for="(i,index) in modelValue.videos.slice(0,3)" @click="globalMethods.$no">
          <img class="poster" :src="globalMethods.$imgPreview(i.cover)"/>
          <div class="num">
-            <img class="love" src="../assets/img/icon/love.svg" alt="">
+            <img class="love" src="../../assets/img/icon/love.svg" alt="">
            <span>{{ globalMethods.$likeNum(i.digg_count) }}</span>
          </div>
        </div>
@ -23,9 +23,9 @@
  </div>
 </template>
 <script>
-import Posters from "./Posters";
-import globalMethods from "../utils/global-methods";
-import BaseButton from "./BaseButton";
+import Posters from "../Posters";
+import globalMethods from "../../utils/global-methods";
+import BaseButton from "../BaseButton";

 export default {
  name: "SlideUser",
--- a/src/components/slide/SlideVideo.vue
+++ b/src/components/slide/SlideVideo.vue
@ -9,7 +9,7 @@
           :autoplay="isPlay" loop>
      <p> 您的浏览器不支持 video 标签。</p>
    </video>
-    <img src="../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
+    <img src="../../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
    <div class="float" @click="togglePlayVideo">
      <!--       @click.stop="togglePlayVideo" -->
      <div :style="{opacity:isMove ? 0:1}" class="normal">
@ -19,30 +19,30 @@
                 @click.stop="$emit('goUserInfo')">
            <transition name="fade">
              <div v-if="!isAttention" @click.stop="attention" class="options" ref="attention-option">
-                <img class="no" src="../assets/img/icon/add-light.png" alt="">
-                <img class="yes" src="../assets/img/icon/ok-red.png" alt="">
+                <img class="no" src="../../assets/img/icon/add-light.png" alt="">
+                <img class="yes" src="../../assets/img/icon/ok-red.png" alt="">
              </div>
            </transition>

          </div>
          <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-if="lVideo.isLoved">
+              <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-if="lVideo.isLoved">
            </div>
            <span>{{ $likeNum(lVideo.digg_count) }}</span>
          </div>
          <div class="message mb2r" @click.stop="$emit('showComments')">
            <!--            <div class="message mb15p" @click.stop="showComment">-->
-            <img src="../assets/img/icon/message.svg" alt="" class="message-image">
+            <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
            <span>{{ $likeNum(lVideo.comment_count) }}</span>
          </div>
          <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
-            <img src="../assets/img/icon/share-white-full.png" 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-white-full.png" alt="" class="share-image">
+            <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
          </div>
          <BaseMusic
              :cover="lVideo.music.cover"
@ -55,7 +55,7 @@
        <div class="content ml1r mb1r" v-if="!isMy">
          <div class="location-wrapper" v-if=" lVideo.city || lVideo.address">
            <div class="location">
-              <img src="../assets/img/icon/location.webp" alt="">
+              <img src="../../assets/img/icon/location.webp" alt="">
              <span>{{ lVideo.city }}</span>
              <template v-if="lVideo.address && lVideo.address">
                <div class="gang"></div>
@ -68,7 +68,7 @@
            {{ lVideo.desc }}
          </div>
          <div class="music" @click.stop="$nav('/music')">
-            <img src="../assets/img/icon/music.svg" alt="" class="music-image">
+            <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
            <BaseMarquee :key="name"
                         :name="name"
                         :isPlay="isPlay"
@ -79,7 +79,7 @@
        <div v-else class="comment-status">
          <div class="comment">
            <div class="type-comment">
-              <img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+              <img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
              <div class="right">
                <p>
                  <span class="name">zzzzz</span>
@ -90,8 +90,8 @@
            </div>
            <transition-group name="comment-status" tag="div" class="loveds">
              <div class="type-loved" :key="i" v-for="i in test">
-                <img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
-                <img src="../assets/img/icon/love.svg" alt="" class="loved">
+                <img src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+                <img src="../../assets/img/icon/love.svg" alt="" class="loved">
              </div>
            </transition-group>
          </div>
@ -115,12 +115,12 @@
 </template>

 <script>
-import globalMethods from '../utils/global-methods'
-import BaseMarquee from "./BaseMarquee";
-import Dom from "../utils/dom";
-import BaseMusic from "./BaseMusic";
+import globalMethods from '../../utils/global-methods'
+import BaseMarquee from "../BaseMarquee";
+import Dom from "../../utils/dom";
+import BaseMusic from "../BaseMusic";
 import {mapState} from "vuex";
-import Loading from "./Loading";
+import Loading from "../Loading";

 export default {
  name: "Video",
@ -337,7 +337,7 @@ export default {
 </script>

 <style scoped lang="less">
-@import "../assets/less/color";
+@import "../../assets/less/color";

 .fade-enter-active,
 .fade-leave-active {
@ -697,4 +697,4 @@ export default {
  }
 }

-</style>
+</style>
--- a/src/pages/test/TestOne.vue
+++ b/src/pages/test/TestOne.vue
@ -1,15 +1,18 @@
 <template>
  <div id="TestOne">
-    <RecommendSlideUser/>
+<!--    <SlideUser/>-->
+    <SlideImgs/>
  </div>
 </template>
 <script>
-import RecommendSlideUser from "../../components/RecommendSlideUser";
+import SlideUser from "../../components/slide/SlideUser";
+import SlideImgs from "../../components/slide/SlideImgs";

 export default {
  name: "TestOne",
  components: {
-    RecommendSlideUser
+    SlideUser,
+    SlideImgs
  },
  props: {
    modelValue: false
--- a/src/pages/test/TestSlide.vue
+++ b/src/pages/test/TestSlide.vue
@ -26,8 +26,8 @@
 </template>
 <script lang="jsx">
 import Slide from "./slide.jsx";
-import BaseVideo from "../../components/BaseVideo";
-import RecommendSlideUser from "../../components/RecommendSlideUser";
+import SlideVideo from "../../components/slide/SlideVideo";
+import SlideUser from "../../components/slide/SlideUser";
 import resource from "../../assets/data/resource.js";
 import CONST_VAR from "../../utils/const_var";
 import Dom from "../../utils/dom";
@ -60,7 +60,7 @@ export default {
    list = list.slice(0, 5)
    list.map(v => v.type = 'recommend-video')
    if (true) {
-    // if (false) {
+      // if (false) {
      list.map(v => {
        v.type = 'recommend-video'
      })
@ -266,7 +266,7 @@ export default {
      render: (item, itemIndex, play) => {
        let html
        if (item.type === 'recommend-video') {
-          html = <BaseVideo
+          html = <SlideVideo
              isPlay={play}
              video={item}
              index={itemIndex}
@ -284,7 +284,7 @@ export default {
          html = <video src={item.src} style="height:100%;"/>
        }
        if (item.type === 'user') {
-          html = <RecommendSlideUser modelValue={item}/>
+          html = <SlideUser onClose={this.t} modelValue={item}/>
        }
        return html
      },
@ -326,6 +326,9 @@ export default {
    // }, true)
  },
  methods: {
+    t() {
+      console.log('t', this.totalSize)
+    },
    dbClick(e) {
      let id = 'a' + Date.now()
      let elWidth = 80
@ -349,7 +352,6 @@ if (import.meta.hot) {
 }
 </script>
 <style>
-
 .slide-wrapper {
  width: 100%;
  height: 100%;