Refactor(首页):改版重构-接口对接

api/public.js

@@ -8,8 +8,8 @@ export function getSplashScreen() {
  * 首页
  * @returns {*}
  */
-export function getHomeData() {
+export function getHomeData(params) {
-    return request.get("index", {}, {
+    return request.get("index", params, {
         login: false
     });
 }

components/xdd-product-item/index.vue

@@ -11,7 +11,7 @@
         class="mark-img"
       />
       <image
-        v-if="item.isOldBrand"
+        v-if="item.isLandmarkGoods"
         :src="webUrl + '/home/mark-land.png'"
         class="mark-img"
       />
@@ -25,12 +25,12 @@
       <view class="name more-t">
         {{ item.storeName }}
       </view>
-      <view class="desc">
+      <view v-if="item.bestContent" class="desc one-t">
-        {{ item.desc || '古法熬制·甄选原料' }}
+        {{ item.bestContent }}
       </view>
-      <view class="coupon">
+      <view v-if="item.couponName" class="coupon">
         <view class="tag">券</view>
-        <view class="tag">5元无门槛</view>
+        <view class="tag">{{ item.couponName }}</view>
       </view>
       <view class="price-wrap">
         <view class="price">
@@ -86,8 +86,8 @@ export default {
       position: relative;
       z-index: 2;
       display: block;
-      width: 344rpx;
+      width: 345rpx;
-      height: 344rpx;
+      height: 345rpx;
       border-radius: 20rpx;
     }
     .mark-img {
@@ -108,12 +108,13 @@ export default {
       color: #333;
     }
     .desc {
-      padding: 10rpx 0;
+      padding: 10rpx 0 0 0;
       color: #FFC543;
       font-size: 24rpx;
     }
     .coupon {
       display: flex;
+      padding: 10rpx 0 0 0;
       .tag + .tag {
         margin: 0 0 0 -1rpx;
       }

pages/home/index.vue

@@ -7,16 +7,15 @@
       }"
       :class="scrollTop > 40 ? 'blur' : ''"
       class="fix-header"
-      @click="goGoodSearch"
     >
-      <view class="location">
+      <view class="location" @click="reLocateHandle()">
-        昆明
+        {{ isLocating ? '定位中' : (cityName || '定位失败') }}
         <image
           :src="webUrl + '/home/icon-location.png'"
           class="icon"
         />
       </view>
-      <view class="search-wrap">
+      <view class="search-wrap" @click="goGoodSearch">
         <image
           :src="webUrl + '/home/icon-search.png'"
           class="icon"
@@ -191,7 +190,7 @@
                       :src="swiperItem.image"
                       mode="scaleToFill"
                       class="swiper-img"
-                      @click="goHomeStay(swiperItem)"
+                      @click="productSwiperItemClickHandle(swiperItem)"
                     />
                   </swiper-item>
                 </swiper>
@@ -208,7 +207,7 @@
     </view>
     <!-- v9 老用户弹窗 -->
     <u-popup
-      :show="isOldUser"
+      :show="isOldUser && oldUserPopup.image"
       mode="center"
       bgColor="transparent"
     >
@@ -251,6 +250,12 @@ import { getCouponReceive } from '@/api/user'
 import { getHomeData, getShareImage } from '@/api/public'
 import { sharpBannar } from '@/api/goods'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
+import {
+  getCurAddress,
+  getLocationPromise,
+  getLocationSetting,
+  openLocationSettting
+} from "@/utils/common"
 export default {
   name: 'IndexPage',
   components: {
@@ -267,6 +272,8 @@ export default {
       rightDistance: 10,
       banner: [],
       menus: [],
+      // 定位中
+      isLocating: true,
       cityName: '',
       // 地标好物
       landmarkGoodsImage: {},
@@ -334,11 +341,31 @@ export default {
         this.bannerList = data.banner
         this.getPageData()
       })
+      this.getLocationData()
+    },
+    reLocateHandle() {
+      if (this.cityName) return
+      getLocationSetting(() => openLocationSettting().then(() => {
+        this.getLocationData()
+      }))
+    },
+    async getLocationData() {
+      this.isLocating = true
+      const mapData = await getLocationPromise()
+      if (mapData.errMsg) {
+        const { latitude, longitude } = mapData
+        const address = await getCurAddress(latitude, longitude)
+        this.cityName = address[1].data.result.ad_info.city
+        this.isLocating = false
+        this.getPageData()
+      } else {
+        this.isLocating = false
+      }
     },
     getPageData() {
       const _this = this
       uni.showLoading({ title: '加载中' })
-      getHomeData().then(res => {
+      getHomeData({ cityName: this.cityName }).then(res => {
         const { data } = res
         _this.$set(_this, 'banner', data.banner)
         _this.$set(_this, 'menus', data.menus)
@@ -366,15 +393,15 @@ export default {
                 list: [
                   {
                     image: 'http://resource.xdd618.com/19/20240722/1721615384602_入口图8.jpg',
-                    url: '/pkg_product/views/festival'
+                    id: 5781
                   },
                   {
                     image: 'http://resource.xdd618.com/19/20240715/1721006994007_微信图片_20240715092549.jpg',
-                    url: '/pkg_product/views/festival'
+                    id: 5781
                   },
                   {
                     image: 'http://resource.xdd618.com/19/20240722/1721615384602_入口图8.jpg',
-                    url: '/pkg_product/views/festival'
+                    id: 5781
                   }
                 ]
               })
@@ -478,6 +505,9 @@ export default {
     hotelItemClickHandle(item) {
       uni.navigateTo({ url: item.url })
     },
+    productSwiperItemClickHandle(item) {
+      uni.navigateTo({url: '/pkg_product/views/homestay?id=' + item.id})
+    },
     setTopHandle() {
       uni.pageScrollTo({
         scrollTop: 0,

utils/common.js

@@ -6,6 +6,19 @@ module.exports = {
             type: 'wgs84'
         })
     },
+    getLocationPromise() {
+        return new Promise((resolve, reject) => {
+            uni.getLocation({
+                type: 'wgs84',
+                success: (res) => {
+                    resolve(res)
+                },
+                fail: () => {
+                    resolve({})
+                }
+            })
+        })
+    },
 
     getCurAddress(latitude, longitude) {
         return uni.request({
@@ -14,6 +27,51 @@ module.exports = {
         });
     },
 
+    getLocationSetting(cb) {
+        uni.getSetting({
+            success: res => {
+                if (!res.authSetting['scope.userLocation']) {
+                    uni.showModal({
+                        title: '提示',
+                        content: '当前定位未开启，请点击确定手动开启定位',
+                        success: response => {
+                            if (response.confirm) {
+                                cb && cb ()
+                            } else {
+                                uni.showToast({
+                                    title: '您拒绝了授权，无法获取定位服务',
+                                    duration: 2000,
+                                    icon: 'none'
+                                })
+                            }
+                        }
+                    })
+                }
+            }
+        })
+    },
+
+    openLocationSettting() {
+        return new Promise((resolve, reject) => {
+            uni.openSetting({
+                success: res => {
+                    if (res.authSetting['scope.userLocation']) {
+                        resolve()
+                    } else {
+                        uni.showToast({
+                            title: '您拒绝了授权，无法获取定位服务',
+                            duration: 2000,
+                            icon: 'none'
+                        })
+                    }
+                },
+                fail: () => {
+                    reject()
+                }
+            })
+        })
+    },
+
     getUrlParam(url, name) {
         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
         var r = url.match(reg);

utils/request.js

@@ -46,7 +46,7 @@ function baseRequest(options) {
     // 如果接口需要登录，携带 token 去请求
     options.headers = {
         ...options.headers,
-        Authorization: "Bearer " + token
+        Authorization: token ? ('Bearer ' + token) : ''
     }
 
     // 结构请求需要的参数