小程序：视频列表接口对接

htmldev/wxMini/pages/media/api/index.js

@@ -0,0 +1,11 @@
+const { request } = require('../../../api/request')
+
+/**
+ * 获取轮播
+ * @returns {Promise<*>}
+ */
+export const getLunboList = () => request({
+  url: '/api/user/video/lunbo/list',
+  method: 'POST',
+  showLoading: true
+})

htmldev/wxMini/pages/media/child/video-item-normal/index.scss

@@ -10,7 +10,6 @@
     display: block;
     width: 100%;
     height: 100%;
-    background: pink;
   }
 
   .play {

htmldev/wxMini/pages/media/child/video-item-normal/index.wxml

@@ -1,13 +1,14 @@
 <view class="photo-wrap">
-  <image class="photo" src=""></image>
+  <image class="photo" src="{{item.video_cover_url}}"></image>
   <image class="play" src="../../../../image/common/video-play-normal.png"></image>
+  <!--  todo-->
   <text class="pv">3万次播放</text>
 </view>
-<view class="video-name">视频名称视频名称视频名</view>
+<view class="video-name">{{item.video_name}}</view>
 <view class="data-detail">
   <view class="box">
     <image class="icon-praise" src="../../../../image/common/like.png"></image>
-    <text class="data">99+</text>
+    <text class="data">{{item.video_good_num >= 99 ? '99+' : item.video_good_num}}</text>
   </view>
   <view class="box">
     <image class="icon-message" src="../../../../image/common/comment.png"></image>

htmldev/wxMini/pages/media/media.js

@@ -1,10 +1,18 @@
+const pages = require('../../mixin/pages')
+const { getLunboList } = require('./api/index')
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    ...pages.data(),
+    listUrl: '/api/user/video/list',
+    searchForm: {
+      'key_words': '',
+      'type': '1' // 类型 1最新2播放最高
+    },
     swiperActiveDot: 0,
     nav: [
       {
@@ -16,14 +24,16 @@ Page({
         value: '2'
       }
     ],
-    active: '1'
+    lunboList: []
   },
+  ...pages.methods,
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    this.fetchLunboList()
+    this.fetchOrderList()
   },
 
   /**
@@ -58,21 +68,24 @@ Page({
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh() {
-
+    if (this.data.freshing) {
+      return
+    }
+    this.setData({
+      freshing: true
+    })
+    this.bindCallBack()
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom() {
-
+    this.fetchOrderList()
   },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+  bindCallBack() {
+    this.fetchLunboList()
+    this.refreshOrderList()
   },
   handleSwiperChange(e) {
     const { current } = e.detail
@@ -85,14 +98,31 @@ Page({
     const { value } = e.detail
 
     this.setData({
-      active: value
+      'searchForm.type': value
+    }, () => {
+      this.refreshOrderList()
     })
   },
   jumpMediaDetail(e) {
     const { item } = e.currentTarget.dataset
 
     wx.navigateTo({
-      url: '/pages/mediaDetail/mediaDetail?videoConfig=' + item
+      url: '/pages/mediaDetail/mediaDetail?videoConfig=' + JSON.stringify(item)
     })
+  },
+  async fetchLunboList() {
+    try {
+      const { status, data, msg } = await getLunboList()
+      if (status) {
+        this.setData({
+          lunboList: data.list
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
   }
 })

htmldev/wxMini/pages/media/media.json

@@ -3,5 +3,9 @@
     "customer-tab": "../../components/customer-tab/index",
     "video-item-normal": "./child/video-item-normal/index"
   },
-  "navigationBarTitleText": "村长说农货"
+  "navigationBarTitleText": "村长说农货",
+  "backgroundColor": "#F6F6F6",
+  "backgroundTextStyle": "dark",
+  "enablePullDownRefresh": true,
+  "onReachBottomDistance": 50
 }

htmldev/wxMini/pages/media/media.scss

@@ -26,7 +26,6 @@
     display: block;
     width: 100%;
     height: 100%;
-    background: pink;
   }
 
   .info {
@@ -53,7 +52,6 @@
   .icon {
     width: 36rpx;
     height: 36rpx;
-    background: pink;
   }
 
   .label,
@@ -104,9 +102,10 @@
 
 .main {
   display: flex;
-  justify-content: center;
   flex-flow: row wrap;
+  width: 690rpx;
   padding: 30rpx 0 314rpx;
+  margin: 0 auto;
 }
 
 .list {

htmldev/wxMini/pages/media/media.wxml

@@ -2,12 +2,14 @@
   <view class="app_page-header-search">
     <view class="app_page-header-search-warp app_width-690">
       <label for="header-search">
-        <image src=""></image>
+        <image src="../../image/common/search@2x.png"></image>
       </label>
       <input
         placeholder-class="app_header-search-placeholder"
-        value=""
-        placeholder="搜索信息"></input>
+        value="{{searchForm.key_words}}"
+        placeholder="搜索信息"
+        data-formkey="key_words"
+        bind:input="handleKeyWords"></input>
     </view>
   </view>
   <view class="page-section">
@@ -18,12 +20,12 @@
       autoplay="{{false}}"
       bind:change="handleSwiperChange">
       <block
-        wx:for="{{background}}"
+        wx:for="{{lunboList}}"
         wx:key="*this">
         <swiper-item
           class="swiper-item-wrap">
-          <view class="swiper-item {{item}}">
-            <image class="photo" src=""></image>
+          <view class="swiper-item">
+            <image class="photo" src="{{item.video_cover_url}}"></image>
             <view class="info">
               <view class="label-wrap">
                 <image class="icon" src="../../image/common/video.png"></image>
@@ -31,7 +33,7 @@
               </view>
               <view class="value-wrap">
                 <view class="name">村长说农货</view>
-                <view class="address">浙江省嵊州菜园</view>
+                <view class="address">{{item.video_name}}</view>
               </view>
             </view>
           </view>
@@ -41,18 +43,18 @@
     <view class="swiper-dots">
       <view
         class="{{swiperActiveDot === index ? 'active' : ''}}"
-        wx:for="{{background}}"
+        wx:for="{{lunboList}}"
         wx:key="index"></view>
     </view>
   </view>
   <customer-tab
     nav="{{nav}}"
-    active="{{active}}"
+    active="{{searchForm.type}}"
     bind:change="handleNav"/>
   <view class="main">
     <view
       class="list"
-      wx:for="{{4}}"
+      wx:for="{{listData}}"
       wx:key="item"
       data-item="{{item}}"
       bind:tap="jumpMediaDetail">