ytj

src/components/libraryListItem/index.vue

         <h5 v-if="!type">{{data.BookDescription}}</h5>
         <div v-if="!type" class="flex-h" style="margin-top: .06rem;">
           <span class="flex-item">{{data.Author}} 著</span>
-          <span class="status active" @click="appointmentBook(data.BookId)">{{data.Status}}</span>
+          <span class="status active" @click="appointmentBook(data.BookId)">{{bookStatus}}</span>
         </div>
         <div v-if="!type" class="flex-h">
           <span class="flex-item">{{data.Publisher}}</span>
 
 export default {
   name: '',
-  props: ['data', 'type'],
+  props: ['data', 'type', 'status'],
   data () {
     return {
     }
   },
   computed: {
+    bookStatus() {
+      let status = '在线预约'
+      switch(this.status) {
+        case 'reserve':
+          status = '已预约'
+          break
+        case 'borrowed':
+          status = '借阅中'
+          break
+        case 'late':
+          status = '借阅中'
+          break
+      }
+      return status
+    }
   },
   components: {
   },
   },
   methods: {
     appointmentBook (id) {
+      if(this.status == 'reserve' || this.status == 'borrowed' || this.status == 'late'){
+        return
+      }
       this.$emit('appointmentBook', id)
     },
     itemClick (target) {

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

       normalColor="#666"
       @slideChange="slideChange"
     >
-      <div class="subMain" slot="slideTabH-1">
+      <div class="subMain" slot="slideTabH-borrowed">
         <div>
           <ul>
-            <li v-for="(item, index) in borrowedRecordList" :key="index">
+            <li v-for="(item, index) in books.list" :key="index">
               <libraryListItem :data="item" :type="1" @itemClick="borrowedRecordClick"></libraryListItem>
             </li>
           </ul>
         </div>
       </div>
-      <div class="subMain" slot="slideTabH-2">
+      <div class="subMain" slot="slideTabH-reserve">
         <div>
           <span>请在资格保留时间内至案场借阅图书，超出预约时间将取消预约资格</span>
           <ul>
-            <li v-for="(item, index) in appointmentList" :key="index">
+            <li v-for="(item, index) in books.list" :key="index">
               <libraryListItem :data="item" :type="2"></libraryListItem>
             </li>
           </ul>
 <script>
 import slideTabH from '../../../../components/slideTabH/index'
 import libraryListItem from '../../../../components/libraryListItem/index'
-import { mapState, createNamespacedHelpers } from 'vuex'
-const { mapActions: mapAppActions } = createNamespacedHelpers('app')
-const { mapState: mapLibraryState, mapActions: mapLibraryAction } = createNamespacedHelpers('library')
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapBookState, mapActions: mapBookAction } = createNamespacedHelpers('book')
 export default {
   data () {
     return {
-      tabList: [{ value: '借阅记录', id: '1' }, { value: '线上预约记录', id: '2' }],
-      showDialog: false
+      tabList: [{ value: '借阅记录', id: 'borrowed' }, { value: '线上预约记录', id: 'reserve' }],
+      showDialog: false,
+      status: 'borrowed',
+      page: 1,
+      pagesize: 10,
     }
   },
   created () {
+    this.getList()
   },
   computed: {
-    ...mapState({
-      CaseList: x => x.app.CaseList,
-    }),
-    ...mapLibraryState({
-      navList: x => x.navList,
-      bookTypeList: x => x.bookTypeList,
-      borrowedRecordList: x => x.borrowedRecordList,
-      appointmentList: x => x.appointmentList
+    ...mapBookState({
+      books: x => x.minebooks,
     })
   },
   components: {
     slideTabH
   },
   methods: {
-    ...mapAppActions([
-      'getCaseList',
+    ...mapBookAction([
+      'getMineBook',
     ]),
-    ...mapLibraryAction(['getBookListByType']),
-    navClick (item) {
-    },
     slideChange (e) {
-      if (e === 1 && !this.appointmentList.length) {
+      if (this.status !== this.tabList[e].id) {
+        this.status = this.tabList[e].id
+        this.page = 1
+        this.getList()
       }
     },
     borrowedRecordClick (e) { // 借阅记录点击事件
       this.showDialog = true
     },
+    getList () {
+      this.getMineBook({
+        page: this.page,
+        pagesize: this.pagesize,
+        status: this.status,
+      })
+    }
   }
 }
 </script>

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

 <template>
   <div class="mainPage">
     <div>
-      <loadMore :on-infinite="onInfinite" :dataList="books.list">
+      <loadMore :on-infinite="onInfinite" :dataList="scrollData">
         <div class="header flex-h">
           <div class="flex-item flex-h">
             <i class="iconfont icon-sousuo"></i>
         <div class="dialogContent">
           <span class="title">确认在线预约当前图书?</span>
           <div>
-            <span style="color: #666;">在线预约需在2018年12月20日前前往案场借阅图书, 否则 将取消预约资格</span>
+            <span style="color: #666;">在线预约需在{{reserveEndDate}}前前往案场借阅图书, 否则 将取消预约资格</span>
           </div>
           <div class="btn">
             <a @click="sureAppointmentBook">确定</a>
 import loadMore from '@/components/vue-load-more/index'
 import libraryListItem from '../../../../components/libraryListItem/index'
 import radio from '../../../../components/radio/index'
+import toolClass from '../../../../util/util'
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapActions: mapAppActions } = createNamespacedHelpers('app')
 const { mapState: mapBookState, mapActions: mapBookActions } = createNamespacedHelpers('book')
       cases: [],
       indexSearchKey: '',
       page: 0,
-      pagesize: 2,
+      pagesize: 4,
       scrollData: {
         noFlag: false // 暂无更多数据显示
-      }
+      },
+      reserveBookId: '',
     }
   },
   computed: {
     }),
     ...mapBookState({
       navList: x => x.types.list,
-      books: x => x.recommends
+      books: x => x.recommends,
+      mineBooks: x => x.minebooks,
     }),
+    reserveEndDate() {
+      return toolClass.calDate(7)
+    }
   },
   components: {
     libraryListItem,
       'getBookType',
       'getRecommendBook',
       'getMineBook',
+      'reserveBook',
     ]),
     selectCaseId () { // 选择案场
       if (this.currentCaseId !== this.caseId) {
       }).then((res) => {
         console.log(res)
         if (res.list.length < res.pageSize) {
-          console.log(res.list.length)
-          more.style.display = 'none' // 隐藏加载条
+          console.log(more.style.display)
+          more.style.display='none'// 隐藏加载条
         } else {
-          console.log(res.list.length)
+          console.log(more.style.display)
+          more.style.display='none'// 隐藏加载条
           this.scrollData.noFlag = true
         }
       })
