ZF/yudao-mall-uniapp
1
0
Fork 0
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git synced 2025-12-30 01:32:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

支付宝小程序适配

Browse Source
This commit is contained in:
yunlongn
2025-11-26 14:36:16 +08:00
parent 44eec40775
commit 9c509c6f15
16 changed files with 305 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
manifest.json
View File

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

9
mini.project.json Normal file
View File

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

10
pages.json
View File

@@ -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": [{

5
pages/goods/components/detail/detail-navbar.vue
View File

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

5
pages/goods/components/list/list-navbar.vue
View File

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

2
pages/goods/index.vue
View File

@@ -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 信息

20
sheep/components/s-auth-modal/s-auth-modal.vue
View File

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

5
sheep/components/s-layout/s-layout.vue
View File

@@ -214,6 +214,11 @@
// 组件中使用 onMounted 监听页面加载，不是页面组件不使用 onShow
onMounted(()=>{
// #ifdef MP-ALIPAY
uni.setNavigationBarTitle({
title: "",
});
// #endif
if (!isEmpty(shareInfo.value)) {
sheep.$platform.share.updateShareInfo(shareInfo.value);
}

4
sheep/components/s-menu-grid/s-menu-grid.vue
View File

@@ -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)">
<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
<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" @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 }]">

2
sheep/components/s-tabbar/s-tabbar.vue
View File

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

17
sheep/platform/index.js
View File

@@ -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;
};
// 支付服务转发

6
sheep/platform/provider/alipay/index.js Normal file
View File

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

217
sheep/platform/provider/alipay/miniProgram.js Normal file
View File

@@ -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,
};

6
sheep/platform/provider/wechat/index.js
View File

@@ -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;

8
sheep/ui/su-inner-navbar/su-inner-navbar.vue
View File

@@ -17,8 +17,12 @@
-->
<view class="ui-navbar-box">
<view
class="ui-bar ss-p-x-20"
:class="state.isDark ? 'text-white' : 'text-black'"
class="ui-bar"
: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">

2
sheep/ui/su-tabbar-item/su-tabbar-item.vue
View File

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