From 8b3033aa10cfc8c0a468fe596036eef7c9060fe0 Mon Sep 17 00:00:00 2001
From: bootx <xxm1995@outlook.com>
Date: Sun, 16 Jun 2024 01:28:35 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=BE=AE=E4=BF=A1=E5=88=86=E8=B4=A6?=
 =?UTF-8?q?=E8=80=85=E7=BB=91=E5=AE=9A=E6=94=AF=E6=8C=81=E6=89=AB=E7=A0=81?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96OpenId?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/payment/WechatOpenId.api.ts           | 46 ++++++++++++++++
 src/views/demo/cashier/CashierQrCode.vue      |  1 -
 .../receiver/AllocationReceiver.api.ts        |  1 +
 .../receiver/AllocationReceiverEdit.vue       | 53 ++++++++++++++++---
 .../allocation/receiver/OpenIdQrCode.vue      | 33 ++++++++++++
 5 files changed, 127 insertions(+), 7 deletions(-)
 create mode 100644 src/api/payment/WechatOpenId.api.ts
 create mode 100644 src/views/payment/allocation/receiver/OpenIdQrCode.vue

diff --git a/src/api/payment/WechatOpenId.api.ts b/src/api/payment/WechatOpenId.api.ts
new file mode 100644
index 000000000..414c190c2
--- /dev/null
+++ b/src/api/payment/WechatOpenId.api.ts
@@ -0,0 +1,46 @@
+import { defHttp } from '/@/utils/http/axios'
+import { Result } from '/#/axios'
+
+/**
+ * 微信OpenId服务类
+ */
+export function generateAuthUrl() {
+  return defHttp.post<Result<WeChatAuthUrlResult>>({
+    url: '/wechat/openId/generateAuthUrl',
+  })
+}
+
+/**
+ * 微信OpenId服务类
+ */
+export function queryOpenId(code: string) {
+  return defHttp.get<Result<WeChatOpenIdResult>>({
+    url: '/wechat/openId/queryOpenId',
+    params: { code },
+  })
+}
+
+/**
+ * 微信获取OpenId授权链接和查询标识返回类
+ */
+export interface WeChatAuthUrlResult {
+  /** 授权访问链接 */
+  authUrl: string
+  /** 标识码, 用于查询是否获取到了OpenId */
+  code: string
+}
+
+/**
+ * 微信OpenId查询结果
+ */
+export interface WeChatOpenIdResult {
+  /** OpenId */
+  openId: string
+  /**
+   * 状态
+   * pending:查询中
+   * success:查询成功
+   * fail:查询失败
+   */
+  status: string
+}
diff --git a/src/views/demo/cashier/CashierQrCode.vue b/src/views/demo/cashier/CashierQrCode.vue
index 28964da2a..309f5b4f4 100644
--- a/src/views/demo/cashier/CashierQrCode.vue
+++ b/src/views/demo/cashier/CashierQrCode.vue
@@ -14,7 +14,6 @@
   import { $ref } from 'vue/macros'
 
   let visible = $ref(false)
-  let icon = $ref('')
   let bottomTitle = $ref('')
   let qrUrl = $ref('')
 
diff --git a/src/views/payment/allocation/receiver/AllocationReceiver.api.ts b/src/views/payment/allocation/receiver/AllocationReceiver.api.ts
index 3cdf5fd6b..183fff13a 100644
--- a/src/views/payment/allocation/receiver/AllocationReceiver.api.ts
+++ b/src/views/payment/allocation/receiver/AllocationReceiver.api.ts
@@ -82,6 +82,7 @@ export function del(id) {
   })
 }
 
+
 /**
  * 分账接收方
  */
diff --git a/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue b/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue
index 9c199e0fa..45dcc62e1 100644
--- a/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue
+++ b/src/views/payment/allocation/receiver/AllocationReceiverEdit.vue
@@ -45,7 +45,7 @@
         </a-form-item>
         <a-form-item label="接收方账号" name="receiverAccount">
           <a-input v-model:value="form.receiverAccount" :disabled="!addable" placeholder="请输入接收方账号">
-            <template v-if="['wx_personal', 'ali_open_id'].includes(form.receiverType as string)" #suffix>
+            <template v-if="['wx_personal', 'ali_open_id'].includes(form.receiverType as string) && addable" #suffix>
               <icon icon="ant-design:qrcode-outlined" @click="showQrCode" />
             </template>
           </a-input>
@@ -73,12 +73,12 @@
         <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
       </a-space>
     </template>
+    <open-id-qr-code ref="openIdQrCode" />
   </basic-modal>
 </template>
 
 <script setup lang="ts">
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { useValidate } from '/@/hooks/bootx/useValidate'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { computed, nextTick } from 'vue'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
@@ -88,6 +88,9 @@
   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 OpenIdQrCode from './OpenIdQrCode.vue'
+  import { useIntervalFn } from '@vueuse/shared'
 
   const {
     initFormEditType,
@@ -95,7 +98,6 @@
     diffForm,
     labelCol,
     wrapperCol,
-    modalWidth,
     title,
     confirmLoading,
     visible,
@@ -103,9 +105,8 @@
     showable,
     formEditType,
   } = useFormEdit()
-  const { existsByServer } = useValidate()
   const { createMessage } = useMessage()
-  const { dictConvert, dictDropDown } = useDict()
+  const { dictDropDown } = useDict()
 
   // 表单
   const formRef = $ref<FormInstance>()
@@ -115,6 +116,8 @@
   let receiverTypeList = $ref<LabeledValue[]>([])
   let relationTypeList = $ref<LabeledValue[]>([])
 
+  const openIdQrCode = $ref<any>()
+
   // 校验
   const rules = computed(() => {
     return {
@@ -199,7 +202,45 @@
    * 扫码绑定
    */
   function showQrCode() {
-    createMessage.info('扫码获取OpenID开发中, 敬请期待')
+    // 微信
+    if (form.receiverType === 'wx_personal') {
+      getOpenId()
+    }
+    if (form.receiverType === 'ali_open_id') {
+      createMessage.info('扫码获取支付宝商户ID开发中, 敬请期待')
+    }
+  }
+
+  /**
+   * 获取微信OpenId
+   */
+  async function getOpenId() {
+    // 获取微信认证链接
+    const { data: urlResult } = await generateAuthUrl()
+    openIdQrCode.init(urlResult.authUrl)
+    // 轮训查询
+    const { pause, resume } = useIntervalFn(
+      () => {
+        queryOpenId(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()
   }
 
   /**
diff --git a/src/views/payment/allocation/receiver/OpenIdQrCode.vue b/src/views/payment/allocation/receiver/OpenIdQrCode.vue
new file mode 100644
index 000000000..6c39a26dd
--- /dev/null
+++ b/src/views/payment/allocation/receiver/OpenIdQrCode.vue
@@ -0,0 +1,33 @@
+<template>
+  <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>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import QrCode from '/@/components/Qrcode/src/Qrcode.vue'
+  import { $ref } from 'vue/macros'
+
+  let visible = $ref(false)
+  let qrUrl = $ref('')
+
+  /**
+   * 显示
+   */
+  function init(url) {
+    visible = true
+    qrUrl = url
+  }
+
+  /**
+   * 关闭
+   */
+  function handleClose() {
+    visible = false
+  }
+  defineExpose({ init, handleClose })
+</script>
+
+<style scoped></style>