Преглед изворни кода

优化:用户端列表上拉加载分页逻辑问题

萤火科技 пре 1 година
родитељ
комит
49ce219e86

+ 1 - 2
pages/article/index.vue

@@ -95,7 +95,7 @@
         app.getArticleList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())
@@ -158,7 +158,6 @@
       onTargetDetail(articleId) {
         this.$navTo('pages/article/detail', { articleId })
       },
-
     },
 
     /**

+ 1 - 1
pages/category/components/commodity.vue

@@ -135,7 +135,7 @@
         app.getGoodsList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())

+ 1 - 1
pages/comment/index.vue

@@ -122,7 +122,7 @@
         app.getCommentList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())

+ 1 - 1
pages/goods/list.vue

@@ -145,7 +145,7 @@
         app.getGoodsList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())

+ 1 - 1
pages/help/index.vue

@@ -61,7 +61,7 @@
         app.getHelpList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())

+ 12 - 5
pages/my-coupon/index.vue

@@ -14,10 +14,17 @@
             <view class="coupon-left">
               <!-- 优惠额度/折扣 -->
               <view class="coupon-reduce">
-                <view class="coupon-reduce-unit"><text>¥</text></view>
-                <view class="coupon-reduce-amount">
-                  <text class="value">{{ item.reduce_price }}</text>
-                </view>
+                <block v-if="item.coupon_type == CouponTypeEnum.FULL_DISCOUNT.value">
+                  <view class="coupon-reduce-unit"><text>¥</text></view>
+                  <view class="coupon-reduce-amount">
+                    <text class="value">{{ item.reduce_price }}</text>
+                  </view>
+                </block>
+                <block v-if="item.coupon_type == CouponTypeEnum.DISCOUNT.value">
+                  <view class="coupon-reduce-amount">
+                    <text class="value">{{ item.discount }}折</text>
+                  </view>
+                </block>
               </view>
               <!-- 最低消费金额 -->
               <text class="coupon-hint">满{{ item.min_price }}元可用</text>
@@ -122,7 +129,7 @@
         app.getCouponList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())

+ 1 - 1
pages/order/index.vue

@@ -220,7 +220,7 @@
         app.getOrderList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())

+ 1 - 1
pages/points/log.vue

@@ -68,7 +68,7 @@
         app.getLogList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())

+ 251 - 240
pages/refund/index.vue

@@ -1,241 +1,252 @@
-<template>
-  <view class="container" :style="appThemeStyle">
-    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
-      @up="upCallback">
-      <!-- tab栏 -->
-      <u-tabs :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" />
-      <!-- 退款/售后单 -->
-      <view class="widget-list">
-        <view class="widget-detail" v-for="(item, index) in list.data" :key="index">
-          <view class="row-block dis-flex flex-y-center">
-            <view class="flex-box">{{ item.create_time }}</view>
-            <view class="flex-box t-r">
-              <text class="col-m">{{ item.state_text }}</text>
-            </view>
-          </view>
-          <view class="detail-goods row-block dis-flex" @click.stop="handleTargetDetail(item.order_refund_id)">
-            <view class="goods-image">
-              <image class="image" :src="item.orderGoods.goods_image" mode="aspectFit"></image>
-            </view>
-            <view class="goods-right flex-box">
-              <view class="goods-name">
-                <text class="twoline-hide">{{ item.orderGoods.goods_name }}</text>
-              </view>
-              <view class="goods-props clearfix">
-                <view class="goods-props-item" v-for="(props, idx) in item.orderGoods.goods_props" :key="idx">
-                  <text>{{ props.value.name }}</text>
-                </view>
-              </view>
-              <view class="goods-num t-r">
-                <text class="f-26 col-8">×{{ item.orderGoods.total_num }}</text>
-              </view>
-            </view>
-          </view>
-          <view class="detail-order row-block">
-            <view class="item dis-flex flex-x-end flex-y-center">
-              <text class="">付款金额:</text>
-              <text class="col-m">¥{{ item.orderGoods.total_pay_price }}</text>
-            </view>
-          </view>
-          <view class="detail-operate row-block dis-flex flex-x-end flex-y-center">
-            <view class="detail-btn btn-detail" @click.stop="handleTargetDetail(item.order_refund_id)">查看详情</view>
-          </view>
-        </view>
-      </view>
-    </mescroll-body>
-  </view>
-</template>
-
-<script>
-  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
-  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
-  import * as RefundApi from '@/api/refund'
-
-  // 每页记录数量
-  const pageSize = 15
-
-  // tab栏数据
-  const tabs = [{
-    name: '全部',
-    value: -1
-  }, {
-    name: '待处理',
-    value: 0
-  }]
-
-  export default {
-    mixins: [MescrollMixin],
-    data() {
-      return {
-        // 订单列表数据
-        list: getEmptyPaginateObj(),
-        // tabs栏数据
-        tabs,
-        // 当前标签索引
-        curTab: 0,
-        // 上拉加载配置
-        upOption: {
-          // 首次自动执行
-          auto: true,
-          // 每页数据的数量; 默认10
-          page: { size: pageSize },
-          // 数量要大于2条才显示无更多数据
-          noMoreSize: 2,
-          // 空布局
-          empty: {
-            tip: '亲,暂无售后单记录'
-          }
-        },
-        // 控制首次触发onShow事件时不刷新列表
-        canReset: false,
-      }
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-      this.canReset && this.onRefreshList()
-      this.canReset = true
-    },
-
-    methods: {
-
-      /**
-       * 上拉加载的回调 (页面初始化时也会执行一次)
-       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
-       * @param {Object} page
-       */
-      upCallback(page) {
-        const app = this
-        // 设置列表数据
-        app.getRefundList(page.num)
-          .then(list => {
-            const curPageLen = list.data.length
-            const totalSize = list.data.total
-            app.mescroll.endBySize(curPageLen, totalSize)
-          })
-          .catch(() => app.mescroll.endErr())
-      },
-
-      // 获取退款/售后单列表
-      getRefundList(pageNo = 1) {
-        const app = this
-        return new Promise((resolve, reject) => {
-          RefundApi.list({ state: app.getTabValue(), page: pageNo }, { load: false })
-            .then(result => {
-              // 合并新数据
-              const newList = result.data.list
-              app.list.data = getMoreListData(newList, app.list, pageNo)
-              resolve(newList)
-            })
-        })
-      },
-
-      // 切换标签项
-      onChangeTab(index) {
-        const app = this
-        // 设置当前选中的标签
-        app.curTab = index
-        // 刷新售后单列表
-        app.onRefreshList()
-      },
-
-      // 刷新订单列表
-      onRefreshList() {
-        this.list = getEmptyPaginateObj()
-        setTimeout(() => {
-          this.mescroll.resetUpScroll()
-        }, 120)
-      },
-
-      // 获取当前标签项的值
-      getTabValue() {
-        return this.tabs[this.curTab].value
-      },
-
-      // 跳转到售后单详情页
-      handleTargetDetail(orderRefundId) {
-        this.$navTo('pages/refund/detail', { orderRefundId })
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .widget-detail {
-    box-sizing: border-box;
-    background: #fff;
-    margin-bottom: 20rpx;
-
-    .row-block {
-      padding: 0 30rpx;
-      min-height: 70rpx;
-    }
-
-    .detail-goods {
-      padding: 20rpx 30rpx;
-      background: #fbfbfb;
-
-      .goods-image {
-        margin-right: 20rpx;
-
-        .image {
-          display: block;
-          width: 200rpx;
-          height: 200rpx;
-        }
-      }
-
-      .goods-right {
-        padding: 15rpx 0;
-      }
-
-      .goods-name {
-        margin-bottom: 10rpx;
+<template>
+  <view class="container" :style="appThemeStyle">
+    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
+      @up="upCallback">
+      <!-- tab栏 -->
+      <u-tabs :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" />
+      <!-- 退款/售后单 -->
+      <view class="widget-list">
+        <view class="widget-detail" v-for="(item, index) in list.data" :key="index">
+          <view class="row-block dis-flex flex-y-center">
+            <view class="flex-box">{{ item.create_time }}</view>
+            <view class="flex-box t-r">
+              <text class="col-m">{{ item.state_text }}</text>
+            </view>
+          </view>
+          <view class="detail-goods row-block dis-flex" @click.stop="handleTargetDetail(item.order_refund_id)">
+            <view class="goods-image">
+              <image class="image" :src="item.orderGoods.goods_image" mode="aspectFit"></image>
+            </view>
+            <view class="goods-right flex-box">
+              <view class="goods-name">
+                <text class="twoline-hide">{{ item.orderGoods.goods_name }}</text>
+              </view>
+              <view class="goods-props clearfix">
+                <view class="goods-props-item" v-for="(props, idx) in item.orderGoods.goods_props" :key="idx">
+                  <text>{{ props.value.name }}</text>
+                </view>
+              </view>
+              <view class="goods-num t-r">
+                <text class="f-26 col-8">×{{ item.orderGoods.total_num }}</text>
+              </view>
+            </view>
+          </view>
+          <view class="detail-order row-block">
+            <view class="item dis-flex flex-x-end flex-y-center">
+              <text class="">付款金额:</text>
+              <text class="col-m">¥{{ item.orderGoods.total_pay_price }}</text>
+            </view>
+          </view>
+          <view class="detail-operate row-block dis-flex flex-x-end flex-y-center">
+            <view class="detail-btn btn-detail" @click.stop="handleTargetDetail(item.order_refund_id)">查看详情</view>
+          </view>
+        </view>
+      </view>
+    </mescroll-body>
+  </view>
+</template>
+
+<script>
+  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
+  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
+  import * as RefundApi from '@/api/refund'
+
+  // 每页记录数量
+  const pageSize = 15
+
+  // tab栏数据
+  const tabs = [{
+    name: '全部',
+    value: -1
+  }, {
+    name: '待处理',
+    value: 0
+  }]
+
+  export default {
+    mixins: [MescrollMixin],
+    data() {
+      return {
+        // 订单列表数据
+        list: getEmptyPaginateObj(),
+        // tabs栏数据
+        tabs,
+        // 当前标签索引
+        curTab: 0,
+        // 上拉加载配置
+        upOption: {
+          // 首次自动执行
+          auto: true,
+          // 每页数据的数量; 默认10
+          page: { size: pageSize },
+          // 数量要大于2条才显示无更多数据
+          noMoreSize: 2,
+          // 空布局
+          empty: {
+            tip: '亲,暂无售后单记录'
+          }
+        },
+        // 控制首次触发onShow事件时不刷新列表
+        canReset: false,
+      }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+      this.canReset && this.onRefreshList()
+      this.canReset = true
+    },
+
+    methods: {
+
+      /**
+       * 上拉加载的回调 (页面初始化时也会执行一次)
+       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
+       * @param {Object} page
+       */
+      upCallback(page) {
+        const app = this
+        // 设置列表数据
+        app.getRefundList(page.num)
+          .then(list => {
+            const curPageLen = list.data.length
+            const totalSize = list.total
+            app.mescroll.endBySize(curPageLen, totalSize)
+          })
+          .catch(() => app.mescroll.endErr())
+      },
+
+      // 获取退款/售后单列表
+      getRefundList(pageNo = 1) {
+        const app = this
+        return new Promise((resolve, reject) => {
+          RefundApi.list({ state: app.getTabValue(), page: pageNo }, { load: false })
+            .then(result => {
+              // 合并新数据
+              const newList = result.data.list
+              app.list.data = getMoreListData(newList, app.list, pageNo)
+              resolve(newList)
+            })
+        })
+      },
+
+      // 切换标签项
+      onChangeTab(index) {
+        const app = this
+        // 设置当前选中的标签
+        app.curTab = index
+        // 刷新售后单列表
+        app.onRefreshList()
+      },
+
+      // 刷新订单列表
+      onRefreshList() {
+        this.list = getEmptyPaginateObj()
+        setTimeout(() => {
+          this.mescroll.resetUpScroll()
+        }, 120)
+      },
+
+      // 获取当前标签项的值
+      getTabValue() {
+        return this.tabs[this.curTab].value
+      },
+
+      // 跳转到售后单详情页
+      handleTargetDetail(orderRefundId) {
+        this.$navTo('pages/refund/detail', { orderRefundId })
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .widget-detail {
+    box-sizing: border-box;
+    background: #fff;
+    margin-bottom: 20rpx;
+
+    .row-block {
+      padding: 0 30rpx;
+      min-height: 70rpx;
+    }
+
+    .detail-goods {
+      padding: 20rpx 30rpx;
+      background: #fbfbfb;
+
+      .goods-image {
+        margin-right: 20rpx;
+
+        .image {
+          display: block;
+          width: 200rpx;
+          height: 200rpx;
+        }
+      }
+
+      .goods-right {
+        padding: 15rpx 0;
+      }
+
+      .goods-name {
+        margin-bottom: 10rpx;
         // min-height: 68rpx;
-        // line-height: 1.3;
-      }
-
-      .goods-props {
        margin-top: 14rpx;
        color: #ababab;
        font-size: 24rpx;
        overflow: hidden;

        .goods-props-item {
          padding: 4rpx 16rpx;
          border-radius: 12rpx;
          background-color: #fcfcfc;
        }
      }
-
-    }
-
-    .detail-operate {
-      padding-bottom: 20rpx;
-
-      .detail-btn {
-        border-radius: 4px;
-        border: 1rpx solid #ccc;
-        padding: 8rpx 20rpx;
-        font-size: 28rpx;
-        color: #555;
-        margin-left: 10rpx;
-      }
-    }
-
-    .detail-order {
-      padding: 10rpx 30rpx;
-      font-size: 28rpx;
-      height: 50rpx;
-      display: flex;
-      align-items: center;
-
-      .item {
-        margin-bottom: 10rpx;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-</style>
+        // line-height: 1.3;
+      }
+
+      .goods-props {
+        margin-top: 14rpx;
+        color: #ababab;
+        font-size: 24rpx;
+        overflow: hidden;
+
+        .goods-props-item {
+          padding: 4rpx 16rpx;
+          border-radius: 12rpx;
+          background-color: #fcfcfc;
+        }
+      }
+
+    }
+
+    .detail-operate {
+      padding-bottom: 20rpx;
+
+      .detail-btn {
+        border-radius: 4px;
+        border: 1rpx solid #ccc;
+        padding: 8rpx 20rpx;
+        font-size: 28rpx;
+        color: #555;
+        margin-left: 10rpx;
+      }
+    }
+
+    .detail-order {
+      padding: 10rpx 30rpx;
+      font-size: 28rpx;
+      height: 50rpx;
+      display: flex;
+      align-items: center;
+
+      .item {
+        margin-bottom: 10rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+</style>

+ 1 - 1
pages/wallet/balance/log.vue

@@ -68,7 +68,7 @@
         app.getLogList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())

+ 1 - 1
pages/wallet/recharge/order.vue

@@ -68,7 +68,7 @@
         app.getLogList(page.num)
           .then(list => {
             const curPageLen = list.data.length
-            const totalSize = list.data.total
+            const totalSize = list.total
             app.mescroll.endBySize(curPageLen, totalSize)
           })
           .catch(() => app.mescroll.endErr())