Merge branch 'release/1.0.0'

terryso · Jul 15, 2018 · 034d7b0 · 034d7b0
2 parents dbdc681 + 43aca34
commit 034d7b0
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "author": "NEE",
   "license": "ISC",
   "dependencies": {
-    "wepy": "^1.6.0",
+    "wepy": "^1.7.2",
     "wepy-async-function": "^1.4.4",
     "wepy-com-toast": "^1.0.3"
   },

diff --git a/src/api/item.js b/src/api/item.js
@@ -25,8 +25,28 @@ export function getItems(url) {
   })
 }
 
-export function getItem(item_id) {
-  let url = 'https://baobab.kaiyanapp.com/api/v1/video/' + item_id
+export function getRelatedItems(itemId) {
+  let url = 'https://baobab.kaiyanapp.com/api/v4/video/related?id=' + itemId
+
+  return wepy.request(url).then((res) => {
+    var statusCode = res.statusCode
+    var data = res.data
+    if (statusCode === 200) {
+      var items = data.itemList
+        .filter(item => item.type === 'videoSmallCard')
+        .map(item => item.data)
+      return Promise.resolve(items)
+    } else {
+      return Promise.reject({
+        'error_code': statusCode + '',
+        'error_message': '服务器出错了...'
+      })
+    }
+  })
+}
+
+export function getItem(itemId) {
+  let url = 'https://baobab.kaiyanapp.com/api/v1/video/' + itemId
   return wepy.request(url).then((res) => {
     var statusCode = res.statusCode
     var data = res.data

diff --git a/src/pages/detail.wpy b/src/pages/detail.wpy
@@ -13,21 +13,53 @@
       <text class="subtitle">{{item.category}} / {{item.durationText}}</text>
       <text class="detail">{{item.description}}</text>
     </view>
+
+    <view class="zan-panel-title">相关推荐</view>
+    <block wx:for="{{ relatedItems }}" wx:key="id">
+      <view class="zan-panel zan-panel--without-margin-top zan-panel--without-border" @tap="gotoDetail({{item}})">
+        <view class="zan-cell">
+          <view class="zan-cell__bd">
+            <view class="related-video">
+              <image src="{{item.cover.feed}}" mode="aspectFill"/>
+            </view>
+            <view class="related-text">
+              <text class="title">{{item.title}}</text>
+              <text class="subtitle">#{{item.category}} / {{item.durationText}}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </block>
+    <zanLoadmore :nomore="_true" wx:if="{{showNoMore}}"></zanLoadmore>
   </view>
 </template>
 
 <script>
   import wepy from 'wepy'
-  import {getItem} from '../api/item'
+  import {getItem, getRelatedItems} from '../api/item'
+  import {secondToTime} from '../common/utils'
+  import zanLoadmore from '../components/zan-loadmore'
 
   export default class Detail extends wepy.page {
     config = {}
-    components = {}
+    components = {
+      zanLoadmore: zanLoadmore
+    }
     data = {
       item: {},
-      isWifi: false
+      relatedItems: [],
+      isWifi: false,
+      _true: true,
+      showNoMore: false
+    }
+    methods = {
+      gotoDetail(item) {
+        wepy.$instance.globalData.selectedItem = item
+        wepy.redirectTo({
+          url: 'detail'
+        })
+      }
     }
-    methods = {}
 
     onLoad(options) {
       let item = options.item
@@ -40,7 +72,17 @@
         })
       } else {
         this.item = wepy.$instance.globalData.selectedItem
+        item = this.item.id
       }
+
+      getRelatedItems(item).then((res) => {
+        this.relatedItems = res
+        this.relatedItems.forEach(function (item) {
+          item.durationText = secondToTime(item.duration)
+        })
+        this.showNoMore = true
+        this.$apply()
+      })
     }
 
     onShow() {
@@ -62,6 +104,8 @@
 </script>
 
 <style lang="scss">
+  @import '../zanui/panel.scss';
+  @import '../zanui/cell.scss';
 
   .container {
     display: flex;
@@ -78,16 +122,61 @@
       padding: 15px;
       .title {
         font-size: 17px;
+        font-weight: bold;
       }
       .subtitle {
         margin-top: 10px;
         font-size: 14px;
+        color: lightgrey;
       }
       .detail {
         margin-top: 15px;
         font-size: 12px;
+        color: lightgrey;
+      }
+    }
+    .zan-panel-title {
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 1;
+      color: #fff;
+      padding: 10px 15px 10px 15px;
+    }
+    .zan-panel {
+      background-color: #555555;
+      .zan-cell {
+        padding: 4px 15px;
+        .zan-cell__bd {
+          display: flex;
+          .related-video {
+            image {
+              width: 150px;
+              height: 80px;
+              border-radius: 4px;
+            }
+          }
+          .related-text {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-left: 10px;
+            justify-content: center;
+            .title {
+              font-size: 14px;
+              font-weight: bold;
+            }
+            .subtitle {
+              font-size: 12px;
+              color: lightgrey;
+              margin-top: 10px;
+            }
+          }
+        }
       }
     }
+    .zan-loadmore--nomore .zan-loadmore__tips {
+      background-color: rgba(0, 0, 0, 0);
+    }
   }
 
 </style>
diff --git a/src/pages/index.wpy b/src/pages/index.wpy
@@ -1,7 +1,7 @@
 <template>
   <view class="container">
     <block wx:for="{{ items }}" wx:key="id">
-      <view class="zan-panel" @tap="gotoDetail({{item}})">
+      <view class="zan-panel zan-panel--without-margin-top" @tap="gotoDetail({{item}})">
         <view class="zan-cell">
           <view class="video">
             <image src="{{item.cover.feed}}" mode="widthFix"/>
@@ -34,7 +34,7 @@
     }
     components = {
       zanLoadmore1: zanLoadmore,
-      zanLoadmore2: zanLoadmore,
+      zanLoadmore2: zanLoadmore
     }
     data = {
       items: [],
@@ -58,14 +58,14 @@
 
     onShow() {
       if (this.items.length === 0) {
-        this.reloadData()
+        this.loadData()
       }
     }
 
-    reloadData() {
-      getItems().then((res) => {
-        this.items = res.data
-        this.items.forEach(function (item, index) {
+    loadData(nextPage) {
+      getItems(nextPage).then((res) => {
+        this.items = nextPage ? this.items.concat(res.data) : res.data
+        this.items.forEach(function (item) {
           item.durationText = secondToTime(item.duration)
         })
         this.nextPage = res.next_page_url
@@ -77,24 +77,15 @@
     }
 
     onPullDownRefresh() {
-      this.reloadData()
+      this.loadData()
     }
 
     onReachBottom() {
       if (this.nextPage) {
         this.showLoadMore = true
         this.showNoMore = false
         this.$apply()
-        getItems(this.nextPage).then((res) => {
-          this.items = this.items.concat(res.data)
-          this.items.forEach(function (item, index) {
-            item.durationText = secondToTime(item.duration)
-          })
-          this.nextPage = res.next_page_url
-          this.$apply()
-        }).catch((rej) => {
-          console.log(rej)
-        })
+        this.loadData(this.nextPage)
       } else {
         this.showLoadMore = false
         this.showNoMore = true