ytj

package.json

@@ -9,6 +9,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "better-scroll": "^1.12.6",
     "node-sass": "^4.9.3",
     "sass-loader": "^7.1.0",
     "swiper": "^4.3.5",

src/common/css/reset.css

@@ -60,6 +60,7 @@ select option {
 	width: 100%;
 	height: 100%;
 	position: relative;
+	background: #fff;
 }
 
 .van-toast div{

src/components/bubble/bubble.vue

@@ -0,0 +1,139 @@
+<template>
+  <canvas ref="bubble" :width="width" :height="height" :style="style"></canvas>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  props: {
+    y: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      width: 50,
+      height: 80
+    }
+  },
+  computed: {
+    distance () {
+      return Math.max(0, Math.min(this.y * this.ratio, this.maxDistance))
+    },
+    style () {
+      return `width:${this.width / this.ratio}px;height:${this.height / this.ratio}px`
+    }
+  },
+  created () {
+    this.ratio = window.devicePixelRatio
+    this.width *= this.ratio
+    this.height *= this.ratio
+    this.initRadius = 18 * this.ratio
+    this.minHeadRadius = 12 * this.ratio
+    this.minTailRadius = 5 * this.ratio
+    this.initArrowRadius = 10 * this.ratio
+    this.minArrowRadius = 6 * this.ratio
+    this.arrowWidth = 3 * this.ratio
+    this.maxDistance = 40 * this.ratio
+    this.initCenterX = 25 * this.ratio
+    this.initCenterY = 25 * this.ratio
+    this.headCenter = {
+      x: this.initCenterX,
+      y: this.initCenterY
+    }
+  },
+  mounted () {
+    this._draw()
+  },
+  methods: {
+    _draw () {
+      const bubble = this.$refs.bubble
+      let ctx = bubble.getContext('2d')
+      ctx.clearRect(0, 0, bubble.width, bubble.height)
+
+      this._drawBubble(ctx)
+
+      this._drawArrow(ctx)
+    },
+    _drawBubble (ctx) {
+      ctx.save()
+      ctx.beginPath()
+
+      const rate = this.distance / this.maxDistance
+      const headRadius = this.initRadius - (this.initRadius - this.minHeadRadius) * rate
+
+      this.headCenter.y = this.initCenterY - (this.initRadius - this.minHeadRadius) * rate
+
+      // 画上半弧线
+      ctx.arc(this.headCenter.x, this.headCenter.y, headRadius, 0, Math.PI, true)
+
+      // 画左侧贝塞尔
+      const tailRadius = this.initRadius - (this.initRadius - this.minTailRadius) * rate
+      const tailCenter = {
+        x: this.headCenter.x,
+        y: this.headCenter.y + this.distance
+      }
+
+      const tailPointL = {
+        x: tailCenter.x - tailRadius,
+        y: tailCenter.y
+      }
+      const controlPointL = {
+        x: tailPointL.x,
+        y: tailPointL.y - this.distance / 2
+      }
+
+      ctx.quadraticCurveTo(controlPointL.x, controlPointL.y, tailPointL.x, tailPointL.y)
+
+      // 画下半弧线
+      ctx.arc(tailCenter.x, tailCenter.y, tailRadius, Math.PI, 0, true)
+
+      // 画右侧贝塞尔
+      const headPointR = {
+        x: this.headCenter.x + headRadius,
+        y: this.headCenter.y
+      }
+      const controlPointR = {
+        x: tailCenter.x + tailRadius,
+        y: headPointR.y + this.distance / 2
+      }
+      ctx.quadraticCurveTo(controlPointR.x, controlPointR.y, headPointR.x, headPointR.y)
+
+      ctx.fillStyle = 'rgb(170,170,170)'
+      ctx.fill()
+      ctx.strokeStyle = 'rgb(153,153,153)'
+      ctx.stroke()
+      ctx.restore()
+    },
+    _drawArrow (ctx) {
+      ctx.save()
+      ctx.beginPath()
+
+      const rate = this.distance / this.maxDistance
+      const arrowRadius = this.initArrowRadius - (this.initArrowRadius - this.minArrowRadius) * rate
+
+      // 画内圆
+      ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius - (this.arrowWidth - rate), -Math.PI / 2, 0, true)
+
+      // 画外圆
+      ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius, 0, Math.PI * 3 / 2, false)
+
+      ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius - this.arrowWidth / 2 + rate)
+      ctx.lineTo(this.headCenter.x + this.arrowWidth * 2 - rate * 2, this.headCenter.y - arrowRadius + this.arrowWidth / 2)
+
+      ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius + this.arrowWidth * 3 / 2 - rate)
+
+      ctx.fillStyle = 'rgb(255,255,255)'
+      ctx.fill()
+      ctx.strokeStyle = 'rgb(170,170,170)'
+      ctx.stroke()
+      ctx.restore()
+    }
+  },
+  watch: {
+    y () {
+      this._draw()
+    }
+  }
+}
+</script>

