feat:微信支付页面

src/pages/lxMall/information/index.tsx

+import React from 'react'
+import styles from './index.less'
+
+interface InformationPropsType {
+
+}
+
+const Information: React.FC<InformationPropsType> = (props) => {
+
+  return (
+    <div>
+      Information
+    </div>
+  )
+}
+
+export default Information

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

@@ -6,11 +6,18 @@
       line-height: 14px;
       display: flex;
       margin-bottom: 5px;
+      align-items: center;
 
       &_icon {
         color: #999999;
         margin-left: 6px;
         cursor: pointer;
+        margin-right: 5px;
+
+        &>img {
+          width: 20px;
+          height: 20px;
+        }
       }
 
       &>span {

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

+@import '../common.less';
+
+.wechat_payway {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &_title {
+    color: #999999;
+    font-size: 12px;
+    padding-top: 60px;
+    padding-bottom: 20px;
+  }
+
+  &_imgbox {
+    padding: 20px;
+    border: 1px solid rgba(245, 245, 245, 1);
+
+    &>img {
+      width: 200px;
+
+      height: 200px;
+    }
+  }
+
+  &_needpay {
+    color: #666666;
+    font-size: 12px;
+    margin-top: 28px;
+
+    &>span {
+      color: #D32F2F;
+      font-size: 20px;
+      margin: 0 5px;
+    }
+  }
+}
\ No newline at end of file

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

+import React from 'react'
+import wechatIcon from '@/assets/imgs/wechat_icon.png'
+import wechatImg from '@/assets/imgs/wechat.png'
+import styles from './index.less'
+
+interface WechatPayWayPropsType {
+
+}
+
+const WechatPayWay: React.FC<WechatPayWayPropsType> = (props) => {
+
+  return (
+    <>
+      <div className={styles.common_title}>
+        <div className={styles.common_title_icon}><img src={wechatIcon} /></div>
+        <span>微信支付</span>
+      </div>
+      <div className={styles.wechat_payway}>
+        <p className={styles.wechat_payway_title}>使用微信扫一扫下方二维码</p>
+        <div className={styles.wechat_payway_imgbox}>
+          <img src={wechatImg} />
+        </div>
+        <div className={styles.wechat_payway_needpay}>
+          <label>当前需支付：</label>
+          <span>20,000</span>
+          <label>RMB</label>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default WechatPayWay

src/pages/lxMall/pay/index.tsx

@@ -3,6 +3,7 @@ import CommonHeader from '../components/CommonHeader'
 import PointPayWay from './components/point'
 import BablancePayWay from './components/balance'
 import CreditPayWay from './components/credit'
+import WechatPayWay from './components/wechat'
 import styles from './index.less'
 
 interface PayPagePropsType {
@@ -17,7 +18,6 @@ enum PayWayType {
   transfer = 'transfer', // 转战
 }
 
-
 const getPayTypeTitle = (type) => {
   switch (type) {
     case PayWayType.point:
@@ -25,16 +25,16 @@ const getPayTypeTitle = (type) => {
     case PayWayType.balance:
       return "余额支付"
     case PayWayType.credit:
+    case PayWayType.wechat:
       return "收银台"
     default:
       return ""
   }
 }
 
-
 const PayPage: React.FC<PayPagePropsType> = (props) => {
-  const [pageTitle, setPageTitle] = useState<string>(getPayTypeTitle(PayWayType.credit))
-  const [payType] = useState<string>(PayWayType.credit)
+  const [pageTitle, setPageTitle] = useState<string>(getPayTypeTitle(PayWayType.wechat))
+  const [payType] = useState<string>(PayWayType.wechat)
 
   const renderPayWay = () => {
     switch (payType) {
@@ -44,6 +44,8 @@ const PayPage: React.FC<PayPagePropsType> = (props) => {
         return <BablancePayWay />
       case PayWayType.credit:
         return <CreditPayWay />
+      case PayWayType.wechat:
+        return <WechatPayWay />
       default:
         return null
     }