wly全网

src/assets/less/category.less

@@ -1,35 +1,35 @@
 .category-wrap {
   background-color: #fff;
   flex-direction: column;
+  height: 100%;
   .page_title {
-    background-color:  #BD8757;
+    height: 112px;
+    background-color: #BD8757;
     text {
       padding: 0 30px;
       font-size: 36px;
-      font-weight: bold;
-      color: #fff;
-      padding-bottom: 50px;
+      color:  white;
     }
    
   }
   .filter-item {
     .filter-item__list {
       .filter-item_warp {
-        padding: 0 15px;
+        padding: 0 10px;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         position: relative;
         .filter-item__item {
-          padding: 0 15px;
+          padding: 0 15px; 
           justify-content: center;
           align-items: center;
           flex-direction: column;
           position: relative;
-          color: #BD8757;
+          color: #999999;
         }
         .cur_bar {
-          color: #fff;
+          color: #BD8757;
           font-size: 36px;
           font-weight: bold;
         }
@@ -46,7 +46,8 @@
   .tab_bar {
     height: 112px;
     width: 100%;
-    background-color: #61A9C0;
+    justify-content: center;
+    border-bottom:1px solid #F2F2F2;
   }
   .search-bar {
     padding: 24px;

src/assets/less/home.less

@@ -1,13 +1,14 @@
 .home-wrap {
-  background-color: #f5f5f5;
+  background-color: #F2F2F2;
   flex-direction: column;
+  // padding: 0px 10px;
   .home_title {
     height: 112px;
-    background-color: #fff;
+    background-color: #BD8757;
     text {
       padding: 0 30px;
       font-size: 36px;
-      color:  #61A9C0;
+      color:  white;
     }
   }
   .feebar-text{
@@ -15,10 +16,11 @@
     margin-left: 40px;
   }
   .type-wrap_content {
-    background-color:  #61A9C0;
+    // background-color:  #61A9C0;
+    padding: 0px 30px;
     .type-wrap {
-      background-color:  #61A9C0;;
-      margin: 20px 0;
+      // background-color:  #61A9C0;;
+      margin: 20px 0px 0px 0px;
       flex-direction: row;
       .type-item {
         padding: 0 15px;
@@ -28,11 +30,11 @@
         position: relative;
         text {
           font-size: 30px;
-          color: #fff;
+          color: #999999;
         }
 
         .cur {
-          color: #fff;
+          color: #BD8757;
           font-size: 36px;
           font-weight: bold;
         }
@@ -40,7 +42,7 @@
         .choose-bar {
           width: 38px;
           height: 4px;
-          background-color: #fff;
+          background-color: #BD8757;
           border-radius: 2px;
           margin-top: 10px;
         }
@@ -67,7 +69,6 @@
       image {
         margin: 0 auto;
         height: 106px;
-        width: ;
       }
     }
   }
@@ -77,7 +78,8 @@
     padding: 20px;
     .search-bar__wrap {
       flex: 1;
-      background-color: #f7f7f7;
+      // background-color: #f7f7f7;
+      background-color: #ffffff;
       height: 62px;
       padding: 0 14px;
       border-radius: 30px;
@@ -98,11 +100,13 @@
   }
   .search-bar {
     padding: 24px;
-
+    margin-left: 100px;
     .search-bar__wrap {
       flex: 1;
-      background-color: #f7f7f7;
-      height: 62px;
+      background-color: #FFFFFF;
+      // height: 62px;
+      width: 350px;
+      height: 75px;
       padding: 0 14px;
       border-radius: 30px;
       align-items: center;
@@ -123,15 +127,16 @@
 
   .swipe-bar {
     height: 290px;
-    background: linear-gradient(to bottom, #61A9C0 50%, #fff 50%);
+    // background: linear-gradient(to bottom, #61A9C0 50%, #fff 50%);
+    
     .swipe-item {
-      padding: 30px 24px 0px;
-      border-radius: 20px;
+      // padding: 30px 24px 0px;
+      padding: 0px 30px;
       .swipe-item__info {
         flex: 1;
         flex-direction: column;
-        padding-right: 32px;
-        border-radius: 20px;
+        // padding-right: 32px;
+        // border-radius: 20px;
         .name {
           font-size: 32px;
           color: #333;
@@ -153,26 +158,26 @@
       }
 
       .cover {
-        border-radius: 20px;
+        border-radius: 30px;
         width: 100%;
         height: 260px;
         // flex-basis: 180px;
         // flex-shrink: 0;
         // height: 240px;
-        border-radius: 6px;
+        // border-radius: 6px;
       }
     }
   }
 
   .book-list__wrap {
-    padding: 0 24px;
+    // padding: 0 24px;
+    padding: 0px 30px;
     flex-direction: column;
     .book-list_content {
       border-radius: 20px;
       padding: 0 24px;
       flex-direction: column;
       background-color: white;
-      margin-top: 30px;
       .book-list__title {
         background-color: #fff;
         padding: 40px 0 30px 0;

src/assets/less/shelf.less

@@ -1,34 +1,71 @@
 .shelfs {
-  background-color: #f7f7f7;
+  background-color: #FFFFFF;
   flex-direction: column;
-  height: 100%;
+  // height: 100%;
   .shelf_title {
-    height: 143px;
-    background-color: #61A9C0;
+    height: 112px;
+    background-color: #BD8757;
+    margin-bottom: 30px;
     text {
       padding: 0 30px;
       font-size: 36px;
-      font-weight: bold;
-      color: #fff;
-      padding-bottom: 50px;
+      color:  white;
+    }
+  }
+  .book_detail{
+    width: 700px;
+    height: 350px;
+    margin: 0 auto;
+    border-radius: 30px;
+    background-color: #F2F2F2;
+    align-items: center;
+    justify-content: space-around;
+
+    .shelf-first__content {
+      image{
+        height: 190px;
+      }
+      .book-info__multi {
+        width:470px;
+        height: 190px;
+        flex-direction: column;
+        margin-left: 30px;
+        .name {
+          height: 32px;
+          font-size: 32px;
+          color: #333;
+          lines: 1;
+          text-overflow: ellipsis;
+        }
+  
+        .intro {
+          height: 100px;
+          font-size: 24px;
+          color: #666;
+          line-height: 33px;
+          lines: 2;
+          text-overflow: ellipsis;
+          margin-top: 15px;
+        }
+      }
     }
-   
   }
   .shelf {
-    margin-top: -20px;
+    // margin-top: -20px;
+    margin-top: 30px;
     flex-direction: column;
     background-color: #f7f7f7;
-    border-radius: 20px ;
+    // border-radius: 20px ;
     height: 100%;
-    
     .shelf-wrap-top {
       height: 200px;
       background: -webkit-linear-gradient(#ed591e, #f5f5f5);
     }
     .shelf-wrap {
-      border-radius: 20px 20px 0px 0px;
+      // border-radius: 20px 20px 0px 0px;
       background-color: #fff;
       margin: 0 auto;
+      padding: 0px 22px;
       flex-direction: column;
       .type-bar {
         background-color: #fff;
@@ -155,13 +192,13 @@
       }
 
       .shelf-books__wrap {
-        padding: 0 15px;
+        // padding: 0 15px;
         justify-content: flex-start;
         flex-direction: row;
         flex-wrap: wrap;
 
         .book-item__wrap {
-          margin: 0 5px;
+          margin: 0 25px 0 0;
 
           .book-del__wrap {
             background-color: rgba(0, 0, 0, 0.4);

src/views/Category/index.ux

@@ -20,6 +20,9 @@
               ></text>
             </div>
           </block>
+          <div class="filter-item_warp" @click="toPage('Free')">
+            <text>限时免费</text>
+          </div>
         </div>
       </div>
     </div>
@@ -101,7 +104,7 @@
 import { getCategory, getBooksList } from '../../api'
 import { pageLoad } from '../../helper'
 import storage from '@system.storage'
-
+import router from '@system.router'
 export default {
   data() {
     return {
@@ -139,6 +142,7 @@ export default {
   },
   async getCategory() {
     this.category = this.initCategory(await getCategory())
+    console.log("this.category:", this.category);
     await this.initChannel(this.category)
     this.getBooksArray()
   },
@@ -151,13 +155,14 @@ export default {
         id: c.id,
         key: i
       }
-    })
+    });
+    console.log("this.channel:", this.channel);
   },
   initCategory(category) {
     category.forEach(cate => {
       cate.children.unshift({
         id: cate.id,
-        name: '不限'
+        name: '全部'
       })
     })
     return category
@@ -182,7 +187,6 @@ export default {
       this.meta = {}
     }
     let params = this.filter
-    console.log(params)
     pageLoad(this.meta, getBooksList, params)
       .then(ret => {
         let newList = isLoad ? this.list : []
@@ -194,8 +198,15 @@ export default {
           (this.loadingText = '没有更多数据'), (this.empty = true)
       })
       .catch(e => {
-        console.log('e', e)
+
       })
+  }, toPage(page) {
+    router.push({
+      uri: '/views/' + page,
+      params: {
+        sex: this.filter.channel_id
+      }
+    })
   },
 
   onInit() {

src/views/Home/index.ux

@@ -2,6 +2,7 @@
 
 <template>
   <div class="home-wrap">
+    <div class="home_title"><text>精选</text></div>
     <div class="type-wrap_content">
       <div class="type-wrap">
         <block for="type in typeList">
@@ -12,7 +13,15 @@
             <text class="choose-bar" show="{{type.index === current}}"></text>
           </div>
         </block>
-        <text class="feebar-text"  @click="toPage('Free')">限时免费</text>
+        <!-- <text class="feebar-text"  @click="toPage('Free')">限时免费</text> -->
+      </div>
+      <div class="search-bar">
+        <div class="search-bar__wrap">
+          <text @click="toCategory">请输入书名或者作者名</text
+          ><image
+            src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/search.png"
+          ></image>
+        </div>
       </div>
     </div>
 
@@ -39,7 +48,7 @@
           </block>
         </swiper>
       </list-item>
-      <list-item type="entrance">
+      <!-- <list-item type="entrance">
         <div class="entrance_block">
           <div>
             <image
@@ -61,7 +70,7 @@
             ></image>
           </div>
         </div>
-      </list-item>
+      </list-item> -->
       <block for="bookObj in list">
         <list-item type="simple" class="book-list__wrap" if="$idx % 3 === 0">
           <div class="book-list_content">
@@ -209,6 +218,10 @@ export default {
         sex: this.current
       }
     })
+  },toCategory() {
+    router.push({
+      uri: '/views/Search',
+    })
   },
   async getCityListByTabChange(index = 1) {
    await storage.set({ key: 'sex', value: index || 0 })

src/views/Index/index.ux

@@ -119,7 +119,7 @@ export default {
         index: 0
       },
       {
-        name: '精选',
+        name: '书城',
         title: '天天好书',
         icon: '../../assets/imgs/home.png',
         active_icon: '../../assets/imgs/home_choose.png',
@@ -185,7 +185,7 @@ export default {
     this.back_alert = sign_out_app_show
     this.getCoustom()
     this.getUser()
-    this.current = 2;
+    this.current = 1;
   },
   goActicity() {
     router.push({

src/views/Shelf/index.ux

@@ -3,8 +3,18 @@
 <template>
   <div class="shelfs">
     <div class="shelf_title"><text>书架</text></div>
+    <div class="book_detail">
+      <div class="shelf-first__content">
+        <image src="{{firstBook.cover_url}}"></image>
+        <div class="book-info__multi">
+          <text class="name">{{ firstBook.book_name }}</text>
+          <text class="intro">{{ firstBook.intro }}</text>
+          <text> {{firstBook.author+"·"+(firstBook.status ==0 ? "连载·":"完结·")+(firstBook.size < 10000 ? firstBook.size : (firstBook.size/10000).toFixed(2)+"万")}} </text>
+        </div>
+      </div>        
+    </div>
     <stack class="shelf">
-      <div class="shelf-wrap">
+      <div class="shelf-wrap">>
         <!-- <div class="type-bar">
           <div class="search-bar__wrap">
             <text @click="toSearch">请输入书名或者作者名</text
@@ -13,7 +23,6 @@
             ></image>
           </div>
         </div> -->
-
         <div
           class="shelf-total {{current === 1 ? 'shelf-total__inRecent' : ''}}"
           if="{{mockList.length>0}}"
@@ -142,12 +151,13 @@ export default {
           name: '最近阅读',
           index: 1
         }
-      ]
+      ],
+      firstBook:{}
     }
   },
   onInit() {
     console.log('tabindex:', this.tabindex)
-    // this.getUserShelfBooks()
+    this.getUserShelfBooks();
     this.$watch('isDelMode', 'listenMode')
     this.$watch('tabindex', 'watchPropsChange')
     this.$on('refreshData', this.broadevt)
@@ -174,9 +184,16 @@ export default {
         delete m.cid
       })
       this.booksize = r.length
+      // 获取书架的第一本书
+      r.forEach((element,index) => {
+        index === 0 ? this.firstBook = element : this.firstBook;
+        return;
+      });
+      console.log("this.firstBook:",this.firstBook);
       this.mockList = r
       this.isinit = true
-      console.log(this.mockList)
+      console.log(this.mockList);
+      // console.log("firstBook:",this.firstBook);
     })
   },
   deleteBook(book) {