src/components/loading/loading.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="mf-loading-container">
+    <img src="./loading.gif">
+  </div>
+</template>
+<script type="text/ecmascript-6">
+const COMPONENT_NAME = 'loading'
+export default {
+  name: COMPONENT_NAME
+}
+</script>
+<style lang="scss" scoped>
+.mf-loading-container {
+  img {
+    width: 20px;
+    height: 20px;
+    display: block;
+  }
+}
+</style>

src/components/noMore/noMore.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="nomore">
+    <img :src="bottomImg" alt="">
+  </div>
+</template>
+
+<script>
+import bottomImg from '../../common/icon/bottomMsg.png'
+export default {
+  data () {
+    return {
+      bottomImg
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nomore{
+  img{
+    width: 100%;
+    position: absolute;
+    top: 40%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/components/scroll/scroll.vue

@@ -0,0 +1,324 @@
+<template>
+  <div ref="wrapper" class="list-wrapper">
+    <div class="scroll-content">
+      <div ref="listWrapper">
+        <slot></slot>
+      </div>
+      <slot name="pullup" v-if="isloading" :pullUpLoad="pullUpLoad" :isPullUpLoad="isPullUpLoad">
+        <div class="pullup-wrapper" v-if="pullUpLoad">
+          <div class="before-trigger" v-if="!isPullUpLoad">
+            <span>{{pullUpTxt}}</span>
+          </div>
+          <div class="after-trigger" v-else>
+            <loading></loading>
+          </div>
+        </div>
+      </slot>
+    </div>
+    <slot name="pulldown" :pullDownRefresh="pullDownRefresh" :pullDownStyle="pullDownStyle" :beforePullDown="beforePullDown" :isPullingDown="isPullingDown" :bubbleY="bubbleY" >
+      <div ref="pulldown" class="pulldown-wrapper" :style="pullDownStyle" v-if="pullDownRefresh">
+        <div class="before-trigger" v-if="beforePullDown">
+          <bubble :y="bubbleY"></bubble>
+        </div>
+        <div class="after-trigger" v-else>
+          <div v-if="isPullingDown" class="loading">
+            <loading></loading>
+          </div>
+          <div v-else>
+            <span>{{refreshTxt}}</span>
+          </div>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>
+<script type="text/ecmascript-6">
+import BScroll from 'better-scroll'
+import Loading from '../loading/loading.vue'
+import Bubble from '../bubble/bubble.vue'
+import Dom from '../../util/dom'
+const COMPONENT_NAME = 'scroll'
+const DIRECTION_H = 'horizontal'
+const DIRECTION_V = 'vertical'
+
+export default {
+  name: COMPONENT_NAME,
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    probeType: {
+      type: Number,
+      default: 1
+    },
+    click: {
+      type: Boolean,
+      default: true
+    },
+    listenScroll: {
+      type: Boolean,
+      default: false
+    },
+    listenBeforeScroll: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: DIRECTION_V
+    },
+    scrollbar: {
+      type: null,
+      default: false
+    },
+    pullDownRefresh: {
+      type: null,
+      default: false
+    },
+    pullUpLoad: {
+      type: null,
+      default: false
+    },
+    startY: {
+      type: Number,
+      default: 0
+    },
+    refreshDelay: {
+      type: Number,
+      default: 20
+    },
+    freeScroll: {
+      type: Boolean,
+      default: false
+    },
+    mouseWheel: {
+      type: Boolean,
+      default: false
+    },
+    bounce: {
+      default: false
+    },
+    isloading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      beforePullDown: true,
+      isRebounding: false,
+      isPullingDown: false,
+      isPullUpLoad: false,
+      pullUpDirty: true,
+      pullDownStyle: '',
+      bubbleY: 0
+    }
+  },
+  computed: {
+    pullUpTxt () {
+      const moreTxt = '--- 上拉更多 ---'
+
+      const noMoreTxt = '--- 我也是有底线的 ---'
+
+      return this.pullUpDirty ? moreTxt : noMoreTxt
+    },
+    refreshTxt () {
+      return this.pullDownRefresh && (this.pullDownRefresh.txt || '已刷新')
+    }
+  },
+  created () {
+    this.pullDownInitTop = -50
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initScroll()
+    })
+  },
+  methods: {
+    initScroll () {
+      if (!this.$refs.wrapper) {
+        return
+      }
+      if (this.$refs.listWrapper && (this.pullDownRefresh || this.pullUpLoad)) {
+        this.$refs.listWrapper.style.minHeight = `${Dom.getRect(this.$refs.wrapper).height + 1}px`
+      }
+
+      let options = {
+        probeType: this.probeType,
+        click: this.click,
+        scrollY: this.freeScroll || this.direction === DIRECTION_V,
+        scrollX: this.freeScroll || this.direction === DIRECTION_H,
+        scrollbar: this.scrollbar,
+        pullDownRefresh: this.pullDownRefresh,
+        pullUpLoad: this.pullUpLoad,
+        startY: this.startY,
+        freeScroll: this.freeScroll,
+        mouseWheel: this.mouseWheel,
+        bounce: this.bounce
+      }
+
+      this.scroll = new BScroll(this.$refs.wrapper, options)
+
+      if (this.listenScroll) {
+        this.scroll.on('scroll', (pos) => {
+          this.$emit('scroll', pos)
+        })
+      }
+
+      if (this.listenBeforeScroll) {
+        this.scroll.on('beforeScrollStart', () => {
+          this.$emit('beforeScrollStart')
+        })
+      }
+
+      if (this.pullDownRefresh) {
+        this._initPullDownRefresh()
+      }
+
+      if (this.pullUpLoad) {
+        this._initPullUpLoad()
+      }
+    },
+    disable () {
+      this.scroll && this.scroll.disable()
+    },
+    enable () {
+      this.scroll && this.scroll.enable()
+    },
+    refresh () {
+      this.scroll && this.scroll.refresh()
+    },
+    scrollTo () {
+      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
+    },
+    scrollToElement () {
+      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
+    },
+    clickItem (e, item) {
+      this.$emit('click', item)
+    },
+    destroy () {
+      this.scroll.destroy()
+    },
+    forceUpdate (dirty) {
+      if (this.pullDownRefresh && this.isPullingDown) {
+        this.isPullingDown = false
+        this._reboundPullDown().then(() => {
+          this._afterPullDown()
+        })
+      } else if (this.pullUpLoad && this.isPullUpLoad) {
+        this.isPullUpLoad = false
+        this.scroll.finishPullUp()
+        this.pullUpDirty = dirty
+        this.refresh()
+      } else {
+        this.refresh()
+      }
+    },
+    _initPullDownRefresh () {
+      this.scroll.on('pullingDown', () => {
+        this.beforePullDown = false
+        this.isPullingDown = true
+        this.$emit('pullingDown')
+      })
+
+      this.scroll.on('scroll', (pos) => {
+        if (!this.pullDownRefresh) {
+          return
+        }
+        if (this.beforePullDown) {
+          this.bubbleY = Math.max(0, pos.y + this.pullDownInitTop)
+          this.pullDownStyle = `top:${Math.min(pos.y + this.pullDownInitTop, 10)}px`
+        } else {
+          this.bubbleY = 0
+        }
+
+        if (this.isRebounding) {
+          this.pullDownStyle = `top:${10 - (this.pullDownRefresh.stop - pos.y)}px`
+        }
+      })
+    },
+    _initPullUpLoad () {
+      this.scroll.on('pullingUp', () => {
+        this.isPullUpLoad = true
+        this.$emit('pullingUp')
+      })
+    },
+    _reboundPullDown () {
+      const { stopTime = 600 } = this.pullDownRefresh
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          this.isRebounding = true
+          this.scroll.finishPullDown()
+          resolve()
+        }, stopTime)
+      })
+    },
+    _afterPullDown () {
+      setTimeout(() => {
+        this.pullDownStyle = `top:${this.pullDownInitTop}px`
+        this.beforePullDown = true
+        this.isRebounding = false
+        this.refresh()
+      }, this.scroll.options.bounceTime)
+    }
+  },
+  watch: {
+    data () {
+      setTimeout(() => {
+        this.forceUpdate(true)
+      }, this.refreshDelay)
+    }
+  },
+  components: {
+    Loading,
+    Bubble
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.list-wrapper {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: #fff;
+}
+
+.scroll-content {
+  position: relative;
+  z-index: 1;
+}
+
+.list-content {
+  position: relative;
+  z-index: 10;
+  background: #fff;
+}
+
+.pulldown-wrapper {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all;
+}
+
+.after-trigger {
+  margin-top: 10px;
+}
+
+.pullup-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 10px;
+}
+</style>

