Browse Source

fix(client): 优化首页代码逻辑

yizhiyang 10 months ago
parent
commit
e95a639125
4 changed files with 112 additions and 130 deletions
  1. 0 1
      src/api/client/home.js
  2. 73 111
      src/pages/home/index.vue
  3. 14 11
      src/pagesHome/storeList/index.vue
  4. 25 7
      src/store/modules/data.js

+ 0 - 1
src/api/client/home.js

@@ -95,7 +95,6 @@ export function hotMerchant(id) {
   });
 }
 
-
 /**
  *@description 首页接口 - 分页获取附近商家
  */

+ 73 - 111
src/pages/home/index.vue

@@ -2,8 +2,8 @@
   <view class="container">
     <view class="container-top-box">
       <view class="top-title">
-        <view class="address" @click.stop="manualGetLocation">
-          <span>{{ nowAddress }}</span>
+        <view class="address" @click.stop="$u.route('/pagesHome/homeAddress/index')">
+          <view>{{ location.district.name || nowAddress }}</view>
           <u-icon name="arrow-down-fill" color="#333333" size="10"></u-icon>
         </view>
         <view class="title">车旅程</view>
@@ -13,13 +13,11 @@
         <u-search
           placeholder="请输入搜索内容"
           :showAction="false"
-          v-model="keyword"
-          @click="$Router.push('/pagesHome/homeSearch/index')"
+          @click="$u.route('/pagesHome/homeSearch/index')"
           bgColor="#fff"
           :disabled="true"
         />
       </view>
-
       <view class="top-swiper-box">
         <u-swiper :list="swiperUrlList" @click="handlerSwiperSkip" indicator circular />
       </view>
@@ -47,7 +45,7 @@
           <view class="top-title">热门推荐</view>
           <view
             class="top-more"
-            @click="$Router.push('/pagesHome/popularNearby/index?queryType=1')"
+            @click="$u.route('/pagesHome/popularNearby/index?queryType=1')"
           >
             <span>查看更多</span>
             <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
@@ -58,7 +56,7 @@
             class="item"
             v-for="(item, index) in homeData.recommends"
             :key="item.id"
-            @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
+            @click="$u.route(`/pagesHome/marketer/index?id=${item.id}`)"
           >
             <home-store v-if="index < 4" :item="item" isType="hot"></home-store>
           </view>
@@ -70,7 +68,7 @@
           <view class="top-title">附近商家</view>
           <view
             class="top-more"
-            @click="$Router.push('/pagesHome/popularNearby/index?queryType=0')"
+            @click="$u.route('/pagesHome/popularNearby/index?queryType=0')"
           >
             <span>查看更多</span>
             <u-icon name="arrow-right" color="#999999" size="14"></u-icon>
@@ -81,7 +79,7 @@
             class="item"
             v-for="(item, index) in homeData.nears"
             :key="item.id"
-            @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
+            @click="$u.route(`/pagesHome/marketer/index?id=${item.id}`)"
           >
             <home-store v-if="index < 4" :item="item" isType="near"></home-store>
           </view>
@@ -92,15 +90,13 @@
 </template>
 
 <script>
-import { getCurrentLocation, getHomePageApi, getSwiperListApi } from '@/api/client/home';
+import { getHomePageApi, getSwiperListApi } from '@/api/client/home';
 import { inviteBind } from '@/api/client/mine.js';
