接口

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/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}分钟`;
+  }
+}