src/module/user/lessonOrder/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="mainPage">
+    <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
+      <div class="box">
+          <div class="order-card flex-h" v-for="(item,index) in list" :key='index' :class="{'gray' : item.useType == '已失效'}">
+            <div class="card-pic">
+              <div :class="{'gray-location' : item.useType == '已失效'}"><span>{{item.LocationName}}</span></div>
+              <img src="" class="cover" width="100%" height="100%" alt="">
+            </div>
+            <div class="card-msg">
+              <div class="title">{{item.title}}</div>
+              <div class="text">付款方式：{{item.payType}}</div>
+              <div class="text">下单时间：{{item.time}}</div>
+            </div>
+            <div class="card-price">
+              <div class="price">￥ {{item.price}}</div>
+              <div class="type" :class="{'un-use' : item.useType == '未使用'}">{{item.useType}}</div>
+            </div>
+          </div>
+          <!-- <noMore v-if="hasPic"></noMore> -->
+      </div>
+    </scroll>
+  </div>
+</template>
+
+<script>
+// 上拉加载组件
+import scroll from '../../../components/scroll/scroll'
+import noMore from '../../../components/noMore/noMore'
+export default {
+  data () {
+    return {
+      hasPic: false,
+      pullUpLoad: true,
+      pullUpLoadThreshold: 40,
+      startY: 0,
+      isloading: true,
+      hasMore: true,
+      list: [
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '未使用'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已使用'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已失效'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已失效'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已失效'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已失效'
+        }
+      ]
+    }
+  },
+  components: {
+    scroll,
+    noMore
+  },
+  computed: {
+    pullUpLoadObj: function () {
+      return this.pullUpLoad
+        ? {
+          threshold: parseInt(this.pullUpLoadThreshold),
+          txt: {
+            more: this.pullUpLoadMoreTxt,
+            noMore: this.pullUpLoadNoMoreTxt
+          }
+        }
+        : false
+    }
+  },
+  methods: {
+    getList () {
+      this.list.length <= 8 ? this.hasMore = true : this.hasMore = false
+      if (this.hasMore) {
+        setTimeout(() => {
+          this.list.push({
+            LocationName: '社交',
+            title: '小小外交官课程',
+            payType: '优惠券抵用',
+            time: '2018-7-18 12:19',
+            price: 199,
+            useType: '已失效'
+          })
+        }, 1000)
+      } else {
+        this.$refs.scroll.forceUpdate()
+        return false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/lessonOrder/page.scss

@@ -0,0 +1,78 @@
+.box {
+  padding: .2rem .16rem 0;
+  .order-card {
+    padding: .2rem .15rem .2rem .1rem;
+    box-sizing: border-box;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 2px 8px 0px rgba(204,204,204,0.5);
+    border-radius:10px;
+    margin-bottom: .2rem;
+    &.gray {
+      opacity: .5;
+    }
+    .card-pic {
+      width: .8rem;
+      height: .8rem;
+      border-radius: .08rem;
+      overflow: hidden;
+      position: relative;
+      div{
+        position: absolute;
+        background:linear-gradient(45deg,rgba(255,105,0,1) 0%,rgba(255,136,0,0.76) 100%);
+        opacity:0.85;
+        width: .6rem;
+        height: .6rem;
+        transform: rotate(45deg);
+        top: -0.3rem;
+        left: -0.3rem;
+        &.gray-location{
+          background: rgba(189,189,189,1);
+        }
+        span{
+          position: absolute;
+          bottom: .22rem;
+          right: -0.03rem;
+          font-size: .12rem;
+          color: #fff;
+          transform: rotate(-90deg);
+        }
+      }
+    }
+    .card-msg{
+      width: 1.7rem;
+      padding-left: .12rem;
+      .title{
+        font-size: .14rem;
+        padding-bottom: .12rem
+      }
+      .text{
+        font-size: .12rem;
+        color:rgba(153,153,153,1);
+        padding-bottom: .06rem;
+      }
+    }
+    .card-price{
+      flex: 1;
+      text-align: right;
+      .price, .type{
+        font-size: .14rem;
+        color: #000;
+        &.un-use{
+          color: #F25004;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .order-card {
+    .card-pic {
+      div{
+        span{
+          bottom: .2rem !important;
+        }
+      }
+    }
+  }
+}

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

@@ -9,12 +9,12 @@
         <div class="zIndex_bg"></div>
         <div class="userAvatar_Border">
           <div class="userAvatar">
-            <img src="" alt="" width="100%" height="100%">
+            <img :src='AccountInfo.headimgurl' alt="" width="100%" height="100%">
           </div>
         </div>
         <div class="uesr-info">
-          <div class="user-name">Rejo Varghese</div>
-          <div class="mobile">18833445567</div>
+          <div class="user-name">{{user.Name}}</div>
+          <div class="mobile">{{user.Phone}}</div>
         </div>
       </div>
       <div class="vip-privilege flex-h">
@@ -32,7 +32,7 @@
           <span>卡券</span>
           <span>2张未使用</span>
         </div>
-        <div class="flex-item privilege-item">
+        <div class="flex-item privilege-item" @click="toVip">
           <div class="img-box">
             <img src="../../../../common/icon/userCenter-icon-3.png" width="100%" height="100%" alt="">
           </div>
@@ -42,7 +42,7 @@
       </div>
 
       <div class="userCenter-menu">
-        <div class="menu-item flex-h">
+        <div class="menu-item flex-h" @click="toLessonOrder">
           <span>课程订单</span>
           <i class="iconfont icon-jiantou-right"></i>
         </div>
@@ -54,10 +54,6 @@
           <span>体检报告</span>
           <i class="iconfont icon-jiantou-right"></i>
         </div>
-        <div class="menu-item flex-h">
-          <span>消息提醒</span>
-          <i class="iconfont icon-jiantou-right"></i>
-        </div>
       </div>
     </div>
   </div>
@@ -71,9 +67,7 @@ export default {
   name: '',
   data () {
     return {
-      user: {
-
-      },
+      user: {},
       loading,
       isLoading: true
     }
@@ -89,8 +83,11 @@ export default {
   },
   created () {
     this.getUserInfo({ org: this.org }).then(() => {
-      this.user = this.userInfo
-      if (this.user.mobile) {
+      this.user = this.userInfo.customer
+      this.AccountInfo = JSON.parse(this.user.AccountInfo)
+      this.headimgurl = this.AccountInfo.headimgurl
+      console.log(this.AccountInfo)
+      if (this.user.Phone) {
         this.isLoading = false
       } else {
         this.$router.push({ name: 'bindMobile' })
@@ -98,7 +95,13 @@ export default {
     })
   },
   methods: {
-    ...actions(['getUserInfo'])
+    ...actions(['getUserInfo']),
+    toLessonOrder () {
+      this.$router.push({ name: 'lessonOrder' })
+    },
+    toVip () {
+      this.$router.push({ name: 'vip' })
+    }
   }
 }
 </script>

src/module/user/router.js

@@ -9,6 +9,8 @@ import majorProjectsDetail from './majorProjectsDetail/index' // 项目专题
 import coffeeIndex from './mainPage/coffeeIndex/index' // 城咖啡
 import userCenter from './mainPage/userCenter/index' // 个人中心
 import bindMobile from './bindMobile/bindMobile' // 绑定手机号
+import lessonOrder from './lessonOrder/index' // 我的订单
+import vip from './vip/index' // vip卡说明
 
 Vue.use(Router)
 
@@ -53,6 +55,16 @@ const router = new Router({
     name: 'bindMobile',
     component: bindMobile,
     children: []
+  },{ // 我的订单
+    path: '/lessonOrder',
+    name: 'lessonOrder',
+    component: lessonOrder,
+    children: []
+  },{ // vip卡说明
+    path: '/lessonOrder',
+    name: 'lessonOrder',
+    component: lessonOrder,
+    children: []
   }],
   linkActiveClass: 'active',
 })

src/module/user/vip/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="mainPage">
+    vip
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      hasPic: false,
+      pullUpLoad: true,
+      pullUpLoadThreshold: 40,
+      startY: 0,
+      isloading: true,
+      hasMore: true,
+      list: [
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '未使用'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已使用'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已失效'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已失效'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已失效'
+        },
+        {
+          LocationName: '社交',
+          title: '小小外交官课程',
+          payType: '优惠券抵用',
+          time: '2018-7-18 12:19',
+          price: 199,
+          useType: '已失效'
+        }
+      ]
+    }
+  },
+  components: {
+    scroll,
+    noMore
+  },
+  computed: {
+    pullUpLoadObj: function () {
+      return this.pullUpLoad
+        ? {
+          threshold: parseInt(this.pullUpLoadThreshold),
+          txt: {
+            more: this.pullUpLoadMoreTxt,
+            noMore: this.pullUpLoadNoMoreTxt
+          }
+        }
+        : false
+    }
+  },
+  methods: {
+    getList () {
+      this.list.length <= 8 ? this.hasMore = true : this.hasMore = false
+      if (this.hasMore) {
+        setTimeout(() => {
+          this.list.push({
+            LocationName: '社交',
+            title: '小小外交官课程',
+            payType: '优惠券抵用',
+            time: '2018-7-18 12:19',
+            price: 199,
+            useType: '已失效'
+          })
+        }, 1000)
+      } else {
+        this.$refs.scroll.forceUpdate()
+        return false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/util/dom.js

@@ -0,0 +1,64 @@
+class Dom {
+  getSeacrhRequire(name) {
+    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
+    var r = window.location.href.split('?')[1]
+    if (!r) {
+      return
+    } else {
+      r = window.location.href.split('?')[1].match(reg)
+    }
+    if (r != null) return unescape(r[2])
+    return null
+  }
+  hasClass(el, className) {
+    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
+    return reg.test(el.className)
+  }
+
+  addClass(el, className) {
+    if (this.hasClass(el, className)) {
+      return
+    }
+
+    let newClass = el.className.split(' ')
+    newClass.push(className)
+    el.className = newClass.join(' ')
+  }
+
+  removeClass(el, className) {
+    if (!this.hasClass(el, className)) {
+      return
+    }
+
+    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g')
+    el.className = el.className.replace(reg, ' ')
+  }
+
+  getData(el, name, val) {
+    let prefix = 'data-'
+    if (val) {
+      return el.setAttribute(prefix + name, val)
+    }
+    return el.getAttribute(prefix + name)
+  }
+
+  getRect(el) {
+    if (el instanceof window.SVGElement) {
+      let rect = el.getBoundingClientRect()
+      return {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      }
+    } else {
+      return {
+        top: el.offsetTop,
+        left: el.offsetLeft,
+        width: el.offsetWidth,
+        height: el.offsetHeight
+      }
+    }
+  }
+}
+export default new Dom()