From 45b925351b10bb8932cc22258439b18edc7922dc Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 23 Dec 2021 01:44:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96slide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/slide/SlideImgs.vue            | 234 ++++++++++++++++++
 .../SlideUser.vue}                            |  10 +-
 .../{BaseVideo.vue => slide/SlideVideo.vue}   |  40 +--
 src/pages/test/TestOne.vue                    |   9 +-
 src/pages/test/TestSlide.vue                  |  14 +-
 5 files changed, 273 insertions(+), 34 deletions(-)
 create mode 100644 src/components/slide/SlideImgs.vue
 rename src/components/{RecommendSlideUser.vue => slide/SlideUser.vue} (97%)
 rename src/components/{BaseVideo.vue => slide/SlideVideo.vue} (92%)

diff --git a/src/components/slide/SlideImgs.vue b/src/components/slide/SlideImgs.vue
new file mode 100644
index 0000000..3a9013d
--- /dev/null
+++ 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>
diff --git a/src/components/RecommendSlideUser.vue b/src/components/slide/SlideUser.vue
similarity index 97%
rename from src/components/RecommendSlideUser.vue
rename to src/components/slide/SlideUser.vue
index ba56bc1..cd3643c 100644
--- a/src/components/RecommendSlideUser.vue
+++ b/src/components/slide/SlideUser.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",
diff --git a/src/components/BaseVideo.vue b/src/components/slide/SlideVideo.vue
similarity index 92%
rename from src/components/BaseVideo.vue
rename to src/components/slide/SlideVideo.vue
index ae902a4..9aaa28e 100644
--- a/src/components/BaseVideo.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>
\ No newline at end of file
+</style>
diff --git a/src/pages/test/TestOne.vue b/src/pages/test/TestOne.vue
index d03a9e2..d46e25f 100644
--- 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
diff --git a/src/pages/test/TestSlide.vue b/src/pages/test/TestSlide.vue
index 1f1c923..771806e 100644
--- 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%;