支付宝小程序适配

manifest.json

@@ -185,7 +185,9 @@
     "requiredPrivateInfos": ["chooseAddress"]
   },
   "mp-alipay": {
-    "usingComponents": true
+    "usingComponents": true,
+    "styleIsolation": "shared",
+    "mergeVirtualHostAttributes": true
   },
   "mp-baidu": {
     "usingComponents": true

pages.json

@@ -675,7 +675,15 @@
 		"navigationBarTitleText": "芋道商城",
 		"navigationBarBackgroundColor": "#FFFFFF",
 		"backgroundColor": "#FFFFFF",
-		"navigationStyle": "custom"
+		"navigationStyle": "custom",
+    "mp-alipay": {
+      "titleImage": "",
+      "gestureBack": "YES",
+      "allowsBounceVertical": "NO",
+      "transparentTitle": "always",
+      "navigationStyle": "custom",
+      "titlePenetrate": "YES"
+    }
 	},
 	"tabBar": {
 		"list": [{

pages/goods/components/detail/detail-navbar.vue

@@ -3,7 +3,10 @@
   <su-fixed alway :bgStyles="{ background: '#fff' }" :val="0" noNav opacity :placeholder="false">
     <su-status-bar />
     <view
-      class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
+      class="ui-bar ss-flex ss-col-center ss-row-between"
+      :class="[{
+           'ss-p-x-20': sheep.$platform.provider !== 'alipay'
+      }]"
       :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
     >
       <!-- 左 -->

pages/goods/components/list/list-navbar.vue

@@ -11,7 +11,10 @@
   >
     <su-status-bar />
     <view
-      class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
+      class="ui-bar ss-flex ss-col-center ss-row-between"
+      :class="[{
+           'ss-p-x-20': sheep.$platform.provider !== 'alipay'
+      }]"
       :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
     >
       <!-- 左 -->

sheep/components/s-auth-modal/s-auth-modal.vue

@@ -46,18 +46,6 @@
           <view class="circle" />
         </view>
 
-        <!-- 7.3 支付宝小程序登录 -->
-        <button
-          v-if="sheep.$platform.name === 'alipayMiniProgram'"
-          @tap="thirdLogin('alipay')"
-          class="ss-reset-button auto-login-btn"
-        >
-          <image
-            class="auto-login-img"
-            :src="sheep.$url.static('/static/img/shop/platform/alipay.png')"
-          />
-        </button>
-
         <!-- 7.2 微信的公众号、App、小程序的登录，基于 openid + code -->
         <button
           v-if="
@@ -84,6 +72,18 @@
             :src="sheep.$url.static('/static/img/shop/platform/apple.png')"
           />
         </button>
+
+        <!-- 7.4 支付宝小程序登录 -->
+        <button
+          v-if="sheep.$platform.name === 'alipayMiniProgram'"
+          @tap="thirdLogin('alipay')"
+          class="ss-reset-button auto-login-btn"
+        >
+          <image
+            class="auto-login-img"
+            :src="sheep.$url.static('/static/img/shop/pay/alipay.png')"
+          />
+        </button>
       </view>
 
       <!-- 用户协议的勾选 -->
@@ -97,7 +97,7 @@
         <view class="agreement-options-container">
           <!-- 同意选项 -->
           <view class="agreement-option ss-m-b-20">
-            <label class="radio ss-flex ss-col-center" @tap="onAgree">
+            <view class="radio ss-flex ss-col-center" @tap="onAgree">
               <radio
                 :checked="state.protocol === true"
                 color="var(--ui-BG-Main)"
@@ -110,12 +110,12 @@
                 <view class="agreement-text">与</view>
                 <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
               </view>
-            </label>
+            </view>
           </view>
           
           <!-- 拒绝选项 -->
           <view class="agreement-option">
-            <label class="radio ss-flex ss-col-center" @tap="onRefuse">
+            <view class="radio ss-flex ss-col-center" @tap="onRefuse">
               <radio
                 :checked="state.protocol === false"
                 color="#ff4d4f"
@@ -128,7 +128,7 @@
                 <view class="agreement-text">与</view>
                 <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
               </view>
-            </label>
+            </view>
           </view>
         </view>
       </view>
