ytj

src/components/vue-load-more/index.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="yo-scroll" :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
+    <section class="inner">
+      <header class="pull-refresh">
+        <slot name="pull-refresh">
+          <span class="down-tip">下拉更新</span>
+          <span class="up-tip">松开刷新数据</span>
+          <span class="refresh-tip">加载中……</span>
+        </slot>
+      </header>
+      <slot>
+      </slot>
+      <footer class="load-more">
+        <slot name="load-more">
+          <span v-show="downFlag === false">上拉加载更多</span>
+          <span v-show="downFlag === true">加载中……</span>
+        </slot>
+      </footer>
+      <div class="nullData" v-show="dataList.noFlag">暂无更多数据</div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    offset: { // 默认高度
+      type: Number,
+      default: 100
+    },
+    enableInfinite: { // 上拉加载
+      type: Boolean,
+      default: false
+    },
+    enableRefresh: { // 下拉刷新
+      type: Boolean,
+      default: true
+    },
+    dataList: { // 数据列表
+      default: false,
+      required: false
+    },
+    onRefresh: { // 加载方法
+      type: Function,
+      default: undefined,
+      required: false
+    },
+    onInfinite: { // 刷新方法
+      type: Function,
+      default: undefined,
+      require: false
+    }
+  },
+  data () {
+    return {
+      top: 0,
+      state: 0,
+      startX: 0,
+      startY: 0,
+      touching: false,
+      infiniteLoading: false,
+      downFlag: false // 用来显示是否加载中
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    touchStart (e) {
+      this.startY = e.targetTouches[0].pageY
+      this.startX = e.targetTouches[0].pageX
+      this.startScroll = this.$el.scrollTop || 0
+      this.touching = true // 留着有用，不能删除
+
+      this.dataList.noFlag = false
+      this.$el.querySelector('.load-more').style.display = 'block'
+    },
+    touchMove (e) {
+      if (this.dataList.noFlag || !this.touching) {
+        return
+      }
+      let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
+      if (diff > 0) e.preventDefault()
+      this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
+      if (this.state === 2) { // in refreshing
+        return
+      }
+      console.log(123)
+      if (this.top >= this.offset) {
+        this.state = 1
+      } else {
+        this.state = 0
+      }
+
+      let more = this.$el.querySelector('.load-more')
+      if (!this.top && this.state === 0) {
+        more.style.display = 'block'
+      } else {
+        more.style.display = 'none'
+      }
+    },
+    touchEnd (e) {
+      // if (!this.enableRefresh) {
+      //   return
+      // }
+      this.touching = false
+      if (this.state === 2) { // in refreshing
+        this.state = 2
+        this.top = this.offset
+        return
+      }
+      if (this.top >= this.offset) { // do refresh
+        this.refresh()
+      } else { // cancel refresh
+        this.state = 0
+        this.top = 0
+      }
+
+      // 用于判断滑动是否在原地 ----begin
+      let endX = e.changedTouches[0].pageX
+      let endY = e.changedTouches[0].pageY
+      let dy = this.startY - endY
+      let dx = endX - this.startX
+      // 如果滑动距离太短
+      if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
+        // console.log("滑动距离太短")
+        this.downFlag = false
+        return
+      }
+      // --------end--------
+
+      if (!this.enableInfinite || this.infiniteLoading) {
+        return
+      }
+
+      let outerHeight = this.$el.clientHeight
+      let innerHeight = this.$el.querySelector('.inner').clientHeight
+      let scrollTop = this.$el.scrollTop
+      let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
+      let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
+
+      // console.log(bottom + " __ " + this.offset)
+
+      if (bottom <= this.offset && this.state === 0) {
+        this.downFlag = true
+        this.infinite()
+      } else {
+        this.$el.querySelector('.load-more').style.display = 'none'
+        this.downFlag = false
+      }
+    },
+    refresh () {
+      this.state = 2
+      this.top = this.offset
+      setTimeout(() => {
+        this.onRefresh(this.refreshDone)
+      }, 1000)
+    },
+    refreshDone () {
+      this.state = 0
+      this.top = 0
+    },
+
+    infinite () {
+      this.infiniteLoading = true
+
+      setTimeout(() => {
+        this.onInfinite(this.infiniteDone)
+      }, 2000)
+    },
+
+    infiniteDone () {
+      this.infiniteLoading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.yo-scroll {
+  font-size: 0.24rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 100;
+  height: auto;
+  -webkit-overflow-scrolling: touch;
+  .inner {
+    position: absolute;
+    top: -0.5rem;
+    width: 100%;
+    height: auto;
+    transition-duration: 300ms;
+    .pull-refresh {
+      position: relative;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 0.5rem;
+      display: flex;
+      display: -webkit-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .load-more {
+      height: 0.5rem;
+      line-height: 0.5rem;
+      display: flex;
+      text-align: center;
+      align-items: center;
+      justify-content: center;
+      display: none;
+    }
+    .nullData {
+      // 暂无更多数据样式
+      font-size: 0.13rem;
+      color: #999999;
+      height: 0.5rem;
+      line-height: 0.5rem;
+      text-align: center;
+    }
+    .down-tip,
+    .refresh-tip,
+    .up-tip {
+      display: none;
+    }
+    .up-tip:before,
+    .refresh-tip:before {
+      content: "";
+      display: inline-block;
+      width: 1.6rem;
+      height: 0.7rem;
+      background-size: 70% !important;
+      position: absolute;
+      top: 0;
+      left: 20%;
+    }
+    // .up-tip:before {
+    //   background: url(./loading.gif) no-repeat center;
+    // }
+    // .refresh-tip:before {
+    //   background: url(./loading.gif) no-repeat center;
+    // }
+  }
+}
+
+.yo-scroll.touch .inner {
+  transition-duration: 0;
+}
+
+.yo-scroll.down .down-tip {
+  display: block;
+}
+
+.yo-scroll.up .up-tip {
+  display: block;
+}
+
+.yo-scroll.refresh .refresh-tip {
+  display: block;
+}
+</style>

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

@@ -1,37 +1,44 @@
 <template>
   <div class="mainPage">
     <div>
-      <div class="header flex-h">
-        <div class="flex-item flex-h">
-          <i class="iconfont icon-sousuo"></i>
-          <router-link
-            class="flex-item"
-            :to="{name: 'booksSearch', query: {caseid: currentCaseId}}"
-          >{{indexSearchKey}}</router-link>
+      <loadMore :on-infinite="onInfinite" :dataList="books.list">
+        <div class="header flex-h">
+          <div class="flex-item flex-h">
+            <i class="iconfont icon-sousuo"></i>
+            <router-link
+              class="flex-item"
+              :to="{name: 'booksSearch', query: {caseid: currentCaseId}}"
+            >{{indexSearchKey}}</router-link>
+          </div>
+          <a @click="showDialog = true">
+            <i class="iconfont icon-dingwei"></i>
+            <span>{{currentCaseName}}</span>
+          </a>
+        </div>
+        <nav class="nav">
+          <a
+            v-for="(item, index) in navList"
+            v-if="(navList || []).length < 9 || index<7"
+            :key="index"
+            @click="navClick(item)"
+          >
+            <img :src="item.BookTypeImg" alt>
+            <span>{{item.BookTypeName}}</span>
+          </a>
+          <a v-if="(navList || []).length >8 " @click="moreNav()">
+            <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/test-icon8.png" alt>
+            <span>更多</span>
+          </a>
+        </nav>
+        <div class="list">
+          <h1>精选推荐</h1>
+          <ul>
+            <li v-for="(item, index) in books.list" :key="index">
+              <libraryListItem :data="item" @appointmentBook="appointmentBook"></libraryListItem>
+            </li>
+          </ul>
         </div>
-        <a @click="showDialog = true">
-          <i class="iconfont icon-dingwei"></i>
-          <span>{{currentCaseName}}</span>
-        </a>
-      </div>
-      <nav class="nav">
-        <a v-for="(item, index) in navList" v-if="(navList || []).length < 9 || index<7" :key="index" @click="navClick(item)">
-          <img :src="item.BookTypeImg" alt>
-          <span>{{item.BookTypeName}}</span>
-        </a>
-        <a v-if="(navList || []).length >8 " @click="moreNav()">
-          <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/test-icon8.png" alt>
-          <span>更多</span>
-        </a>
-      </nav>
-      <div class="list">
-        <h1>精选推荐</h1>
-        <ul>
-          <li v-for="(item, index) in books.list" :key="index">
-            <libraryListItem :data="item" @appointmentBook="appointmentBook"></libraryListItem>
-          </li>
-        </ul>
-      </div>
+      </loadMore>
       <van-dialog v-model="showDialog" :show-confirm-button="false">
         <div class="dialogContent">
           <span class="title">选择案场</span>
@@ -60,6 +67,7 @@
 </template>
 
 <script>
+import loadMore from '@/components/vue-load-more/index'
 import libraryListItem from '../../../../components/libraryListItem/index'
 import radio from '../../../../components/radio/index'
 import { mapState, createNamespacedHelpers } from 'vuex'
@@ -76,8 +84,11 @@ export default {
       currentCaseName: '',
       cases: [],
       indexSearchKey: '',
-      page: 1,
-      pagesize: 10,
+      page: 0,
+      pagesize: 2,
+      scrollData: {
+        noFlag: false // 暂无更多数据显示
+      }
     }
   },
   computed: {
@@ -92,7 +103,8 @@ export default {
   },
   components: {
     libraryListItem,
-    radio
+    radio,
+    loadMore
   },
   created () {
     if (!this.CaseList.length || this.CaseList === null) {
@@ -122,8 +134,8 @@ export default {
   methods: {
     ...mapAppActions(['getCaseList']),
     ...mapBookActions([
-      'getBookType', 
-      'getRecommendBook', 
+      'getBookType',
+      'getRecommendBook',
       'getMineBook',
     ]),
     selectCaseId () { // 选择案场
@@ -143,10 +155,29 @@ export default {
         page: 1,
         pagesize: 10,
       })
+      // this.getRecommendBook({
+      //   caseid: this.currentCaseId,
+      //   page: this.page,
+      //   pagesize: this.pagesize,
+      // })
+      this.onInfinite()
+    },
+    onInfinite () {
+      this.page++
+      let more = this.$el.querySelector('.load-more')
       this.getRecommendBook({
         caseid: this.currentCaseId,
         page: this.page,
         pagesize: this.pagesize,
+      }).then((res) => {
+        console.log(res)
+        if (res.list.length < res.pageSize) {
+          console.log(res.list.length)
+          more.style.display = 'none' // 隐藏加载条
+        } else {
+          console.log(res.list.length)
+          this.scrollData.noFlag = true
+        }
       })
     },
     appointmentBook () { // 预约图书
@@ -159,7 +190,7 @@ export default {
       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 } })
     }
   }
 }

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

@@ -12,7 +12,10 @@
               <div v-if="user.Phone">{{user.Phone}}</div>
               <div v-else>未绑定</div>
             </div>
-            <div></div>
+            <div class="vip">
+              <span>vip1</span>
+              <img src="../../../../common/icon/Rectangle.png" alt="">
+            </div>
           </div>
           <div v-if="user.Phone" class="code">
             <div>卡号：2334546456456</div>
@@ -52,7 +55,7 @@
         <div class="flex-item privilege-item">
           <!-- <i class="iconfont icon-01" @click.stop="toVip"></i> -->
           <div class="img-box">
-            <img src="../../../../common/icon/userCenter-icon-3.png" width="100%" height="100%" alt>
+            <img src="../../../../common/icon/pointer.png" width="100%" height="100%" alt>
           </div>
           <span>积分</span>
           <span>

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

@@ -29,7 +29,7 @@
   >div:nth-of-type(1){
     display: flex;
     margin-bottom: .1rem;
-    img{
+    >img{
       width: .56rem;
       height: .56rem;
       margin-right: .1rem;
@@ -43,6 +43,23 @@
       color: #000;
       font-size: .18rem;
     }
+    .vip{
+      width: .24rem;
+      position: relative;
+      span{
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-size: .09rem;
+        text-align: center;
+        width: 100%;
+        line-height: .22rem;
+        color: #fff;
+      }
+      img{
+        width: 100%;
+      }
+    }
   }
   .code{
     text-align: center;
@@ -151,8 +168,11 @@
       font-size: .18rem;
     }
     .img-box {
-      width: 0.24rem;
+      width: 0.2rem;
       height: 0.18rem;
+      img{
+        object-fit: contain;
+      }
     }
     span:nth-of-type(1){
       font-size: .14rem;

src/store/book/index.js

@@ -5,7 +5,9 @@ export default {
   namespaced: true,
   state: {
     types: {},
-    recommends: {},
+    recommends: {
+      list: []
+    },
     books: {},
     minebooks: {},
   },
@@ -14,7 +16,7 @@ export default {
       state.types = payload
     },
     updateRecommendBooks (state, payload) {
-      state.recommends = payload
+      state.recommends.list = state.recommends.list.concat(payload.list)
     },
     updateBookList (state, payload) {
       state.books = payload