123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- import React, { PureComponent } from "react";
- import classnames from "classnames";
-
- import iconAlipay from "../assets/kcxq_popovers_icon_alipay@2x.png";
- import iconWechatpay from "../assets/kcxq_popovers_icon_wechatpay@2x.png";
- import iconPaypal from "../assets/kcxq_popovers_icon_paypal@2x.png";
- import mobileIconAlipay from "../assets/payment_btn_pay_alipay@2x.png";
- import mobileIconWechatpay from "../assets/payment_btn_pay_wechatpay@2x.png";
- import mobileIconPaypal from "../assets/payment_btn_pay_paypal@2x.png";
-
- import styles from "./PayPlatformOptions.less";
- import { exportStyleSizeClass } from "../../Utils/utils";
-
- type PAY_CHANNEL_VALUE =
- | "PAYPAL_PAYPAL"
- | "ALI_WEB"
- | "ALI_WAP"
- | "WX_WAP"
- | "WX_NATIVE";
- interface PAY_CHANNEL_TYPE {
- PAYPAL: PAY_CHANNEL_VALUE;
- ALI_WEB: PAY_CHANNEL_VALUE;
- ALI_WAP: PAY_CHANNEL_VALUE;
- WX_WAP: PAY_CHANNEL_VALUE;
- WX_NATIVE: PAY_CHANNEL_VALUE;
- }
-
- interface Props {
- payitem: PAY_CHANNEL_VALUE;
- onPayItemChange: (value: PAY_CHANNEL_VALUE) => void;
- isMobile: boolean;
- size: "small" | "normal" | "large";
- withTitle: boolean;
- titleTxt?: string;
- locale: "zh" | "en";
- }
-
- export const PAY_CHANNEL: PAY_CHANNEL_TYPE = {
- PAYPAL: "PAYPAL_PAYPAL", // PAYPAL_LIVE
- ALI_WEB: "ALI_WEB",
- ALI_WAP: "ALI_WAP",
- WX_WAP: "WX_WAP",
- WX_NATIVE: "WX_NATIVE"
- };
-
- class PayPlatformOptions extends PureComponent<Props, {}> {
- render() {
- const {
- payitem,
- onPayItemChange,
- isMobile = false,
- size = "normal",
- withTitle = true,
- titleTxt,
- locale = "zh"
- } = this.props;
-
- let titleDOM = null;
- if (withTitle) {
- const titleResult = titleTxt || locale === 'zh' ? '支付方式' : 'Payment';
- titleDOM = (
- <div className={styles.label}>
- {titleResult}
- </div>
- );
- }
-
- if (isMobile) {
- return (
- <div>
- {titleDOM}
- <div
- className={classnames(styles["payment-method-box"], {
- [styles.mobile]: isMobile
- })}
- >
- <div className={styles.flexContainer}>
- <div className={styles.flexItem}>
- <div
- className={classnames(
- {
- [styles.payitem]: true,
- [styles.active]: payitem === PAY_CHANNEL.ALI_WEB,
- ...exportStyleSizeClass(styles, size),
- },
- styles[locale]
- )}
- onClick={() => {
- onPayItemChange(PAY_CHANNEL.ALI_WEB);
- }}
- >
- <img
- src={mobileIconAlipay}
- alt="alipay"
- className={styles["payment-method"]}
- />
- <div className={styles.platformName}>
- 支付宝
- </div>
- </div>
- </div>
- <div className={styles.flexItem}>
- <div
- className={classnames(
- {
- [styles.payitem]: true,
- [styles.active]: payitem === PAY_CHANNEL.WX_NATIVE,
- ...exportStyleSizeClass(styles, size),
- },
- styles[locale]
- )}
- onClick={() => {
- onPayItemChange(PAY_CHANNEL.WX_NATIVE);
- }}
- >
- <img
- src={mobileIconWechatpay}
- alt="wechatpay"
- className={styles["payment-method"]}
- />
- <div className={styles.platformName}>
- 微信
- </div>
- </div>
- </div>
- <div className={styles.flexItem}>
- <div
- className={classnames(
- {
- [styles.payitem]: true,
- [styles.active]: payitem === PAY_CHANNEL.PAYPAL,
- ...exportStyleSizeClass(styles, size),
- },
- styles[locale]
- )}
- onClick={() => {
- onPayItemChange(PAY_CHANNEL.PAYPAL);
- }}
- >
- <img
- src={mobileIconPaypal}
- alt="paypal"
- className={styles["payment-method"]}
- />
- <div className={styles.platformName}>
- Paypal
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- );
- }
-
- return (
- <div>
- {titleDOM}
- <div className={styles["payment-method-box"]}>
- <div className={styles.flexContainer}>
- <div className={styles.flexItem}>
- <div
- className={classnames(
- {
- [styles.payitem]: true,
- [styles.active]: payitem === PAY_CHANNEL.ALI_WEB,
- ...exportStyleSizeClass(styles, size),
- },
- styles[locale]
- )}
- onClick={() => {
- onPayItemChange(PAY_CHANNEL.ALI_WEB);
- }}
- >
- <span className={styles["payment-method-before"]} />
- <img
- src={iconAlipay}
- alt="alipay"
- className={styles["payment-method"]}
- />
- </div>
- </div>
- <div className={styles.flexItem}>
- <div
- className={classnames(
- {
- [styles.payitem]: true,
- [styles.active]: payitem === PAY_CHANNEL.WX_NATIVE,
- ...exportStyleSizeClass(styles, size),
- },
- styles[locale]
- )}
- onClick={() => {
- onPayItemChange(PAY_CHANNEL.WX_NATIVE);
- }}
- >
- <span className={styles["payment-method-before"]} />
- <img
- src={iconWechatpay}
- alt="wechatpay"
- className={styles["payment-method"]}
- />
- </div>
- </div>
- <div className={styles.flexItem}>
- <div
- className={classnames(
- {
- [styles.payitem]: true,
- [styles.active]: payitem === PAY_CHANNEL.PAYPAL,
- ...exportStyleSizeClass(styles, size),
- },
- styles[locale]
- )}
- onClick={() => {
- onPayItemChange(PAY_CHANNEL.PAYPAL);
- }}
- >
- <span className={styles["payment-method-before"]} />
- <img
- src={iconPaypal}
- alt="paypal"
- className={styles["payment-method"]}
- />
- </div>
- </div>
- </div>
- </div>
- </div>
- );
- }
- }
-
- export default PayPlatformOptions;
|