feat(@vben/web-antd): 实现支付渠道的动态显示控制

- 添加 getEnableChannelCodeList API 接口用于获取指定应用的开启支付渠道编码列表
- 在收银台页面引入支付渠道启用状态检查功能

apps/web-antd/src/api/pay/channel/index.ts

@@ -30,3 +30,10 @@ export function createChannel(data: PayChannelApi.Channel) {
 export function updateChannel(data: PayChannelApi.Channel) {
   return requestClient.put('/pay/channel/update', data);
 }
+
+/** 获得指定应用的开启的支付渠道编码列表 */
+export function getEnableChannelCodeList(appId: number) {
+  return requestClient.get<string[]>(
+    `/pay/channel/get-enable-code-list?appId=${appId}`,
+  );
+}

apps/web-antd/src/views/pay/cashier/index.vue

@@ -22,6 +22,7 @@ import {
   QRCode,
 } from 'ant-design-vue';
 
+import { getEnableChannelCodeList } from '#/api/pay/channel';
 import { getOrder, submitOrder } from '#/api/pay/order';
 
 import { channelsAlipay, channelsMock, channelsWechat } from './data';
@@ -56,6 +57,14 @@ const barCode = ref({
   visible: false,
 });
 
+/** 开启的支付渠道编码列表 */
+const enableChannelCodeList = ref<string[]>([]);
+
+/** 判断是否支持的支付渠道 */
+function isSupportPayChannel(channelCode: string) {
+  return enableChannelCodeList.value.includes(channelCode);
+}
+
 /** 获得支付信息 */
 async function getDetail() {
   // 1. 获取路由参数
@@ -88,6 +97,10 @@ async function getDetail() {
   }
   // 2. 正常展示支付信息
   payOrder.value = res;
+
+  // 3. 获得指定应用的开启的支付渠道编码列表
+  const channelCodeList = await getEnableChannelCodeList(res.appId);
+  enableChannelCodeList.value = channelCodeList;
 }
 
 /** 处理支付 */
@@ -329,47 +342,50 @@ onBeforeUnmount(() => {
     </Card>
     <Card title="选择支付宝支付" class="mt-4">
       <div class="flex">
-        <div
+        <template v-for="channel in channelsAlipay" :key="channel.code">
-          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          <div
-          v-for="channel in channelsAlipay"
+            class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
-          :key="channel.code"
+            v-if="isSupportPayChannel(channel.code)"
-          @click="handlePay(channel.code)"
+            @click="handlePay(channel.code)"
-        >
+          >
-          <div class="flex items-center justify-center">
+            <div class="flex items-center justify-center">
-            <component :is="channel.icon" class="h-10 w-10" />
+              <component :is="channel.icon" class="h-10 w-10" />
+            </div>
+            <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
           </div>
-          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </template>
-        </div>
       </div>
     </Card>
     <Card title="选择微信支付" class="mt-4">
       <div class="flex">
-        <div
+        <template v-for="channel in channelsWechat" :key="channel.code">
-          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          <div
-          v-for="channel in channelsWechat"
+            class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
-          :key="channel.code"
+            v-if="isSupportPayChannel(channel.code)"
-          @click="handlePay(channel.code)"
+            @click="handlePay(channel.code)"
-        >
+          >
-          <div class="flex items-center justify-center">
+            <div class="flex items-center justify-center">
-            <component :is="channel.icon" class="h-10 w-10" />
+              <component :is="channel.icon" class="h-10 w-10" />
+            </div>
+            <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
           </div>
-          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </template>
-        </div>
       </div>
     </Card>
     <Card title="选择其它支付" class="mt-4">
       <div class="flex">
-        <div
+        <template v-for="channel in channelsMock" :key="channel.code">
-          class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
+          <div
-          v-for="channel in channelsMock"
+            class="mr-4 w-40 cursor-pointer items-center border-2 border-gray-200 pb-1 pt-4 text-center hover:border-blue-500"
-          :key="channel.code"
+            v-if="isSupportPayChannel(channel.code)"
-          @click="handlePay(channel.code)"
+            @click="handlePay(channel.code)"
-        >
+          >
-          <div class="flex items-center justify-center">
+            <div class="flex items-center justify-center">
-            <component :is="channel.icon" class="h-10 w-10" />
+              <component :is="channel.icon" class="h-10 w-10" />
+            </div>
+            <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
           </div>
-          <div class="mt-2 pt-1 text-center">{{ channel.name }}</div>
+        </template>
-        </div>
       </div>
     </Card>
     <Modal class="w-2/5" :title="title">