xcx

src/components/slideTabH/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="components flex-v">
+    <div class="tabNav flex-h" :style="{backgroundColor: backgroundColor || '#fff'}">
+      <a
+        class="flex-item"
+        v-for="(item, index) in data"
+        :key="index"
+        @click="cutNav(index)"
+        :style="{fontSize: fontSize + 'px', color: index === activeIndex ? (activeColor || 'red') : (normalColor || '#333')}"
+      >{{item.value}}</a>
+      <div class="activeLine" id="activeLine"></div>
+    </div>
+    <div class="flex-item">
+      <div>
+        <swiper :options="swiperOption" ref="mySwiper">
+          <swiper-slide class="swiper-slide" v-for="(item, index) in data" :key="index">
+            <slot :name="'slideTabH-' + item.id"></slot>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+export default {
+  name: 'slideTabH',
+  props: ['data', 'fontSize', 'activeColor', 'normalColor', 'backgroundColor', 'initIndex'],
+  data () {
+    var _self = this
+    return {
+      leftArr: [],
+      widthArr: [],
+      activeWidth: 0,
+      activeIndex: 0,
+      stepNum: 120,
+      swiperOption: {
+        watchSlidesProgress: true,
+        initialSlide: _self.activeIndex,
+        on: {
+          init () {
+            document.getElementById('activeLine').style.width = _self.widthArr[_self.activeIndex * _self.stepNum] + 'px'
+            document.getElementById('activeLine').style.left = _self.leftArr[_self.activeIndex * _self.stepNum] + 'px'
+          },
+          setTranslate (translate) { // 滑动偏移量监听
+            var num = (-translate / document.body.clientWidth * _self.stepNum).toFixed(0)
+            if (num >= 0 && num <= (_self.data.length - 1) * _self.stepNum) {
+              document.getElementById('activeLine').style.width = _self.widthArr[num] + 'px'
+              document.getElementById('activeLine').style.left = _self.leftArr[num] + 'px'
+            }
+          },
+          touchStart () {
+            document.getElementById('activeLine').style.transition = ''
+            document.getElementById('activeLine').style.WebkitTransition = ''
+          },
+          touchEnd () {
+            document.getElementById('activeLine').style.transition = '300ms'
+            document.getElementById('activeLine').style.WebkitTransition = '300ms'
+            if (this.realIndex !== _self.activeIndex) {
+              document.getElementById('activeLine').style.width = (_self.widthArr[this.realIndex * _self.stepNum]) + 'px'
+              document.getElementById('activeLine').style.left = (_self.leftArr[this.realIndex * _self.stepNum]) + 'px'
+            }
+          },
+          setTransition (speed) {
+            if (this.realIndex !== _self.activeIndex) {
+              document.getElementById('activeLine').style.width = (_self.widthArr[this.realIndex * _self.stepNum]) + 'px'
+              document.getElementById('activeLine').style.left = (_self.leftArr[this.realIndex * _self.stepNum]) + 'px'
+            }
+          },
+          transitionEnd () {
+            _self.activeIndex = this.activeIndex
+            _self.$emit('slideChange', this.activeIndex)
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    MySwiper () {
+      return this.$refs.mySwiper.swiper
+    }
+  },
+  components: {
+    swiper,
+    swiperSlide
+  },
+  created () {
+    this.activeIndex = this.initIndex || 0
+    var aLeft = (document.body.clientWidth / this.data.length).toFixed(0)
+    this.data.map((item, index) => {
+      this.widthArr.push(item.value.length * (this.fontSize || 15))
+      this.leftArr.push((aLeft * index - 0) + ((aLeft / 2).toFixed(0) - 0) - this.widthArr[index] / 2)
+    })
+    this.activeWidth = this.widthArr[this.activeIndex]
+    this.widthArr = this.calcArr(this.widthArr, this.stepNum)
+    this.leftArr = this.calcArr(this.leftArr, this.stepNum)
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    cutNav (index) { // 切换nav
+      document.getElementById('activeLine').style.transition = '300ms'
+      document.getElementById('activeLine').style.WebkitTransition = '300ms'
+      this.MySwiper.slideTo(index, 0, false)
+    },
+    calcArr (arr, num) { // 构造间隔数组：arr-原数组；num-间隔数
+      arr = arr || []
+      num = num || 20
+      var aArr = []
+      arr.map((item, index) => {
+        if (index < arr.length - 1) {
+          aArr.push([])
+          for (var n = 0; n < num; n++) {
+            aArr[index].push(item + (arr[index + 1] - item) * (n + 1) / num)
+          }
+        }
+      })
+      return [arr[0]].concat(...aArr)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.components {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .tabNav {
+    background: #fff;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 0 0.1rem 0.02rem rgba(0, 0, 0, 0.05);
+    z-index: 100;
+    > a {
+      line-height: 0.45rem;
+      text-align: center;
+      color: #333;
+      position: relative;
+      z-index: 1;
+    }
+    .activeLine {
+      height: 0.02rem;
+      background: #f9064b;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 2;
+    }
+  }
+  > .flex-item {
+    position: relative;
+    > div {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      top: 0;
+      overflow: hidden;
+      > div {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .swiper-slide {
+    background: #f8f8f8;
+    position: relative;
+    z-index: 1;
+  }
+}
+</style>

src/pages/bodyCheck/app.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import Vant from 'vant'
-import 'vant/lib/index.css'
+import 'vant/lib/vant-css/index.css'
 import router from './router'
 import store from '../../store/index'
 import Vuex from 'vuex'

src/pages/sales/app.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import Vant from 'vant'
-import 'vant/lib/index.css'
+import 'vant/lib/vant-css/index.css'
 import router from './router'
 import store from '../../store/index'
 import Vuex from 'vuex'

src/pages/user/app.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import Vant from 'vant'
-import 'vant/lib/index.css'
+import 'vant/lib/vant-css/index.css'
 import router from './router'
 import store from '../../store/index'
 import Vuex from 'vuex'

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

@@ -1,16 +1,62 @@
 <template>
-  <div class="mainPage">
-    1
+  <div class="mainPage flex-v">
+    <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" v-model="searchKey" placeholder="请输入图书名">
+          </div>
+        </div>
+      </div>
+      <a @click="search">搜索</a>
+    </div>
+    <div class="searchRemark" v-if="showSearchRemark">
+      <span>
+        关于“
+        <em>{{indexSearchKey}}</em>”的搜索结果：
+      </span>
+    </div>
+    <div class="flex-item">
+      <div>
+        <div class="noData" v-if="noData">
+          <img src="../../../../common/icon/kong.png" alt>
+          <span>暂无内容</span>
+        </div>
+        <ul>
+          <li v-for="(item, index) in searchBooksList" :key="index">
+            <libraryListItem :data="item" @appointmentBook="appointmentBook"></libraryListItem>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <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>
 </template>
 
 <script>
+import libraryListItem from '../../../../components/libraryListItem/index'
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapActions: mapAppActions } = createNamespacedHelpers('app')
 const { mapState: mapLibraryState, mapActions: mapLibraryAction, mapMutations: mapLibraryMutations } = createNamespacedHelpers('library')
 export default {
   data () {
     return {
+      searchKey: '',
+      showSearchRemark: false,
+      noData: false,
+      showAppointmentDialog: false
     }
   },
   created () {
@@ -20,9 +66,17 @@ export default {
       CaseList: x => x.app.CaseList,
     }),
     ...mapLibraryState({
+      indexSearchKey: x => x.indexSearchKey,
+      searchBooksList: x => x.searchBooksList
+    })
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.searchKey = this.indexSearchKey || ''
     })
   },
   components: {
+    libraryListItem
   },
   methods: {
     ...mapAppActions([
@@ -30,29 +84,122 @@ export default {
     ]),
     ...mapLibraryAction(['']),
     ...mapLibraryMutations(['setIndexSearchKey']),
+    search () { // 搜索
+      if (this.searchKey !== '') {
+        this.setIndexSearchKey(this.searchKey)
+        this.showSearchRemark = true
+      } else {
+        this.$toast('搜索关键词不能为空')
+      }
+    },
+    appointmentBook () { // 预约图书
+      this.showAppointmentDialog = true
+    },
+    sureAppointmentBook () { // 确定预约图书
+      this.showAppointmentDialog = false
+    },
   }
 }
 </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;
+  .header {
+    padding: 0.1rem 0.2rem;
+    > div {
+      background: #f2f2f2;
       position: relative;
       overflow: hidden;
-      li{
-        margin: .1rem auto 0;
+      i {
+        font-size: 0.15rem;
+        color: #ccc;
+        margin-left: 0.08rem;
+        line-height: 0.3rem;
+      }
+      > div {
+        margin-left: 0.1rem;
+        > div {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          input {
+            width: 100%;
+            display: block;
+            line-height: 0.2rem;
+            padding: 0.05rem 0;
+            background: none;
+            font-size: 0.13rem;
+          }
+        }
+      }
+    }
+    > a {
+      line-height: 0.3rem;
+      margin-left: 0.1rem;
+      font-size: 0.14rem;
+    }
+  }
+  .searchRemark {
+    padding: 0 0.2rem;
+    span {
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      display: block;
+      line-height: 0.22rem;
+      font-size: 0.14rem;
+      color: #616161;
+      em {
+        line-height: 0.22rem;
+        font-size: 0.14rem;
+        color: #fc5634;
+      }
+    }
+  }
+  > .flex-item {
+    position: relative;
+    overflow: hidden;
+    > 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);
+      .noData {
+        width: 100%;
+        margin: 0.5rem auto 0;
+        position: relative;
+        overflow: hidden;
+        img {
+          width: 0.7rem;
+          display: block;
+          margin: 0 auto;
+        }
+        span {
+          width: 100%;
+          display: block;
+          text-align: center;
+          line-height: 0.3rem;
+          color: #b4b4b4;
+          font-size: 0.14rem;
+          margin: 0.05rem auto 0;
+        }
+      }
+      > ul {
+        padding: 0 0.2rem;
+        margin: 0 auto 0.1rem;
+        position: relative;
+        overflow: hidden;
+        > li {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          margin: .1rem auto 0;
+        }
       }
     }
   }

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

@@ -0,0 +1,87 @@
+<template>
+  <div class="mainPage">
+    <slideTabH
+      :data="tabList"
+      fontSize="16"
+      activeColor="red"
+      normalColor="#666"
+      @slideChange="slideChange"
+    >
+      <div slot="slideTabH-1">1</div>
+      <div slot="slideTabH-2">2</div>
+    </slideTabH>
+  </div>
+</template>
+
+<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')
+export default {
+  data () {
+    return {
+      tabList: [{ value: '借阅记录', id: '1' }, { value: '线上预约记录', id: '2' }],
+      showAppointmentDialog: false
+    }
+  },
+  created () {
+  },
+  computed: {
+    ...mapState({
+      CaseList: x => x.app.CaseList,
+    }),
+    ...mapLibraryState({
+      navList: x => x.navList,
+      bookTypeList: x => x.bookTypeList
+    })
+  },
+  components: {
+    libraryListItem,
+    slideTabH
+  },
+  methods: {
+    ...mapAppActions([
+      'getCaseList',
+    ]),
+    ...mapLibraryAction(['getBookListByType']),
+    navClick (item) {
+    },
+    appointmentBook () { // 预约图书
+      this.showAppointmentDialog = true
+    },
+    sureAppointmentBook () { // 确定预约图书
+      this.showAppointmentDialog = false
+    },
+    slideChange (e) {
+      console.log(e)
+    }
+  }
+}
+</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 0.16rem;
+      margin-bottom: 0.1rem;
+      position: relative;
+      overflow: hidden;
+      li {
+        margin: 0.1rem auto 0;
+      }
+    }
+  }
+}
+</style>

src/pages/user/router.js

@@ -17,6 +17,7 @@ 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 borrowedRecord from './library/borrowedRecord/index' // 借阅记录
 import bindMobile from './bindMobile/bindMobile' // 绑定手机号
 import lessonOrder from './lessonOrder/index' // 我的订单
 import vip from './vip/index' // vip卡说明
@@ -83,6 +84,11 @@ const router = new Router({
     name: 'booksList',
     component: booksList,
     children: []
+  }, { // 借阅记录
+    path: '/borrowedRecord',
+    name: 'borrowedRecord',
+    component: borrowedRecord,
+    children: []
   }, { // 城咖啡-点单
     path: '/placeOrder',
     name: 'placeOrder',

src/store/library/index.js

@@ -151,6 +151,79 @@ export default {
       author: '作者',
       publishingHouses: '出版社',
       stock: '10'
+    }],
+    searchBooksList: [{ // 搜索书籍列表
+      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'
+    }, {
+      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'
     }]
   },
   mutations: {