feat 新增支付宝获取OpenId相关接口

This commit is contained in:
bootx
2024-06-16 15:57:43 +08:00
parent 8b3033aa10
commit 5dff0896d0
3 changed files with 78 additions and 18 deletions

View File

@@ -2,20 +2,39 @@ import { defHttp } from '/@/utils/http/axios'
import { Result } from '/#/axios'
/**
* 微信OpenId服务类
* 获取微信授权认证地址
*/
export function generateAuthUrl() {
return defHttp.post<Result<WeChatAuthUrlResult>>({
url: '/wechat/openId/generateAuthUrl',
export function generateWxAuthUrl() {
return defHttp.post<Result<AuthUrlResult>>({
url: '/wechat/auth/generateAuthUrl',
})
}
/**
* 微信OpenId服务类
* 查询微信OpenId数据
*/
export function queryOpenId(code: string) {
return defHttp.get<Result<WeChatOpenIdResult>>({
url: '/wechat/openId/queryOpenId',
export function queryWxOpenId(code: string) {
return defHttp.get<Result<OpenIdResult>>({
url: '/wechat/auth/queryOpenId',
params: { code },
})
}
/**
* 获取支付宝授权认证地址
*/
export function generateAliAuthUrl() {
return defHttp.post<Result<AuthUrlResult>>({
url: '/alipay/auth/generateAuthUrl',
})
}
/**
* 查询支付宝OpenId
*/
export function queryAliOpenId(code: string) {
return defHttp.get<Result<OpenIdResult>>({
url: '/alipay/auth/queryOpenId',
params: { code },
})
}
@@ -23,7 +42,7 @@ export function queryOpenId(code: string) {
/**
* 微信获取OpenId授权链接和查询标识返回类
*/
export interface WeChatAuthUrlResult {
export interface AuthUrlResult {
/** 授权访问链接 */
authUrl: string
/** 标识码, 用于查询是否获取到了OpenId */
@@ -33,7 +52,7 @@ export interface WeChatAuthUrlResult {
/**
* 微信OpenId查询结果
*/
export interface WeChatOpenIdResult {
export interface OpenIdResult {
/** OpenId */
openId: string
/**

View File

@@ -88,7 +88,11 @@
import { useDict } from '/@/hooks/bootx/useDict'
import { LabeledValue } from 'ant-design-vue/lib/select'
import Icon from '/@/components/Icon'
import { generateAuthUrl, queryOpenId } from '/@/api/payment/WechatOpenId.api'
import {
generateAliAuthUrl,
generateWxAuthUrl, queryAliOpenId,
queryWxOpenId
} from "/@/api/payment/WechatOpenId.api";
import OpenIdQrCode from './OpenIdQrCode.vue'
import { useIntervalFn } from '@vueuse/shared'
@@ -204,24 +208,56 @@
function showQrCode() {
// 微信
if (form.receiverType === 'wx_personal') {
getOpenId()
getWxOpenId()
}
if (form.receiverType === 'ali_open_id') {
createMessage.info('扫码获取支付宝商户ID开发中, 敬请期待')
getAliOpenId()
}
}
/**
* 获取微信OpenId
*/
async function getOpenId() {
async function getWxOpenId() {
// 获取微信认证链接
const { data: urlResult } = await generateAuthUrl()
openIdQrCode.init(urlResult.authUrl)
const { data: urlResult } = await generateWxAuthUrl()
openIdQrCode.init(urlResult.authUrl, '请使用微信客户端"扫一扫"')
// 轮训查询
const { pause, resume } = useIntervalFn(
() => {
queryOpenId(urlResult.code)
queryWxOpenId(urlResult.code)
.then((res) => {
// 成功
if (res.data.status === 'success') {
openIdQrCode.handleClose()
createMessage.success('获取OpenID成功')
form.receiverAccount = res.data.openId
pause()
}
})
.catch((err) => {
// 失败
openIdQrCode.handleClose()
pause()
})
},
1000 * 3,
{ immediate: false },
)
resume()
}
/**
* 获取支付宝OpenId
*/
async function getAliOpenId() {
// 获取支付宝认证链接
const { data: urlResult } = await generateAliAuthUrl()
openIdQrCode.init(urlResult.authUrl, '请使用支付宝客户端"扫一扫"')
// 轮训查询
const { pause, resume } = useIntervalFn(
() => {
queryAliOpenId(urlResult.code)
.then((res) => {
// 成功
if (res.data.status === 'success') {

View File

@@ -2,6 +2,9 @@
<a-modal :visible="visible" title="扫码获取OpenId" @cancel="handleClose" :footer="null" :width="300">
<div style="display: flex; flex-direction: column; align-items: center; padding: 20px 0">
<qr-code :options="{ margin: 0 }" :width="250" :value="qrUrl" />
<div class="mt-15px mb-15px" style="display: flex; flex-direction: row; align-items: center; justify-content: center">
{{ bottomTitle }}
</div>
</div>
</a-modal>
</template>
@@ -12,13 +15,15 @@
let visible = $ref(false)
let qrUrl = $ref('')
let bottomTitle = $ref('')
/**
* 显示
*/
function init(url) {
function init(url, title) {
visible = true
qrUrl = url
bottomTitle = title
}
/**