-import { mapGetters } from 'vuex';
 export default {
   name: 'home',
   data() {
     return {
       list: [],
-      keyword: '',
       swiperUrlList: [], // 轮播图url列表
       swiperList: [],
       homeData: {
@@ -108,122 +104,104 @@ export default {
         nears: [],
         recommends: [],
       },
-      queryParams: {
-        longitude: '',
-        latitude: '',
-        region: '',
-      },
       nowAddress: '地址', //当前地址
+      params: {},
     };
   },
   computed: {
-    ...mapGetters(['location', 'userId', 'invitationCode']),
     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([
-              {
+      if (this.homeData.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([
+                {
+                  id: 'all',
+                  icon: '/static/pages/home/home-all.png',
+                  name: '全部',
+                  type: {
+                    code: 'ALL',
+                    description: '全部',
+                  },
+                },
+              ])
+            : initData.push({
                 id: 'all',
                 icon: '/static/pages/home/home-all.png',
                 name: '全部',
-                type: {
-                  code: 'ALL',
-                  description: '全部',
-                },
-              },
-            ])
-          : initData.push({
-              id: 'all',
-              icon: '/static/pages/home/home-all.png',
-              name: '全部',
-            });
-      return result;
+              });
+        return result;
+      }
     },
   },
-  onShow() {
-    this.handleInvitationCode();
-  },
   mounted() {
+    this.handleGetLocation();
+
+    let { longitude, latitude, region } = this.location;
+    this.params = {
+      longitude,
+      latitude,
+      region,
+    };
     this.getSwiperList();
-    this.handleGetLocationNew();
+    this.handleInvitationCode();
   },
   methods: {
-    // 获取当前编码region
-    handlerGetRegion(longitude, latitude) {
-      let point = `${latitude},${longitude}`;
-      getCurrentLocation({
-        point,
-      }).then(res => {
-        console.log(res.data, '获取当前经纬度');
-        let { city, district, id } = res.data;
-        this.queryParams.region = res.data.id;
-        if (district) {
-          this.nowAddress = district.name;
-        } else if (city) {
-          this.nowAddress = city.name;
-        } else {
-          this.nowAddress = '地图';
-        }
-        this.getHomeData(this.queryParams);
-        this.$store.commit('SET_LOCATION', {
-          longitude: longitude,
-          latitude: latitude,
-          region: res.data.id,
-          address: res.data.name,
-        });
+    // 初始化,获取定位信息
+    handleGetLocation() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: res => {
+          let { longitude, latitude } = res;
+          let data = { longitude, latitude };
+          this.$store.dispatch('getLocationNow', data).then(() => {
+            this.getHomeData(this.params);
+          });
+        },
+        fail: err => {},
       });
     },
+
     /* 轮播图 */
     getSwiperList() {
       getSwiperListApi().then(res => {
-        this.swiperList = res.data;
-        res.data.map(rs => {
-          this.swiperUrlList.push(rs.viewUrl);
-        });
+        let { data } = res;
+        this.swiperList = data;
+        if (data) {
+          data.map(rs => {
+            this.swiperUrlList.push(rs.viewUrl);
+          });
+        }
       });
     },
-    // 获取首页数据
-    getHomeData(location) {
-      getHomePageApi(location).then(res => {
+
+    /* 获取首页数据 -- 热门推荐,附近商家,分类 */
+    getHomeData(params) {
+      getHomePageApi(params).then(res => {
         this.homeData = res.data;
         // 将分类数据做缓存处理
         this.$store.commit('SET_CATEGORIES', this.homeData.categories);
       });
     },
-    // 手动选择城市
-    manualGetLocation() {
-      uni.$u.route('/pagesHome/homeAddress/index');
-      // uni.chooseLocation({
-      //   success: res => {
-      //     let { longitude, latitude } = res;
-      //     this.queryParams.longitude = longitude.toFixed(5);
-      //     this.queryParams.latitude = latitude.toFixed(5);
-      //     this.handlerGetRegion(longitude.toFixed(5), latitude.toFixed(5));
-      //   },
-      //   fail: err => {},
-      // });
-    },
-    // 点击swiper跳转
-    handlerSwiperSkip(e) {
-      console.log('@@@swiperList', this.swiperList[e]);
-    },
-    // 点击菜单
+
+    /* 点击swiper跳转 */
+    handlerSwiperSkip(e) {},
+    /* 点击菜单 */
     handleMenuClick(item) {
       if (item.name === '全部') {
-        this.$Router.push('/pagesHome/category/index');
+        uni.$u.route('/pagesHome/category/index');
       } else {
         uni.navigateTo({
-          url: `/pagesHome/storeList/index?id=${item.id}&name=${item.name}`,
+          url: `/pagesHome/storeList/index?id=${item.id}&keyword=${item.name}`,
         });
       }
     },
-    // 如果 invitationCode 存在且不等于特殊值时执行代码
+    /*  如果 invitationCode 存在且不等于特殊值时执行代码 */
     handleInvitationCode() {
       if (this.invitationCode) {
         let params = {
@@ -243,22 +221,6 @@ export default {
         this.$store.commit('SET_INVITATIONCODE', '');
       }
     },
-    // 页面显示时  获取当前零维度
-    handleGetLocationNew() {
-      uni.getLocation({
-        type: 'gcj02',
-        success: res => {
-          let { longitude, latitude } = res;
-          this.queryParams.longitude = longitude;
-          this.queryParams.latitude = latitude;
-          // getCurrentLocation 获取当前编码region
-          this.handlerGetRegion(longitude, latitude);
-        },
-        fail: () => {
-          this.manualGetLocation();
-        },
-      });
-    },
   },
 };
 </script>

+ 14 - 11
src/pagesHome/storeList/index.vue

@@ -53,7 +53,12 @@
                 @scrolltolower="lower"
                 @scroll="scroll"
               >
-                <view id="demo1" class="scroll-view-item uni-bg-red" v-for="item of 15" :key="item">
+                <view
+                  id="demo1"
+                  class="scroll-view-item uni-bg-red"
+                  v-for="item of 15"
+                  :key="item"
+                >
                   <view class="menu-right-title">洗车</view>
                   <view class="menu-right-contentbox">
                     <span class="menu-item" v-for="item of 7" :key="item">测试</span>
@@ -63,9 +68,9 @@
             </view>
           </view>
           <view class="filter2" v-show="filterType == 2">
-            <view @tap="sellerListFillter(1)">离我最近</view>
-            <view @tap="sellerListFillter(2)">好评优先</view>
-            <view @tap="sellerListFillter(3)">销量优先</view>
+            <view @tap="sellerListFilter(1)">离我最近</view>
+            <view @tap="sellerListFilter(2)">好评优先</view>
+            <view @tap="sellerListFilter(3)">销量优先</view>
           </view>
         </view>
       </view>
@@ -153,12 +158,12 @@ export default {
     };
   },
   onLoad(option) {
-    console.log(option);
+    console.log(option, 'loading');
     if (option.id) {
       this.sellerListParams.categoryId = option.id;
     }
-    if (option.name) {
-      this.sellerListParams.keyword = option.name;
+    if (option.keyword) {
+      this.sellerListParams.keyword = option.keyword;
     }
   },
   mounted() {
@@ -166,6 +171,7 @@ export default {
     this.sellerListParams.latitude = latitude;
     this.sellerListParams.longitude = longitude;
     this.sellerListParams.region = region;
+    console.log(this.sellerListParams, ' this.sellerListParams');
     this.getData();
   },
   computed: {
@@ -178,7 +184,7 @@ export default {
       this.filterType = 2;
     },
     // 排序条件
-    sellerListFillter(e) {
+    sellerListFilter(e) {
       switch (e) {
         case 1:
           this.sortCondition = '离我最近';
@@ -283,9 +289,6 @@ export default {
           color: #808080;
           font-size: 24rpx;
         }
-
-        .fiter2 {
-        }
       }
 
       .filter-drapdown {

+ 25 - 7
src/store/modules/data.js

@@ -1,10 +1,15 @@
+import { getCurrentLocation } from '@/api/client/home';
+
 export default {
   state: () => ({
     location: {
-      longitude: 0,
-      latitude: 0,
-      region: null,
-      address: null,
+      // longitude: 0,
+      // latitude: 0,
+      // region: null,
+      // address: null,
+      // regionText: null,
+      // city: {},
+      // belongRegion: [],
     },
     categories: [],
     storeInfo: {}, //店铺信息
@@ -40,12 +45,25 @@ export default {
         latitude: payload.latitude,
         longitude: payload.longitude,
       };
-
       let point = `${location.latitude},${location.longitude}`;
-
       return new Promise((resolve, reject) => {
         getCurrentLocation({ point }).then(res => {
-          console.log(res, '11111111111111');
+          if (res.code === 'OK') {
+            let { latitude, longitude, id, address, name, city, district, province } =
+              res.data;
+            commit('SET_LOCATION', {
+              latitude,
+              longitude,
+              address,
+              region: id,
+              regionText: name,
+              district,
+              belongRegion: [city, district, province],
+            });
+            resolve();
+          } else {
+            reject();
+          }
         });
       });
     },