test

app/Http/Controllers/WeChat/ApiController.php

@@ -156,10 +156,26 @@ class ApiController extends Controller
 
     public function getMoreVideosAndArticles(Request $request)
     {
-        $offset = $request->input('offset', 0);
-        $list = Content::whereIn('type', [3, 4])->orderBy('sort')->offset($offset)->limit(15)->get();
-        foreach($list as $item) {
-            if($item->type == 3) {
+        $video_offset = $request->input('video_offset', 0);
+        $article_offset = $request->input('article_offset', 0);
+        if(empty($request->input('type')) || !in_array($request->input('type'), ['both', 'video', 'article'])) {
+            return response()->json(['status' => 'fail', 'info' => '参数错误']);
+        }
+        if($request->input('type') == 'both') {
+            $video_list = Content::where('type', 3)->orderBy('sort')->offset($video_offset)->limit(15)->get();
+            foreach($video_list as $item) {
+                if(empty($item->pic_url)) {
+                    $item->pic_url = 'https://u5.9026.com/addons/swdz_mall/core/web/uploads/image/f0/f0734ad93d46497483344846864596a4.jpg';
+                } else {
+                    $item->pic_url = url($item->pic_url);
+                }
+                $item->url = url($item->content);
+            }
+            $article_list = Content::where('type', 4)->orderBy('sort')->offset($article_offset)->limit(15)->get();
+            return response()->json(['status' => 'success', 'video_list' => $video_list, 'article_list' => $article_list]);
+        } else if($request->input('type') == 'video') {
+            $list = Content::where('type', 3)->orderBy('sort')->offset($video_offset)->limit(15)->get();
+            foreach($list as $item) {
                 if(empty($item->pic_url)) {
                     $item->pic_url = 'https://u5.9026.com/addons/swdz_mall/core/web/uploads/image/f0/f0734ad93d46497483344846864596a4.jpg';
                 } else {
@@ -167,7 +183,10 @@ class ApiController extends Controller
                 }
                 $item->url = url($item->content);
             }
+        } else {
+            $list = Content::where('type', 4)->orderBy('sort')->offset($article_offset)->limit(15)->get();
         }
+
         return response()->json(['status' => 'success', 'list' => $list]);
     }
 

wechat/pages/announce-detail/index.wxml

@@ -3,6 +3,6 @@
 <import src="/wxParse/wxParse.wxml" />
 <view class='sg-container'>
   <view class='sg-title'>{{ back_article.title }}</view>
-  <view class='sg-date'>{{ back_article.created_at.substring(0, 10) }}</view>
+  <view class='sg-date'>{{ back_article.publish_date }}</view>
   <template is="wxParse" data="{{wxParseData:article.nodes}}" />
 </view>

wechat/pages/announce-detail/index.wxss

@@ -8,4 +8,10 @@
   font-size: 1.15rem;
   font-weight: bold;
   padding: 7px 0;
+}
+.sg-date {
+  text-align: right;
+  padding: 4px 7px;
+  font-size: 0.8rem;
+  color: grey;
 }

wechat/pages/announce/announce.wxml

@@ -2,7 +2,7 @@
   <view wx:for='{{ list }}' class='info-content'>
     <view class='info-bg' catchtap='redirectToAnnounce' data-id='{{ item.id }}'>
       <view class="info-label">{{ item.title||'未命名' }}</view>
-      <view class="info-date">{{ item.start_date }}</view>
+      <view class="info-date">{{ item.publish_date }}</view>
     </view>
   </view>
 </view>

wechat/pages/article/article.js

@@ -1,127 +1,158 @@
 //var api = require("../../api.js"), app = getApp(), 
-var is_loading_more = !1, is_no_more = !1;
+var is_loading_more = !1,
+  is_no_more = !1;
 var api = require('../../utils/api.js');
 
 Page({
   data: {
     page: 1,
     video_list: [],
+    article_list: [],
     url: "",
     hide: "hide",
     show: !1,
-    animationData: {}
+    animationData: {},
+    tabList: [{
+      tab: 'video',
+      title: '视频'
+    }, {
+      tab: 'article',
+      title: '文章'
+    }],
+    selectedTab: 'video',
   },
-  onLoad: function (a) {
+  onLoad: function(a) {
     // app.pageOnLoad(this);
     this.loadMoreGoodsList();
   },
-  onReady: function () { },
-  onShow: function () {
+  swiperTab: function (e) {
+    var that = this;
+    console.log(e);
+    that.setData({
+      selectedTab: e.detail.currentItemId
+    });
+  },
+  clickTab: function (e) {
+    var that = this;
+    console.log(e)
+    if (this.data.selectedTab === e.target.dataset.current) {
+      return false;
+    } else {
+      that.setData({
+        selectedTab: e.target.dataset.current
+      })
+    }
+  },
+  onReady: function() {},
+  onShow: function() {
     // app.pageOnShow(this);
   },
-  onHide: function () { },
-  onUnload: function () { },
-  onPullDownRefresh: function () { },
-  loadMoreGoodsList: function () {
+  onHide: function() {},
+  onUnload: function() {},
+  onPullDownRefresh: function() {},
+  loadMoreGoodsList: function() {
     var o = this;
     // if (!is_loading_more) {
     //   o.setData({
     //     show_loading_bar: !0
     //   }), is_loading_more = !0;
-      var i = o.data.page;
-      // var v = [{
-      //           "id":"234",
-      //           "title":"小程序项目整体介绍",
-      //           "url":"http://m1.beiyuesi.com/2.mp4",
-      //           "sort":"9",
-      //           "is_delete":"0",
-      //           "addtime":"1515120216",
-      //           "store_id":"20926",
-      //       "pic_url":"https://u5.9026.com/addons/swdz_mall/core/web/uploads/image/f0/f0734ad93d46497483344846864596a4.jpg",
-      //           "content":"想要自己开发APP，却备受组建开发团队的困扰更别说高昂的开发费用与漫长的开",
-      //           "type":"0",
-      //           "time":"01月05日",
-      //           "show":-1
-      //       },
-      //   {
-      //     "id": "235",
-      //     "title": "小程序模版介绍",
-      //     "url": "http://m1.beiyuesi.com/1.mp4",
-      //     "sort": "99",
-      //     "is_delete": "0",
-      //     "addtime": "1515120395",
-      //     "store_id": "20926",
-      //     "pic_url": "https://u5.9026.com/addons/swdz_mall/core/web/uploads/image/0e/0e739254177172e4b815d75f88da77b4.png",
-      //     "content": "小程序是腾讯旗下继朋友圈、公众号之后推出的又一款战略级的产品。是线下实体店实体零售转型升级、实现新突破的利器。小程序比公众号更容易传播和裂变，比传统电商更容易获客和成交，比朋友圈微商更专业和可信",
-      //     "type": "0",
-      //     "time": "01月05日",
-      //     "show": -1
-      //   },
-      //       ];
-      wx.request({
-        url: api.getMoreVideosAndArticlesUrl,
-        method: 'GET',
-        data: {
-          'offset': o.data.video_list.length
-        },
-        success: res => {
-          if (res.data.list.length > 0) {
-            var t = o.data.video_list.concat(res.data.list);
-            o.setData({
-              video_list: t,
-              page: i + 1
-            });
-          } else {
-            wx.showToast({
-              title: '到底了',
-              icon: 'none',
-              duration: 800
-            })
-          }
+    var i = o.data.page;
+    // var v = [{
+    //           "id":"234",
+    //           "title":"小程序项目整体介绍",
+    //           "url":"http://m1.beiyuesi.com/2.mp4",
+    //           "sort":"9",
+    //           "is_delete":"0",
+    //           "addtime":"1515120216",
+    //           "store_id":"20926",
+    //       "pic_url":"https://u5.9026.com/addons/swdz_mall/core/web/uploads/image/f0/f0734ad93d46497483344846864596a4.jpg",
+    //           "content":"想要自己开发APP，却备受组建开发团队的困扰更别说高昂的开发费用与漫长的开",
+    //           "type":"0",
+    //           "time":"01月05日",
+    //           "show":-1
+    //       },
+    //   {
+    //     "id": "235",
+    //     "title": "小程序模版介绍",
+    //     "url": "http://m1.beiyuesi.com/1.mp4",
+    //     "sort": "99",
+    //     "is_delete": "0",
+    //     "addtime": "1515120395",
+    //     "store_id": "20926",
+    //     "pic_url": "https://u5.9026.com/addons/swdz_mall/core/web/uploads/image/0e/0e739254177172e4b815d75f88da77b4.png",
+    //     "content": "小程序是腾讯旗下继朋友圈、公众号之后推出的又一款战略级的产品。是线下实体店实体零售转型升级、实现新突破的利器。小程序比公众号更容易传播和裂变，比传统电商更容易获客和成交，比朋友圈微商更专业和可信",
+    //     "type": "0",
+    //     "time": "01月05日",
+    //     "show": -1
+    //   },
+    //       ];
+    wx.request({
+      url: api.getMoreVideosAndArticlesUrl,
+      method: 'GET',
+      data: {
+        'offset': o.data.video_list.length
+      },
+      success: res => {
+        if (res.data.list.length > 0) {
+          var t = o.data.video_list.concat(res.data.list);
+          o.setData({
+            video_list: t,
+            page: i + 1
+          });
+        } else {
+          wx.showToast({
+            title: '到底了',
+            icon: 'none',
+            duration: 800
+          })
         }
-      })
-      // app.request({
-      //   url: api.default.video_list,
-      //   data: {
-      //     page: i
-      //   },
-      //   success: function (a) {
-      //     0 == a.data.list.length && (is_no_more = !0);
-      //     var t = o.data.video_list.concat(a.data.list);
-      //     o.setData({
-      //       video_list: t,
-      //       page: i + 1
-      //     });
-      //   },
-      //   complete: function () {
-      //     is_loading_more = !1, o.setData({
-      //       show_loading_bar: !1
-      //     });
-      //   }
-      // });
+      }
+    })
+    // app.request({
+    //   url: api.default.video_list,
+    //   data: {
+    //     page: i
+    //   },
+    //   success: function (a) {
+    //     0 == a.data.list.length && (is_no_more = !0);
+    //     var t = o.data.video_list.concat(a.data.list);
+    //     o.setData({
+    //       video_list: t,
+    //       page: i + 1
+    //     });
+    //   },
+    //   complete: function () {
+    //     is_loading_more = !1, o.setData({
+    //       show_loading_bar: !1
+    //     });
+    //   }
+    // });
     // }
   },
-  play: function (a) {
+  play: function(a) {
     var t = a.currentTarget.dataset.index;
     wx.createVideoContext("video_" + this.data.show_video).pause(), this.setData({
       show_video: t,
       show: !0
     });
   },
-  onReachBottom: function () {
+  onReachBottom: function() {
     this.loadMoreGoodsList();
     // is_no_more || this.loadMoreGoodsList();
   },
-  more: function (a) {
-    var t = this, o = a.target.dataset.index, i = t.data.video_list, e = wx.createAnimation({
-      duration: 1e3,
-      timingFunction: "ease"
-    });
+  more: function(a) {
+    var t = this,
+      o = a.target.dataset.index,
+      i = t.data.video_list,
+      e = wx.createAnimation({
+        duration: 1e3,
+        timingFunction: "ease"
+      });
     this.animation = e, -1 != i[o].show ? (e.rotate(0).step(), i[o].show = -1) : (e.rotate(0).step(),
       i[o].show = 0), t.setData({
-        video_list: i,
-        animationData: this.animation.export()
-      });
+      video_list: i,
+      animationData: this.animation.export()
+    });
   },
   redirectToArticle: function(e) {
     let id = e.currentTarget.dataset.id;

wechat/pages/article/article.wxml

@@ -1,27 +1,11 @@
-<view class="after-navber">
-    <view class="info">
-        <view class="info-list">
-            <view class="info-content" wx:for="{{video_list}}">
-                <view class="info-bg" wx:if="{{ item.type == 3 }}">
-                    <view class="info-video">
-                        <image bindtap="play" class="bg {{show_video==index?hide:''}}" data-index="{{index}}" src="{{item.pic_url}}"></image>
-                        <image bindtap="play" class="play {{show_video==index?hide:''}}" data-index="{{index}}" src="/images/video-play.png"></image>
-                        <video autoplay="true" class="{{show_video==index?'':hide}}" controls="controls" id="video_{{index}}" src="{{item.url}}" wx:if="{{show_video==index}}"></video>
-                    </view>
-                     <view class="info-label">{{item.title||'未命名'}}</view>
-                     <!-- <view class="content {{item.show!=-1?'':'more'}}">{{item.content||'暂无信息'}}</view>   -->
-                    <!-- <view class="flex-y-center flex-x-center" style="position:relative;height:80rpx;font-size:9pt;color:#afafaf">
-                        <text class="flex-y-center left">{{item.time}}</text>
-                        <view capture-bind:tap="more" class="right flex-y-center" data-index="{{index}}">
-                            <image animation="{{animationData}}" src="{{item.show!=-1?'/images/icon-up.png':'/images/icon-down.png'}}"></image>
-                            <text data-index="{{index}}">展开</text>
-                        </view>
-                    </view> -->
-                </view>
-                <view wx:if="{{ item.type == 4 }}" class='info-bg' catchtap='redirectToArticle' data-id='{{ item.id }}'>
-                  <view class="info-label">{{ item.title||'未命名' }}</view>
-                </view>
-            </view>
-        </view>
-    </view>
+<view class="swiper-tab">
+  <view class="swiper-tab-item {{ item.tab == selectedTab ? 'active' : '' }}" data-current="{{ item.tab }}" bindtap="clickTab" wx:for="{{ tabList }}">{{ item.title }}</view>
 </view>
+<swiper current="{{ selectedTab }}" duration="300" bindchange="swiperTab">
+  <swiper-item item-id="video">
+    <view>视频</view>
+  </swiper-item>
+  <swiper-item item-id="article">
+    <view>文章</view>
+  </swiper-item>
+</swiper>

wechat/pages/article/article.wxss

@@ -1,123 +1,143 @@
 .info {
-    overflow-x: hidden;
-    padding-bottom: 20rpx;
+  overflow-x: hidden;
+  padding-bottom: 20rpx;
 }
 
 .info .info-list {
-    margin-right: -10rpx;
-    margin-left: -10rpx;
+  margin-right: -10rpx;
+  margin-left: -10rpx;
 }
 
 .info-content {
-    padding: 0 10rpx;
-    width: 100%;
-    display: inline-block;
-    margin-bottom: 20rpx;
+  padding: 0 10rpx;
+  width: 100%;
+  display: inline-block;
+  margin-bottom: 20rpx;
 }
 
 .info-content .info-bg {
-    background-color: #fff;
-    position: relative;
-    width: 100%;
-    height: 100%;
+  background-color: #fff;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .info-content .info-video {
-    width: 100%;
-    height: 422rpx;
-    background-color: #fff;
-    position: relative;
+  width: 100%;
+  height: 422rpx;
+  background-color: #fff;
+  position: relative;
 }
 
 .hide {
-    display: none;
+  display: none;
 }
 
 .info-content .info-video .bg {
-    width: 100%;
-    height: 422rpx;
-    position: absolute;
-    top: 0;
-    left: 0;
+  width: 100%;
+  height: 422rpx;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .info-content .info-video .play {
-    width: 128rpx;
-    height: 128rpx;
-    position: absolute;
-    top: 137rpx;
-    left: 311rpx;
-    opacity: 0.8;
+  width: 128rpx;
+  height: 128rpx;
+  position: absolute;
+  top: 137rpx;
+  left: 311rpx;
+  opacity: 0.8;
 }
 
 .info-content .info-video video {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .info-content .info-label {
-    width: 100%;
-    height: 100rpx;
-    line-height: 100rpx;
-    padding: 0 24rpx;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-weight: bold;
+  width: 100%;
+  height: 100rpx;
+  line-height: 100rpx;
+  padding: 0 24rpx;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: bold;
 }
 
 .modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,1);
-    z-index: 9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 1);
+  z-index: 9999;
 }
 
 .modal video {
-    width: 100%;
-    height: 430rpx;
+  width: 100%;
+  height: 430rpx;
 }
 
 .no-scroll {
-    height: 100%;
-    overflow-y: hidden;
+  height: 100%;
+  overflow-y: hidden;
 }
 
 .info-content .content {
-    padding: 0 24rpx;
+  padding: 0 24rpx;
 }
 
 .info-content .content.more {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
 }
 
 .info-content .left {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    padding: 0 20rpx;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  padding: 0 20rpx;
 }
 
 .info-content .right {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    padding: 0 20rpx;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding: 0 20rpx;
 }
 
 .info-content .right image {
-    width: 18rpx;
-    height: 10rpx;
-    margin-right: 16rpx;
-}
+  width: 18rpx;
+  height: 10rpx;
+  margin-right: 16rpx;
+}
+
+.swiper-tab {
+  width: 100%;
+  border-bottom: 2rpx solid #ccc;
+  text-align: center;
+  height: 88rpx;
+  line-height: 88rpx;
+  font-weight: bold;
+}
+
+.swiper-tab-item {
+  display: inline-block;
+  width: 33.33%;
+  color: red;
+}
+
+.active {
+  color: aqua;
+  border-bottom: 4rpx solid red;
+}