feat:微信支付方式

src/pages/lxMall/pay/components/wechat/index.less

@@ -15,11 +15,12 @@
 
   &_imgbox {
     padding: 20px;
+    width: 180px;
+    height: 180px;
     border: 1px solid rgba(245, 245, 245, 1);
 
     &>img {
       width: 200px;
-
       height: 200px;
     }
   }

src/pages/lxMall/pay/components/wechat/index.tsx

@@ -2,10 +2,10 @@ import React, { useEffect } from 'react'
 import { GetOrderOrderPayDetailsResponse } from '@/services/OrderApi'
 import { LAYOUT_TYPE } from '@/constants'
 import wechatIcon from '@/assets/imgs/wechat_icon.png'
-import wechatImg from '@/assets/imgs/wechat.png'
 import { priceFormat } from '@/utils/numberFomat'
 import { PublicApi } from '@/services/api'
-import { message } from 'antd'
+import { message, Spin } from 'antd'
+import QRCode from 'qrcode'
 import styles from './index.less'
 import { useState } from 'react'
 
@@ -20,12 +20,23 @@ interface WechatPayWayPropsType {
 
 const WechatPayWay: React.FC<WechatPayWayPropsType> = (props) => {
   const { payInfo, orderId, onChange, orderInfo, layoutType, shopUrlParam } = props
-  const [wechatPayUrl, setWechatPayUrl] = useState<string>('')
+  const [wechatPayUrl, setWechatPayUrl] = useState<any>('')
+  const [pageLoading, setPageLoading] = useState<boolean>(true)
 
   useEffect(() => {
     pay()
   }, [])
 
+  const generateQrCode = (path: any) => {
+    // 生成二维码
+    QRCode.toDataURL(path).then((url: any) => {
+      setWechatPayUrl(url)
+    })
+      .catch((err: any) => {
+        console.error(err)
+      })
+  }
+
   const pay = () => {
     let param = {
       id: Number(orderId),
@@ -37,15 +48,18 @@ const WechatPayWay: React.FC<WechatPayWayPropsType> = (props) => {
     PublicApi.postOrderPendingOrderPay(param).then(res => {
       if(res.code === 1000) {
         message.destroy()
+        generateQrCode(res.data)
       }
+      setPageLoading(false)
       // setWechatPayUrl(res.data)
     }).catch(() => {
       onChange(false)
+      setPageLoading(false)
     })
   }
 
   return (
-    <>
+    <Spin spinning={pageLoading}>
       <div className={styles.common_title}>
         <div className={styles.common_title_icon}><img src={wechatIcon} /></div>
         <span>微信支付</span>
@@ -53,7 +67,7 @@ const WechatPayWay: React.FC<WechatPayWayPropsType> = (props) => {
       <div className={styles.wechat_payway}>
         <p className={styles.wechat_payway_title}>使用微信扫一扫下方二维码</p>
         <div className={styles.wechat_payway_imgbox}>
-          <img src={wechatImg} />
+          {wechatPayUrl && <img src={wechatPayUrl} />}
         </div>
         <div className={styles.wechat_payway_needpay}>
           <label>当前需支付：</label>
@@ -61,7 +75,7 @@ const WechatPayWay: React.FC<WechatPayWayPropsType> = (props) => {
           <label>RMB</label>
         </div>
       </div>
-    </>
+    </Spin>
   )
 }