From f5cb1300dff374c14aaba6058239a8c7bcd15c61 Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Thu, 4 Apr 2019 16:58:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0grid-view=E7=9A=84list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/grid-cell.wpy | 76 ++++++++++++++++++++++++++++++++++++
 src/components/rating.wpy    | 48 +++++++++++++++++++++++
 src/pages/index.wpy          | 10 ++---
 src/pages/search.wpy         | 20 ++++++++--
 src/style/font.wxss          |  5 ++-
 5 files changed, 150 insertions(+), 9 deletions(-)
 create mode 100644 src/components/grid-cell.wpy
 create mode 100644 src/components/rating.wpy

diff --git a/src/components/grid-cell.wpy b/src/components/grid-cell.wpy
new file mode 100644
index 0000000..b53a3ac
--- /dev/null
+++ b/src/components/grid-cell.wpy
@@ -0,0 +1,76 @@
+<style lang="less">
+  .grid-cell-item{
+    width: 33.333333%;
+    text-align: center;
+    overflow: hidden;
+  }
+  .grid-cell-item .item-inner{
+    margin: 5rpx;
+    color: #666;
+    font-size: 28rpx;
+  }
+  .grid-cell-item .item-image{
+    width: 100%;
+    height: 300rpx;
+  }
+  .grid-cell-item .bigstar{
+    width: 120rpx;
+    height: 24rpx;
+  }
+  .grid-cell-item .item-name{
+    display: block;
+    font-size: 28rpx;
+    text-align: center;
+    white-space:nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
+<template>
+<view class='grid-cell-item' @tap="gameTap({{item.gid}})">
+  <view class='item-inner'>
+    <image mode="aspectFill" src="{{item.icon}}" class='item-image'/>
+    <view>
+      <text class="item-name">{{item.name}}</text>
+    </view>
+    <rating :score.sync="currentScore"></rating>
+  </view>
+</view>
+</template>
+
+<script>
+  import wepy from 'wepy';
+  import rating from './rating';
+
+  export default class gridCell extends wepy.component {
+    components = {
+      rating: rating,
+    };
+    props = {
+      item: {
+        type: Object,
+        default: null
+      },
+      showAll: {
+        type: Boolean,
+        default: false
+      }
+    }
+    data = {
+    }
+    computed = {
+      currentScore () {
+        if (this.item && this.item.score) {
+          return this.item.score;
+        } else {
+          return 0;
+        }
+      }
+    }
+    methods = {
+      gameTap (url, e) {
+        this.$emit('gameCellTap', url)
+      }
+    }
+  }
+</script>
diff --git a/src/components/rating.wpy b/src/components/rating.wpy
new file mode 100644
index 0000000..a40c3c5
--- /dev/null
+++ b/src/components/rating.wpy
@@ -0,0 +1,48 @@
+<style lang="less">
+  .com-rating {
+    display: inline-block;
+    font-size: 1.2em;
+    letter-spacing: .3em;
+  }
+
+  .com-rating .rating-on,
+  .com-rating .rating-off {
+    display: inline-block;
+  }
+
+  .com-rating .rating-on {
+    color: #f6d031;
+    position: absolute;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+  }
+
+  .com-rating .rating-off {
+    color: #DBDBDB;
+    padding: 0;
+    margin: 0;
+  }
+</style>
+<template name="rating">
+  <view class='com-rating'>
+    <repeat for="{{[1,2,3,4,5]}}" item="item">
+      <view class='rating-on'
+            style='width:{{score >= (maxScore/5)*item ? 1 : score < (maxScore/5)*(item-1) ? 0 : (score*10)%(maxScore/5*10)/(maxScore/5*10)}}em'
+      ><i class='icon-star-full'></i></view>
+      <view class='rating-off'><i class='icon-star-full'></i></view>
+    </repeat>
+  </view>
+</template>
+<script>
+  import wepy from 'wepy';
+
+  export default class rating extends wepy.component {
+    props = {
+      score: {type: Number, default: 2.5},
+      maxScore: {type: Number, default: 5}
+    };
+    data = {};
+    methods = {};
+  }
+</script>
diff --git a/src/pages/index.wpy b/src/pages/index.wpy
index 381b6b3..5c9e7fd 100644
--- a/src/pages/index.wpy
+++ b/src/pages/index.wpy
@@ -134,11 +134,11 @@
         this.$toGameInfo(gid);
       },
       async toSearch() {
-        // wepy.navigateTo({
-        //   url: '/pages/search'
-        // })
-        let movie = 'http://iqiyi.kuyun-bofang.com/20190208/eebojrT3/index.m3u8'
-        this.$toMovie(movie, '流浪地球');
+        wepy.navigateTo({
+          url: '/pages/search'
+        })
+        // let movie = 'http://iqiyi.kuyun-bofang.com/20190208/eebojrT3/index.m3u8'
+        // this.$toMovie(movie, '流浪地球');
       },
       async showInviteView() {
         await this.updateInviteViewData();
diff --git a/src/pages/search.wpy b/src/pages/search.wpy
index 35d06d3..b9a68c4 100644
--- a/src/pages/search.wpy
+++ b/src/pages/search.wpy
@@ -4,6 +4,11 @@
   .container {
     background-color:#FFFFFF;
   }
+  .grid-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 5rpx;
+  }
 
 </style>
 <template>
@@ -43,9 +48,16 @@
         </view>
       </view>
     </view>
-    <repeat for="{{records}}" item="item" >
-      <recordCell :item="item" @gameCellTap.user="gameTap" :showAll.sync = 'showAll'/>
-    </repeat>
+    <view >
+      <repeat for="{{records}}" item="item" >
+        <recordCell :item="item" @gameCellTap.user="gameTap" :showAll.sync = 'showAll'/>
+      </repeat>
+    </view>
+    <!--<view class="grid-list">-->
+      <!--<repeat for="{{records}}" item="item" >-->
+        <!--<gridCell :item="item" @gameCellTap.user="gameTap" :showAll.sync = 'showAll'/>-->
+      <!--</repeat>-->
+    <!--</view>-->
     <zanLoadmore :loading.sync="loading" :nodata.sync="noData" :nomore.sync="noMore" nodata_str="暂无数据"></zanLoadmore>
     <toast/>
   </view>
@@ -59,6 +71,7 @@
   import tips from '../mixins/tips';
   import cfg from '../mixins/cfg';
   import recordCell from '../components/game-cell';
+  import gridCell from '../components/grid-cell';
   import recentGame from '../components/recent-game';
   import zanLoadmore from '../components/zan-loadmore';
   import global from '../common/global';
@@ -74,6 +87,7 @@
     components = {
       toast: Toast,
       recordCell: recordCell,
+      gridCell: gridCell,
       recentGame: recentGame,
       zanLoadmore: zanLoadmore
     };
diff --git a/src/style/font.wxss b/src/style/font.wxss
index 0f32663..f0f11a1 100644
--- a/src/style/font.wxss
+++ b/src/style/font.wxss
@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'xmjlicons';
-  src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
+  src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
   font-weight: normal;
   font-style: normal;
 }
@@ -29,6 +29,9 @@
 .icon-search:before {
   content: "\e986";
 }
+.icon-star-full:before {
+  content: "\e9d9";
+}
 .icon-checkmark:before {
   content: "\ea10";
 }