接口接入

src/Components/index/Classification.vue

@@ -38,7 +38,7 @@ const selectItem = (index, categoryId) => {
   position: absolute;
   top: 100%;
   // width: 100%;
-  // height: 212rpx;
+  max-height: 780rpx;
   border-radius: 0rpx 0rpx 16rpx 16rpx;
   background: #ffffff;
   box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
@@ -47,6 +47,7 @@ const selectItem = (index, categoryId) => {
   display: flex;
   padding-bottom: 20rpx;
   box-sizing: border-box;
+  overflow-y: scroll;
   .ul {
     padding-left: 60rpx;
     li {

src/Components/index/Position.vue

@@ -123,7 +123,7 @@ const selectItem2 = (index, area) => {
   position: absolute;
   top: 100%;
   // width: 710rpx;
-  min-height: 780rpx;
+  height: 780rpx;
   border-radius: 0rpx 0rpx 16rpx 16rpx;
   background: #ffffff;
   box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
@@ -188,6 +188,8 @@ const selectItem2 = (index, area) => {
     }
     .ul {
       padding-left: 60rpx;
+      overflow-y: scroll;
+      height: 65%;
       li {
         list-style-type: none;
         font-size: 22rpx;

src/api/index.js

@@ -94,3 +94,29 @@ export function receiveCoupon(data) {
     data,
   });
 }
+
+// 领券中心-分类列表
+export function getCoupon() {
+  return request({
+    url: `/sgyrdd/dict/key/coupon_classify`,
+    method: 'GET',
+  });
+}
+
+// 领券中心-店铺商品列表分页
+export function getShopAndProdPage(data) {
+  return request({
+    url: `/sgyrdd/couponShop/shopAndProdPage`,
+    method: 'GET',
+    data,
+  });
+}
+
+// 获取指定类型轮播图
+export function getByType(data) {
+  return request({
+    url: `/sgyrdd/carousel/getByType`,
+    method: 'GET',
+    data,
+  });
+}

src/pages.json

@@ -5,7 +5,7 @@
 			"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
 		}
 	},
-	"pages": [ // pages 数组中第一项表示应用启动页
+	"pages": [ 
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -96,7 +96,8 @@
 		{
 			"path": "pages/index/coupon",
 			"style": {
-				"navigationBarTitleText": "优惠券详情"
+				"navigationBarTitleText": "优惠券详情",
+				"enablePullDownRefresh": true
 			}
 		}
 	],

src/pages/index/coupon.vue

 <template>
   <view class="container">
     <scroll-view class="tabs" scroll-x="true" @scroll="scroll">
-      <text class="tab" v-for="(item, index) in tabs" :key="index">{{ item }}</text>
+      <text
+        @tap="choice(index, item.value)"
+        class="tab"
+        :class="{ light: active === index }"
+        v-for="(item, index) in tabs"
+        :key="index"
+      >
+        {{ item.label }}
+      </text>
     </scroll-view>
     <view class="itemBox">
-      <view class="item"></view>
+      <view class="item" v-for="(item, index) in listData" :key="index">
+        <image class="commodity" :src="item.shopLogo" mode="aspectFill" />
+        <view class="describe">
+          <text class="title">{{ item.shopName }}</text>
+          <view class="oneBox">
+            <text class="price">￥{{ item.price }}</text>
+            <view class="afterTheCoupon">
+              <text class="afterTheCoupon1">券后￥</text>
+              <text class="afterTheCoupon2">{{ item.price - item.reduceAmount }}</text>
+            </view>
+          </view>
+          <view class="twoBox">
+            <text class="coupon">商家券</text>
+            <text class="discounted">已优惠￥{{ item.reduceAmount }}元</text>
+          </view>
+          <view class="threeBox">
+            <text class="fullReduction">{{ item.couponName }}</text>
+            <view class="receive">领劵</view>
+          </view>
+        </view>
+      </view>
+      <view
+        style="width: 100%; text-align: center; font-size: 24rpx; margin: 10rpx 0; color: #888989"
+        v-if="show"
+      >
+        没有更多啦~
+      </view>
     </view>
   </view>
 </template>
 
 <script setup>
 import {} from 'vue';
+import { getCoupon, getShopAndProdPage } from '../../api/index';
 const tabs = ref(['推荐', '附近美食', '果蔬生鲜', '数码商城', '小吃快餐', '数码商城', '餐饮券']);
+const params = {
+  current: 1,
+  size: 6,
+  lng: 106.68650025025502,
+  lat: 26.567192352601154,
+};
+let total;
+const active = ref(0);
+const listData = ref([]);
+const show = ref(false);
+// 获取优惠券
+onMounted(() => {
+  getCoupons();
+  getShop();
+});
+
+// 数据重置
+const reset = () => {
+  params.current = 1;
+  params.size = 6;
+  listData.value = [];
+  show.value = false;
+};
+const choice = (index, value) => {
+  reset();
+  active.value = index;
+  if (value === '999') {
+    delete params.classification;
+  } else {
+    params.classification = value;
+  }
+  getShop();
+  // emit('nearby', distance);
+};
+// 领券中心-分类列表
+const getCoupons = () => {
+  getCoupon().then((res) => {
+    res.data.unshift({ label: '推荐', value: '999' });
+    tabs.value = res.data;
+    console.log('优惠券', res);
+  });
+};
+
+// 领券中心-店铺商品列表分页
+const getShop = () => {
+  xma.showLoading({
+    title: '加载中',
+  });
+  getShopAndProdPage(params).then((res) => {
+    xma.hideLoading();
+    total = res.data.total;
+    res.data.records.forEach((item) => {
+      item.pic = import.meta.env.VITE_APP_IMG_URL + item.pic;
+      item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
+    });
+    console.log('优惠券', res);
+    listData.value = [...listData.value, ...res.data.records];
+  });
+};
+
+onPullDownRefresh(() => {
+  getCoupons();
+  getShop();
+});
+onReachBottom(() => {
+  if (listData.value.length < total) {
+    params.current++;
+    getShop();
+    return;
+  }
+  show.value = true;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -29,19 +136,126 @@ page {
     color: #333333;
     font-weight: bold;
     background: white;
+    position: sticky;
+    top: 0;
+    z-index: 99;
     .tab {
       display: inline-block;
       margin-right: 40rpx;
     }
+    .light {
+      color: #f12a2a;
+    }
   }
   .itemBox {
     padding: 0 23rpx;
     border-radius: 16rpx 16rpx 16rpx 16rpx;
     margin-top: 20rpx;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
     .item {
       width: 341rpx;
-      height: 674rpx;
+      // height: 674rpx;
       background: #ffffff;
+      border-radius: 16rpx 16rpx 16rpx 16rpx;
+      margin-bottom: 18rpx;
+      box-sizing: border-box;
+      padding-bottom: 20rpx;
+      .commodity {
+        width: 341rpx;
+        height: 401rpx;
+        border-radius: 16rpx 16rpx 16rpx 16rpx;
+      }
+      .describe {
+        padding: 0 12rpx;
+        box-sizing: border-box;
+        .title {
+          font-weight: bold;
+          color: #333333;
+          font-size: 26rpx;
+          font-family:
+            PingFang SC,
+            PingFang SC;
+        }
+        .oneBox {
+          display: flex;
+          align-items: end;
+          margin: 20rpx 0;
+          .price {
+            font-weight: bold;
+            color: #f12a2a;
+            font-size: 28rpx;
+          }
+          .afterTheCoupon {
+            border-radius: 21rpx 21rpx 21rpx 21rpx;
+            // height: 41rpx;
+            text-align: center;
+            padding: 0 10rpx;
+            background: #f12a2a;
+            margin-left: 20rpx;
+            display: flex;
+            align-items: center;
+            .afterTheCoupon1 {
+              color: #ffffff;
+              font-size: 20rpx;
+            }
+            .afterTheCoupon2 {
+              color: #ffffff;
+              font-size: 36rpx;
+            }
+          }
+        }
+        .twoBox {
+          display: flex;
+          align-items: center;
+          .coupon {
+            text-align: center;
+            height: 32rpx;
+            font-size: 22rpx;
+            line-height: 32rpx;
+            min-width: 73rpx;
+            color: #ffffff;
+            border-radius: 6rpx 6rpx 6rpx 6rpx;
+            background: linear-gradient(90deg, #ff4d33 0%, #ff1d2e 100%);
+          }
+          .discounted {
+            font-size: 20rpx;
+            min-width: 136rpx;
+            height: 28rpx;
+            color: #f12a2a;
+            font-weight: 400;
+            background: #feebf0;
+            border-radius: 6rpx 6rpx 6rpx 6rpx;
+            line-height: 28rpx;
+            text-align: center;
+          }
+        }
+        .threeBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 13rpx;
+          .fullReduction {
+            font-size: 20rpx;
+            font-family:
+              PingFang SC,
+              PingFang SC;
+            font-weight: 400;
+            color: #f12a2a;
+          }
+          .receive {
+            background: linear-gradient(90deg, #ff4d33 0%, #ff1d2e 100%);
+            border-radius: 20rpx 20rpx 20rpx 20rpx;
+            height: 35rpx;
+            width: 81rpx;
+            text-align: center;
+            line-height: 35rpx;
+            color: #ffffff;
+            font-size: 24rpx;
+          }
+        }
+      }
     }
   }
 }

src/pages/index/index.vue

@@ -133,6 +133,12 @@
     <Marketing />
     <!-- 美食卡片 -->
     <FoodDetails :cardData="cardData2" />
+    <view
+      style="width: 100%; text-align: center; font-size: 24rpx; margin: 10rpx 0; color: #888989"
+      v-if="show"
+    >
+      没有更多啦~
+    </view>
   </view>
 </template>
 
@@ -162,7 +168,7 @@ const { countInfo, addCount } = useCountStore();
 // 附近美食
 const foodNearbyData = ref([]);
 const tabsData = ref([]);
-
+const show = ref(false);
 const light = ref(0);
 const rotate = ref(false);
 const classificationT = ref([
@@ -191,6 +197,7 @@ const listParams = {
   lat: 26.567192352601154,
 };
 const coupon = ref([]);
+let total;
 // 轮播图数据
 let lunboData;
 onMounted(() => {
@@ -296,16 +303,58 @@ const recommendedClassification = () => {
     tabsData.value.unshift({ categoryName: '推荐' });
   });
 };
+// 重置数据
+const reset = () => {
+  listParams.current = 1;
+  shopCardData.value = {};
+  cardData.value = [];
+  cardData1.value = [];
+  cardData2.value = [];
+  show.value = false;
+};
 // 商家列表分页-搜索列表
 const getMerchantList = () => {
+  xma.showLoading({
+    title: '加载中',
+  });
+  merchantList(listParams).then((res) => {
+    xma.hideLoading();
+    total = res.data.totalElements;
+    res.data.content.forEach((item) => {
+      item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
+      if (item.evaluationVos.length > 0) {
+        item.simpleProds.forEach((item) => {
+          item.avatar = import.meta.env.VITE_APP_IMG_URL + item.avatar;
+        });
+      }
+      if (item.simpleProds.length > 0) {
+        item.simpleProds.forEach((item) => {
+          item.pic = import.meta.env.VITE_APP_IMG_URL + item.pic;
+        });
+      }
+      if (item.labels) {
+        item.labels = item.labels.split(',');
+      }
+    });
+    shopCardData.value = res.data.content[0];
+    cardData.value = res.data.content.slice(1, 3);
+    cardData1.value = res.data.content.slice(3, 5);
+    cardData2.value = res.data.content.slice(5);
+  });
+};
+// 商家列表分页-搜索列表(分页)
+const getMerchantListPaging = () => {
   // const data = {
   //   current: 1,
   //   size: 10,
   //   lon: 106.68650025025502,
   //   lat: 26.567192352601154,
   // };
+  xma.showLoading({
+    title: '加载中',
+  });
   merchantList(listParams).then((res) => {
-    console.log('商家列表', res);
+    xma.hideLoading();
     res.data.content.forEach((item) => {
       item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
       if (item.evaluationVos.length > 0) {
@@ -322,15 +371,13 @@ const getMerchantList = () => {
         item.labels = item.labels.split(',');
       }
     });
-    shopCardData.value = res.data.content[0];
-    cardData.value = res.data.content.slice(1, 3);
-    cardData1.value = res.data.content.slice(3, 5);
-    cardData2.value = res.data.content.slice(5);
+    cardData2.value = [...cardData2.value, ...res.data.content];
   });
 };
 // distance参数来源
 const nearby = (distance) => {
   console.log('distance', distance);
+  reset();
   if (distance === 0) {
     delete listParams.distance;
   } else {
@@ -341,6 +388,7 @@ const nearby = (distance) => {
 // communityName参数来源
 const popular = (communityName) => {
   console.log('communityName', communityName);
+  reset();
   listParams.communityName = communityName;
   if (listParams.area) {
     delete listParams.area;
@@ -350,6 +398,7 @@ const popular = (communityName) => {
 // area参数来源
 const region = (area) => {
   console.log('area', area);
+  reset();
   listParams.area = area;
   if (listParams.communityName) {
     delete listParams.communityName;
@@ -358,6 +407,7 @@ const region = (area) => {
 };
 // tabs
 const choice = (index, categoryId) => {
+  reset();
   light.value = index;
   listParams.categoryIds = [categoryId];
   if (index === 0) {
@@ -388,22 +438,22 @@ const locationFiltering = () => {
 };
 const handleClick = (e) => {
   const index = e.index;
-  if (index === 0) {
-    xma.navigateTo({
-      url: '/pages/index/listFood?type=1',
-    });
-  }
+  xma.navigateTo({
+    url: lunboData[index].link,
+  });
 };
 const onChange = (e) => {
   // console.log(e);
 };
-// function toUIComponentsDoc() {
-//   window.open('https://wot-design-uni.netlify.app/component/button.html');
-// }
-
-// function onHandleClick() {
-//   addCount();
-// }
+// 触底加载
+onReachBottom(() => {
+  if (cardData2.value.length + 5 < total) {
+    listParams.current++;
+    getMerchantListPaging();
+    return;
+  }
+  show.value = true;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -655,7 +705,9 @@ page {
     box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
     margin: 0 auto;
     margin-top: 10rpx;
-    position: relative;
+    position: sticky;
+    top: 0;
+    z-index: 99;
     uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
       /* 隐藏滚动条，但依旧具备可以滚动的功能 */
       display: none;

src/pages/index/listFood.vue

@@ -64,7 +64,7 @@ import FoodDetails from '../../components/index/FoodDetails.vue';
 import Classification from '../../components/index/Classification.vue';
 import Position from '../../components/index/Position.vue';
 import Sort from '../../components/index/Sort.vue';
-import { merchantList, getByParentId } from '../../api/index';
+import { merchantList, getByParentId, getByType } from '../../api/index';
 
 const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
 const active = ref(null);
@@ -87,19 +87,12 @@ onMounted(() => {
 });
 
 onLoad((options) => {
-  const { type } = options;
-  switch (type) {
-    case '1':
-      topBg.value = 'url(../../static/index/taste.png)';
-      paramsId.parentId = '3262';
-      getByParentIdData();
-      break;
-    case '2':
-      topBg.value = 'url(../../static/index/foodBg.png)';
-      paramsId.parentId = '3263';
-      getByParentIdData();
-      break;
-  }
+  const { categoryId, place } = options;
+  paramsId.parentId = categoryId;
+  getByParentIdData();
+  getByType({ place }).then((res) => {
+    topBg.value = `url(${import.meta.env.VITE_APP_IMG_URL + res.data[0].imgUrl})`;
+  });
 });
 // distance参数来源
 const nearby = (distance) => {
@@ -212,7 +205,8 @@ page {
 }
 .head {
   width: 100%;
-  height: 480rpx;
+  margin-bottom: 10rpx;
+  // height: 480rpx;
   .top {
     height: 356rpx;
     // background: url('../../static/index/taste.png');
@@ -225,7 +219,8 @@ page {
     }
   }
   .bootom {
-    height: 124rpx;
+    // height: 124rpx;
+    height: 80rpx;
     display: flex;
     flex-direction: column;
     justify-content: space-around;