@@ -197,7 +197,7 @@
       } else {
         sheep.$helper.toast('请选择是否同意协议');
       }
-      // return;
+      return;
     }
     const loginRes = await sheep.$platform.useProvider(provider).login();
     if (loginRes) {

sheep/components/s-layout/s-layout.vue

@@ -17,13 +17,11 @@
       />
 
       <!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
-      <!--#ifndef MP-ALIPAY-->
       <s-custom-navbar
         v-else-if="navbar === 'custom' && navbarMode === 'normal'"
         :data="navbarStyle"
         :showLeftButton="showLeftButton"
       />
-      <!--#endif-->
       <view class="page-body" :style="[bgBody]">
         <!-- 顶部导航栏-情况3：沉浸式头部 -->
         <su-inner-navbar v-if="navbar === 'inner'" :title="title" />
@@ -216,6 +214,11 @@
 
   // 组件中使用 onMounted 监听页面加载，不是页面组件不使用 onShow
   onMounted(()=>{
+    // #ifdef MP-ALIPAY
+    uni.setNavigationBarTitle({
+      title: "",
+    });
+    // #endif
     if (!isEmpty(shareInfo.value)) {
       sheep.$platform.share.updateShareInfo(shareInfo.value);
     }

sheep/components/s-menu-grid/s-menu-grid.vue

@@ -2,8 +2,8 @@
 <template>
 	<view :style="[bgStyle, { marginLeft: `${data.space}px` }]">
 		<uni-grid :showBorder="Boolean(data.border)" :column="data.column">
-			<uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="sheep.$router.go(item.url)">
+			<uni-grid-item v-for="(item, index) in data.list" :key="index" >
-				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
+				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center" @tap="sheep.$router.go(item.url)">
 					<view class="img-box">
 						<view class="tag-box" v-if="item.badge.show"
 							:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">

sheep/components/s-tabbar/s-tabbar.vue

@@ -20,7 +20,7 @@
         :badgeStyle="tabbar.badgeStyle"
         :isCenter="getTabbarCenter(index)"
         :centerImage="sheep.$url.cdn(item.iconUrl)"
-        @tap="sheep.$router.go(item.url)"
+        @click="sheep.$router.go(item.url)"
       >
         <template v-slot:active-icon>
           <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>

sheep/platform/index.js

@@ -58,6 +58,13 @@ provider = 'wechat';
 name = 'alipayMiniProgram';
 platform = 'alipayMiniProgram';
 provider = 'alipay';
+if (!device.safeAreaInsets) {
+  device.safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
+}
+// 兜底一下。还是没有值时候，就给个默认值
+if (!device.safeAreaInsets) {
+  device.safeAreaInsets = {}
+}
 // #endif
 
 if (isEmpty(name)) {

sheep/ui/su-fixed/su-fixed.vue

@@ -3,7 +3,7 @@
     <view
       class="ui-fixed-box"
       :id="`fixed-${uuid}`"
-      :class="['fixed']"
+      :class="[{ fixed: state.fixed }]"
       :style="[
         {
           left: sticky ? 'auto' : '0px',

sheep/ui/su-inner-navbar/su-inner-navbar.vue

@@ -17,8 +17,12 @@
      -->
     <view class="ui-navbar-box">
       <view
-        class="ui-bar ss-p-x-20"
+        class="ui-bar"
-        :class="state.isDark ? 'text-white' : 'text-black'"
+        :class="[{
+           'text-white': state.isDark,
+           'text-black': !state.isDark,
+           'ss-p-x-20': sheep.$platform.provider !== 'alipay'
+        }]"
         :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
       >
         <view class="icon-box ss-flex">

sheep/ui/su-tabbar-item/su-tabbar-item.vue

@@ -1,6 +1,6 @@
 <!-- 自定义底部导航项 -->
 <template>
-  <view class="u-tabbar-item" :style="[addStyle(customStyle)]">
+  <view class="u-tabbar-item" :style="[addStyle(customStyle)]" @click="clickHandler">
     <view v-if="isCenter" class="tabbar-center-item">
       <image class="center-image" :src="centerImage" mode="aspectFill"></image>
     </view>