xcx

src/components/libraryListItem/index.vue

 <template>
-  <div class="libraryListItem flex-h">
+  <div class="libraryListItem flex-h" @click="itemClick(data)">
     <div class="img">
       <a>
         <img :src="data.BookImg" class="centerLabel cover" alt>
       </a>
+      <span v-if="type === 1" class="active">状态值</span>
     </div>
     <div class="flex-item">
       <div>
         <span>{{data.BookName}}</span>
-        <h5>{{data.BookDescription}}</h5>
-        <div class="flex-h" style="margin-top: .06rem;">
+        <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" @click="appointmentBook(data.BookId)">{{data.Status}}</span>
         </div>
-        <div class="flex-h">
+        <div v-if="!type" class="flex-h">
           <span class="flex-item">{{data.Publisher}}</span>
           <span>
             剩余可借
             <em>{{data.LeftNum}}</em>本
           </span>
         </div>
+        <div v-if="type === 1" class="flex-h" style="margin-top: .06rem;">
+          <span class="flex-item">应还时间：{{data.ReturnDate}}</span>
+        </div>
+        <div v-if="type === 1" class="flex-h">
+          <span class="flex-item">{{data.CaseName}}</span>
+          <span>已归还</span>
+          <span>已逾期
+            <em>4</em>天
+          </span>
+        </div>
+        <div v-if="type === 2" class="flex-h" style="margin-top: .06rem;">
+          <span class="flex-item">预约时间：{{data.appointmentDate}}</span>
+        </div>
+        <div v-if="type === 2" class="flex-h" style="margin-top: 0;">
+          <span class="flex-item">预约资格将保留至：2018-12-08</span>
+        </div>
+        <div v-if="type === 2" class="flex-h" style="margin-top: 0;">
+          <span class="flex-item">{{data.CaseName}}</span>
+        </div>
       </div>
     </div>
   </div>
 
 export default {
   name: '',
-  props: ['data'],
+  props: ['data', 'type'],
   data () {
     return {
     }
   methods: {
     appointmentBook (id) {
       this.$emit('appointmentBook', id)
+    },
+    itemClick (target) {
+      this.$emit('itemClick', target)
     }
   }
 }
 .libraryListItem {
   width: 100%;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
   align-items: center;
   .img {
     width: 0.78rem;
     position: relative;
-    overflow: hidden;
+    overflow: visible;
     a {
       width: 100%;
       display: block;
       padding-bottom: 143.5%;
       background: #eee;
       border-radius: 0.03rem;
+      z-index: 1;
+    }
+    > span {
+      display: inline-block;
+      position: absolute;
+      left: -0.1rem;
+      bottom: 0.2rem;
+      z-index: 2;
+      font-size: 0.12rem;
+      color: #fff;
+      background: #333;
+      line-height: 0.25rem;
+      border-radius: 0.25rem;
+      padding: 0 0.15rem;
+      &.active{
+        background: #fc5534;
+      }
     }
   }
   > div.flex-item {
         max-height: 0.43rem;
       }
       > h5 {
-        font-size: .12rem;
+        font-size: 0.11rem;
         color: #ccc;
-        line-height: .16rem;
+        line-height: 0.16rem;
         font-weight: normal;
         overflow: hidden;
         text-overflow: ellipsis;

src/components/slideTabH/index.vue

     }
     .activeLine {
       height: 0.02rem;
-      background: #f9064b;
+      background: #fc6243;
       position: absolute;
       left: 0;
       bottom: -.02rem;
       z-index: 1000;
-      box-shadow: 0 0 .1rem .01rem rgba(249, 6, 75, 0.9);
+      box-shadow: 0 0 .1rem .01rem rgba(252, 98, 67, 0.9);
     }
   }
   > .flex-item {

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

         <div>
           <ul>
             <li v-for="(item, index) in borrowedRecordList" :key="index">
-              <libraryListItem :data="item"></libraryListItem>
+              <libraryListItem :data="item" :type="1" @itemClick="borrowedRecordClick"></libraryListItem>
             </li>
           </ul>
         </div>
       </div>
       <div class="subMain" slot="slideTabH-2">
         <div>
+          <span>请在资格保留时间内至案场借阅图书，超出预约时间将取消预约资格</span>
           <ul>
             <li v-for="(item, index) in appointmentList" :key="index">
-              <libraryListItem :data="item"></libraryListItem>
+              <libraryListItem :data="item" :type="2"></libraryListItem>
             </li>
           </ul>
         </div>
       </div>
     </slideTabH>
+    <van-dialog v-model="showDialog" :show-confirm-button="false">
+      <div class="borrowedRecordContent" @click="showDialog = false">
+        1
+      </div>
+    </van-dialog>
   </div>
 </template>
 
   data () {
     return {
       tabList: [{ value: '借阅记录', id: '1' }, { value: '线上预约记录', id: '2' }],
-      showAppointmentDialog: false
+      showDialog: false
     }
   },
   created () {
     slideChange (e) {
       if (e === 1 && !this.appointmentList.length) {
       }
-    }
+    },
+    borrowedRecordClick (e) { // 借阅记录点击事件
+      this.showDialog = true
+    },
   }
 }
 </script>
       width: 100%;
       position: relative;
       overflow: hidden;
+      > span {
+        width: 100%;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 0.1rem;
+        background: #fdecec;
+        color: #fc6243;
+        line-height: 0.24rem;
+        text-indent: 0.15rem;
+        padding-top: 0.02rem;
+      }
       > ul {
         padding: 0 0.16rem;
         margin-bottom: 0.1rem;

src/store/library/index.js

 
 var booksData = [],
   recordData = [],
+  appointmentListData = [],
   aTarget = {
     BookImg: '',
     BookName: '书名',
     BookName: '书名',
     id: '',
     Status: '状态',
-    Author: '作者',
-    Publisher: '出版社',
-    LeftNum: '10',
-    BookDescription: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述'
+    ReturnDate: '2018-08-02',
+    CaseName: '案场名称'
+  },
+  cTarget = {
+    BookImg: '',
+    BookName: '书名',
+    id: '',
+    appointmentDate: '2018-08-02 12:00:00',
+    CaseName: '案场名称'
   }
 for (var n = 0; n < 10; n++) {
   booksData.push(aTarget)
   recordData.push(bTarget)
+  appointmentListData.push(cTarget)
 }
 
 export default {
     bookTypeList: booksData, // 分类书籍列表
     searchBooksList: booksData, // 搜索书籍列表
     borrowedRecordList: recordData, // 借阅记录列表
-    appointmentList: recordData // 线上预约列表
+    appointmentList: appointmentListData // 线上预约列表
   },
   mutations: {
     setIndexSearchKey (state, data) { // 赋值图书首页搜索关键词