+      this.getMineBook({
+        page: 1,
+        pagesize: 1000,
+      })
     },
-    appointmentBook () { // 预约图书
+    appointmentBook (id) { // 预约图书
+      this.reserveBookId = id
       this.showAppointmentDialog = true
     },
     sureAppointmentBook () { // 确定预约图书
+      this.reserveBook({
+        bookid: this.reserveBookId,
+      }).then(() => {
+        this.getMineBook({
+          page: 1,
+          pagesize: 1000,
+        })
+      })
       this.showAppointmentDialog = false
     },
     navClick (item) { // 点击nav
       this.$router.push({ name: 'booksList', query: { type: item.BookTypeId, caseid: this.currentCaseId } })
     },
     moreNav () {
-      this.$router.push({ name: 'libraryNavList', query: { caseid: this.currentCaseId } })
+      this.$router.push({ name: 'libraryNavList', query: {caseid: this.currentCaseId} })
+    },
+    mineBookStatus (item) {
+      return ((this.mineBooks.list || []).filter(x => x.BookId === item.BookId)[0] || {}).BorrowStatus
     }
   }
 }

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

   name: '',
   data () {
     return {
-      user: {}
+      user: {},
+      headimgurl: '',
     }
   },
   computed: {

src/store/book/index.js

           reject(err)
         })
       })
+    },
+    reserveBook (c, { bookid }) {
+      return new Promise((resolve, reject) => {
+        Ajax({
+          ...api.library.reserve,
+          urlData: {
+            bookid,
+          },
+        }).then(res => {
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      }) 
     }
   }
 }

src/util/api.js

       method: 'get',
       url: `${baseUrl}${wechat}/customer/book`
     },
+    reserve: {
+      method: 'post',
+      url: `${baseUrl}${wechat}/book/reserve/:bookid`
+    },
   }
 }
 export default $api

src/util/util.js

         resolve(result)
       }).catch(reject)
     })
-  }
+  },
+  calDate (aa) {
+    var date1 = new Date(),
+    time1=date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate();//time1表示当前时间
+    var date2 = new Date(date1);
+    date2.setDate(date1.getDate()+aa);       
+    var time2 = date2.getFullYear()+"年"+ (date2.getMonth()+1) +"月"+date2.getDate()+"日";
+    return time2;
+  },
 }
 
 export default toolClass