接口提示

src/Components/index/Classification.vue

@@ -2,12 +2,12 @@
   <view class="classification" :style="{ width: width }">
     <ul class="ul">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in category"
         :key="index"
         :class="{ active: selectedItem === index }"
-        @tap="selectItem(index)"
+        @tap="selectItem(index, item.categoryId)"
       >
-        {{ item }}
+        {{ item.categoryName }}
       </li>
     </ul>
   </view>
@@ -15,16 +15,21 @@
 
 <script setup>
 import { defineProps } from 'vue';
-const items = reactive(['全部烧烤烤肉', '烤肉', '烤鱼', '烤串']);
 const selectedItem = ref(null);
 const props = defineProps({
   width: {
     type: String,
     default: '100%',
   },
+  category: {
+    type: Array,
+    default: () => [],
+  },
 });
-const selectItem = (selectItem) => {
-  selectedItem.value = selectItem;
+const emit = defineEmits(['foodCategory']);
+const selectItem = (index, categoryId) => {
+  selectedItem.value = index;
+  emit('foodCategory', categoryId);
 };
 </script>
 

src/Components/index/ShopCard.vue

@@ -13,8 +13,8 @@
             <text class="four-text">1.2km</text>
           </view>
           <view class="threeBox">
-            <image class="img2" :src="shopCardData.evaluationVos?.[0].avatar" mode="aspectFill" />
-            <text class="one-text">“{{ shopCardData.evaluationVos?.[0].evaluation }}”</text>
+            <image class="img2" :src="shopCardData.evaluationVos[0].avatar" mode="aspectFill" />
+            <text class="one-text">“{{ shopCardData.evaluationVos[0].evaluation }}”</text>
           </view>
           <view class="labelBox">
             <view v-for="(item, index) in shopCardData.labels" :key="index">{{ item }}</view>
@@ -23,13 +23,13 @@
       </view>
     </view>
     <view class="nearby-bootom">
-      <view class="contentBox" v-for="(item, index) in 3" :key="index">
-        <image class="img" src="../../static/index/eatFood.png" mode="aspectFill" />
-        <text class="one">生态素食套餐</text>
+      <view class="contentBox" v-for="(item, index) in shopCardData.simpleProds" :key="index">
+        <image class="img" :src="item.pic" mode="aspectFill" />
+        <text class="one">{{ item.prodName }}</text>
         <view class="price">
           <image class="img" src="../../static/index/groupBuying.png" mode="aspectFill" />
-          <text class="two">￥19.9</text>
-          <text class="three">29.8</text>
+          <text class="two">￥{{ item.price }}</text>
+          <text class="three">{{ item.oriPrice }}</text>
         </view>
       </view>
     </view>
@@ -41,6 +41,9 @@ import { defineProps } from 'vue';
 const props = defineProps({
   shopCardData: {
     type: Object,
+    default: () => ({
+      evaluationVos: [],
+    }),
   },
 });
 </script>
@@ -151,21 +154,27 @@ const props = defineProps({
     padding: 0 20rpx;
     box-sizing: border-box;
     overflow: hidden;
-    justify-content: space-between;
+    // justify-content: space-between;
     .contentBox {
-      width: 220rpx;
+      width: 180rpx;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      margin-right: 40rpx;
       .img {
         width: 180rpx;
         height: 136rpx;
+        border-radius: 16rpx;
       }
       .one {
+        width: 100%;
         font-size: 28rpx;
         font-weight: bold;
         color: #3d3d3d;
         margin: 10rpx 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       .price {
         display: flex;

src/Components/index/Sort.vue

@@ -5,9 +5,9 @@
         v-for="(item, index) in items"
         :key="index"
         :class="{ active: selectedItem === index }"
-        @tap="selectItem(index)"
+        @tap="selectItem(index, item)"
       >
-        {{ item }}
+        {{ item.name }}
       </li>
     </ul>
   </view>
@@ -15,7 +15,13 @@
 
 <script setup>
 import { defineProps } from 'vue';
-const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
+const items = ref([
+  { name: '智能排序', sortName: 'default', sortMode: 'asc' },
+  { name: '距离优先', sortName: 'distance', sortMode: 'asc' },
+  { name: '好评优先', sortName: 'grade', sortMode: 'desc' },
+  { name: '销量优先', sortName: 'monthSoldNum', sortMode: 'desc' },
+]);
+const emit = defineEmits(['sortParams']);
 const selectedItem = ref(null);
 const props = defineProps({
   width: {
@@ -23,8 +29,9 @@ const props = defineProps({
     default: '100%',
   },
 });
-const selectItem = (selectItem) => {
-  selectedItem.value = selectItem;
+const selectItem = (index, item) => {
+  selectedItem.value = index;
+  emit('sortParams', item);
 };
 </script>
 

src/api/index.js

@@ -18,10 +18,11 @@ export function groupBuyList() {
 }
 
 // 根据父级分类id查询子分类列表
-export function getByParentId(id) {
+export function getByParentId(data) {
   return request({
-    url: `/sgyrdd/category/getByParentId?parentId=${id}`,
+    url: `/sgyrdd/category/getByParentId`,
     method: 'GET',
+    data,
   });
 }
 
@@ -76,3 +77,20 @@ export function merchantList(data) {
     data,
   });
 }
+
+// 团购主页优惠券
+export function couponMainList() {
+  return request({
+    url: `/sgyrdd/coupon/couponMainList`,
+    method: 'GET',
+  });
+}
+
+// 领取优惠券
+export function receiveCoupon(data) {
+  return request({
+    url: `/sgyrdd/coupon/receiveCoupon`,
+    method: 'POST',
+    data,
+  });
+}

src/components/index/Search.vue

@@ -8,7 +8,7 @@
         src="../../static/index/magnifyingGlass.png"
         mode="aspectFit|aspectFill|widthFix"
       />
-      <input type="text" :value="test" class="text" />
+      <input type="text" :value="test" class="text" @confirm="search" confirm-type="搜索" />
     </view>
   </view>
 </template>
@@ -26,6 +26,7 @@ const props = defineProps({
     default: 'white',
   },
 });
+const emit = defineEmits(['toSearch']);
 const title = ref('小程序平台');
 const { countInfo, addCount } = useCountStore();
 const test = ref('');
@@ -39,6 +40,10 @@ onMounted(() => {
   });
 });
 
+const search = (res) => {
+  const keyword = res.detail.value;
+  emit('toSearch', keyword);
+};
 const test2 = () => {
   xma.navigateTo({
     url: '/pages/shop/shop',

src/pages/index/index.vue

@@ -2,7 +2,7 @@
   <view class="container">
     <view class="top">
       <!-- 搜索 -->
-      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black">
+      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black" @toSearch="toSearch">
         <image class="food" src="../../static/index/food.png" mode="widthFix" />
       </Search>
       <!-- 类别选择 -->
@@ -34,14 +34,16 @@
     <!-- 红包 -->
     <view class="redEnvelope">
       <view class="title">今日福利</view>
-      <view class="box-red">
-        <view class="redBagBox" v-for="(item, index) in 4" :key="index">
-          <text class="textO">无门槛补贴</text>
-          <text class="textW">￥10</text>
-          <text class="textT">无门槛</text>
-          <view class="textF">领取</view>
+      <scroll-view class="box-red" scroll-x="true" @scroll="scroll">
+        <view class="redBagBox" v-for="(item, index) in coupon" :key="index">
+          <view class="content">
+            <text class="textO">{{ item.activityName }}</text>
+            <text class="textW">￥{{ item.discountValue }}</text>
+          </view>
+          <view v-if="item.numState === 0" class="textF" @tap="receive(item)">领取</view>
+          <view v-else class="textF" @tap="toUse">去使用</view>
         </view>
-      </view>
+      </scroll-view>
       <image class="discount" src="../../static/index/discount.png" mode="widthFix" />
     </view>
     <!-- 贵阳老味道 -->
@@ -143,6 +145,8 @@ import {
   popularityPage,
   getRecommList,
   merchantList,
+  couponMainList,
+  receiveCoupon,
 } from '../../api/index';
 import { timeConversion } from '../../utils/tool';
 const nowTime = ref(new Date().getTime());
@@ -181,6 +185,7 @@ const listParams = {
   lon: 106.68650025025502,
   lat: 26.567192352601154,
 };
+const coupon = ref([]);
 // 轮播图数据
 let lunboData;
 onMounted(() => {
@@ -189,10 +194,7 @@ onMounted(() => {
   nearbyFood();
   recommendedClassification();
   getMerchantList();
-  // test(testJson).then((res) => {
-  //   console.log('打印', res);
-  // });
-  // console.log('testJson', testJson);
+  getCouponMainList();
 });
 // 登录
 // const signIn = () => {
@@ -202,6 +204,25 @@ onMounted(() => {
 //     console.log('登录...');
 //   });
 // };
+// 搜索
+const toSearch = (keyword) => {
+  listParams.keyword = keyword;
+  getMerchantList();
+};
+// 获取优惠券
+const getCouponMainList = () => {
+  couponMainList().then((res) => {
+    coupon.value = res.data.records.slice(0, 10);
+  });
+};
+// 领取优惠券
+const receive = (data) => {
+  if (data.couponType === 'mch' && data.numState === 0) {
+    receiveCoupon([data.couponYzfId]).then((res) => {
+      // console.log('打印', res);
+    });
+  }
+};
 // 获取分类
 const getClassification = () => {
   groupBuyList().then((res) => {
@@ -248,7 +269,6 @@ const more = () => {
 // 轮播图
 const rotatingBroadcast = () => {
   groupImgList().then((res) => {
-    console.log('lunbo', res);
     res.data.forEach((item) => {
       item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.imgUrl;
     });
@@ -278,8 +298,14 @@ const getMerchantList = () => {
     res.data.content.forEach((item) => {
       item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
       if (item.evaluationVos.length > 0) {
-        item.evaluationVos[0].avatar =
-          import.meta.env.VITE_APP_IMG_URL + item.evaluationVos[0].avatar;
+        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(',');
@@ -458,32 +484,43 @@ page {
     .box-red {
       padding: 10rpx 0 0 20rpx;
       box-sizing: border-box;
-      display: flex;
-      align-items: center;
+      white-space: nowrap;
+      width: 80%;
       .redBagBox {
         margin-right: 8rpx;
         width: 124rpx;
         height: 104rpx;
         background: url('../../static/index/redBag.png') no-repeat;
         background-size: 100% 100%;
-        display: flex;
         flex-direction: column;
         align-items: center;
+        display: inline-flex;
+        position: relative;
+        box-sizing: border-box;
+        // overflow: hidden;
         // justify-content: space-evenly;
-        .textO {
-          font-size: 12rpx;
-          color: #fa5151;
-          margin-top: 5rpx;
-        }
-        .textW {
-          font-size: 24rpx;
-          color: #fa5151;
-          font-weight: 600;
-          font-family: Alimama FangYuanTi VF;
-        }
-        .textT {
-          font-size: 12rpx;
-          color: #fa5151;
+        .content {
+          height: 70%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          .textO {
+            width: 124rpx;
+            font-size: 12rpx;
+            color: #fa5151;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .textW {
+            font-size: 24rpx;
+            color: #fa5151;
+            font-weight: 600;
+            font-family: Alimama FangYuanTi VF;
+            // margin-top: 5rpx;
+          }
         }
         .textF {
           width: 56rpx;
@@ -493,7 +530,9 @@ page {
           font-size: 12rpx;
           color: #fa5151;
           text-align: center;
-          margin-top: 10rpx;
+          position: absolute;
+          line-height: 20rpx;
+          bottom: 8rpx;
         }
       }
     }

src/pages/index/listFood.vue

@@ -34,7 +34,8 @@
             ></wd-icon>
           </view>
         </view>
-        <view class="bootom-bottom">
+        <!-- 标签 -->
+        <!-- <view class="bootom-bottom">
           <view
             @tap="choice(index)"
             class="item"
@@ -44,13 +45,13 @@
           >
             {{ item }}
           </view>
-        </view>
+        </view> -->
         <!-- 美食类别 -->
-        <Classification v-show="rotate" />
+        <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" />
+        <Sort v-show="rotate3" @sortParams="sortParams" />
       </view>
     </view>
     <FoodDetails :cardData="cardData" />
@@ -63,31 +64,90 @@ 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 } from '../../api/index';
+import { merchantList, getByParentId } from '../../api/index';
 
+const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
+const active = ref(null);
+const rotate = ref(false);
+const rotate2 = ref(false);
+const rotate3 = ref(false);
+const topBg = ref(null);
+const categoryData = ref([]);
+const paramsId = {
+  parentId: null,
+};
+const listParams = {
+  current: 1,
+  size: 10,
+  lon: 106.68650025025502,
+  lat: 26.567192352601154,
+};
 onMounted(() => {
   getMerchantList();
 });
 
 onLoad((options) => {
   const { type } = options;
-  console.log('打印', type);
   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 business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
+// distance参数来源
+const nearby = (distance) => {
+  console.log('distance', distance);
+  if (distance === 0) {
+    delete listParams.distance;
+  } else {
+    listParams.distance = distance;
+  }
+  getMerchantList();
+};
+// communityName参数来源
+const popular = (communityName) => {
+  console.log('communityName', communityName);
+  listParams.communityName = communityName;
+  if (listParams.area) {
+    delete listParams.area;
+  }
+  getMerchantList();
+};
+// area参数来源
+const region = (area) => {
+  console.log('area', area);
+  listParams.area = area;
+  if (listParams.communityName) {
+    delete listParams.communityName;
+  }
+  getMerchantList();
+};
+// categoryId参数来源
+const foodCategory = (categoryId) => {
+  listParams.categoryIds = [categoryId];
+  getMerchantList();
+};
+// 排序参数来源
+const sortParams = (params) => {
+  const { sortName, sortMode } = params;
+  listParams.sortName = sortName;
+  listParams.sortMode = sortMode;
+  getMerchantList();
+};
+// 根据父级分类id查询子分类列表
+const getByParentIdData = () => {
+  getByParentId(paramsId).then((res) => {
+    categoryData.value = res.data;
+  });
+};
 
-const active = ref(null);
-const rotate = ref(false);
-const rotate2 = ref(false);
-const rotate3 = ref(false);
-const topBg = ref(null);
 const back = () => {
   xma.navigateBack({
     delta: 1,
@@ -95,13 +155,7 @@ const back = () => {
 };
 // 商家列表分页-搜索列表
 const getMerchantList = () => {
-  const data = {
-    current: 1,
-    size: 10,
-    lon: 106.68650025025502,
-    lat: 26.567192352601154,
-  };
-  merchantList(data).then((res) => {
+  merchantList(listParams).then((res) => {
     console.log('商家列表', res);
     res.data.content.forEach((item) => {
       item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;

src/utils/request.js

@@ -20,10 +20,18 @@ export const request = ({ url, data = {}, header, method = 'GET' }) => {
       header,
       method,
       success: (res) => {
+        if (res.data.code !== 0) {
+          xma.showToast({
+            title: res.data.msg,
+            duration: 1000,
+            icon: 'none',
+          });
+        }
         resolve(res.data);
       },
       fail: (e) => {
-        console.log('e', e);
+        console.log('eee', e);
+        reject(e);
       },
     });
   });