refactor(ui): 优化首页及公共Tab商品列表布局

- 将首页商品列表由scroll-view masonry布局改为css多栏布局
- 公共Tab组件商品列表同步改为多栏布局并移除scroll-view与grid-view
- 优化无库存及不可售商品遮罩显示样式
- 修正登录页切换tab时激活对应tabbar状态
- 调整全局配置中BASE_URL环境判断实现方式，支持H5和微信小程序环境
- 完善地址模块定位和授权逻辑，增加H5和微信环境差异化处理及提示
- 系统信息状态栏和菜单按钮高度调整，区分微信小程序和非微信环境
- 移除无用console.log，清理代码冗余和空行

src/composables/useTabbar.ts

@@ -35,8 +35,6 @@ export function useTabbar() {
   }
 
   const setTabbarItem = (name: string, value: number) => {
-    console.log('设置市民请集合购物车数量===========================')
-
     const tabbarItem = tabbarItems.value.find(item => item.name === name)
     if (tabbarItem) {
       tabbarItem.value = value

src/config/index.ts

@@ -32,10 +32,20 @@ const mapEnvVersion = {
  * Base URL请求基本url
  */
 export const BASE_URL
-  = mapEnvVersion[uni.getAccountInfoSync().miniProgram.envVersion]
+  = handleEnvVersion()
 
 /**
  * 静态资源服务
  */
 
 export const StaticUrl = 'https://zswl-smqjh.oss-cn-chengdu.aliyuncs.com/static/static'
+
+function handleEnvVersion() {
+  // #ifdef H5
+  const mode = import.meta.env.MODE
+  return mode === 'development' ? 'https://smqjh.api.zswlgz.com' : 'https://smqjh.api.zswlgz.com'
+  // #endif
+  // #ifdef MP-WEIXIN
+  return mapEnvVersion[uni.getAccountInfoSync().miniProgram.envVersion]
+  // #endif
+}

src/pages/index/index.vue

@@ -240,73 +240,71 @@ function handleJyBanner() {
           :row-col="[[{ height: '568rpx', width: '344rpx' }, { height: '568rpx', width: '344rpx' }], [{ height: '568rpx', width: '344rpx' }, { height: '568rpx', width: '344rpx' }]]"
         >
           <view class="flex items-center">
-            <scroll-view scroll-y type="custom">
-              <grid-view type="masonry" cross-axis-count="2" main-axis-gap="10" cross-axis-gap="10">
-                <view
-                  v-for="item in goodsList" :key="item.id"
-                  class="relative overflow-hidden rounded-16rpx bg-white pb-16rpx"
-                >
-                  <view @click="router.push({ name: 'xsb-goods', params: { id: item.prodId } })">
-                    <view class="relative h-344rpx">
-                      <image :src="item.pic" class="h-344rpx w-344rpx" />
-                      <image
-                        :src="`${StaticUrl}/xsb-shui-index.png`"
-                        class="absolute left-0 top-0 h-344rpx w-344rpx"
-                      />
-                      <view class="absolute bottom-0 left-0 flex items-center text-22rpx">
-                        <view class="rounded-tl-8rpx bg-[#02ECFD] pl-4rpx">
-                          星闪豹
-                        </view>
-                        <!-- <view class="rounded-tr-8rpx bg-[rgba(0,0,0,0.5)] pl8rpx pr4rpx text-white">
+            <view class="w-full columns-2 gap-[10px]">
+              <view
+                v-for="item in goodsList" :key="item.id"
+                class="relative mb-[10px] break-inside-avoid overflow-hidden rounded-16rpx bg-white pb-16rpx"
+              >
+                <view @click="router.push({ name: 'xsb-goods', params: { id: item.prodId } })">
+                  <view class="relative h-344rpx">
+                    <image :src="item.pic" class="h-344rpx w-344rpx" />
+                    <image
+                      :src="`${StaticUrl}/xsb-shui-index.png`"
+                      class="absolute left-0 top-0 h-344rpx w-344rpx"
+                    />
+                    <view class="absolute bottom-0 left-0 flex items-center text-22rpx">
+                      <view class="rounded-tl-8rpx bg-[#02ECFD] pl-4rpx">
+                        星闪豹
+                      </view>
+                      <!-- <view class="rounded-tr-8rpx bg-[rgba(0,0,0,0.5)] pl8rpx pr4rpx text-white">
                       峰10:00-13:00
                     </view> -->
-                      </view>
                     </view>
-                    <view class="mt-16rpx pl-20rpx pr-6rpx">
-                      <view class="flex items-center">
-                        <!-- <view class="rounded-8rpx bg-#FF4D3A px12rpx text-24rpx text-white">
+                  </view>
+                  <view class="mt-16rpx pl-20rpx pr-6rpx">
+                    <view class="flex items-center">
+                      <!-- <view class="rounded-8rpx bg-#FF4D3A px12rpx text-24rpx text-white">
                       补贴
                     </view> -->
-                        <view class="line-clamp-2 text-28rpx font-semibold">
-                          {{ item.prodName }}
-                        </view>
+                      <view class="line-clamp-2 text-28rpx font-semibold">
+                        {{ item.prodName }}
                       </view>
-                      <view class="mt-20rpx flex items-end text-[#FF4D3A]">
-                        <view class="text-24rpx">
-                          ￥
-                        </view>
-                        <view class="text-36rpx line-height-[36rpx]">
-                          {{ item.channelProdPrice }}
-                        </view>
-                        <view class="text-24rpx">
-                          元
-                        </view>
+                    </view>
+                    <view class="mt-20rpx flex items-end text-[#FF4D3A]">
+                      <view class="text-24rpx">
+                        ￥
+                      </view>
+                      <view class="text-36rpx line-height-[36rpx]">
+                        {{ item.channelProdPrice }}
+                      </view>
+                      <view class="text-24rpx">
+                        元
                       </view>
                     </view>
                   </view>
+                </view>
+                <view
+                  v-if="!item.spuStock"
+                  class="absolute left-0 top-0 z-1 h-full w-full flex items-center justify-center bg-[rgba(255,255,255,0.6)]"
+                >
                   <view
-                    v-if="!item.spuStock"
-                    class="absolute left-0 top-0 z-1 h-full w-full flex items-center justify-center bg-[rgba(255,255,255,0.6)]"
+                    class="h-156rpx w-156rpx flex items-center justify-center rounded-full bg-[rgba(0,0,0,.6)] text-28rpx text-white"
                   >
-                    <view
-                      class="h-156rpx w-156rpx flex items-center justify-center rounded-full bg-[rgba(0,0,0,.6)] text-28rpx text-white"
-                    >
-                      商品已售罄
-                    </view>
+                    商品已售罄
                   </view>
+                </view>
+                <view
+                  v-if="!item.skuList.some((it) => it.saleStatus)"
+                  class="absolute left-0 top-0 z-1 h-full w-full flex items-center justify-center bg-[rgba(255,255,255,0.6)]"
+                >
                   <view
-                    v-if="!item.skuList.some((it) => it.saleStatus)"
-                    class="absolute left-0 top-0 z-1 h-full w-full flex items-center justify-center bg-[rgba(255,255,255,0.6)]"
+                    class="h-156rpx w-156rpx flex items-center justify-center rounded-full bg-[rgba(0,0,0,.6)] text-28rpx text-white"
                   >
-                    <view
-                      class="h-156rpx w-156rpx flex items-center justify-center rounded-full bg-[rgba(0,0,0,.6)] text-28rpx text-white"
-                    >
-                      商品不可售
-                    </view>
+                    商品不可售
                   </view>
                 </view>
-              </grid-view>
-            </scroll-view>
+              </view>
+            </view>
           </view>
         </wd-skeleton>
         <wd-loadmore v-if="goodsList.length > 9" :state="state" :loading-props="{ color: '#9ED605', size: 20 }" @reload="reload" />

src/pages/login/index.vue

@@ -46,6 +46,7 @@ function goBack() {
   uni.switchTab({
     url: '/pages/index/index',
   })
+  useTabbar().setTabbarItemActive('smqjh-home')
 }
 </script>
 

src/store/address.ts

@@ -25,9 +25,10 @@ export const useAddressStore = defineStore('address', {
     city: '',
   }),
   actions: {
-  // 获取地理位置的函数
+    // 获取地理位置的函数
     getLocation() {
       uni.showLoading({ mask: true })
+      // #ifdef MP-WEIXIN
       // 1. 检查当前授权状态
       uni.getSetting({
         success: (res) => {
@@ -48,6 +49,11 @@ export const useAddressStore = defineStore('address', {
           }
         },
       })
+      // #endif
+      // #ifndef MP-WEIXIN
+      // H5 无授权流程，直接获取定位
+      this.fetchActualLocation()
+      // #endif
     },
 
     // 实际获取位置的方法
@@ -60,31 +66,41 @@ export const useAddressStore = defineStore('address', {
           console.log('位置获取成功', res)
           this.Location.latitude = res.latitude
           this.Location.longitude = res.longitude
+          // #ifndef MP-WEIXIN
+          uni.hideLoading()
+          // #endif
         },
         fail: (err) => {
           console.log(err, '获取位置失败')
+          // #ifdef MP-WEIXIN
           if (err.errMsg === 'getLocation:fail system permission denied') {
             useGlobalToast().show('手机定位权限未打开，请手动在设置里面打开定位')
           }
           else {
             useGlobalToast().show(`获取定位失败：${err.errMsg}`)
           }
+          // #endif
+          // #ifndef MP-WEIXIN
+          uni.hideLoading()
+          this.showAuthGuide()
+          // #endif
         },
       })
     },
 
     // 显示授权引导
     showAuthGuide() {
+      // #ifdef MP-WEIXIN
       uni.showModal({
         title: '需要位置权限',
         content: '请开启位置授权以使用完整功能',
         confirmText: '去设置',
         success: (res) => {
           if (res.confirm) {
-            // 4. 用户点击确认后打开设置页
+            // 用户点击确认后打开设置页
             wx.openSetting({
               success: (settingRes) => {
-                // 5. 检查用户是否在设置页中开启了授权
+                // 检查用户是否在设置页中开启了授权
                 if (settingRes.authSetting['scope.userLocation']) {
                   this.fetchActualLocation()
                 }
@@ -96,6 +112,15 @@ export const useAddressStore = defineStore('address', {
           }
         },
       })
+      // #endif
+      // #ifndef MP-WEIXIN
+      uni.showModal({
+        title: '需要位置权限',
+        content: '您的浏览器定位权限未开启，请点击地址栏左侧的锁形图标，将"位置"权限设置为"允许"后刷新页面重试',
+        showCancel: false,
+        confirmText: '我知道了',
+      })
+      // #endif
     },
     getMapAddress() {
       uni.chooseLocation({

src/store/sys.ts

@@ -52,9 +52,14 @@ export const useSysStore = defineStore('system', {
   actions: {
     getSystemData() {
       const { statusBarHeight } = uni.getSystemInfoSync()
+      // #ifdef MP-WEIXIN
       const { height } = uni.getMenuButtonBoundingClientRect()
-      this.statusBarHeight = Number(statusBarHeight)
       this.MenuButtonHeight = height
+      // #endif
+      // #ifndef MP-WEIXIN
+      this.MenuButtonHeight = 0
+      // #endif
+      this.statusBarHeight = Number(statusBarHeight)
     },
     /**
      *

src/subPack-xsb/commonTab/components/index.vue

@@ -261,8 +261,8 @@ function handleChangeSwiper(e: UniHelper.SwiperOnChangeEvent) {
         <view class="mt20rpx">
           <wd-skeleton theme="image" animation="gradient" :loading="loading" :row-col="[[{ height: '568rpx', width: '344rpx' }, { height: '568rpx', width: '344rpx' }], [{ height: '568rpx', width: '344rpx' }, { height: '568rpx', width: '344rpx' }]]">
             <view class="flex items-center">
-              <scroll-view scroll-y type="custom">
-                <grid-view type="masonry" cross-axis-count="2" main-axis-gap="10" cross-axis-gap="10">
+              <view class="w-full columns-2 gap-[10px]">
+                <view class="mb-[10px] break-inside-avoid">
                   <wd-swiper
                     :autoplay="false" :list="[
                       `${StaticUrl}/xsb-swiper1.png`,
@@ -271,11 +271,11 @@ function handleChangeSwiper(e: UniHelper.SwiperOnChangeEvent) {
                     :indicator="{ type: 'dots-bar' }"
                     @click="useGlobalToast().show('敬请期待 ！')"
                   />
-                  <view v-for="it in goodsList" :key="it.id">
-                    <itemGoods :item-goods="it" />
-                  </view>
-                </grid-view>
-              </scroll-view>
+                </view>
+                <view v-for="it in goodsList" :key="it.id" class="mb-[10px] break-inside-avoid">
+                  <itemGoods :item-goods="it" />
+                </view>
+              </view>
             </view>
           </wd-skeleton>
         </view>