Parcourir la source

添加了关于水母星球页面里的 视频

yerong il y a 4 ans
Parent
commit
8304d5279c
2 fichiers modifiés avec 45 ajouts et 14 suppressions
  1. 1 1
      dist/wx
  2. 44 13
      src/pages/none/index.vue

+ 1 - 1
dist/wx

@@ -1 +1 @@
-Subproject commit d269c3d57630e0bf795ac52429b28cd1255c06e4
+Subproject commit 19f89d41a15a3220c09ed1a99046c1b3975155bc

+ 44 - 13
src/pages/none/index.vue

@@ -3,27 +3,55 @@
     <img src="https://img.shuimuai.com/web/none_page.png" alt="" class="cover">
 
     <div class="video_container">
-      <div class="video_item">
-        <!--    故事-->
-        <view class="padding-tb">
-          <text>水母星球IP故事</text>
-        </view>
-        <video src="https://img.shuimuai.com/mpapp/story.mp4"></video>
-      </div>
-      <div class="video_item">
+      <div class="video_item" v-for="(video,index) in videos" :key="index">
         <!--    说明-->
         <view class="padding-tb">
-          <text>水母星球产品使用说明</text>
+          <text>{{video.title}}</text>
         </view>
-        <video src="https://img.shuimuai.com/mpapp/desc.mp4"></video>
+        <video :src="video.src" :id="'video_'+index" :data-index="index"
+               @play="vPlay"></video>
       </div>
+
     </div>
 
   </div>
 </template>
 <script>
+var $this;
 export default {
   name: 'scan_container',
+  data() {
+    return {
+      videos: [
+        {
+          id: 1,
+          title: "水母星球产品使用说明",
+          src: "https://img.shuimuai.com/mpapp/desc.mp4"
+        },
+        {
+          id: 2,
+          title: "水母星球IP故事",
+          src: "https://img.shuimuai.com/mpapp/story.mp4"
+        }
+      ]
+    }
+  },
+  methods: {
+    vPlay(e) {
+      let $current_index = e.currentTarget.dataset.index
+      $this.videos.forEach(($val, $index) => {
+        if ($index != $current_index) {
+          let $play_box = wx.createVideoContext('video_' + $index)
+          $play_box.pause()
+          $play_box.seek(0)
+        }
+      })
+
+    }
+  },
+  created() {
+    $this = this;
+  }
 }
 </script>
 <style scoped>
@@ -35,15 +63,18 @@ export default {
   width: 100%;
   height: 667px;
 }
-.video_container{
+
+.video_container {
   color: #ffffff;
   padding: 10px 0px;
 }
-.video_item{
+
+.video_item {
   text-align: center;
   margin: 10px 0px;
 }
-video{
+
+video {
   width: 100%;
 }
 </style>