feat:对接授信支付

config/mallRoutes/index.ts

@@ -73,6 +73,15 @@ const mallRoute = {
       component: '@/pages/lxMall/pay',
     },
     {
+      // 支付结果页面
+      path: '/pay/result',
+      name: 'payResult',
+      key: 'payResult',
+      hide: true,
+      hideHeader: true,
+      component: '@/pages/lxMall/payResult',
+    },
+    {
       // 在线求购
       path: `/purchaseOnline`,
       name: 'purchaseOnline',

src/app.tsx

@@ -44,6 +44,7 @@ const mallLists = [
   '/purchaseOrder',
   '/order',
   '/pay',
+  '/pay/result',
   '/shop',
   '/shop/commodity',
   '/shop/commodity/search',

src/locales/zh-CN/menu.ts

@@ -32,6 +32,7 @@ export default {
   'menu.order': '订单结算',
   'menu.purchaseOrder': '进货单',
   'menu.pay': '收银台',
+  'menu.payResult': '支付结果',
   'menu.mallCommodity': '商品商城',
   'menu.shopCommodity': '商品',
   'menu.shopCommoditySearch': '商品搜索',

src/pages/lxMall/order/index.tsx

@@ -307,7 +307,11 @@ const Order: React.FC<OrderPropsType> = (props) => {
     PublicApi.postOrderProcurementOrderAdd(params).then(res => {
       if (res.code === 1000) {
         const data = res.data
-        history.push(`/pay?orderId=${data.orderId}`)
+        if (selectPayWay.payType === 4) {
+          history.push(`/pay/result?orderId=${data.orderId}`)
+        } else {
+          history.push(`/pay?orderId=${data.orderId}`)
+        }
       }
       setConfirmLoading(false)
     }).catch(() => {

src/pages/lxMall/order/payway/index.less

@@ -35,6 +35,12 @@
           margin-right: 8px;
         }
 
+        &.disabled {
+          background-color: #f5f5f5;
+          color: rgba(0, 0, 0, 0.25);
+          cursor: not-allowed;
+        }
+
         &.active {
           border: 1px solid var(--mall_main_color);
 

src/pages/lxMall/order/payway/index.tsx

 import React, { useState, useEffect } from 'react'
 import cx from 'classnames'
+import { PublicApi } from '@/services/api'
+import { GetPayCreditGetCreditResponse } from '@/services/PayApi'
 import { DownOutlined } from '@ant-design/icons'
 import alipayIcon from '@/assets/imgs/alipay_icon.png'
 import wechatIcon from '@/assets/imgs/wechat_icon.png'
@@ -15,17 +17,46 @@ interface PayWayProps {
 const PayWay: React.FC<PayWayProps> = (props) => {
   const { payWayList = [], onChange, selectItem = {} } = props
   const [expand, setExpand] = useState<boolean>(false)
+  const [creditInfo, setCreditInfo] = useState<GetPayCreditGetCreditResponse>()
 
   const handleSelectWay = (item) => {
+    if (item.payType === 3) {
+      if (!getCreditState(item)) {
+        return
+      }
+    }
     onChange(item)
   }
 
   useEffect(() => {
+    fetchCreditInfo()
+  }, [])
+
+  useEffect(() => {
     if (payWayList && payWayList.length === 1) {
       onChange(payWayList[0].payList[0])
     }
   }, [payWayList])
 
+  const fetchCreditInfo = () => {
+    PublicApi.getPayCreditGetCredit().then(res => {
+      if(res.code === 1000) {
+        setCreditInfo(res.data)
+      }
+    })
+  }
+
+  const getCreditState = (info):boolean => {
+    let result = true
+    // 判断支付方式是否授信支付
+    if (info.payType === 3) {
+      if (!creditInfo) {
+        result = false
+      }
+    }
+    return result
+  }
+
   return (
     <div className={styles.payway}>
       <div className={styles.common_title}>
@@ -38,7 +69,7 @@ const PayWay: React.FC<PayWayProps> = (props) => {
             <ul className={styles.payway_pay_list}>
               {
                 item.payList.map((childItem, childIndex) => (
-                  <li className={cx(styles.payway_pay_list_item, childItem.id === selectItem.id ? styles.active : '')} key={`payway_pay_list_item_${childIndex}`} onClick={() => handleSelectWay(childItem)}>
+                  <li className={cx(styles.payway_pay_list_item, childItem.id === selectItem.id ? styles.active : '', !getCreditState(childItem) ? styles.disabled : '')} key={`payway_pay_list_item_${childIndex}`} onClick={() => handleSelectWay(childItem)}>
                     {childItem.way === '支付宝' && <img src={alipayIcon} />}
                     {childItem.way === '微信' && <img src={wechatIcon} />}
                     {childItem.way === '银联' && <img src={bankIcon} />}

src/pages/lxMall/pay/components/common.less

@@ -44,4 +44,26 @@
       opacity: .8;
     }
   }
+}
+
+
+.pay_btn {
+  width: 160px;
+  text-align: center;
+  color: #FFF;
+  height: 50px;
+  outline: none;
+  font-size: 16px;
+  border-color: #D32F2F;
+  border-radius: 0;
+  background-color: #D32F2F;
+  cursor: pointer;
+  margin: 20px auto 0 auto;
+
+  &:hover, &:focus, &:active {
+    opacity: .9;
+    border-color: #D32F2F;
+    color: #FFF;
+    background-color: #D32F2F;
+  }
 }
\ No newline at end of file

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

@@ -94,19 +94,3 @@
     color: #909399;
   }
 }
-
-.pay_btn {
-
-  width: 160px;
-  height: 50px;
-  color: #ffffff;
-  text-align: center;
-  line-height: 50px;
-  background-color: #D32F2F;
-  cursor: pointer;
-  margin-top: 20px;
-
-  &:hover {
-    opacity: .9;
-  }
-}
\ No newline at end of file

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

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import cx from 'classnames'
+import { PublicApi } from '@/services/api'
+import { GetOrderOrderPayDetailsResponse } from '@/services/OrderApi'
+import { GetPayCreditGetCreditResponse } from '@/services/PayApi'
+import { GetMemberSecurityGetResponse } from '@/services/MemberApi'
+import { history } from 'umi'
 import PasswordInput from '../passwordInput'
+import { numFormat } from '@/utils/numberFomat'
 import styles from './index.less'
+import { message, Button, Spin } from 'antd'
 
 interface CreditPayWayPropsType {
-
+  payInfo: GetOrderOrderPayDetailsResponse
+  orderId: number,
+  onChange: Function
 }
 
-const CreditPayWay: React.FC<CreditPayWayPropsType> = () => {
+const CreditPayWay: React.FC<CreditPayWayPropsType> = (props) => {
+  const { payInfo, orderId, onChange } = props
   const [payPassword, setPayPassword] = useState<string>('')
   const [type, setType] = useState<string>('normal') // normal： 普通；member：会员
+  const [creditInfo, setCreditInfo] = useState<GetPayCreditGetCreditResponse>()
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
+  const [securityInfo, setSecurityInfo] = useState<GetMemberSecurityGetResponse>()
+  const [pageLoading, setPageLoading] = useState<boolean>(true)
 
   const handlePasswordChange = (value: string) => {
     setPayPassword(value)
   }
 
+  useEffect(() => {
+    fetchCreditInfo()
+    fetchSecurity()
+  }, [])
+
+  const fetchCreditInfo = () => {
+    PublicApi.getPayCreditGetCredit().then(res => {
+      if (res.code === 1000) {
+        if (res.data.isUsable === 0) {
+          message.error("授信额度不可用")
+          return
+        }
+        setCreditInfo(res.data)
+        setPageLoading(false)
+      }
+    })
+  }
+
+  const fetchSecurity = () => {
+    PublicApi.getMemberSecurityGet().then(res => {
+      if(res.code === 1000) {
+        setSecurityInfo(res.data)
+      }
+    })
+  }
+
+  const pay = () => {
+    if(creditInfo?.isUsable === 0) {
+      message.error("授信额度不可用")
+      return
+    }
+    if (!payPassword || payPassword.length < 6) {
+      message.error("请输入支付密码")
+    }
+  }
+
   return (
-    <>
+    <Spin spinning={pageLoading}>
       <div className={styles.common_title}>
         <span>授信额度支付</span>
         <div className={styles.common_title_amount}>
           <label>当前需支付：</label>
-          <span>20,000</span>
+          <span>{numFormat(payInfo?.payPrice)}</span>
           <label>RMB</label>
         </div>
       </div>
@@ -31,25 +81,34 @@ const CreditPayWay: React.FC<CreditPayWayPropsType> = () => {
             <div className={styles.pay_point_way_list_item_title}>可用授信额度</div>
             <div className={styles.pay_point_way_list_item_content}>
               <div className={styles.pay_point_way_list_item_point}>
-                <label>30,000</label>
+                <label>{numFormat(creditInfo?.canUseQuota)}</label>
                 <span>RMB</span>
               </div>
               <div className={styles.pay_point_way_list_item_split}></div>
               <div className={styles.pay_point_way_list_item_needpay}>
                 <label>当前需支付：</label>
-                <span>20,000</span>
+                <span>{numFormat(payInfo?.payPrice)}</span>
                 <label>RMB</label>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div className={styles.pay_wray}>
-        <div className={styles.pay_wray_title}>请输入支付密码</div>
-        <PasswordInput value={payPassword} onChange={handlePasswordChange} />
-        <div className={styles.pay_btn}>立即支付</div>
-      </div>
-    </>
+      {
+        securityInfo && securityInfo.hasPayPassword === 1 ? (
+          <div className={styles.pay_wray}>
+            <div className={styles.pay_wray_title}>请输入支付密码</div>
+            <PasswordInput value={payPassword} onChange={handlePasswordChange} />
+            <Button loading={confirmLoading} className={styles.pay_btn} onClick={() => pay()}>立即支付</Button>
+          </div>
+        ) : (
+            <div className={styles.pay_wray}>
+              <div className={styles.pay_wray_title}>您还没有设置支付密码</div>
+              <Button loading={confirmLoading} className={styles.pay_btn} onClick={() => history.push(`/memberCenter/systemSetting/accountSetting/paycode?backPay=true`)} >去设置密码</Button>
+            </div>
+        )
+      }
+    </Spin>
   )
 }
 

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

@@ -64,22 +64,6 @@
       }
     }
 
-    .pay_btn {
-      font-size: 16px;
-      width: 160px;
-      height: 50px;
-      color: #ffffff;
-      text-align: center;
-      border-color: #D32F2F;
-      background-color: #D32F2F;
-      cursor: pointer;
-      display: block;
-      margin: 20px auto 0 auto;
-
-      &:hover {
-        opacity: .9;
-      }
-    }
   }
 
   &_needpay {

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Upload, Button, message } from 'antd'
 import { UploadOutlined } from '@ant-design/icons'
 import { PublicApi } from '@/services/api'
+import { history } from 'umi'
 import { GetOrderOrderPayDetailsResponse } from '@/services/OrderApi'
 import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface'
 import { priceFormat } from '@/utils/numberFomat'
@@ -76,7 +77,7 @@ const TransferPayWay: React.FC<TransferPayWayPropsType> = (props) => {
       if (res.code === 1000) {
         message.destroy()
         message.success("支付成功")
-        onChange(true)
+        history.push(`/pay/result?orderId=${orderId}`)
       } else {
         setConfirmLoading(false)
         onChange(false)

src/pages/lxMall/pay/index.tsx

@@ -88,7 +88,7 @@ const PayPage: React.FC<PayPagePropsType> = (props) => {
       case PayWayType.balance:
         return <BablancePayWay />
       case PayWayType.credit:
-        return <CreditPayWay />
+        return <CreditPayWay payInfo={payInfo} orderId={orderId} onChange={(state) => handlePayChangge(state)} />
       case PayWayType.wechat:
         return <WechatPayWay />
       case PayWayType.bank:

src/pages/lxMall/payResult/index.less

+.pay {
+  position: relative;
+  background-color: #ffffff;
+  padding-bottom: 60px;
+
+  &_result_container {
+    width: 1200px;
+    margin: 0 auto;
+    padding-top: 120px;
+    padding-bottom: 170px;
+
+    .success_icon {
+      display: block;
+      margin: 0 auto;
+      width: 129px;
+      height: 128px;
+    }
+
+    .result_text {
+      color: #333333;
+      font-size: 24px;
+      text-align: center;
+      margin-top: 24px;
+    }
+
+    .btn_group {
+      display: flex;
+      justify-content: center;
+      margin-top: 46px;
+
+      .btn_item {
+        width: 200px;
+        height: 50px;
+
+        &.primary {
+          outline: none;
+          border-color: #D32F2F;
+          border-radius: 0;
+          background-color: #D32F2F;
+        }
+
+        &:first-child {
+          margin-right: 40px;
+        }
+      }
+    }
+  }
+
+}
\ No newline at end of file

src/pages/lxMall/payResult/index.tsx

+import React, { useState, useEffect } from 'react'
+import CommonHeader from '../components/CommonHeader'
+import { LAYOUT_TYPE } from '@/constants'
+import { history } from 'umi'
+import { Button, message } from 'antd'
+import cx from 'classnames'
+import paySuccessIcon from '@/assets/imgs/pay_success.png'
+import styles from './index.less'
+
+interface PayResultPropsType {
+  location: any;
+  shopInfo: any;
+  mallInfo: any;
+  layoutType: LAYOUT_TYPE;
+}
+
+let timer = null
+const PayResult: React.FC<PayResultPropsType> = (props) => {
+  const { shopInfo, mallInfo, layoutType, } = props
+  const { orderId } = props.location.query
+  const [count ,setCount] = useState<number>(10)
+
+  useEffect(() => {
+    if(count > 1) {
+      setTimer()
+    } else {
+      clearTimeout(timer)
+      goToDetail()
+    }
+  }, [count])
+
+  const setTimer = () => {
+    timer = setTimeout(() => {
+        setCount(count - 1)
+    }, 1000);
+  }
+
+  const backHome = () => {
+    window.location.href = "/"
+  }
+
+  const goToDetail = () => {
+    if (orderId) {
+      history.push(`/memberCenter/tranactionAbility/purchaseOrder/orderList/preview?id=${orderId}`)
+    } else {
+      message.destroy()
+      message.error("订单信息异常")
+    }
+  }
+
+  return (
+    <div className={styles.pay}>
+      <CommonHeader
+        logoUrl={(layoutType === LAYOUT_TYPE.channel || layoutType === LAYOUT_TYPE.ichannel) ? shopInfo?.logo : mallInfo.logoUrl}
+        title="支付结果"
+      />
+      <div className={styles.pay_result_container}>
+        <img className={styles.success_icon} src={paySuccessIcon} />
+        <div className={styles.result_text}>支付成功！</div>
+        <div className={styles.btn_group}>
+          <Button 
+            className={cx(styles.btn_item, styles.primary)} 
+            type="primary" 
+            onClick={() => goToDetail()}
+          >
+            去订单查看({count}s)
+          </Button>
+          <Button className={styles.btn_item} onClick={() => backHome()}>返回首页</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PayResult