详情分类

src/Components/index/FoodDetails.vue

 <template>
-  <view @tap="toShop(item.shopId)" class="card" v-for="(item, index) in cardData" :key="index">
+  <view @tap="toShop(item.shopId)" class="card" v-for="item in cardData" :key="item.shopId">
     <image class="img" :src="item.shopLogo" mode="aspectFill" />
     <view class="right">
       <text class="text">{{ item.shopName }}</text>

src/pages/index/foodClassification.vue

 <template>
-  <div class="container">
+  <div class="container" style="padding-bottom: 10rpx">
     <view class="bg-img"></view>
     <view class="top">
       <!-- 搜索 -->
@@ -68,7 +68,7 @@
         </view>
       </view>
       <view class="bootom-bottom">
-        <view
+        <!-- <view
           @tap="choice(index)"
           class="item"
           :class="{ light: active === index }"
@@ -76,21 +76,26 @@
           :key="index"
         >
           {{ item }}
-        </view>
+        </view> -->
       </view>
       <!-- 美食类别 -->
       <Classification v-show="rotate" :category="categoryData" @foodCategory="foodCategory" />
       <!-- 附近筛选 -->
-      <Position v-show="rotate2" />
+      <Position v-show="rotate2" @nearby="nearby" @popular="popular" @region="region" />
       <!-- 排序筛选 -->
       <Sort v-show="rotate3" />
     </view>
     <FoodDetails :cardData="cardData" />
+    <view
+      style="width: 100%; text-align: center; font-size: 24rpx; margin-top: 10rpx"
+      v-if="params.isEnd"
+    >
+      没有更多啦~
+    </view>
   </div>
 </template>
 
 <script setup>
-import {} from 'vue';
 import FoodDetails from '../../components/index/FoodDetails.vue';
 import Search from '../../components/index/Search.vue';
 import Classification from '../../components/index/Classification.vue';
@@ -98,6 +103,7 @@ import Position from '../../components/index/Position.vue';
 import Sort from '../../components/index/Sort.vue';
 import { getByParentId, merchantList, prodSpecial } from '../../api/index';
 
+const isLoadReachBottom = ref(null);
 const imgUrl = import.meta.env.VITE_APP_IMG_URL;
 const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
 const active = ref(null);
@@ -109,11 +115,12 @@ const categoryId = ref(null);
 const topDiscountedProducts = ref([]);
 const params = ref({
   current: 1,
-  size: 10,
+  size: 15,
   // lon,
   // lat,
   lon: 106.68650025025502,
   lat: 26.567192352601154,
+  isEnd: false,
 });
 const pics = ref(null);
 onLoad((option) => {
@@ -129,12 +136,65 @@ onMounted(() => {
     getMerchantList(lat, lon);
   });
 });
+// distance参数来源
+const nearby = (distance) => {
+  console.log('distance', distance);
+  if (distance === 0) {
+    delete params.value.distance;
+  } else {
+    params.value.distance = distance;
+  }
+  refresh().then(() => {
+    getMerchantList();
+  });
+};
+// communityName参数来源
+const popular = (communityName) => {
+  params.value.communityName = communityName;
+  if (params.value.area) {
+    delete params.value.area;
+  }
+  refresh().then(() => {
+    getMerchantList();
+  });
+};
+// area参数来源
+const region = (area) => {
+  console.log('area', area);
+  params.value.area = area;
+  if (params.value.communityName) {
+    delete params.value.communityName;
+  }
+  refresh().then(() => {
+    getMerchantList();
+  });
+};
+onReachBottom(() => {
+  console.log('到底了');
+  if (isLoadReachBottom.value === true) return;
+  isLoadReachBottom.value = true;
+  getMerchantList().then(() => {
+    isLoadReachBottom.value = false;
+  });
+});
 // categoryId参数来源
 const foodCategory = (categoryId) => {
-  console.log('categoryId', categoryId);
-
   params.value.categoryIds = [categoryId];
+  refresh().then(() => {
+    getMerchantList();
+  });
 };
+/**
+ * @description: 刷新
+ */
+function refresh() {
+  return new Promise((resolve, reject) => {
+    cardData.value = [];
+    params.value.current = 1;
+    params.value.isEnd = false;
+    resolve();
+  });
+}
 // 根据父级分类id查询子分类列表
 const query = (parentId) => {
   getByParentId(parentId).then((res) => {
@@ -152,25 +212,10 @@ const prodSpecialFn = () => {
     topDiscountedProducts.value = res.data.data;
   });
 };
-// onLoad(option) {
-//     //option为object类型，会序列化上个页面传递的参数
-//     console.log(option.id); //打印出上个页面传递的参数。
-//     console.log(option.name); //打印出上个页面传递的参数。
-//   },
 const choice = (index) => {
   active.value = index;
 };
-const cardData = ref([
-  {
-    text: '测试',
-  },
-  {
-    text: '测试',
-  },
-  {
-    text: '测试',
-  },
-]);
+const cardData = ref([]);
 
 const locationFiltering = (index) => {
   switch (index) {
@@ -193,15 +238,19 @@ const locationFiltering = (index) => {
 };
 // 商家列表分页-搜索列表
 const getMerchantList = () => {
-  const data = {
-    current: 1,
-    size: 10,
-    // lon,
-    // lat,
-    lon: 106.68650025025502,
-    lat: 26.567192352601154,
-  };
-  merchantList(data).then((res) => {
+  if (params.value.isEnd === true)
+    return new Promise((resolve) => {
+      resolve();
+    });
+  xma.showLoading({
+    title: '加载中...',
+    mask: false,
+  });
+  return merchantList(params.value).then((res) => {
+    if (res.data.content.length < params.value.size) {
+      params.value.isEnd = true;
+    }
+    params.value.current += 1;
     res.data.content.forEach((item) => {
       item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
       if (item.evaluationVos.length > 0) {
@@ -212,7 +261,13 @@ const getMerchantList = () => {
         item.labels = item.labels.split(',');
       }
     });
-    cardData.value = res.data.content;
+    return new Promise((resolve) => {
+      cardData.value = cardData.value.concat(res.data.content);
+      xma.hideLoading();
+      setTimeout(() => {
+        resolve();
+      }, 500);
+    });
   });
 };
 function getLocationFn() {

src/pages/shop/confirmOrder.vue

@@ -190,7 +190,11 @@ onShow(() => {
             duration: 2000,
           });
           break;
-        case '2' || '3':
+        case '2':
+          xma.redirectTo({
+            url: `/pages/shop/paymentSuccessful?outTradeNos=${outTradeNos.value}`,
+          });
+        case '3':
           xma.redirectTo({
             url: `/pages/shop/paymentSuccessful?outTradeNos=${outTradeNos.value}`,
           });