Merge branch 'master' of http://gitlab.platform.xinhuaapp.com/pengjiani/groupPurchase-miniapp

src/App.vue

@@ -18,7 +18,9 @@ onHide(() => {
 const signIn = () => {
   getTokenUser(testJson).then((res) => {
     const token = res.data.access_token;
+    const userInfo = res.data.user_info;
     xma.setStorageSync('Authorization', token);
+    xma.setStorageSync('userInfo', userInfo);
     console.log('登录...');
   });
 };

src/Components/index/FoodDetails.vue

 <template>
   <view class="card" v-for="(item, index) in cardData" :key="index">
-    <image class="img" src="../../static/index/test1.png" mode="widthFix" />
+    <image class="img" :src="item.shopLogo" mode="aspectFill" />
     <view class="right">
-      <text class="text">王将速食超市（可店内用餐）</text>
+      <text class="text">{{ item.shopName }}</text>
       <view class="twoBxo">
-        <text class="one-text">5.0推荐</text>
-        <text class="two-text">￥30/人</text>
-        <text class="three-text">销量1265</text>
+        <text class="one-text">{{ item.grade }}推荐</text>
+        <!-- <text class="two-text">￥30/人</text> -->
+        <text class="three-text">销量{{ item.monthSoldNum }}</text>
         <text class="four-text">1.2km</text>
       </view>
       <view class="threeBox">
-        <image class="img2" src="../../static/index/test2.png" mode="widthFix" />
-        <text class="one-text">“味道浓郁，食材新鲜，童年的老味道”</text>
+        <image class="img2" :src="item.evaluationVos[0].avatar" mode="aspectFill" />
+        <text class="one-text">“{{ item.evaluationVos[0].evaluation }}”</text>
       </view>
       <view class="labelBox">
         <view>卤味爱好者最佳选择</view>
@@ -59,6 +59,8 @@ const props = defineProps({
   box-sizing: border-box;
   .img {
     width: 144rpx;
+    height: 144rpx;
+    border-radius: 16rpx;
   }
   .right {
     margin-left: 20rpx;
@@ -102,6 +104,8 @@ const props = defineProps({
       align-items: center;
       .img2 {
         width: 40rpx;
+        height: 40rpx;
+        border-radius: 50%;
       }
       .one-text {
         font-size: 22rpx;

src/Components/index/Position.vue

@@ -7,33 +7,34 @@
     <view class="right-details" v-show="light2 === 0">
       <text class="nearby-title">我的附近</text>
       <view class="nearby-card">
-        <view @tap="choice2(0)" class="label" :class="light3 === 0 ? 'light3' : ''">附近</view>
-        <view @tap="choice2(1)" class="label" :class="light3 === 1 ? 'light3' : ''">500m</view>
-        <view @tap="choice2(2)" class="label" :class="light3 === 2 ? 'light3' : ''">1km</view>
-        <view @tap="choice2(3)" class="label" :class="light3 === 3 ? 'light3' : ''">3km</view>
-        <view @tap="choice2(4)" class="label" :class="light3 === 4 ? 'light3' : ''">5km</view>
-        <view @tap="choice2(5)" class="label" :class="light3 === 5 ? 'light3' : ''">10km</view>
+        <view @tap="choice2(0, 0)" class="label" :class="light3 === 0 ? 'light3' : ''">附近</view>
+        <view @tap="choice2(1, 0.5)" class="label" :class="light3 === 1 ? 'light3' : ''">500m</view>
+        <view @tap="choice2(2, 1)" class="label" :class="light3 === 2 ? 'light3' : ''">1km</view>
+        <view @tap="choice2(3, 3)" class="label" :class="light3 === 3 ? 'light3' : ''">3km</view>
+        <view @tap="choice2(4, 5)" class="label" :class="light3 === 4 ? 'light3' : ''">5km</view>
+        <view @tap="choice2(5, 10)" class="label" :class="light3 === 5 ? 'light3' : ''">10km</view>
       </view>
       <text class="nearby-title margin">热门地点</text>
       <ul class="ul">
-        <li>花果园购物中心</li>
-        <li>世纪金源购物中心</li>
-        <li>鸿通城</li>
-        <li>花果园中环广场</li>
-        <li>万科大都会</li>
-        <li>喷水池</li>
-        <li>喷水池</li>
+        <li
+          v-for="(item, index) in items"
+          :key="index"
+          :class="{ active: selectedItem === index }"
+          @tap="selectItem(index, item)"
+        >
+          {{ item }}
+        </li>
       </ul>
     </view>
     <view class="right-details2" v-show="light2 === 1">
       <ul class="ul">
         <li
-          v-for="(item, index) in items"
+          v-for="(item, index) in items1"
           :key="index"
-          :class="{ active: selectedItem === index }"
-          @tap="selectItem(index)"
+          :class="{ active: selectedItem1 === index }"
+          @tap="selectItem1(index)"
         >
-          {{ item }}
+          {{ item.name }}
         </li>
       </ul>
       <ul class="ul">
@@ -41,9 +42,9 @@
           v-for="(item, index) in items2"
           :key="index"
           :class="{ active: selectedItem2 === index }"
-          @tap="selectItem2(index)"
+          @tap="selectItem2(index, item.name)"
         >
-          {{ item }}
+          {{ item.name }}
         </li>
       </ul>
     </view>
@@ -52,16 +53,19 @@
 
 <script setup>
 import { defineProps } from 'vue';
+import { getRegion, administration } from '@/api/index';
 const props = defineProps({
   width: {
     type: String,
     default: '100%',
   },
 });
+const emit = defineEmits(['nearby', 'popular', 'region']);
 const light2 = ref(0);
 const light3 = ref(0);
-const items = reactive(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
-const items2 = reactive([
+const items = ref(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
+const items1 = ref(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
+const items2 = ref([
   '全部',
   '百花新城',
   '人民广场',
@@ -72,19 +76,45 @@ const items2 = reactive([
 ]);
 
 const selectedItem = ref(null);
+const selectedItem1 = ref(0);
 const selectedItem2 = ref(null);
+onMounted(() => {
+  getPlace();
+  getAdministration();
+});
+// 热门地点
+const getPlace = () => {
+  getRegion({ city: '贵阳' }).then((res) => {
+    items.value = res.data;
+  });
+};
+// 行政区
+const getAdministration = () => {
+  administration({ parentId: '52' }).then((res) => {
+    items1.value = res.data;
+    items2.value = items1.value[0].children;
+  });
+};
 const choice = (index) => {
   light2.value = index;
 };
-const choice2 = (index) => {
+const choice2 = (index, distance) => {
   light3.value = index;
+  emit('nearby', distance);
 };
-
-const selectItem = (selectItem) => {
-  selectedItem.value = selectItem;
+const selectItem = (index, communityName) => {
+  selectedItem.value = index;
+  selectedItem2.value = null;
+  emit('popular', communityName);
 };
-const selectItem2 = (selectItem) => {
-  selectedItem2.value = selectItem;
+const selectItem1 = (index) => {
+  selectedItem1.value = index;
+  items2.value = items1.value[index].children;
+};
+const selectItem2 = (index, area) => {
+  selectedItem2.value = index;
+  selectedItem.value = null;
+  emit('region', area);
 };
 </script>
 
@@ -93,7 +123,7 @@ const selectItem2 = (selectItem) => {
   position: absolute;
   top: 100%;
   // width: 710rpx;
-  height: 780rpx;
+  min-height: 780rpx;
   border-radius: 0rpx 0rpx 16rpx 16rpx;
   background: #ffffff;
   box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
@@ -103,7 +133,7 @@ const selectItem2 = (selectItem) => {
   .left-classification {
     width: 176rpx;
     background: #f1f1f1;
-    height: 100%;
+    min-height: 780rpx;
     .option {
       text-align: center;
       width: 100%;
@@ -164,6 +194,9 @@ const selectItem2 = (selectItem) => {
         color: #3d3d3d;
         margin-top: 20rpx;
       }
+      .active {
+        color: #fa5151;
+      }
     }
   }
   .right-details2 {

src/api/index.js

@@ -41,3 +41,38 @@ export function popularityPage(data) {
     data,
   });
 }
+
+// 团购主页推荐分类
+export function getRecommList() {
+  return request({
+    url: `/sgyrdd/category/getRecommList`,
+    method: 'GET',
+  });
+}
+
+// 附近筛选-热门地点
+export function getRegion(data) {
+  return request({
+    url: `/sgyrdd/area/hotArea`,
+    method: 'GET',
+    data,
+  });
+}
+
+// 附近筛选-行政区
+export function administration(data) {
+  return request({
+    url: `/sgyrdd/area/tree`,
+    method: 'GET',
+    data,
+  });
+}
+
+// 商家列表分页-搜索列表
+export function merchantList(data) {
+  return request({
+    url: `/sgyrdd/shop/page`,
+    method: 'POST',
+    data,
+  });
+}

src/pages/index/index.vue

@@ -69,26 +69,35 @@
         </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="widthFix" />
-          <text class="one">颜悦养生汤锅...</text>
+        <view class="contentBox" v-for="(item, index) in foodNearbyData" :key="index">
+          <!-- <image class="img" src="../../static/index/eatFood.png" mode="widthFix" /> -->
+          <image class="img" :src="item.shopLogo" mode="aspectFill" />
+          <text class="one">{{ item.shopName }}</text>
           <view class="price">
-            <text class="two">4.2推荐</text>
-            <text class="three">￥36/人</text>
+            <text class="two">{{ item.grade }}推荐</text>
+            <!-- <text class="three">￥36/人</text> -->
           </view>
-          <text class="four">36分钟前有人购买</text>
+          <text class="four" v-show="item.lastBuyTime <= 86400000">
+            {{ timeConversion(item.lastBuyTime) }}前有人购买
+          </text>
         </view>
       </view>
     </view>
     <!-- 推荐 -->
     <view class="recommend">
-      <view class="tabs">
-        <text @tap="choice(0)" class="text" :class="light === 0 ? 'light' : ''">推荐</text>
-        <text @tap="choice(1)" class="text" :class="light === 1 ? 'light' : ''">特色小吃</text>
-        <text @tap="choice(2)" class="text" :class="light === 2 ? 'light' : ''">贵阳老字号</text>
-        <text @tap="choice(3)" class="text" :class="light === 3 ? 'light' : ''">火锅</text>
-        <text @tap="choice(4)" class="text" :class="light === 4 ? 'light' : ''">奶茶</text>
-      </view>
+      <!-- <view class="tabs"> -->
+      <scroll-view class="tabs" scroll-x="true">
+        <text
+          @tap="choice(index, item.categoryId)"
+          v-for="(item, index) in tabsData"
+          :key="index"
+          class="text"
+          :class="light === index ? 'light' : ''"
+        >
+          {{ item.categoryName }}
+        </text>
+      </scroll-view>
+      <!-- </view> -->
       <view class="recommend-bottom">
         <view class="box" @tap="locationFiltering">
           <text class="text">位置距离</text>
@@ -105,18 +114,18 @@
         </view>
       </view>
       <!-- 位置定位 -->
-      <Position v-show="rotate" />
+      <Position v-show="rotate" @nearby="nearby" @popular="popular" @region="region" />
     </view>
     <!-- 美食卡片 -->
     <FoodDetails :cardData="cardData" />
     <!-- 店铺卡片推荐 -->
     <ShopCard />
     <!-- 美食卡片 -->
-    <FoodDetails :cardData="cardData" />
+    <FoodDetails :cardData="cardData1" />
     <!-- 营销模块 -->
     <Marketing />
     <!-- 美食卡片 -->
-    <FoodDetails :cardData="cardData" />
+    <FoodDetails :cardData="cardData2" />
   </view>
 </template>
 
@@ -128,30 +137,70 @@ import FoodDetails from '../../components/index/FoodDetails.vue';
 import ShopCard from '../../components/index/ShopCard.vue';
 import Marketing from '../../components/index/Marketing.vue';
 import Position from '../../components/index/Position.vue';
-import { groupBuyList, groupImgList, popularityPage } from '../../api/index';
+import {
+  groupBuyList,
+  groupImgList,
+  popularityPage,
+  getRecommList,
+  merchantList,
+} from '../../api/index';
+import { timeConversion } from '../../utils/tool';
+const nowTime = ref(new Date().getTime());
 // import testJson from '../../static/json/test.json';
 // import { getToken } from '../../utils/auth';
 const title = ref('小程序平台');
 const { countInfo, addCount } = useCountStore();
+// 附近美食
+const foodNearbyData = ref([]);
+const tabsData = ref([]);
+
+const light = ref(0);
+const rotate = ref(false);
+const classificationT = ref([
+  { img: 'hotPot', text: '火锅' },
+  { img: 'barbecue', text: '烧烤烤肉' },
+  { img: 'stirFriedDishes', text: '地方菜系' },
+  { img: 'hamburg', text: '小吃快餐' },
+]);
+const classificationB = ref([
+  { img: 'seafood', text: '鱼鲜海鲜' },
+  { img: 'foreignLand', text: '异域风味' },
+  { img: 'selfHelp', text: '自助餐' },
+  { img: 'drink', text: '饮品店' },
+  { img: 'bread', text: '面包蛋糕' },
+]);
+const cardData = ref([]);
+const cardData1 = ref([]);
+const cardData2 = ref([]);
+const current = ref(0);
+const swiperList = ref(['../../static/index/guiyang.png', '../../static/index/guiyang.png']);
+const listParams = {
+  current: 1,
+  size: 10,
+  lon: 106.68650025025502,
+  lat: 26.567192352601154,
+};
 // 轮播图数据
 let lunboData;
 onMounted(() => {
   getClassification();
   rotatingBroadcast();
   nearbyFood();
+  recommendedClassification();
+  getMerchantList();
   // test(testJson).then((res) => {
   //   console.log('打印', res);
   // });
   // console.log('testJson', testJson);
 });
 // 登录
-const signIn = () => {
-  getTokenUser(testJson).then((res) => {
-    const token = res.data.access_token;
-    xma.setStorageSync('Authorization', token);
-    console.log('登录...');
-  });
-};
+// const signIn = () => {
+//   getTokenUser(testJson).then((res) => {
+//     const token = res.data.access_token;
+//     xma.setStorageSync('Authorization', token);
+//     console.log('登录...');
+//   });
+// };
 // 获取分类
 const getClassification = () => {
   groupBuyList().then((res) => {
@@ -165,15 +214,28 @@ const getClassification = () => {
 };
 // 附近人气美食分页
 const nearbyFood = () => {
-  console.log('位置名称：');
-  xma.getLocation({
-    isHighAccuracy: true,
-    success: function (res) {
-      console.log('位置名称：', res);
-    },
-    fail: function (err) {
-      console.log('获取位置失败：', err);
-    },
+  // xma.getLocation({
+  //   isHighAccuracy: true,
+  //   success: function (res) {
+  //     console.log('经度', res.longitude);
+  //     console.log('维度', res.latitude);
+  //   },
+  //   fail: function (err) {
+  //     console.log('获取位置失败：', err);
+  //   },
+  // });
+  const data = {
+    current: 1,
+    size: 3,
+    lon: 106.68650025025502,
+    lat: 26.567192352601154,
+  };
+  popularityPage(data).then((res) => {
+    res.data.content.forEach((item) => {
+      item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
+      item.lastBuyTime = new Date().getTime() - new Date(item.lastBuyTime).getTime();
+    });
+    foodNearbyData.value = res.data.content;
   });
 };
 // 轮播图
@@ -189,36 +251,71 @@ const rotatingBroadcast = () => {
     });
   });
 };
-const light = ref(0);
-const rotate = ref(false);
-const classificationT = ref([
-  { img: 'hotPot', text: '火锅' },
-  { img: 'barbecue', text: '烧烤烤肉' },
-  { img: 'stirFriedDishes', text: '地方菜系' },
-  { img: 'hamburg', text: '小吃快餐' },
-]);
-const classificationB = ref([
-  { img: 'seafood', text: '鱼鲜海鲜' },
-  { img: 'foreignLand', text: '异域风味' },
-  { img: 'selfHelp', text: '自助餐' },
-  { img: 'drink', text: '饮品店' },
-  { img: 'bread', text: '面包蛋糕' },
-]);
-const cardData = reactive([
-  {
-    text: '测试',
-  },
-  {
-    text: '测试',
-  },
-  {
-    text: '测试',
-  },
-]);
-const current = ref(0);
-const swiperList = ref(['../../static/index/guiyang.png', '../../static/index/guiyang.png']);
-const choice = (index) => {
+// 团购主页推荐分类
+const recommendedClassification = () => {
+  getRecommList().then((res) => {
+    tabsData.value = res.data;
+    tabsData.value.unshift({ categoryName: '推荐' });
+  });
+};
+// 商家列表分页-搜索列表
+const getMerchantList = () => {
+  // const data = {
+  //   current: 1,
+  //   size: 10,
+  //   lon: 106.68650025025502,
+  //   lat: 26.567192352601154,
+  // };
+  merchantList(listParams).then((res) => {
+    console.log('商家列表', res);
+    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;
+      }
+    });
+    cardData.value = res.data.content.slice(0, 2);
+    cardData1.value = res.data.content.slice(2, 4);
+    cardData2.value = res.data.content.slice(4);
+  });
+};
+// 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();
+};
+// tabs
+const choice = (index, categoryId) => {
   light.value = index;
+  listParams.categoryIds = [categoryId];
+  if (index === 0) {
+    delete listParams.categoryIds;
+  }
+  getMerchantList();
 };
 // 金刚区分类选择
 const jingang = (id) => {
@@ -457,12 +554,18 @@ page {
         flex-direction: column;
         align-items: flex-start;
         .img {
+          height: 160rpx;
           width: 220rpx;
+          border-radius: 16rpx;
         }
         .one {
           font-size: 28rpx;
           font-weight: bold;
           color: #3d3d3d;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 100%;
         }
         .price {
           .two {
@@ -492,13 +595,28 @@ page {
     margin: 0 auto;
     margin-top: 10rpx;
     position: relative;
+    uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
+      /* 隐藏滚动条，但依旧具备可以滚动的功能 */
+      display: none;
+      width: 0 !important;
+      height: 0 !important;
+      -webkit-appearance: none;
+      background: transparent;
+      color: transparent;
+    }
     .tabs {
       padding-top: 20rpx;
+      white-space: nowrap;
+      height: 60rpx;
       .text {
         font-size: 24rpx;
         color: #d8d8d8;
-        margin-left: 40rpx;
+        margin: 0 20rpx;
         font-weight: bold;
+        display: inline-block;
+      }
+      .text:nth-child(1) {
+        margin-left: 40rpx;
       }
       .light {
         background: linear-gradient(241deg, #ff8f1f -7%, #fa5151 93%);
@@ -526,7 +644,7 @@ page {
       box-sizing: border-box;
       justify-content: space-between;
       align-items: center;
-      margin-top: 40rpx;
+      margin-top: 20rpx;
       .box {
         display: flex;
         align-items: center;

src/utils/tool.js

+export function timeConversion(diffInMilliseconds) {
+  // 计算总秒数
+  const totalSeconds = Math.abs(Math.floor(diffInMilliseconds / 1000));
+
+  // 计算天数、小时数和分钟数
+  const days = Math.floor(totalSeconds / (24 * 60 * 60));
+  const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+
+  // 返回包含天数、小时数和分钟数的对象
+  if (hours === 0) {
+    return `${minutes}分钟`;
+  } else if (days === 0) {
+    return `${hours}小时${minutes}分钟`;
+  } else {
+    return `${days}天${hours}小时${minutes}分钟`;
+  }
+}