支付宝小程序适配

manifest.json

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

mini.project.json

@@ -0,0 +1,9 @@
+{
+  "format": 2,
+  "compileOptions": {
+    "component2": true,
+    "enableNodeModuleBabelTransform": true,
+    "transpile": {},
+    "globalObjectMode": "enable"
+  }
+}

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' }]"
     >
       <!-- 左 -->

pages/goods/index.vue

@@ -245,7 +245,7 @@
     isDay: true,
   };
   const isLogin = computed(() => sheep.$store('user').isLogin);
-  const state = reactive({
+  let state = reactive({
     goodsId: 0,
     skeletonLoading: true, // SPU 加载中
     goodsInfo: {}, // SPU 信息

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

@@ -72,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>
 
       <!-- 用户协议的勾选 -->
@@ -85,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)"
@@ -98,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"
@@ -116,7 +128,7 @@
                 <view class="agreement-text">与</view>
                 <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
               </view>
-            </label>
+            </view>
           </view>
         </view>
       </view>

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

@@ -214,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

@@ -14,6 +14,7 @@ import { isEmpty } from 'lodash-es';
 import { isWxBrowser } from '@/sheep/helper/utils';
 // #endif
 import wechat from './provider/wechat/index.js';
+import alipay from './provider/alipay/index';
 import apple from './provider/apple';
 import share from './share';
 import Pay from './pay';
@@ -53,6 +54,19 @@ platform = 'miniProgram';
 provider = 'wechat';
 // #endif
 
+// #ifdef MP-ALIPAY 
+name = 'alipayMiniProgram';
+platform = 'alipayMiniProgram';
+provider = 'alipay';
+if (!device.safeAreaInsets) {
+  device.safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
+}
+// 兜底一下。还是没有值时候，就给个默认值
+if (!device.safeAreaInsets) {
+  device.safeAreaInsets = {}
+}
+// #endif
+
 if (isEmpty(name)) {
   uni.showToast({
     title: '暂不支持该平台',
@@ -64,6 +78,8 @@ if (isEmpty(name)) {
 const load = () => {
   if (provider === 'wechat') {
     wechat.load();
+  } else if (provider === 'alipay') {
+    alipay.load();
   }
 };
 
@@ -72,6 +88,7 @@ const useProvider = (_provider = '') => {
   if (_provider === '') _provider = provider;
   if (_provider === 'wechat') return wechat;
   if (_provider === 'apple') return apple;
+  if (_provider === 'alipay') return alipay;
 };
 
 // 支付服务转发

sheep/platform/provider/alipay/index.js

@@ -0,0 +1,6 @@
+// 这里 特指支付宝小程序，后面如果需要拓展什么阿里云小程序、淘宝小程序之类的，就自己新建
+import service from './miniProgram';
+
+const alipay = service;
+
+export default alipay;

sheep/platform/provider/alipay/miniProgram.js

@@ -0,0 +1,217 @@
+import SocialApi from '@/sheep/api/member/social';
+import AuthUtil from '@/sheep/api/member/auth';
+import UserApi from '@/sheep/api/member/user';
+
+const socialType = 40; // 社交类型 - 支付宝小程序
+
+let subscribeEventList = []
+
+function load() {
+  checkUpdate()
+  getSubscribeTemplate()
+}
+
+// ================= 登录相关逻辑===================
+
+// 基本上的登录逻辑是和微信小程序一样的
+
+//支付宝小程序静默授权登录
+const login = async () => {
+  return new Promise(async (resolve,reject)=>{
+    // 1. 获取支付宝的code
+    const codeResult = await uni.login({
+      provider: 'alipay',
+      scopes: 'auth_user',
+    });
+    if(codeResult.errMsg !== 'login:ok'){
+      return resolve(false);
+    }
+
+    // 2. 社交登录
+    const loginResult = await AuthUtil.socialLogin(socialType, codeResult.code, 'default');
+    if (loginResult.code === 0) {
+      setOpenid(loginResult.data.openid);
+      return resolve(true);
+    } else {
+      return resolve(false);
+    }
+  })
+}
+
+// 支付宝小程序手机号授权登录
+const mobileLogin = async (e) =>{
+  return new Promise(async (resolve, reject) => {
+    if (e.errMsg !== 'getPhoneNumber:ok') {
+      return resolve(false);
+    }
+
+    // 1. 获得支付宝 code
+    const codeResult = await uni.login();
+    if (codeResult.errMsg !== 'login:ok') {
+      return resolve(false);
+    }
+
+    // TODO 2. 一键登录
+    // const loginResult = await AuthUtil.weixinMiniAppLogin(e.code, codeResult.code, 'default');
+    // if (loginResult.code === 0) {
+    //   setOpenid(loginResult.data.openid);
+    //   return resolve(true);
+    // } else {
+    //   return resolve(false);
+    // }
+    // TODO 芋艿：shareInfo: uni.getStorageSync('shareLog') || {},
+  });
+}
+
+
+// 支付宝小程序绑定
+const bind = () => {
+  return new Promise(async (resolve, reject) => {
+    // 1. 获得微信 code
+    const codeResult = await uni.login();
+    if (codeResult.errMsg !== 'login:ok') {
+      return resolve(false);
+    }
+
+    // 2. 绑定账号
+    const bindResult = await SocialApi.socialBind(socialType, codeResult.code, 'default');
+    if (bindResult.code === 0) {
+      setOpenid(bindResult.data);
+      return resolve(true);
+    } else {
+      return resolve(false);
+    }
+  });
+};
+
+// 支付宝小程序解除绑定
+const unbind = async (openid) => {
+  const { code } = await SocialApi.socialUnbind(socialType, openid);
+  return code === 0;
+};
+
+// 绑定用户手机号
+const bindUserPhoneNumber = (e) => {
+  return new Promise(async (resolve, reject) => {
+    // todo 待完善
+    // const { code } = await UserApi.updateUserMobileByWeixin(e.code);
+    // if (code === 0) {
+    //   resolve(true);
+    // }
+    resolve(false);
+  });
+};
+
+// 设置 openid 到本地存储，目前只有 pay 支付时会使用
+function setOpenid(openid) {
+  uni.setStorageSync('openid', openid);
+}
+
+// 获得 openid
+async function getOpenid(force = false) {
+  let openid = uni.getStorageSync('openid');
+  if (!openid && force) {
+    const info = await getInfo();
+    if (info && info.openid) {
+      openid = info.openid;
+      setOpenid(openid);
+    }
+  }
+  return openid;
+}
+
+// 获得社交信息
+async function getInfo() {
+  const { code, data } = await SocialApi.getSocialUser(socialType);
+  if (code !== 0) {
+    return undefined;
+  }
+  return data;
+}
+
+
+
+// ========== 非登录相关的逻辑 ==========
+
+// 小程序更新
+const checkUpdate = (silence = true) => {
+  if (uni.canIUse('getUpdateManager')) {
+    const updateManager = uni.getUpdateManager();
+    updateManager.onCheckForUpdate(function(res) {
+      // 请求完新版本信息的回调
+      if (res.hasUpdate) {
+        updateManager.onUpdateReady(function() {
+          uni.showModal({
+            title: '更新提示',
+            content: '新版本已经准备好，是否重启应用？',
+            success: function(res) {
+              if (res.confirm) {
+                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+                updateManager.applyUpdate();
+              }
+            },
+          });
+        })
+      }
+    });
+  } else {
+    if(!silence) {
+      uni.showToast({
+        title: '当前为最新版本',
+        icon: 'none',
+      });
+    }
+  }
+}
+
+// 获取订阅消息模板
+async function getSubscribeTemplate(){
+  const { code, data } = await SocialApi.getSubscribeTemplateList();
+  if (code === 0) {
+    subscribeEventList = data;
+  }
+}
+
+// 订阅消息
+function subscribeMessage(event, callback = undefined){
+  let tmplIds = [];
+  if (typeof event === 'string') {
+    const temp = subscribeEventList.find(item => item.title.includes(event));
+  }
+  if (temp) {
+    tmplIds.push(temp.id);
+  }
+  if (typeof event === 'object') {
+    event.forEach((e) => {
+      const temp = subscribeEventList.find(item => item.title.includes(e));
+      if (temp) {
+        tmplIds.push(temp.id);
+      }
+    });
+  }
+
+  if (tmplIds.length === 0) return;
+  uni.requestSubscribeMessage({
+    tmplIds,
+    success: ()=>{
+      // 不管是拒绝还是同意都触发
+      callback && callback()
+    },
+    fail: (err) => {
+      console.log(err);
+    },
+  });
+}
+
+export default {
+  load,
+  login,
+  bind,
+  unbind,
+  bindUserPhoneNumber,
+  mobileLogin,
+  getInfo,
+  getOpenid,
+  subscribeMessage,
+  checkUpdate,
+};

sheep/platform/provider/wechat/index.js

@@ -10,6 +10,8 @@ import service from './miniProgram';
 import service from './openPlatform';
 // #endif
 
-const wechat = service;
+let wechat = {};
-
+if (typeof service !== 'undefined') {
+  wechat = service;
+}
 export default wechat;

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>