refactor:首页接口添加region参数

src/api/home.js

@@ -14,3 +14,19 @@ export function getHomePage(data) {
     },
   });
 }
+
+/**
+ * 获取当前位置
+ * @returns
+ */
+export function getCurrentLocation(data) {
+  return request({
+    url: '/maintain/location',
+    method: 'get',
+    data: data,
+    header: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}
+

src/components/service/index.vue

@@ -1,16 +1,29 @@
 <template>
   <view>
     <view class="sort">
-      <u-tabs :list="list1" @click="click" lineWidth="30" lineColor="#5992bb" :activeStyle="{
-        color: '#5992bb',
-        fontWeight: 'bold',
-      }" :inactiveStyle="{
-  color: '#000',
-}" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" />
+      <u-tabs
+        :list="list1"
+        @click="click"
+        lineWidth="30"
+        lineColor="#5992bb"
+        :activeStyle="{
+          color: '#5992bb',
+          fontWeight: 'bold',
+        }"
+        :inactiveStyle="{
+          color: '#000',
+        }"
+        itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;"
+      />
       <view class="list">
-        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" @tap="$Router.push('/pages/business/service/index')" />
+        <Image
+          src="https://cdn.uviewui.com/uview/album/1.jpg"
+          @tap="$Router.push('/pages/business/service/index')"
+        />
         <view>
-          <view class="item-text">【养车】标题标题标题标题标题标题标题标题……</view>
+          <view class="item-text"
+            >【养车】标题标题标题标题标题标题标题标题……</view
+          >
           <view class="item-flex">
             <view class="star">
               <u-rate :count="count" v-model="value" :size="14" />
@@ -21,7 +34,8 @@
           </view>
           <view class="list-item">
             <view>
-              <view class="price">券后价
+              <view class="price"
+                >券后价
                 <text class="price-item">￥</text>
                 <text class="price-count">19</text>
               </view>
@@ -32,14 +46,22 @@
             </view>
             <view class="appoint">
               <text class="appoint-item" @click="show = true">预约</text>
-              <text class="Buy" @tap="$Router.push('/pages/business/buy/index')">购买</text>
+              <text class="Buy" @tap="$Router.push('/pages/business/buy/index')"
+                >购买</text
+              >
             </view>
           </view>
         </view>
       </view>
 
       <!-- 预约弹出框的实现 -->
-      <u-popup :show="show" mode="center" @close="close" @open="open" :round="20">
+      <u-popup
+        :show="show"
+        mode="center"
+        @close="close"
+        @open="open"
+        :round="20"
+      >
         <view class="popupContent">
           <text class="popupItem">预约服务</text>
           <view class="server">
@@ -209,4 +231,4 @@ export default {
     margin: 20rpx 0 20rpx 30rpx;
   }
 }
-</style>
+</style>

src/pages/tabbar/home/index.vue

@@ -43,16 +43,16 @@
     <view class="home-list">
       <u-grid :border="false" col="5">
         <u-grid-item
-          v-for="(listItem, listIndex) in list1"
-          :key="listIndex"
-          @tap="$Router.push(listItem.url)"
+          v-for="(item, index) in categories"
+          :key="item.id"
+          @tap="handleMenuClick(item)"
         >
           <u-icon
             :customStyle="{ paddingTop: 20 + 'rpx' }"
-            :name="listItem.name"
+            :name="item.icon"
             :size="25"
           ></u-icon>
-          <text class="grid-text">{{ listItem.title }}</text>
+          <text class="grid-text">{{ item.name }}</text>
         </u-grid-item>
       </u-grid>
       <u-toast ref="uToast" />
@@ -67,7 +67,7 @@
       >
         <view slot="title" class="hot-title"> 热门推荐 </view>
       </u-cell>
-      <block v-if="homeData.recommends&&homeData.recommends.length > 0">
+      <block v-if="homeData.recommends && homeData.recommends.length > 0">
         <view>
           <u-grid :border="false" col="2">
             <u-grid-item
@@ -99,7 +99,7 @@
       >
         <view slot="title" class="near-title"> 附近商家 </view>
       </u-cell>
