瀏覽代碼

添加阿里支付ACP功能,包含新API获取URL参数及相关组件更新

Zenas 6 天之前
父節點
當前提交
9c3000a6c2
共有 3 個文件被更改,包括 52 次插入0 次删除
  1. 二進制
      src/assets/payments/zfb.png
  2. 34 0
      src/views/adweb/payments/AdwebPayments.vue
  3. 18 0
      src/views/adweb/payments/index.api.ts

二進制
src/assets/payments/zfb.png


+ 34 - 0
src/views/adweb/payments/AdwebPayments.vue

@@ -13,13 +13,47 @@
           </div>
         </div>
       </a-col>
+      <a-col :span="12" v-if="acpUrl">
+        <div class="wrap new">
+          <img src="../../../assets/payments/zfb.png" />
+          <div class="content">
+            <p class="title">阿里支付ACP</p>
+            <p class="describe">阿里跨境支付解决方案,支持多币种收款,安全便捷的跨境支付体验</p>
+            <p class="info">
+              <a-button type="primary" @click="openWindow(acpUrl)">去使用</a-button>
+            </p>
+          </div>
+        </div>
+      </a-col>
     </a-row>
   </div>
 </template>
 
 <script>
+import { getACPUrlParams } from './index.api';
+
 export default {
+  data() {
+    return {
+      acpUrl: '',
+    };
+  },
+  async created() {
+    await this.initACPUrl();
+  },
   methods: {
+    async initACPUrl() {
+      try {
+        const result = await getACPUrlParams();
+        if (result?.params?.signature && result?.params?.encrypt) {
+          this.acpUrl = `https://payment.alibaba.com/home.html?from=suhaotong&&signature=${result.params.signature}&platformParam=${result.params.encrypt}`;
+        }
+      } catch (error) {
+        if (error?.response?.status !== 500) {
+          console.error('Failed to get ACP URL params:', error);
+        }
+      }
+    },
     openWindow(url) {
       // 获取屏幕的宽度和高度
       const screenWidth = window.screen.width;

+ 18 - 0
src/views/adweb/payments/index.api.ts

@@ -0,0 +1,18 @@
+import { defHttp } from '/@/utils/http/axios';
+
+interface ACPUrlParamsResponse {
+  url: string;
+  params: {
+    [key: string]: string;
+  };
+}
+
+/**
+ * 获取阿里支付ACP的URL参数
+ * @returns Promise<ACPUrlParamsResponse>
+ */
+export function getACPUrlParams() {
+  return defHttp.get<ACPUrlParamsResponse>({
+    url: '/payment/acp/getUrlParams',
+  },{errorMessageMode: 'none'});
+}