feat: ✨ h5 样式兼容

src/components/JbcSwiper.vue

@@ -49,35 +49,5 @@ watch(
 </script>
 
 <style lang="scss">
-/* 轮播图 */
+@import '@/components/styles/JbcSwiper.scss';
-.carousel {
-  height: 280rpx;
-  position: relative;
-  overflow: hidden;
-  transform: translateY(0);
-  background-color: #efefef;
-  .indicator {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 16rpx;
-    display: flex;
-    justify-content: center;
-    .dot {
-      width: 30rpx;
-      height: 6rpx;
-      margin: 0 8rpx;
-      border-radius: 6rpx;
-      background-color: rgba(255, 255, 255, 0.4);
-    }
-    .active {
-      background-color: #fff;
-    }
-  }
-  .navigator,
-  .image {
-    width: 100%;
-    height: 100%;
-  }
-}
 </style>

src/components/styles/JbcSwiper.scss

@@ -0,0 +1,31 @@
+/* 轮播图 */
+.carousel {
+  height: 280rpx;
+  position: relative;
+  overflow: hidden;
+  transform: translateY(0);
+  background-color: #efefef;
+  .indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 16rpx;
+    display: flex;
+    justify-content: center;
+    .dot {
+      width: 30rpx;
+      height: 6rpx;
+      margin: 0 8rpx;
+      border-radius: 6rpx;
+      background-color: rgba(255, 255, 255, 0.4);
+    }
+    .active {
+      background-color: #fff;
+    }
+  }
+  .navigator,
+  .image {
+    width: 100%;
+    height: 100%;
+  }
+}

src/manifest.json

@@ -48,6 +48,12 @@
   },
   /* 快应用特有相关 */
   "quickapp": {},
