xcx

src/pages/user/library/booksList/index.vue

 <template>
   <div class="mainPage">
     <div>
-      1
+      <ul>
+        <li v-for="(item, index) in bookTypeList" :key="index">
+          <libraryListItem :data="item" @appointmentBook="appointmentBook"></libraryListItem>
+        </li>
+      </ul>
+      <van-dialog v-model="showAppointmentDialog" :show-confirm-button="false">
+        <div class="dialogContent">
+          <span class="title">确认在线预约当前图书?</span>
+          <div>
+            <span style="color: #666;">在线预约需在2018年12月20日前前往案场借阅图书, 否则 将取消预约资格</span>
+          </div>
+          <div class="btn">
+            <a @click="sureAppointmentBook">确定</a>
+            <a @click="showAppointmentDialog = false">取消</a>
+          </div>
+        </div>
+      </van-dialog>
     </div>
   </div>
 </template>
 
 <script>
+import libraryListItem from '../../../../components/libraryListItem/index'
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapActions: mapAppActions } = createNamespacedHelpers('app')
 const { mapState: mapLibraryState, mapActions: mapLibraryAction } = createNamespacedHelpers('library')
 export default {
   data () {
     return {
+      showAppointmentDialog: false
     }
   },
   created () {
       CaseList: x => x.app.CaseList,
     }),
     ...mapLibraryState({
-      navList: x => x.navList
+      navList: x => x.navList,
+      bookTypeList: x => x.bookTypeList
     })
   },
   components: {
+    libraryListItem,
   },
   methods: {
     ...mapAppActions([
       'getCaseList',
     ]),
-    ...mapLibraryAction(['getNavList']),
+    ...mapLibraryAction(['getBookListByType']),
     navClick (item) {
+    },
+    appointmentBook () { // 预约图书
+      this.showAppointmentDialog = true
+    },
+    sureAppointmentBook () { // 确定预约图书
+      this.showAppointmentDialog = false
     }
   }
 }
     -webkit-overflow-scrolling: touch;
     transform: translateZ(0);
     -webkit-transform: translateZ(0);
