feat:pay

src/views/components/ChargeCloudPublish.vue

@@ -40,8 +40,9 @@
     :cancel-btn="null"
     @close="getPayResult"
   >
-    <WechatPay
+    <Pay
       :order="data.order"
+      :alipay-url="data.order.alipayUrl"
       :code-url="data.order.codeUrl"
       @success="onSuccess"
     />
@@ -51,7 +52,7 @@
 <script lang="ts" setup>
 import { onBeforeMount, reactive } from 'vue';
 import axios from 'axios';
-import WechatPay from './WechatPay.vue';
+import Pay from './Pay.vue';
 
 const { projectId } = defineProps<{
   projectId: string;

src/views/components/Graphics.vue

@@ -276,8 +276,9 @@
       :cancel-btn="null"
       @close="getPayResult"
     >
-      <WechatPay
+      <Pay
         :order="wechatPayDialog.order"
+        :alipay-url="wechatPayDialog.order.alipayUrl"
         :code-url="wechatPayDialog.order.codeUrl"
         @success="onChargeSuccess"
       />
@@ -360,7 +361,7 @@ import { debounce, throttle } from '@/services/debouce';
 import { searchObjectPinyin } from '@/services/pinyin';
 import { getCookie } from '@/services/cookie';
 import { parseSvg } from '@meta2d/svg';
-import WechatPay from './WechatPay.vue';
+import Pay from './Pay.vue';
 import { filename } from '@/services/file';
 import { useUser } from '@/services/user';
 import { iframeCustom } from '@/services/defaults';

src/views/components/Header.vue

@@ -461,8 +461,9 @@
     @close="finishPay"
     @confirm="finishPay"
   >
-    <WechatPay
+    <Pay
       :order="data.order"
+      :alipay-url="data.order.alipayUrl"
       :code-url="data.order.codeUrl"
       @success="onSuccess"
     />
@@ -540,7 +541,7 @@ import {
   getFrameDownloadList
 } from '@/services/download';
 import { formComponents } from '@/services/defaults';
-import WechatPay from './WechatPay.vue';
+import Pay from './Pay.vue';
 import {getNetJsDiagram} from '@/services/material';
 
 const { enterprise } = useEnterprise();
@@ -575,7 +576,7 @@ const data = reactive<any>({
 
 onBeforeMount(async () => {
   // getAssets();
-  getNetJsDiagram();
+  // getNetJsDiagram();
 });
 
 const logout = () => {

src/views/components/WechatPay.vue → src/views/components/Pay.vue

@@ -12,7 +12,7 @@
         >
       </div>
     </div>
-    <div class="wepay">
+    <!-- <div class="wepay">
       <h5>微信支付</h5>
       <div class="flex center middle">
         <div class="mr-20">
@@ -23,6 +23,29 @@
           </div>
         </div>
       </div>
+    </div> -->
+    <div class="code">
+      <h4 style="color:#171b27;">扫码支付</h4>
+      <div class="flex">
+        <div>
+          <img class="qrcode" :src="payQRCode.wepay" />
+          <div class="text-center">
+            <img src="/img/wepay.png" />
+          </div>
+        </div>
+        <div>
+          <iframe
+            :src="payQRCode.alipay"
+            frameborder="no"
+            scrolling="no"
+            allowtransparency="true"
+          />
+          <div class="text-center">
+            <img src="/img/alipay.png" />
+          </div>
+        </div>
+      </div>
+      <div class="mt-3" style="color:#171b27;">【注意】不支持退款</div>
     </div>
   </div>
 </template>
@@ -34,6 +57,7 @@ import QRCode from 'qrcode';
 
 const props = defineProps<{
   order: any;
+  alipayUrl: string;
   codeUrl: string;
 }>();
 
@@ -41,13 +65,16 @@ const emit = defineEmits(['success']);
 
 const payType = ref('wechat');
 
-const payQRCode = ref('');
+const payQRCode = ref<any>({});
 
 let timer: any;
 
 onBeforeMount(async () => {
-  payQRCode.value = await QRCode.toDataURL(props.codeUrl);
+  payQRCode.value.alipay = props.alipayUrl;
 
+  payQRCode.value.wepay = await QRCode.toDataURL(props.codeUrl, {
+    margin: 0,
+  });
   timer = setInterval(async () => {
     const success = await getPayResult();
     if (success) {
@@ -81,7 +108,7 @@ const getPayResult = async () => {
     align-items: center;
   }
 
-  .pay-type {
+  /* .pay-type {
     background-color: #f7f8fa;
   }
 
@@ -99,6 +126,37 @@ const getPayResult = async () => {
     line-height: 20px;
     color: #ffffff;
     font-size: 13px;
+  } */
+  .code {
+    padding: 30px 40px;
+    color: var(--color-title);
+    background: #f7f8fa;
+    margin-top: 8px;
+  }
+
+  .flex > div {
+    flex: 1;
+    margin-top: 8px;
+    .text-center {
+      width: 150px;
+      text-align: center;
+      & > img {
+        height: 30px;
+        margin: 8px auto;
+      }
+    }
+  }
+
+  .qrcode {
+    width: 150px;
+    margin-top: 20px;
+  }
+
+  iframe {
+    width: 160px;
+    height: 160px;
+    margin-top: 16px;
+    transform: scale(0.9375);
   }
 }
 </style>