+  /* H5特有相关 */
+  "h5": {
+    "router": {
+      "base": "./"
+    }
+  },
   /* 小程序特有相关 */
   "mp-weixin": {
     "appid": "",

src/pages/category/components/PageSkeleton.vue

@@ -153,7 +153,11 @@
   </view>
 </template>
 
-<style>
+<style lang="scss">
+// #ifdef H5
+@import '@/components/styles/JbcSwiper.scss';
+// #endif
+
 .sk-transparent {
   color: transparent !important;
 }

src/pages/goods/goods.vue

@@ -97,16 +97,18 @@
     <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
       <view class="icons">
         <button class="icons-button"><text class="icon-heart"></text>收藏</button>
+        <!-- #ifdef MP-WEIXIN -->
         <button class="icons-button" open-type="contact">
           <text class="icon-handset"></text>客服
         </button>
+        <!-- #endif -->
         <navigator class="icons-button" url="/pages/cart/goodsCart" open-type="navigate">
           <text class="icon-cart"></text>购物车
         </navigator>
       </view>
       <view class="buttons">
         <view class="addcart" @tap="showSkuPopup(SkuMode.AddCart)"> 加入购物车 </view>
-        <view class="buynow" @tap="showSkuPopup(SkuMode.BuyNow)"> 立即购买 </view>
+        <view class="payment" @tap="showSkuPopup(SkuMode.BuyNow)"> 立即购买 </view>
       </view>
     </view>
 
@@ -502,11 +504,11 @@ page {
   position: fixed;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: calc((var(--window-bottom)));
   z-index: 1;
   background-color: #fff;
   height: 100rpx;
-  padding: 0 20rpx var(--window-bottom);
+  padding: 0 20rpx;
   border-top: 1rpx solid #eaeaea;
   display: flex;
   justify-content: space-between;
@@ -525,17 +527,18 @@ page {
     .addcart {
       background-color: #ffa868;
     }
-    .buynow,
     .payment {
       background-color: #27ba9b;
       margin-left: 20rpx;
     }
   }
   .icons {
-    padding-right: 10rpx;
+    padding-right: 20rpx;
     display: flex;
     align-items: center;
     flex: 1;
+    // 兼容 H5 端和 App 端的导航链接样式
+    .navigator-wrap,
     .icons-button {
       flex: 1;
       text-align: center;

src/pages/index/components/CategoryPanel.vue

@@ -7,8 +7,12 @@
       v-for="item in props.list"
       :key="item.id"
     >
+      <view>
         <image class="icon" :src="item.icon"></image>
+      </view>
+      <view>
         <text class="text">{{ item.name }}</text>
+      </view>
     </navigator>
   </view>
 </template>
@@ -22,30 +26,5 @@ const props = defineProps<{
 </script>
 
 <style lang="scss">
-/* 前台类目 */
+@import './styles/CategoryPanel.scss';
-.category {
-  margin: 20rpx 0 0;
-  padding: 10rpx 0;
-  display: flex;
-  flex-wrap: wrap;
-  min-height: 328rpx;
-
-  .category-item {
-    width: 150rpx;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    box-sizing: border-box;
-
-    .icon {
-      width: 100rpx;
-      height: 100rpx;
-    }
-    .text {
-      font-size: 26rpx;
-      color: #666;
-    }
-  }
-}
 </style>

src/pages/index/components/HotPanel.vue

@@ -29,62 +29,5 @@ defineProps<{
 </script>
 
 <style lang="scss">
-/* 热门推荐 */
+@import './styles/HotPanel.scss';
-.hot {
-  display: flex;
-  flex-wrap: wrap;
-  min-height: 508rpx;
-  margin: 20rpx 20rpx 0;
-  border-radius: 10rpx;
-  background-color: #fff;
-
-  .title {
-    display: flex;
-    align-items: center;
-    padding: 24rpx 24rpx 0;
-    font-size: 32rpx;
-    color: #262626;
-    position: relative;
-
-    .title-desc {
-      font-size: 24rpx;
-      color: #7f7f7f;
-      margin-left: 18rpx;
-    }
-  }
-
-  .item {
-    display: flex;
-    flex-direction: column;
-    width: calc(50% - 1rpx);
-    height: 254rpx;
-    border-right: 1rpx solid #eee;
-    border-top: 1rpx solid #eee;
-
-    .title {
-      justify-content: start;
-    }
-
-    &:nth-child(2n) {
-      border-right: 0 none;
-    }
-
-    &:nth-child(-n + 2) {
-      border-top: 0 none;
-    }
-
-    .image {
-      width: 150rpx;
-      height: 150rpx;
-    }
-  }
-
-  .cards {
-    flex: 1;
-    padding: 15rpx 20rpx;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
 </style>

src/pages/index/components/PageSkeleton.vue

@@ -146,7 +146,13 @@
   </view>
 </template>
 
-<style>
+<style lang="scss">
+// #ifdef H5
+@import '@/components/styles/JbcSwiper.scss';
+@import './styles/CategoryPanel.scss';
+@import './styles/HotPanel.scss';
+// #endif
+
 .sk-transparent {
   color: transparent !important;
 }

src/pages/index/components/styles/CategoryPanel.scss

@@ -0,0 +1,26 @@
+/* 前台类目 */
+.category {
+  margin: 20rpx 0 0;
+  padding: 10rpx 0;
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 328rpx;
+
+  .category-item {
+    width: 150rpx;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+
+    .icon {
+      width: 100rpx;
+      height: 100rpx;
+    }
+    .text {
+      font-size: 26rpx;
+      color: #666;
+    }
+  }
+}

src/pages/index/components/styles/HotPanel.scss

@@ -0,0 +1,58 @@
+/* 热门推荐 */
+.hot {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 508rpx;
+  margin: 20rpx 20rpx 0;
+  border-radius: 10rpx;
+  background-color: #fff;
+
+  .title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 24rpx 0;
+    font-size: 32rpx;
+    color: #262626;
+    position: relative;
+
+    .title-desc {
+      font-size: 24rpx;
+      color: #7f7f7f;
+      margin-left: 18rpx;
+    }
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    width: calc(50% - 1rpx);
+    height: 254rpx;
+    border-right: 1rpx solid #eee;
+    border-top: 1rpx solid #eee;
+
+    .title {
+      justify-content: start;
+    }
+
+    &:nth-child(2n) {
+      border-right: 0 none;
+    }
+
+    &:nth-child(-n + 2) {
+      border-top: 0 none;
+    }
+
+    .image {
+      width: 150rpx;
+      height: 150rpx;
+    }
+  }
+
+  .cards {
+    flex: 1;
+    padding: 15rpx 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

src/pages/login/login.vue

@@ -5,15 +5,19 @@
     </view>
     <view class="login">
       <!-- 网页端表单登录 -->
-      <!-- <input class="input" type="text" placeholder="请输入用户名/手机号码" />
+      <!-- #ifdef H5 -->
+      <input class="input" type="text" placeholder="请输入用户名/手机号码" />
       <input class="input" type="text" password placeholder="请输入密码" />
-      <button class="button phone">登录</button> -->
+      <button class="button phone">登录</button>
+      <!-- #endif -->
 
       <!-- 小程序端授权登录 -->
+      <!-- #ifdef MP-WEIXIN -->
       <button class="button phone" @getphonenumber="onGetPhoneNumber">
         <text class="icon icon-phone"></text>
         手机号快捷登录
       </button>
+      <!-- #endif -->
       <view class="extra">
         <view class="caption">
           <text>其他登录方式</text>
@@ -40,6 +44,7 @@ import type { LoginResult } from '@/types/member'
 // 会员信息
 const memberStore = useMemberStore()
 
+// #ifdef MP-WEIXIN
 const code = ref('')
 onLoad(async () => {
   const res = await wx.login()
@@ -59,16 +64,10 @@ const onGetPhoneNumber: UniHelper.ButtonOnGetphonenumber = async (e) => {
     res.result && loginSucess(res.result)
   }
 }
+// #endif
 
 // 模拟快捷登录
 const handlePhoneLogin = async () => {
-  if (!code.value) {
-    uni.showToast({
-      title: '请先授权登录',
-      icon: 'none',
-    })
-    return
-  }
   const res = await postPhoneNumberLoginMockAPI({
     phoneNumber: '13800138000',
   })
@@ -84,7 +83,20 @@ const loginSucess = (profile: LoginResult) => {
     icon: 'none',
   })
   setTimeout(() => {
+    // #ifdef MP-WEIXIN
     uni.navigateBack()
+    // #endif
+
+    // #ifdef H5
+    // 获取当前页面栈
+    const pages = getCurrentPages()
+    const hasBack = pages.length > 1
+    if (hasBack) {
+      uni.navigateBack()
+    } else {
+      uni.switchTab({ url: '/pages/index/index' })
+    }
+    // #endif
   }, 500)
 }
 </script>

src/pages/my/my.vue

@@ -57,7 +57,9 @@
           {{ item.text }}
         </navigator>
         <!-- 客服 -->
+        <!-- #ifdef MP-WEIXIN -->
         <button class="contact icon-handset" open-type="contact">售后</button>
+        <!-- #endif -->
       </view>
     </view>
     <!-- 猜你喜欢 -->

src/pagesMember/settings/settings.vue

@@ -7,11 +7,13 @@
       </navigator>
     </view>
     <!-- 列表2 -->
+    <!-- #ifdef MP-WEIXIN -->
     <view class="list">
       <button hover-class="none" class="item arrow" open-type="openSetting">授权管理</button>
       <button hover-class="none" class="item arrow" open-type="feedback">问题反馈</button>
       <button hover-class="none" class="item arrow" open-type="contact">联系我们</button>
     </view>
+    <!-- #endif -->
     <!-- 列表3 -->
     <view class="list">
       <navigator hover-class="none" class="item arrow" url="">关于金佰川</navigator>

src/pagesOrder/detail/detail.vue

@@ -364,14 +364,23 @@ const handlePay = async () => {
     res = await getMockPayParamsAPI({ orderId: query.id })
   } else {
     // 生产环境获取微信支付参数
+    // #ifdef MP-WEIXIN
     res = await getWechatPayParamsAPI({ orderId: query.id })
+    // #endif
+
+    // #ifdef H5
+    res = await getMockPayParamsAPI({ orderId: query.id })
+    // #endif
   }
   if (res.code === '1') {
     if (isDev) {
       uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${query.id}` })
     } else {
       // 生产环境使用微信支付
+      // #ifdef MP-WEIXIN
       await wx.requestPayment(res.result as WechatMiniprogram.RequestPaymentOption)
+      // #endif
+
       uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${query.id}` })
     }
   } else {