-    .nav {
-      width: 100%;
+    >ul{
+      padding: 0 .16rem;
+      margin-bottom: .1rem;
       position: relative;
       overflow: hidden;
-      font-size: 0;
-      > a {
-        display: inline-block;
-        width: 25%;
-        text-align: center;
-        margin-top: 0.15rem;
-        img {
-          height: 0.48rem;
-        }
-        span {
-          width: 100%;
-          display: inline-block;
-          text-align: center;
-          font-size: 0.12rem;
-          line-height: 0.22rem;
-          margin: 0.08rem auto 0;
-        }
+      li{
+        margin: .1rem auto 0;
       }
     }
   }

src/pages/user/library/booksSearch/index.vue

+<template>
+  <div class="mainPage">
+    1
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapAppActions } = createNamespacedHelpers('app')
+const { mapState: mapLibraryState, mapActions: mapLibraryAction, mapMutations: mapLibraryMutations } = createNamespacedHelpers('library')
+export default {
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  computed: {
+    ...mapState({
+      CaseList: x => x.app.CaseList,
+    }),
+    ...mapLibraryState({
+    })
+  },
+  components: {
+  },
+  methods: {
+    ...mapAppActions([
+      'getCaseList',
+    ]),
+    ...mapLibraryAction(['']),
+    ...mapLibraryMutations(['setIndexSearchKey']),
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mainPage {
+  > div {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    >ul{
+      padding: 0 .16rem;
+      margin-bottom: .1rem;
+      position: relative;
+      overflow: hidden;
+      li{
+        margin: .1rem auto 0;
+      }
+    }
+  }
+}
+</style>

src/pages/user/mainPage/libraryIndex/index.vue

       <div class="header flex-h">
         <div class="flex-item flex-h">
           <i class="iconfont icon-sousuo"></i>
-          <div class="flex-item">
-            <div>
-              <input type="text">
-            </div>
-          </div>
+          <router-link class="flex-item" :to="{name: 'booksSearch'}">{{indexSearchKey}}</router-link>
         </div>
         <a @click="showDialog = true">
           <i class="iconfont icon-dingwei"></i>
     }),
     ...mapLibraryState({
       navList: x => x.navList,
-      bookList: x => x.bookList
+      bookList: x => x.bookList,
+      indexSearchKey: x => x.indexSearchKey
     }),
   },
   components: {

src/pages/user/mainPage/libraryIndex/page.scss

       >div{
         margin: 0 .1rem 0 .2rem;
         background: #f2f2f2;
-        align-items: center;
         i{
           font-size: .15rem;
           color: #ccc;
           margin-left: .08rem;
+          line-height: .3rem;
         }
-        >div{
+        >a{
           margin-left: .05rem;
-          >*{
-            display: inline-block;
-            vertical-align: middle;
-            line-height: .2rem;
-          }
-          >div{
-            width: 100%;
-            position: relative;
-            overflow: hidden;
-            input{
-              width: 100%;
-              font-size: .13rem;
-              color: #ccc;
-              background: none;
-              padding: .05rem 0;
-            }
-          }
         }
       }
       >a{

src/pages/user/router.js

 import libraryIndex from './mainPage/libraryIndex/index' // 图书馆首页
 import userCenter from './mainPage/userCenter/index' // 个人中心
 import libraryNavList from './library/navList/index' // 图书馆nav
+import booksSearch from './library/booksSearch/index' // 搜索图书
 import booksList from './library/booksList/index' // 图书列表
 import bindMobile from './bindMobile/bindMobile' // 绑定手机号
 import lessonOrder from './lessonOrder/index' // 我的订单
     name: 'libraryNavList',
     component: libraryNavList,
     children: []
+  }, { // 图书搜索
+    path: '/booksSearch',
+    name: 'booksSearch',
+    component: booksSearch,
+    children: []
   }, { // 图书列表
     path: '/booksList',
     name: 'booksList',

src/store/library/index.js

 export default {
   namespaced: true,
   state: {
-    navList: [{
+    indexSearchKey: '', // 图书首页搜索关键词
+    navList: [{ // 图书馆首页nav
       icon: '',
       name: '名著',
       id: ''
       name: '更多',
       id: 'more'
     }],
-    bookList: [{
+    bookList: [{ // 图书馆首页推荐书籍
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }],
+    bookTypeList: [{ // 分类书籍列表
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
       img: '',
       name: '书名',
       id: '',
     }]
   },
   mutations: {
+    setIndexSearchKey (state, data) { // 赋值图书首页搜索关键词
+      state.indexSearchKey = data || ''
+    },
     setNavInfo (state, data) { // 赋值nav
       (data || []).map((item) => {
         state.navList.push({
     },
     emptyRecommendBookList (state, data) { // 清空精选推荐书籍列表
       state.bookList = []
-    }
+    },
+    setBookTypeList (state, data) { // 赋值分类书籍列表
+      (data || []).map((item) => {
+        state.bookList.push({
+          img: '',
+          name: '书名',
+          id: '',
+          status: '状态',
+          author: '作者',
+          publishingHouses: '出版社',
+          stock: '10'
+        })
+      })
+    },
   },
   actions: {
+    getBookListByType (context, data) { // 获取分类书籍列表
+      return new Promise((resolve, reject) => {
+        Ajax(api.library.getBookListByType.url, {
+          method: api.library.getBookListByType.method
+        }).then(res => {
+          context.commit('setBookTypeList', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
     getNavList (context, data) { // 获取nav数据
       return new Promise((resolve, reject) => {
         Ajax(api.library.getNavList.url, {

src/util/api.js

     getRecommendBookList: { // 获取精选推荐书籍列表
       method: 'get',
       url: `${baseUrl}${wechat}/`
+    },
+    getBookListByType: { // 获取分类书籍列表
+      method: 'get',
+      url: `${baseUrl}${wechat}/`
     }
   }
 }