From a756578b4afb08250964ddce7fbd25535f9046ca Mon Sep 17 00:00:00 2001
From: Junling Bu <linlinjavaer@gmail.com>
Date: Mon, 1 Jul 2019 14:30:18 +0800
Subject: [PATCH] =?UTF-8?q?refact[litemall-vue]:=20=E5=88=A0=E9=99=A4infin?=
 =?UTF-8?q?ity-scroll=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E8=80=8C=E6=98=AF=E9=87=87=E7=94=A8vant=20List?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/infinity-scroll/index.vue  | 104 ------------
 litemall-vue/src/views/items/list/index.vue   |   1 -
 .../src/views/user/coupon-list/index.vue      | 120 ++++++++------
 .../views/user/order-entity-list/index.vue    | 152 ++++++++++--------
 .../src/views/user/refund-list/index.vue      |  42 ++---
 5 files changed, 170 insertions(+), 249 deletions(-)
 delete mode 100644 litemall-vue/src/components/infinity-scroll/index.vue

diff --git a/litemall-vue/src/components/infinity-scroll/index.vue b/litemall-vue/src/components/infinity-scroll/index.vue
deleted file mode 100644
index 87e66b82..00000000
--- a/litemall-vue/src/components/infinity-scroll/index.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <van-list
-    v-model="loading"
-    :finished="finished"
-    :offset="100"
-    @load="loadMore"
-    v-bind="$attrs"
-    v-on="$listeners"
-    :immediate-check="false"
-  >
-    <is-empty v-if="isEmpty">{{ emptyText }}</is-empty>
-    <slot v-else></slot>
-    <div v-if="finished" class="text-center nomore">{{ onMoreText }}</div>
-  </van-list>
-</template>
-
-<script>
-import { List } from 'vant';
-import { get } from 'lodash';
-import IsEmpty from '@/components/is-empty';
-import loadMore from '@/mixin/load-more';
-import { getList } from '@/api/api';
-
-const DEFAULT_CONFIG = {
-  params: {},
-  headers: {}
-};
-
-export default {
-  name: 'infinity-scroll',
-
-  mixins: [loadMore],
-
-  props: {
-    apiUrl: {
-      type: String,
-      required: true
-    },
-    resKey: {
-      type: String,
-      default: 'data.goodsList'
-    },
-    pageKey: {
-      type: String,
-      default: 'data.page'
-    },
-    emptyText: {
-      type: String,
-      default: '抱歉,找不到结果~'
-    },
-    onMoreText: {
-      type: String,
-      default: '没有更多了~'
-    },
-    perPage: Number,
-    beforeRequest: Function
-  },
-
-  created() {
-    this.resetInit();
-  },
-
-  methods: {
-    beforeInitData() {
-      return this.beforeRequest ? this.beforeRequest() : DEFAULT_CONFIG;
-    },
-    initData() {
-      const { params = {}, headers = {} } = this.beforeInitData();
-      const prePage = this.perPage || this.pages.perPage;
-      console.log(params);
-      console.log(headers);
-      getList(this.apiUrl, {
-          page: this.pages.currPage,
-          limit: prePage,
-          ...params
-        },
-        headers
-      ).then(res => {
-        const items = get(res.data.data, this.resKey, []);
-        const page = get(res.data.data, this.pageKey, null);
-        this.$emit('onLoad', items);
-        return page;
-      });
-    },
-    sleep(time) {
-      return new Promise(resolve => {
-        setTimeout(resolve, time);
-      });
-    }
-  },
-
-  components: {
-    IsEmpty,
-    [List.name]: List
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.nomore {
-  padding: 10px 0;
-  color: $font-color-gray;
-}
-</style>
diff --git a/litemall-vue/src/views/items/list/index.vue b/litemall-vue/src/views/items/list/index.vue
index 9912a50e..fe0654a3 100755
--- a/litemall-vue/src/views/items/list/index.vue
+++ b/litemall-vue/src/views/items/list/index.vue
@@ -32,7 +32,6 @@
 <script>
 import { goodsCategory, goodsList } from '@/api/api';
 import { Card, List, Tab, Tabs } from 'vant';
-import InfinityScroll from '@/components/infinity-scroll';
 
 export default {
   name: 'Item-list',
diff --git a/litemall-vue/src/views/user/coupon-list/index.vue b/litemall-vue/src/views/user/coupon-list/index.vue
index 057a808d..465f02f7 100644
--- a/litemall-vue/src/views/user/coupon-list/index.vue
+++ b/litemall-vue/src/views/user/coupon-list/index.vue
@@ -1,48 +1,49 @@
 <template>
-  <div class="order_list no-pad-bottom over-hide">
-    <van-tabs v-model="activeIndex" :swipe-threshold="5"  @click="handleTabClick">
-      <van-tab v-for="(tabTitle, tabIndex) in tabTitles" :title="tabTitle" :key="tabIndex">
-        <!-- <InfinityScroll
-          class="full-page scroll-wrap height-fix42"
-          :beforeRequest="beforeRequest"
-          :apiUrl="listApi"
-          @onLoad="onLoad(tabIndex, $event)"
-        > -->
-    
-       <van-panel style=" padding-bottom: 10px;">
-      <div class="van-coupon-item" v-for="(coupon,index) in couponList" :key="index">
-        <div class="van-coupon-item__content">
-          <div class="van-coupon-item__head">
-            <h2>
-              <span>¥</span>
-              {{coupon.discount}} 元
-            </h2>
-            <p>{{coupon.desc }} - {{coupon.tag}}</p>
-          </div>
-          <div class="van-coupon-item__body">
-            <h2>{{coupon.name}}</h2>
-            <p>有效期: 至 {{coupon.endTime}}</p>
-        
-          </div>
-        </div>
-         
-      </div>
-    </van-panel>
-        <!-- </InfinityScroll> -->
+  <div class="coupon_list">
+    <van-tabs v-model="activeIndex"
+              :swipe-threshold="5"
+              @click="handleTabClick">
+      <van-tab v-for="(tabTitle, tabIndex) in tabTitles"
+               :title="tabTitle"
+               :key="tabIndex">
+        <van-list v-model="loading"
+                  :finished="finished"
+                  :immediate-check="false"
+                  finished-text="没有更多了"
+                  @load="getCouponList">
+          <van-panel style=" padding-bottom: 10px;">
+            <div class="van-coupon-item"
+                 v-for="(coupon,index) in couponList"
+                 :key="index">
+              <div class="van-coupon-item__content">
+                <div class="van-coupon-item__head">
+                  <h2>
+                    <span>¥</span>
+                    {{coupon.discount}} 元
+                  </h2>
+                  <p>{{coupon.desc }} - {{coupon.tag}}</p>
+                </div>
+                <div class="van-coupon-item__body">
+                  <h2>{{coupon.name}}</h2>
+                  <p>有效期: 至 {{coupon.endTime}}</p>
+
+                </div>
+              </div>
+
+            </div>
+          </van-panel>
+        </van-list>
       </van-tab>
     </van-tabs>
   </div>
 </template>
 
 <script>
-import { CouponMyList, couponMyList } from '@/api/api';
+import { couponMyList } from '@/api/api';
 
 import { Tab, Tabs, Panel, Card, List, CouponCell, CouponList } from 'vant';
 import _ from 'lodash';
 
-import InfinityScroll from '@/components/infinity-scroll';
-
-
 export default {
   name: 'coupon-list',
 
@@ -57,28 +58,43 @@ export default {
   },
   data() {
     return {
-      listApi: CouponMyList,
       activeIndex: this.active,
-      tabTitles: [
-        '未使用',
-        '已使用',
-        '已过期'
-      ],
+      tabTitles: ['未使用', '已使用', '已过期'],
       status: 0,
-      couponList: []
+      couponList: [],
+      page: 0,
+      limit: 10,
+      loading: false,
+      finished: false
     };
   },
 
   methods: {
-    init(i) {
-      let status = i || this.activeIndex;
-      couponMyList({status: status}).then(res => {
-        this.couponList = res.data.data.list;
+    init() {
+      this.page = 0;
+      this.couponList = [];
+      this.getCouponList();
+    },
+    getCouponList() {
+      this.page++;
+
+      couponMyList({
+        status: this.activeIndex,
+        page: this.page,
+        limit: this.limit
+      }).then(res => {
+        this.couponList.push(...res.data.data.list);
+
+        this.loading = false;
+        this.finished = res.data.data.page >= res.data.data.pages;
       });
     },
     handleTabClick(index) {
-      this.init(index);
-    },    
+      this.activeIndex = index;
+      this.page = 0;
+      this.couponList = [];
+      this.getCouponList();
+    }
   },
   components: {
     [Tab.name]: Tab,
@@ -86,15 +102,14 @@ export default {
     [Panel.name]: Panel,
     [Card.name]: Card,
     [List.name]: List,
-    InfinityScroll,
     CouponCell,
-    CouponList,
+    CouponList
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.order_list {
+.coupon_list {
   &--footer_btn {
     text-align: right;
   }
@@ -130,8 +145,7 @@ export default {
   padding: 24px 0 0 15px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  border:1px solid red;
-
+  border: 1px solid red;
 }
 .van-coupon-item h2,
 .van-coupon-item p {
@@ -166,7 +180,7 @@ export default {
   flex: 1;
   position: relative;
   border-radius: 0 4px 4px 0;
-  margin-left:20px;
+  margin-left: 20px;
 }
 .van-coupon-item__body h2 {
   font-size: 16px;
diff --git a/litemall-vue/src/views/user/order-entity-list/index.vue b/litemall-vue/src/views/user/order-entity-list/index.vue
index 36477232..25063700 100644
--- a/litemall-vue/src/views/user/order-entity-list/index.vue
+++ b/litemall-vue/src/views/user/order-entity-list/index.vue
@@ -1,54 +1,67 @@
 <template>
-  <div class="order_list over-hide">
-    <van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick">
-      <van-tab v-for="(tabTitle, index) in tabTitles" :title="tabTitle" :key="index">
-        <!-- <InfinityScroll
-          class="full-page scroll-wrap height-fix42"
-          :beforeRequest="beforeRequest"
-          :apiUrl="listApi"
-          @onLoad="onLoad(tabIndex, $event)"
-        > -->
-          <van-panel
-            v-for="(el, i) in orderList"
-            class="order_list--panel"
-            :key="i"
-            :title="'订单编号: ' + el.orderSn"
-            :status="el.orderStatusText"
-          >
+  <div class="order_list">
+    <van-tabs v-model="activeIndex"
+              :swipe-threshold="5"
+              @click="handleTabClick">
+      <van-tab v-for="(tabTitle, index) in tabTitles"
+               :title="tabTitle"
+               :key="index">
+        <van-list v-model="loading"
+                  :finished="finished"
+                  :immediate-check="false"
+                  finished-text="没有更多了"
+                  @load="getOrderList">
+          <van-panel v-for="(el, i) in orderList"
+                     class="order_list--panel"
+                     :key="i"
+                     :title="'订单编号: ' + el.orderSn"
+                     :status="el.orderStatusText">
             <div>
-              <van-card
-                v-for="(goods, goodsI) in el.goodsList"
-                class="order_list--van-card"
-                :key="goodsI"
-                :title="goods.goodsName"
-                :num="goods.number"
-                :thumb="goods.picUrl"
-                @click.native="toOrderDetail(el.id)"
-              >
-              <div slot="desc">
-                <div class="van-card__desc">
-                  <van-tag plain style="margin-right:6px;" v-for="(spec, index) in goods.specifications" :key="index">
-                  {{spec}}
-                  </van-tag>
+              <van-card v-for="(goods, goodsI) in el.goodsList"
+                        class="order_list--van-card"
+                        :key="goodsI"
+                        :title="goods.goodsName"
+                        :num="goods.number"
+                        :thumb="goods.picUrl"
+                        @click.native="toOrderDetail(el.id)">
+                <div slot="desc">
+                  <div class="van-card__desc">
+                    <van-tag plain
+                             style="margin-right:6px;"
+                             v-for="(spec, index) in goods.specifications"
+                             :key="index">
+                      {{spec}}
+                    </van-tag>
+                  </div>
                 </div>
-              </div>
-            </van-card>              
-              <div
-                class="order_list--total"
-              >合计: {{el.actualPrice * 100 | yuan}}（含运费{{el.post_fee | yuan}}）</div>
+              </van-card>
+              <div class="order_list--total">合计: {{el.actualPrice * 100 | yuan}}（含运费{{el.post_fee | yuan}}）</div>
             </div>
 
-          	<div slot="footer" class="order_list--footer_btn">
-              <van-button size="small" v-if="el.handleOption.cencel" @click="cancelOrder(el.id)">取消订单</van-button>
-	            <van-button size="small" v-if="el.handleOption.pay" type="danger" @click="toPay(el.id)">去支付</van-button>
-		          <van-button size="small" v-if="el.handleOption.confirm" type="danger" @click="confirmOrder(el.id)">确认收货</van-button>
-              <van-button size="small" v-if="el.handleOption.delete" @click="delOrder(el.id)">删除订单</van-button>
-              <van-button size="small" v-if="el.handleOption.comment" @click="commentOrder(el.id)">去评价</van-button>
-	          </div>
+            <div slot="footer"
+                 class="order_list--footer_btn">
+              <van-button size="small"
+                          v-if="el.handleOption.cencel"
+                          @click="cancelOrder(el.id)">取消订单</van-button>
+              <van-button size="small"
+                          v-if="el.handleOption.pay"
+                          type="danger"
+                          @click="toPay(el.id)">去支付</van-button>
+              <van-button size="small"
+                          v-if="el.handleOption.confirm"
+                          type="danger"
+                          @click="confirmOrder(el.id)">确认收货</van-button>
+              <van-button size="small"
+                          v-if="el.handleOption.delete"
+                          @click="delOrder(el.id)">删除订单</van-button>
+              <van-button size="small"
+                          v-if="el.handleOption.comment"
+                          @click="commentOrder(el.id)">去评价</van-button>
+            </div>
 
           </van-panel>
 
-        <!-- </InfinityScroll> -->
+        </van-list>
 
       </van-tab>
     </van-tabs>
@@ -56,10 +69,9 @@
 </template>
 
 <script>
-import { OrderList, orderList } from '@/api/api';
+import { orderList } from '@/api/api';
 
 import { Tab, Tabs, Panel, Card, List, Tag } from 'vant';
-import InfinityScroll from '@/components/infinity-scroll';
 
 export default {
   name: 'order-list',
@@ -74,25 +86,33 @@ export default {
     this.init();
   },
   data() {
-    return {      
-      listApi: OrderList,
+    return {
       activeIndex: this.active,
-      tabTitles: [
-        '全部',
-        '待付款',
-        '待发货',
-        '待收货',
-        '待评价'
-      ],
-      orderList: []
+      tabTitles: ['全部', '待付款', '待发货', '待收货', '待评价'],
+      orderList: [],
+      page: 0,
+      limit: 10,
+      loading: false,
+      finished: false
     };
   },
 
   methods: {
-    init(i) {
-      let showType = i || this.activeIndex;
-      orderList({showType: showType}).then(res => {
-        this.orderList = res.data.data.list;
+    init() {
+      this.page = 0;
+      this.orderList = [];
+      this.getOrderList();
+    },
+    getOrderList() {
+      this.page++;
+      orderList({
+        showType: this.activeIndex,
+        page: this.page,
+        limit: this.limit
+      }).then(res => {
+        this.orderList.push(...res.data.data.list);
+        this.loading = false;
+        this.finished = res.data.data.page >= res.data.data.pages;
       });
     },
     delOrder(i) {
@@ -110,13 +130,15 @@ export default {
       });
       this.$toast('已确认收货');
     },
-    commentOrder(id) {
-    },
+    commentOrder(id) {},
     toPay(id) {
       this.$router.push({ name: 'payment', params: { orderId: id } });
     },
     handleTabClick(index) {
-      this.init(index);
+      this.activeIndex = index;
+      this.page = 0;
+      this.orderList = [];
+      this.getOrderList();
     },
     toOrderDetail(id) {
       this.$router.push({
@@ -126,7 +148,6 @@ export default {
     }
   },
   components: {
-    InfinityScroll,
     [Tab.name]: Tab,
     [Tabs.name]: Tabs,
     [Panel.name]: Panel,
@@ -140,16 +161,15 @@ export default {
 <style lang="scss" scoped>
 .order_list {
   padding-bottom: 0;
-  overflow-y: hidden;
   &--footer_btn {
     text-align: right;
   }
   &--panel {
-    margin-bottom: 10px;
+    margin-bottom: 20px;
   }
 
   &--van-card {
-    background-color: #fafafa;
+    background-color: #fff;
   }
 
   &--total {
diff --git a/litemall-vue/src/views/user/refund-list/index.vue b/litemall-vue/src/views/user/refund-list/index.vue
index d39b8782..b79e8f7a 100644
--- a/litemall-vue/src/views/user/refund-list/index.vue
+++ b/litemall-vue/src/views/user/refund-list/index.vue
@@ -1,13 +1,12 @@
 <template>
-  <div class="order_list">
+  <div class="refund_list">
     <van-tabs sticky :active="activeIndex" :swipe-threshold="5" @click="handleTabClick">
-      <van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tab.type">
-        <InfinityScroll
-          class="full-page scroll-wrap"
-          :beforeRequest="beforeRequest"
-          :apiUrl="listApi"
-          @onLoad="onLoad(tabIndex, $event)"
-        >
+      <van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tabIndex">
+        <van-list v-model="loading"
+                  :finished="finished"
+                  :immediate-check="false"
+                  finished-text="没有更多了"
+                  @load="getRefundList">
           <van-panel
             v-for="(el, i) in tab.items"
             class="order_list--panel"
@@ -36,7 +35,7 @@
               >{{ el.status == 10 ? "撤销申请" : "查看详情"}}</van-button>
             </div>
           </van-panel>
-        </InfinityScroll>
+        </van-list>
       </van-tab>
     </van-tabs>
   </div>
@@ -46,7 +45,6 @@
 import { REFUND_LIST } from '@/api/api';
 
 import { Tab, Tabs, Panel, Card, List } from 'vant';
-import InfinityScroll from '@/components/infinity-scroll';
 
 const STATUS_TEXT = {
   10: '退款中',
@@ -60,9 +58,12 @@ export default {
   data() {
     return {
       listApi: REFUND_LIST,
-      shop_id: 1,
       activeIndex: 0,
       items: [],
+      page: 0,
+      limit: 10,
+      loading: false,
+      finished: false,
       tabsItem: [
         {
           name: '全部',
@@ -87,17 +88,6 @@ export default {
     onLoad(i, items) {
       this.tabsItem[i].items.push(...items);
     },
-    beforeRequest() {
-      const i = this.activeIndex;
-      const status = this.tabsItem[i].status;
-      const { shop_id } = this;
-      return {
-        params: {
-          status,
-          shop_id
-        }
-      };
-    },
     refund_handle(i) {
       const item = this.items[i];
       if (item.status == 10) {
@@ -120,6 +110,9 @@ export default {
     },
     getStatusText(status) {
       return STATUS_TEXT[status] || '';
+    },
+    getRefundList(){
+
     }
   },
   components: {
@@ -127,14 +120,13 @@ export default {
     [Tabs.name]: Tabs,
     [Panel.name]: Panel,
     [Card.name]: Card,
-    [List.name]: List,
-    InfinityScroll
+    [List.name]: List
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.order_list {
+.refund_list {
   padding-bottom: 0;
 
   &--footer_btn {