video

app.json

@@ -11,16 +11,20 @@
     "navigationBarTextStyle":"black"
   },
   "tabBar": {
-    "color": "#626567",
-    "selectedColor": "#2A8CE5",
-    "backgroundColor": "#FBFBFB",
+    "color": "#666",
+    "selectedColor": "#268dcd",
     "borderStyle": "white",
+    "backgroundColor": "#fafafa",
     "list": [{
       "pagePath": "pages/index/index",
-      "text": "Index"
-    }, {
-      "pagePath": "pages/logs/logs",
-      "text": "Logs"
+      "iconPath": "images/ing.png",
+      "selectedIconPath": "images/ing-active.png",
+      "text": "正在热映"
+    },{
+      "pagePath": "pages/log/log",
+      "iconPath": "images/coming.png",
+      "selectedIconPath": "images/coming-active.png",
+      "text": "即将上映"
     }]
   }
 }

app.wxss

@@ -1,4 +1,6 @@
 /**app.wxss**/
+@import "/wxParse/wxParse.wxss";
+
 .container {
   height: 100%;
   display: flex;

pages/video/video.js

@@ -1,18 +1,42 @@
 import videoAPI from '../../api/video.js'
+import WxParse from '../../wxParse/wxParse.js'
 
 //获取应用实例
 var app = getApp()
 Page({
   data: {
-    video: {}
+    video: {},
+    navTab: ["字幕", "讲解", "评论"],
+    currentNavtab: "0",
+    isLoading: true,
   },
-  
+
   onLoad(options) {
-  	this.setData({
-  		video: videoAPI.loadVideoById(options.id)
-  	})
+    const v = videoAPI.loadVideoById(options.id);
+    const frsArray = v.parsed_content.split('||');
+    const length = frsArray.length;
+    for (let i = 0; i < length; i++) {
+      WxParse.wxParse('fr' + i, 'html', frsArray[i], this);
+      if (i === length - 1) {
+        WxParse.wxParseTemArray("frs", 'fr', length, this)
+      }
+    }
+    // WxParse.wxParse('frs[' + key + ']', 'html', this.data.test, this);
+    this.setData({
+      video: v,
+    })
+  },
+
+  onReady() {
+  },
+
+  switchTab(e){
+    this.setData({
+      currentNavtab: e.currentTarget.dataset.idx
+    });
   },
 
-  onReady: function() {
+  showDict(e) {
+   console.log('clicked', e.currentTarget);
   }
 })

pages/video/video.wxml

@@ -1,3 +1,55 @@
-<view>
-    {{video.title}}
-</view>
+<import src="../../wxParse/wxParse.wxml"/>
+
+<block wx:if="{{showLoading}}">
+  <view class="page-loading">
+    <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
+  </view>
+</block>
+
+<view class="container">
+  <text class="video-title">{{video.title}}</text>
+
+  <view>
+    <video src="{{video.video_url}}" controls class="video-player"></video>
+  </view>
+
+  <view class="tab">
+    <view class="tab-item flex-item {{currentNavtab==index ? 'active' : ''}}" wx:for="{{navTab}}" wx:key="{{index}}"
+          data-idx="{{index}}" bindtap="switchTab">
+      {{item}}
+    </view>
+  </view>
+
+  <view class="ctnt1 placehold" hidden="{{currentNavtab==0 ? '' : true}}">
+    <scroll-view scroll-y="true" class="">
+      <block wx:for="{{frs}}" wx:key="{{index}}">
+        <view class="video-sub" bindtap="showDict">
+          <template is="wxParse" data="{{wxParseData:item}}"/>
+        </view>
+      </block>
+    </scroll-view>
+  </view>
+  <view class="ctnt2 placehold" hidden="{{currentNavtab==1 ? '' : true}}">
+    <text>讲解</text>
+  </view>
+  <view class="ctnt3 placehold" hidden="{{currentNavtab==2 ? '' : true}}">
+    <text>评论</text>
+  </view>
+</view>
+
+<view class="grid-center" hidden="{{isLoading ? '' : 'true'}}">
+  <view class="weui-loading"></view>
+</view>
+
+<view class="load-more-wrap">
+  <block wx:if="{{hasMore}}">
+    <view class="load-content">
+      <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
+    </view>
+  </block>
+  <block wx:else>
+    <view class="load-content">
+      <text>没有更多内容了</text>
+    </view>
+  </block>
+</view>

pages/video/video.wxss

@@ -0,0 +1,109 @@
+.video-player {
+  width: 750rpx;
+}
+
+.video-title {
+  font-size: 14px;
+  color: #777;
+  margin: 15rpx;
+}
+
+.grid {
+  display: flex;
+}
+
+.video-sub {
+  font-size: 13px;
+}
+
+.flex-item{
+  flex-grow: 1;
+  text-align: center;
+}
+
+.tab {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  width: 750rpx;
+  height: 60rpx;
+  background: #2fdab8;
+  color: #c2d9da;
+  font-size: 28rpx;
+  line-height: 60rpx;
+  box-shadow: 0 2px 2px #bebebe;
+  margin: 0 0 8rpx 0;
+  top: 0;
+  z-index: 9999;
+}
+
+.tab-item.active{
+  color: #ffffff;
+  border-bottom: solid 2px #ffffff;
+}
+
+.weui-loading {
+  margin: 0 5px;
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
+  animation: weuiLoading 1s steps(12, end) infinite;
+  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
+  background-size: 100%;
+}
+.weui-loading.weui-loading_transparent {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
+}
+@-webkit-keyframes weuiLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+@keyframes weuiLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+.page-loading{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  font-size: 14px;
+  color: #666;
+}
+
+.page-loading .loading-text{
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.load-more-wrap{
+  text-align: center;
+  padding: 10px 20px 20px 20px;
+}
+.load-content{
+  padding: 5px;
+  color: #666;
+}
+.btn-load-more text{
+  display: block;
+  padding: 5px;
+  border-radius: 3px;
+  background: #e6e6e6;
+  color: #666;
+  text-align: center;
+}

utils/util.js

@@ -19,3 +19,4 @@ function formatNumber(n) {
 module.exports = {
   formatTime: formatTime
 }
+