-      <block v-if="homeData.nears&&homeData.nears.length > 0">
+      <block v-if="homeData.nears && homeData.nears.length > 0">
         <view>
           <u-grid :border="false" col="2">
             <u-grid-item
@@ -125,7 +125,7 @@
 </template>
 
 <script>
-import { getHomePage } from '@/api/home';
+import { getHomePage, getCurrentLocation } from '@/api/home';
 import { mapGetters } from 'vuex';
 import RecommendItem from '@/components/merchant/RecommendItem.vue';
 import HotItem from '@/components/merchant/HotItem.vue';
@@ -144,71 +144,8 @@ export default {
         'https://cdn.uviewui.com/uview/swiper/swiper2.png',
         'https://cdn.uviewui.com/uview/swiper/swiper3.png',
       ],
-      list1: [
-        {
-          name: 'photo',
-          title: '养车',
-          url: '/pages/business/classify/index',
-        },
-        {
-          name: 'lock',
-          title: '福利',
-        },
-        {
-          name: 'star',
-          title: '分类',
-        },
-        {
-          name: 'hourglass',
-          title: '自驾游',
-        },
-        {
-          name: 'home',
-          title: '门店',
-        },
-        {
-          name: 'photo',
-          title: '养车',
-        },
-        {
-          name: 'lock',
-          title: '福利',
-        },
-        {
-          name: 'star',
-          title: '分类',
-        },
-        {
-          name: 'hourglass',
-          title: '自驾游',
-        },
-        {
-          name: 'home',
-          title: '门店',
-        },
-        {
-          name: 'photo',
-          title: '养车',
-        },
-        {
-          name: 'lock',
-          title: '福利',
-        },
-        {
-          name: 'star',
-          title: '分类',
-        },
-        {
-          name: 'hourglass',
-          title: '自驾游',
-        },
-        {
-          name: 'home',
-          title: '门店',
-        },
-      ],
       homeData: {
-        categories:[],
+        categories: [],
         nears: [],
         recommends: [],
       },
@@ -229,6 +166,27 @@ export default {
       }
       return 1;
     },
+    categories() {
+      let initData = this.homeData.categories.map(item => {
+        if (!item.icon) {
+          item.icon = 'level';
+        }
+        return item;
+      });
+      let result =
+        initData.length > 14
+          ? initData
+              .splice(0, 14)
+              .concat([
+                {
+                  icon: 'grid-fill',
+                  name: '全部',
+                  type: { code: 'ALL', description: '全部' },
+                },
+              ])
+          : initData.push({ icon: 'grid-fill', name: '全部' });
+      return result;
+    },
   },
   onPageScroll(e) {
     this.scrollTop = e.scrollTop;
@@ -257,17 +215,19 @@ export default {
     click(name) {
       this.$refs.uToast.success(`点击了第${name}个`);
     },
+    // 获取首页数据
     getHomeData(location) {
       getHomePage(location)
         .then(res => {
           this.homeData = res.data;
           // 将分类数据做缓存处理
-          this.$store.commit('SET_CATEGORIES',this.homeData.categories)
+          this.$store.commit('SET_CATEGORIES', this.homeData.categories);
         })
         .catch(err => {
           console.log(err);
         });
     },
+    // 手动选择城市
     manualGetLocation() {
       uni.chooseLocation({
         success: res => {
@@ -278,11 +238,20 @@ export default {
         },
       });
     },
+    // 点击菜单
+    handleMenuClick(item){
+      uni.showToast({
+        title:'跳转至分类页面',
+        icon:'none'
+      })
+    }
   },
   watch: {
     location: {
-      handler: function (newVal, oldVal) {
-        this.getHomeData(newVal);
+      handler: async function (newVal, oldVal) {
+        const result = await getCurrentLocation(newVal);
+        const param = Object.assign({}, { region: result.data.id }, newVal);
+        this.getHomeData(param);
       },
     },
   },
@@ -333,6 +302,7 @@ export default {
   background-color: #ffffff;
   height: 360rpx;
   margin: 0 20rpx 20rpx 20rpx;
+  padding: 20rpx 0;
   border-radius: 10rpx;
 
   .grid-text {