feat:对接余额支付方式

src/pages/lxMall/commodityDetail/index.tsx

@@ -42,12 +42,12 @@ interface imgItemType {
 
 const integralPayWay = [
   {
-    payType: 5,
+    payType: 0,
     payVal: "积分支付",
     payList: [
       {
-        id: 8,
-        payType: 5,
+        id: 0,
+        payType: 0,
         way: "积分支付"
       }
     ]

src/pages/lxMall/order/index.tsx

@@ -17,7 +17,7 @@ import SignModal from '@/components/SignModal'
 import { isEmpty } from 'lodash'
 import { GlobalConfig } from '@/global/config'
 import { getAuth } from '@/utils/auth'
-import { LAYOUT_TYPE, OrderModalType, COMMODITY_TYPE } from '@/constants'
+import { LAYOUT_TYPE, OrderModalType, COMMODITY_TYPE, ORDER_TYPE2_POINTS, ORDER_TYPE2_CHANNEL_POINTS } from '@/constants'
 
 interface OrderPropsType {
   location: any;
@@ -232,13 +232,25 @@ const Order: React.FC<OrderPropsType> = (props) => {
     let mode = OrderModalType.PURCHASE_ORDER
     switch (layoutType) {
       case LAYOUT_TYPE.channel:
-        mode = OrderModalType.CHANNEL_DIRECT_PURCHASE_ORDER
+        if (Number(type) === COMMODITY_TYPE.integral) {
+          mode = 25
+        } else {
+          mode = OrderModalType.CHANNEL_DIRECT_PURCHASE_ORDER
+        }
         break
       case LAYOUT_TYPE.ichannel:
-        mode = OrderModalType.CHANNEL_SPOT_PURCHASE_ORDER
+        if (Number(type) === COMMODITY_TYPE.integral) {
+          mode = 25
+        } else {
+          mode = OrderModalType.CHANNEL_SPOT_PURCHASE_ORDER
+        }
         break
       default:
-        mode = OrderModalType.PURCHASE_ORDER
+        if (Number(type) === COMMODITY_TYPE.integral) {
+          mode = 24
+        } else {
+          mode = OrderModalType.PURCHASE_ORDER
+        }
         break
     }
     return mode

src/pages/lxMall/pay/components/balance/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/balance/index.tsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import cx from 'classnames'
+import { LAYOUT_TYPE } from '@/constants'
 import PasswordInput from '../passwordInput'
+import { Button, message, Spin } from 'antd'
+import { history } from 'umi'
+import { GetOrderOrderPayDetailsResponse } from '@/services/OrderApi'
+import { GetPayAssetAccountGetUserBalanceResponse } from "@/services/PayApi";
+import { GetMemberSecurityGetResponse } from '@/services/MemberApi'
+import { priceFormat } from '@/utils/numberFomat'
+import { PublicApi } from '@/services/api'
+import { linkToUrl } from '../../utils'
 import styles from './index.less'
 
 interface BablancePayWayPropsType {
-
+  payInfo: GetOrderOrderPayDetailsResponse,
+  orderInfo: any,
+  orderId: number,
+  onChange: Function,
+  layoutType?: LAYOUT_TYPE,
+  shopUrlParam?: string
 }
 
-const BablancePayWay: React.FC<BablancePayWayPropsType> = () => {
+const BablancePayWay: React.FC<BablancePayWayPropsType> = (props) => {
+  const { payInfo, orderId, orderInfo, layoutType, shopUrlParam } = props
+  const [balanceInfo, setBalanceInfo] = useState<GetPayAssetAccountGetUserBalanceResponse>(0)
+  const [securityInfo, setSecurityInfo] = useState<GetMemberSecurityGetResponse>()
   const [payPassword, setPayPassword] = useState<string>('')
   const [type, setType] = useState<string>('normal') // normal： 普通；member：会员
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
+  const [pageLoading, setPageLoading] = useState<boolean>(true)
+  const [payDisabled, setPayDisabled] = useState<boolean>(false)
 
   const handlePasswordChange = (value: string) => {
     setPayPassword(value)
   }
 
+  useEffect(() => {
+    if (orderInfo) {
+      fetchBalanceInfo()
+      fetchSecurity()
+    }
+  }, [orderInfo])
+
+  const fetchBalanceInfo = () => {
+    let param = {
+      parentMemberId: orderInfo.supplyMembersId,
+      parentMemberRoleId: orderInfo.supplyMembersRoleId
+    }
+    PublicApi.getPayAssetAccountGetUserBalance(param).then(res => {
+      if (res.code === 1000) {
+        setBalanceInfo(res.data)
+        setPageLoading(false)
+      }
+    })
+  }
+
+  const fetchSecurity = () => {
+
+    PublicApi.getMemberSecurityGet().then(res => {
+      if (res.code === 1000) {
+        setSecurityInfo(res.data)
+      }
+    })
+  }
+
+  const pay = () => {
+    if(balanceInfo < payInfo.payPrice) {
+      message.info("账户余额不足")
+      return
+    }
+    if (!payPassword || payPassword.length < 6) {
+      message.info("请输入支付密码")
+      return
+    }
+    let param = {
+      id: Number(orderId),
+      paymentInformationId: Number(payInfo.paymentInformationId),
+      payTypeId: payInfo.paymentChannelsId,
+      payPassword: Number(payPassword)
+    }
+    setConfirmLoading(true)
+    //@ts-ignore
+    PublicApi.postOrderPendingOrderPay(param).then(res => {
+      if (res.code === 1000) {
+        message.destroy()
+        message.success("支付成功")
+        linkToUrl(`/pay/result?orderId=${orderId}`, layoutType, shopUrlParam)
+      } else {
+        setConfirmLoading(false)
+        message.destroy()
+        message.error(res.message)
+      }
+    }).catch(() => {
+      setConfirmLoading(false)
+    })
+
+  }
+
   return (
-    <>
+    <Spin spinning={pageLoading}>
       <div className={styles.common_title}>
         <span>余额支付</span>
         <div className={styles.common_title_amount}>
           <label>当前需支付：</label>
-          <span>20,000</span>
+          <span>{priceFormat(payInfo?.payPrice)}</span>
           <label>RMB</label>
         </div>
       </div>
@@ -31,25 +113,34 @@ const BablancePayWay: React.FC<BablancePayWayPropsType> = () => {
             <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>{balanceInfo}</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>{priceFormat(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} disabled={payDisabled} className={styles.pay_btn} onClick={() => history.push(`/memberCenter/systemSetting/accountSetting/paycode?backPay=true`)} >去设置密码</Button>
+            </div>
+          )
+      }
+    </Spin>
   )
 }
 

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

@@ -76,19 +76,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/point/index.tsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import cx from 'classnames'
 import PasswordInput from '../passwordInput'
+import { LAYOUT_TYPE } from '@/constants'
+import { history } from 'umi'
+import { GetOrderOrderPayDetailsResponse } from '@/services/OrderApi'
+import { GetMemberSecurityGetResponse } from '@/services/MemberApi'
+import { Button, message } from 'antd'
+import { numFormat } from '@/utils/numberFomat'
+import { PublicApi } from '@/services/api'
+import { linkToUrl } from '../../utils'
 import styles from './index.less'
 
 interface PointPayWayPropsType {
-
+  payInfo: GetOrderOrderPayDetailsResponse,
+  orderInfo: any,
+  orderId: number,
+  onChange: Function,
+  layoutType?: LAYOUT_TYPE,
+  shopUrlParam?: string
 }
 
-const PointPayWay: React.FC<PointPayWayPropsType> = () => {
+const PointPayWay: React.FC<PointPayWayPropsType> = (props) => {
+  const { payInfo, orderId, orderInfo, layoutType, shopUrlParam } = props
+  const [securityInfo, setSecurityInfo] = useState<GetMemberSecurityGetResponse>()
   const [payPassword, setPayPassword] = useState<string>('')
   const [type, setType] = useState<string>('normal') // normal： 普通；member：会员
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
+  const [payDisabled, setPayDisabled] = useState<boolean>(false)
 
   const handlePasswordChange = (value: string) => {
     setPayPassword(value)
@@ -19,13 +36,57 @@ const PointPayWay: React.FC<PointPayWayPropsType> = () => {
     setType(type)
   }
 
+  useEffect(() => {
+    if (orderInfo) {
+      fetchSecurity()
+    }
+  }, [orderInfo])
+
+  const fetchSecurity = () => {
+
+    PublicApi.getMemberSecurityGet().then(res => {
+      if (res.code === 1000) {
+        setSecurityInfo(res.data)
+      }
+    })
+  }
+
+  const pay = () => {
+    if (!payPassword || payPassword.length < 6) {
+      message.error("请输入支付密码")
+      return
+    }
+    let param = {
+      id: Number(orderId),
+      paymentInformationId: Number(payInfo.paymentInformationId),
+      payTypeId: payInfo.paymentChannelsId,
+      payPassword: Number(payPassword)
+    }
+    setConfirmLoading(true)
+    //@ts-ignore
+    PublicApi.postOrderPendingOrderPay(param).then(res => {
+      if (res.code === 1000) {
+        message.destroy()
+        message.success("支付成功")
+        linkToUrl(`/pay/result?orderId=${orderId}`, layoutType, shopUrlParam)
+      } else {
+        setConfirmLoading(false)
+        message.destroy()
+        message.error(res.message)
+      }
+    }).catch(() => {
+      setConfirmLoading(false)
+    })
+
+  }
+
   return (
     <>
       <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>积分</label>
         </div>
       </div>
@@ -53,11 +114,20 @@ const PointPayWay: React.FC<PointPayWayPropsType> = () => {
           </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} disabled={payDisabled} className={styles.pay_btn} onClick={() => history.push(`/memberCenter/systemSetting/accountSetting/paycode?backPay=true`)} >去设置密码</Button>
+            </div>
+          )
+      }
     </>
   )
 }

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

@@ -5,6 +5,7 @@ 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 styles from './index.less'
 import { useState } from 'react'
 
@@ -34,6 +35,9 @@ const WechatPayWay: React.FC<WechatPayWayPropsType> = (props) => {
     }
     //@ts-ignore
     PublicApi.postOrderPendingOrderPay(param).then(res => {
+      if(res.code === 1000) {
+        message.destroy()
+      }
       // setWechatPayUrl(res.data)
     }).catch(() => {
       onChange(false)

src/pages/lxMall/pay/index.tsx

@@ -22,7 +22,7 @@ interface PayPagePropsType {
 }
 
 enum PayWayType {
-  point = 'point', // 积分支付
+  point = 0, // 积分支付
   balance = 4, // 余额支付
   credit = 6, // 授信额度支付
   wechat = 2, // 微信支付
@@ -101,15 +101,15 @@ const PayPage: React.FC<PayPagePropsType> = (props) => {
 
     switch (payInfo.paymentChannelsId) {
       case PayWayType.point:
-        return <PointPayWay />
+        return <PointPayWay payInfo={payInfo} orderInfo={orderInfo} orderId={orderId} onChange={(state) => handlePayChangge(state)} {...props}  />
       case PayWayType.balance:
-        return <BablancePayWay />
+        return <BablancePayWay payInfo={payInfo} orderInfo={orderInfo} orderId={orderId} onChange={(state) => handlePayChangge(state)} {...props}  />
       case PayWayType.credit:
         return <CreditPayWay payInfo={payInfo} orderInfo={orderInfo} orderId={orderId} onChange={(state) => handlePayChangge(state)} {...props} />
       case PayWayType.wechat:
         return <WechatPayWay payInfo={payInfo} orderInfo={orderInfo} orderId={orderId} onChange={(state) => handlePayChangge(state)} {...props} />
       case PayWayType.bank:
-        return <BankPayWay />
+        return <BankPayWay  />
       case PayWayType.transfer:
         return <TransferPayWay payInfo={payInfo} orderId={orderId} onChange={(state) => handlePayChangge(state)} {...props} />
       default: