优化首页页面

src/components/Video.vue

@@ -5,7 +5,7 @@
 <!--</template>-->
 <template>
   <div class="bg-video" v-bind:style="{'height':height+'px'}">
-    <video :src="video.videoUrl"  ref="video" muted :autoplay="!disabled" loop>
+    <video :src="video.videoUrl" poster="../assets/img/poster/1.jpg" ref="video" muted :autoplay="play" loop>
       <p> 您的浏览器不支持 video 标签。</p>
     </video>
     <div class="float-container" v-if="true" @click.stop="togglePlayVideo">
@@ -125,7 +125,7 @@ export default {
         return -1
       }
     },
-    disabled: {
+    play: {
       type: Boolean,
       default: () => {
         return true
@@ -143,40 +143,6 @@ export default {
       return {left: this.pageX + 'px'}
     }
   },
-  watch: {
-    disabled: {
-      immediate: true,
-      handler(v) {
-        // console.log('disabled', this.currentVideoId, v)
-        this.isPlaying = !v
-        if (!v) {
-          // this.$store.commit('setCurrentVideoId', this.currentVideoId)
-          setTimeout(() => {
-            let video = this.$refs.video
-            video.currentTime = 0
-            // let fun = e => {
-            //   this.currentTime = Math.ceil(e.target.currentTime)
-            //   this.pageX = this.currentTime * this.step
-            // }
-            // video.addEventListener('timeupdate', fun)
-            // video.addEventListener('loadedmetadata', e => {
-            //   this.duration = video.duration
-            //   if (this.duration > 60) {
-            //     this.step = this.width / Math.floor(this.duration)
-            //   } else {
-            //     video.removeEventListener('timeupdate', fun)
-            //   }
-            // })
-            video.play()
-          })
-        } else {
-          if (this.$refs.video) {
-            this.$refs.video.pause()
-          }
-        }
-      }
-    }
-  },
   data() {
     return {
       duration: 0,
@@ -185,7 +151,7 @@ export default {
       pageX: 0,
       height: 0,
       width: 0,
-      isPlaying: !this.disabled,
+      isPlaying: !this.play,
       isAttention: false,
       line: null,
       point: null,
@@ -223,6 +189,29 @@ export default {
     })
   },
   methods: {
+    $duration(v) {
+      if (!v) return
+      let m = Math.floor(v / 60)
+      // let s = v % 60
+      let s = Math.round(v % 60)
+      let str = ''
+      if (m === 0) {
+        str = '00'
+      } else if (m > 0 && m < 10) {
+        str = '0' + m
+      } else {
+        str = m
+      }
+      str += ':'
+      if (s === 0) {
+        str += '00'
+      } else if (s > 0 && s < 10) {
+        str += '0' + s
+      } else {
+        str += s
+      }
+      return str
+    },
     attention() {
       let option = this.$refs['attention-option']
       option.classList.add('attention')
@@ -275,23 +264,29 @@ export default {
       this.lVideo.isLoved = !this.lVideo.isLoved
       this.$emit('update:video', this.lVideo)
     },
+    start(e) {
+      this.pageX = e.touches[0].pageX
+    },
     move(e) {
+      if (this.isPlaying)return
       this.isMove = true
       let video = this.$refs.video
       video.pause()
       this.pageX = e.touches[0].pageX
       // console.log(this.step)
       this.currentTime = Math.ceil(Math.ceil(e.touches[0].pageX) / this.step)
-      this.$stopPropagation(e)
+      globalMethods.$stopPropagation(e)
     },
     end(e) {
+      if (this.isPlaying)return
+      console.log('end', e)
       setTimeout(() => {
         this.isMove = false
       }, 1000)
       let video = this.$refs.video
-      video.currentTime = this.currentTime
+      video.currentTime = this.currentTime = Math.ceil(Math.ceil(e.changedTouches[0].pageX) / this.step)
       video.play()
-      // this.$stopPropagation(e)
+      globalMethods.$stopPropagation(e)
     }
   }
 }

src/components/slide/SlideColumnList.vue

@@ -73,17 +73,28 @@ export default {
           if (this.currentSlideItemIndex >= this.defaultVirtualItemTotal) {
             startIndex = this.currentSlideItemIndex - (this.defaultVirtualItemTotal + 1) / 2
           }
+          console.log('start',startIndex)
           this.list.slice(startIndex, startIndex + 5).map(
               (item, index) => {
-                this.slideList.appendChild(this.getInsEl(item, startIndex + index))
+                let el = null
+                //自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
+                if (startIndex + index === this.currentSlideItemIndex) {
+                  el = this.getInsEl(item, startIndex + index, true)
+                } else {
+                  el = this.getInsEl(item, startIndex + index)
+                }
+                this.slideList.appendChild(el)
               })
           let that = this
-          // $(".video-slide-item").each(function () {
+          if (that.currentSlideItemIndex > 2) {
-          //   $(this).css('top',
+            this.checkChildren()
-          //       ((that.currentSlideItemIndex) > 1 ? (that.currentSlideItemIndex - 2) : (that.currentSlideItemIndex - 3))
+            this.$setCss(this.slideList, 'transform', `translate3d(0px,
-          //       *
+             ${-this.currentSlideItemIndex * this.wrapperHeight}px,  0px)`)
-          //       that.wrapperHeight)
+            $(".video-slide-item").each(function () {
-          // })
+              $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
+            })
+          }
+
         } else {
           let endLength = oldVal.length + 3
           newVal.slice(oldVal.length, endLength).map((item, index) => {
@@ -102,6 +113,7 @@ export default {
     }
   },
   mounted: async function () {
+    await this.checkChildren()
     if (this.virtual) {
       this.currentSlideItemIndex = this.activeIndex
       this.list.slice(this.currentSlideItemIndex, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
@@ -111,8 +123,8 @@ export default {
     await this.checkChildren()
   },
   methods: {
-    getInsEl(item, index) {
+    getInsEl(item, index, play = false) {
-      let slideVNode = this.renderSlide(item, index)
+      let slideVNode = this.renderSlide(item, index, play)
       const app = Vue.createApp({
         render() {
           return slideVNode

src/config/index.js

@@ -1,6 +1,6 @@
 export default {
-  // baseUrl: 'http://192.168.0.105//index.php/v1',
+  baseUrl: 'http://192.168.0.105//index.php/v1',
-  // filePreview:'http://192.168.0.105/static/uploads/',
+  filePreview:'http://192.168.0.105/static/uploads/',
-  baseUrl: 'http://192.168.10.164//index.php/v1',
+  // baseUrl: 'http://192.168.10.164//index.php/v1',
-  filePreview:'http://192.168.10.164/static/uploads/'
+  // filePreview:'http://192.168.10.164/static/uploads/'
 }

src/pages/Test.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="Test">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">申报学校信息</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <SlideColumnList
+          ref="slideList"
+          direction="column"
+      >
+        <SlideItem v-for="(item,index)  of videos" :key="index">
+          <Video1
+              v-model:video="videos[index]"
+              @showComments="isCommenting = !isCommenting"
+              @showShare="isSharing = !isSharing"
+              @goUserInfo="baseActiveIndex = 1"
+          ></Video1>
+        </SlideItem>
+      </SlideColumnList>
+
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Test",
+  props: {},
+  data() {
+    return {
+      videos: [
+        {
+          "id": "d2f55373-80dd-4c14-93a7-7a40e9cbf049",
+          "posterUrl": "images/20210815/0.png",
+          "videoUrl": "http://qy9rc9xff.hn-bkt.clouddn.com/9.mp4",
+          "title": "",
+          "likeNum": null,
+          "commentNum": null,
+          "sharedNum": null,
+          "duration": null,
+          "musicId": "126f9654-450b-466c-8003-085199a7f9b9",
+          "browseCount": 0,
+          "createTime": "1629683008",
+          "createBy": "3e301843-e8bb-41c0-8240-9c4b42a17341",
+          "status": 1
+        }
+      ],
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "../assets/scss/index";
+
+.Test {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+  }
+}
+</style>

src/pages/home/Index2.vue

@@ -178,7 +178,23 @@ export default {
   components: {SlideColumnList, SlideRowList, Video1, Comment, Share, Me},
   data() {
     return {
-      webVideos: [],
+      webVideos: [
+        {
+          "id": "d2f55373-80dd-4c14-93a7-7a40e9cbf049",
+          "posterUrl": "images/20210815/0.png",
+          "videoUrl": "http://qy9rc9xff.hn-bkt.clouddn.com/9.mp4",
+          "title": "",
+          "likeNum": null,
+          "commentNum": null,
+          "sharedNum": null,
+          "duration": null,
+          "musicId": "126f9654-450b-466c-8003-085199a7f9b9",
+          "browseCount": 0,
+          "createTime": "1629683008",
+          "createBy": "3e301843-e8bb-41c0-8240-9c4b42a17341",
+          "status": 1
+        }
+      ],
       videos: [],
       localVideos: [
         {
@@ -301,16 +317,17 @@ export default {
       pageSize: 10,
       pageNo: 1,
       loading: false,
-      render: (item, itemIndex) => {
+      render: (item, itemIndex, play) => {
         return (
             <div className="base-slide-item video-slide-item" data-index={itemIndex}>
-              <Video1 disabled={itemIndex !== 0}
+              <Video1
-                      video={item}
+                  play={play}
-                      index={itemIndex}
+                  video={item}
-                      onShowComments={e => this.isCommenting = true}
+                  index={itemIndex}
-                      onShowShare={e => this.isSharing = true}
+                  onShowComments={e => this.isCommenting = true}
-                      onGoUserInfo={e => this.baseActiveIndex = 1}
+                  onShowShare={e => this.isSharing = true}
-                      v-model={[this.videos[itemIndex], 'video']}
+                  onGoUserInfo={e => this.baseActiveIndex = 1}
+                  v-model={[this.videos[itemIndex], 'video']}
               />
             </div>
         )
@@ -352,6 +369,7 @@ export default {
       if (res.code === this.SUCCESS_CODE) {
         this.totalSize = res.data.count
         this.videos = this.videos.concat(res.data.list)
+
         // this.videos = this.$clone(this.localVideos)
       } else {
         this.pageNo--

src/router/index.js

@@ -40,11 +40,13 @@ import PasswordLogin from "../pages/login/PasswordLogin";
 import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
 import Help from "../pages/login/Help";
+import Test from "../pages/Test";
 
 const routes = [
   // {path: '', component: Music},
   // {path: '/', component: Index},
   {path: '/', component: Index2},
+  {path: '/test', component: Test},
   {path: '/home', component: Index},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},

src/utils/global-methods.js

@@ -197,29 +197,6 @@ export default {
         break;
     }
   },
-  $duration(v) {
-    if (!v) return
-    let m = Math.floor(v / 60)
-    // let s = v % 60
-    let s = Math.round(v % 60)
-    let str = ''
-    if (m === 0) {
-      str = '00'
-    } else if (m > 0 && m < 10) {
-      str = '0' + m
-    } else {
-      str = m
-    }
-    str += ':'
-    if (s === 0) {
-      str += '00'
-    } else if (s > 0 && s < 10) {
-      str += '0' + s
-    } else {
-      str += s
-    }
-    return str
-  },
   $sleep(duration) {
     return new Promise((resolve, reject) => {
       setTimeout(resolve, duration)