From 5dff0896d0d4295ccf92a2acd133eac44eafe288 Mon Sep 17 00:00:00 2001
From: bootx <xxm1995@outlook.com>
Date: Sun, 16 Jun 2024 15:57:43 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=96=B0=E5=A2=9E=E6=94=AF=E4=BB=98?=
 =?UTF-8?q?=E5=AE=9D=E8=8E=B7=E5=8F=96OpenId=E7=9B=B8=E5=85=B3=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/payment/WechatOpenId.api.ts           | 39 +++++++++++----
 .../receiver/AllocationReceiverEdit.vue       | 50 ++++++++++++++++---
 .../allocation/receiver/OpenIdQrCode.vue      |  7 ++-
 3 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/src/api/payment/WechatOpenId.api.ts b/src/api/payment/WechatOpenId.api.ts
index 414c190c2..6af52a49e 100644
--- a/src/api/payment/WechatOpenId.api.ts
+++ b/src/api/payment/WechatOpenId.api.ts
@@ -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
   /**
diff --git a/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue b/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue
index 45dcc62e1..902d3150a 100644
--- a/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue
+++ b/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue
@@ -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') {
diff --git a/src/views/payment/allocation/receiver/OpenIdQrCode.vue b/src/views/payment/allocation/receiver/OpenIdQrCode.vue
index 6c39a26dd..831ab99f9 100644
--- a/src/views/payment/allocation/receiver/OpenIdQrCode.vue
+++ b/src/views/payment/allocation/receiver/OpenIdQrCode.vue
@@ -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
   }
 
   /**