Explorar o código

购买套餐列表加分页

chenrui %!s(int64=4) %!d(string=hai) anos
pai
achega
8009ea0873

+ 3 - 1
src/api/customerBundle.js

@@ -45,7 +45,9 @@ export const cancelBuy = (params) => {
 
 // 套餐列表
 export const getBundleList = params => {
-  const url = `bundle/query`
+  const url = `bundle/query/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
   return axios.request({
     url: url,
     data: params,

+ 73 - 41
src/views/SetmealSales/BuySetmeal.vue

@@ -21,40 +21,51 @@
           <a-tab-pane v-for="item in setmealType" :key="item.code" :tab="item.dispName"></a-tab-pane>
         </a-tabs>
         <!-- 套餐数据列表 -->
-        <div class="itemBox" id="bundelScroll" :style="{height: winH - 358 + 'px'}">
-          <a-row class="items-list" v-for="(item, index) in listData" :key="index">
-            <a-col :span="15">
-              <h3>{{ item.name }} </h3>
-              <p>
-                <span><b>原价:</b><em style="text-decoration: line-through;">¥{{ item.originalPrice }}</em> </span>
-                <span style="margin-left: 15px;margin-right: 15px;color: red;"><b>现价:</b>¥{{ item.price }} </span>
-                <span style="margin-left: 15px;margin-right: 15px;">
-                  有效期:{{ item.validityTermType == 'PERMANENT_VALIDITY' ? '永久有效' : item.validityTermType == 'FIXED_TIME' ? item.validityTermValue+'过期' : item.validityTermType == 'FIXED_DAYS' ? '购买后'+item.validityTermValue+'天过期' : '' }}
-                </span>
-              </p>
-              <p>
-                <span><b>套餐说明:</b>{{ item.summary || '-' }}</span>
-              </p>
-            </a-col>
-            <a-col :span="1"></a-col>
-            <a-col :span="4">
-              <!-- <span>1 套</span> -->
-            </a-col>
-            <a-col :span="4">
-              <a-button
-                class="handle-btn buy-btn"
-                id="buySetmeal-buy"
-                type="primary"
-                @click="openPay(item)"
-                shape="round">下单</a-button>
-              <a-button
-                class="handle-btn look-btn"
-                id="buySetmeal-look"
-                @click="openDetails(item)"
-                shape="round">查看详细</a-button>
-            </a-col>
-          </a-row>
-          <a-empty v-if="listData.length == 0" class="noData" />
+        <div class="itemBox" id="bundelScroll">
+          <a-spin :spinning="loading" tip="Loading...">
+            <a-row class="items-list" v-for="(item, index) in listData" :key="index">
+              <a-col :span="15">
+                <h3>{{ item.name }} </h3>
+                <p>
+                  <span><b>原价:</b><em style="text-decoration: line-through;">¥{{ item.originalPrice }}</em> </span>
+                  <span style="margin-left: 15px;margin-right: 15px;color: red;"><b>现价:</b>¥{{ item.price }} </span>
+                  <span style="margin-left: 15px;margin-right: 15px;">
+                    有效期:{{ item.validityTermType == 'PERMANENT_VALIDITY' ? '永久有效' : item.validityTermType == 'FIXED_TIME' ? item.validityTermValue+'过期' : item.validityTermType == 'FIXED_DAYS' ? '购买后'+item.validityTermValue+'天过期' : '' }}
+                  </span>
+                </p>
+                <p>
+                  <span><b>套餐说明:</b>{{ item.summary || '-' }}</span>
+                </p>
+              </a-col>
+              <a-col :span="1"></a-col>
+              <a-col :span="4">
+                <!-- <span>1 套</span> -->
+              </a-col>
+              <a-col :span="4">
+                <a-button
+                  class="handle-btn buy-btn"
+                  id="buySetmeal-buy"
+                  type="primary"
+                  @click="openPay(item)"
+                  shape="round">下单</a-button>
+                <a-button
+                  class="handle-btn look-btn"
+                  id="buySetmeal-look"
+                  @click="openDetails(item)"
+                  shape="round">查看详细</a-button>
+              </a-col>
+            </a-row>
+            <!-- 分页 -->
+            <a-pagination
+              v-if="listData.length != 0"
+              class="pagination"
+              show-size-changer
+              :total="total"
+              @showSizeChange="onShowSizeChange"
+              @change="onChange" />
+            <!-- 暂无数据 -->
+            <a-empty v-if="listData.length == 0" class="noData" />
+          </a-spin>
         </div>
       </div>
     </a-card>
@@ -80,13 +91,14 @@ export default {
       queryWord: '', //  关键词
       clsId: '',
       pageNo: 1,
-      pageSize: 1000,
+      pageSize: 10,
+      total: 0,
       setmealType: [], //  套餐类型
       openSetmealPay: false, //  下单弹框是否显示
       openSetmealDetails: false, //  查看详细弹框是否显示
       setmealId: null, //  套餐id
       setmealInfo: null, //  套餐信息
-      winH: 0 //  浏览器高度
+      loading: false //  加载中状态
     }
   },
   methods: {
@@ -101,23 +113,40 @@ export default {
       this.queryWord = ''
       this.initData()
     },
+    //  分页查询  每页多少条
+    onShowSizeChange (current, pageSize) {
+      this.pageNo = current
+      this.pageSize = pageSize
+      this.initData()
+    },
+    //  分页查询  页码
+    onChange (page, pageSize) {
+      this.pageNo = page
+      this.pageSize = pageSize
+      this.initData()
+    },
     // 初始化数据
     initData () {
+      this.loading = true
       getBundleList({
         queryWord: this.queryWord,
-        clsId: this.clsId == 'all' ? '' : this.clsId
+        clsId: this.clsId == 'all' ? '' : this.clsId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
       }).then(res => {
         if (res.status == 200) {
-          this.listData = res.data
+          this.listData = res.data.list || []
+          this.total = res.data.count || 0
         } else {
           this.listData = []
+          this.total = 0
         }
+        this.loading = false
       })
     },
     //  tab 切换
     tabChange (v) {
       this.listData = []
-      document.getElementById('bundelScroll').scrollTop = 0
       this.clsId = v
       if (this.clsId == 'all') {
         this.queryWord = this.queryWord
@@ -155,7 +184,6 @@ export default {
     }
   },
   mounted () {
-    this.winH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 浏览器高度
     this.getBundleClsDatas()//  套餐分类  数据字典
     this.pageInit()
   }
@@ -242,10 +270,14 @@ export default {
           }
         }
         .noData{
-          margin: 150px 0 0;
+          margin: 150px 0 295px;
           text-align: center;
         }
       }
     }
+    .pagination{
+      text-align: right;
+      margin: 16px 0;
+    }
   }
 </style>

+ 1 - 1
src/views/SetmealSales/SetmealItemDetailModal.vue

@@ -56,7 +56,7 @@ export default {
   },
   data () {
     return {
-      loading: false,
+      loading: false, //  加载中状态
       isShow: this.openModal, //  弹框是否展示
       columns_item: [
         { title: '服务名称', dataIndex: 'itemName', width: 120, align: 'center' },