排行榜

.quickapp.preview.json

@@ -0,0 +1 @@
+{}

src/assets/less/leaderboard.less

@@ -0,0 +1,83 @@
+.leaderboard-wrap {
+  background-color: #fff;
+  flex-direction: column;
+  margin-top: 20px;
+
+  .type-bar {
+    background-color: #fff;
+
+    .type-item {
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+
+      text {
+        font-size: 30px;
+        color: #999;
+        // padding: 34px 0;
+      }
+
+      .cur {
+        color: #ef5952;
+        font-size: 36px;
+        font-weight: bold;
+      }
+
+      .choose-bar {
+        width: 38px;
+        height: 4px;
+        background-color: #ef5952;
+        border-radius: 2px;
+        margin-top: 10px;
+      }
+    }
+  }
+  .book-list__wrap {
+    background-color: #fff;
+    padding: 0 24px;
+    flex-direction: column;
+
+    .book-list__title {
+      padding: 30px 0;
+      align-items: center;
+
+      text {
+        color: #333;
+        font-size: 32px;
+      }
+    }
+  }
+  .book-list__multi {
+    margin-top: 30px;
+    flex-direction: column;
+    .book-item {
+      margin-bottom: 40px;
+    }
+    .book-info__multi {
+      flex: 1;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      margin-left: 38px;
+      // margin-bottom: 40px;
+
+      .name {
+        font-size: 32px;
+        color: #333;
+        lines: 1;
+        text-overflow: ellipsis;
+      }
+
+      .intro {
+        font-size: 24px;
+        color: #666;
+        lines: 3;
+        text-overflow: ellipsis;
+        margin-top: 36px;
+        line-height: 36px;
+      }
+    }
+  }
+}

src/manifest.json

@@ -54,7 +54,7 @@
     "logLevel": "debug"
   },
   "router": {
-    "entry": "views/Index",
+    "entry": "views/Leaderboard",
     "pages": {
       "views/Index": {
         "component": "index"
@@ -100,6 +100,9 @@
       },
       "views/Raderover": {
         "component": "index"
+      },
+      "views/Leaderboard": {
+        "component": "index"
       }
     },
     "widgets": {}
@@ -171,6 +174,11 @@
         "titleBarText": "阅读器",
         "menu": false,
         "titleBar": false
+      },
+      "views/Leaderboard": {
+        "titleBarText": "排行榜",
+        "menu": false,
+        "titleBar": true
       }
     }
   }

src/views/Leaderboard/index.ux

@@ -0,0 +1,100 @@
+<import name="x-book" src="../../components/book/book.ux"></import>
+
+<template>
+    <div class="leaderboard-wrap">
+        <div class="type-bar">
+            <block for="type in typeList">
+                <div class="type-item" @click="typeChange(type.index)">
+                    <text class="{{type.index === current ? 'cur' : ''}}">{{type.name}}</text>
+                    <text class="choose-bar" show="{{type.index === current}}"></text>
+                </div>
+            </block>
+        </div>
+        <list>
+            <list-item type="multi" class="book-list__wrap book-list__wrap--multi">
+                <div class="book-list__multi">
+                    <block for="book in list">
+                        <div class="book-item">
+                            <x-book multi="{{true}}" width="{{150}}" book="{{book}}">
+                                <div class="book-info__multi">
+                                    <text class="name">{{book.book_name}}</text>
+                                    <text class="intro">{{book.book_summary}}</text>
+                                </div>
+                            </x-book>
+                        </div>
+                    </block>
+                </div>
+            </list-item>
+        </list>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            typeList: [
+                {
+                    name: "女生",
+                    index: 0
+                },
+                {
+                    name: "男生",
+                    index: 1
+                },
+            ],
+            list: [{
+                "book_id": "DZ18V4EoMXNAkgqopVKrjLzebmWvdYPQ",
+                "book_name": "最后赢家",
+                "book_summary": "我为了钱做了上门女婿。我为了钱做了上门女婿。我为了钱做了上门女婿。我为了钱做了上门女婿。我为了钱做了上门女婿。我为了钱做了上门女婿。我为了钱做了上门女婿。我为了钱做了上门女婿。",
+                "book_author": "小豌豆",
+                "cover_url": "https://cdn-novel.iycdm.com/book/cover/201907241708063365.jpeg?x-oss-process=image/resize,w_200/format,jpg",
+                "book_word_count": 3872962,
+                "book_chapter_total": 1806,
+                "book_category_id": 40,
+                "book_category": "女婿文",
+                "book_end_status": 1,
+                "book_published_time": "",
+                "copyright": "",
+                "charge_type": "CHAPTER",
+                "force_subscribe_chapter_id": 8,
+                "update_time": null,
+                "is_on_shelf": 2,
+                "book_price": "8.99",
+                "keyword": "",
+                "recommend_index": "100.00",
+                "is_show_index_content": 1,
+                "click_count": 0,
+                "product_id": 3375,
+                "sex_preference": "男频",
+                "last_cid": 1413448,
+                "last_chapter": "后续一百七十四章",
+                "first_cid": 1414575,
+                "is_on_user_shelf": null,
+                "last_chapter_is_vip": null,
+                "is_need_charge": 0,
+                "record_chapter_id": null,
+                "record_chapter_name": null
+            }],
+            current: 0
+        }
+    },
+    onInit() {
+        for (var i = 0; i < 5; i++) {
+            console.log(1)
+            this.list.push(this.list[0])
+        }
+    },
+    onShow() {
+
+    },
+    typeChange(index) {
+        this.current = index;
+    },
+}
+</script>
+
+<style lang="less">
+@import "../../assets/less/leaderboard.less";
+</style>