dev: 重构部分代码

1. ConsumeListView
2. PayPlatformOptions

.kiwi/config.json

@@ -1,7 +0,0 @@
-{
-  "srcLang": "zh_CN",
-  "distLangs": [
-    "en_US"
-  ],
-  "googleApiKey": ""
-}

.kiwi/en_US/index.ts

@@ -1,7 +0,0 @@
-import priceOptions from './priceOptions';
-import payplatformoption from './payplatformoption';
-
-export default Object.assign({}, {
-  priceOptions,
-  payplatformoption,
-});

.kiwi/en_US/payplatformoption.ts

@@ -1,3 +0,0 @@
-export default {
-  "platform": "支付平台"
-}

.kiwi/en_US/priceOptions.ts

@@ -1,5 +0,0 @@
-export default {
-  "index": {
-    "others": "Others"
-  }
-}

.kiwi/zh_CN/index.ts

@@ -1,7 +0,0 @@
-import priceOptions from './priceOptions';
-import payplatformoption from './payplatformoption';
-
-export default Object.assign({}, {
-  priceOptions,
-  payplatformoption,
-});

.kiwi/zh_CN/payplatformoption.ts

@@ -1,3 +0,0 @@
-export default {
-  platform: '支付平台',
-};

.kiwi/zh_CN/priceOptions.ts

@@ -1,5 +0,0 @@
-export default {
-  index: {
-    others: '其他金额',
-  },
-};

.yarnrc

@@ -0,0 +1,7 @@
+registry "https://registry.npm.taobao.org"
+sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
+phantomjs_cdnurl "http://cnpmjs.org/downloads"
+electron_mirror "https://npm.taobao.org/mirrors/electron/"
+sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
+profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
+chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

src/components/Payment/Common/ConsumeListView/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, MouseEvent } from 'react';
 import classnames from 'classnames';
 
 // import { DEFAULT_AVATAR } from '@/constants';
@@ -9,17 +9,20 @@ import styles from './ConsumeListView.less';
 
 const DEFAULT_AVATAR =
   '//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg';
+  
+interface dataItem {
+  id?: string|number;
+  user_avatar?: string;
+  bill_price?: number;
+}
 
-type Props = {
+interface Props {
   isToggle: boolean;
   onToggleChange: Function;
-  dataSource: Array<{
-    id?: string|number;
-    user_avatar?: string;
-    bill_price?: number;
-  }>;
+  onConsumeItemClick: (e: MouseEvent, clickData: any) => any,
+  dataSource: Array<dataItem>;
   listLength: number;
-  showLength: number;
+  showLength: number; 
   options: {
     avatarSize: number,
     avatarMarginLeftAndRight: number,
@@ -29,10 +32,11 @@ type Props = {
   },
 }
 
-class ConsumeListView extends Component<Props> {
+class ConsumeListView extends Component<Props, {}> {
   static defaultProps: Props = {
     isToggle: false,
     onToggleChange: () => {},
+    onConsumeItemClick: () => {},
     dataSource: [],
     listLength: 0,
     showLength: 6,
@@ -49,6 +53,7 @@ class ConsumeListView extends Component<Props> {
     const {
       dataSource,
       isToggle,
+      onConsumeItemClick,
       showLength,
       listLength,
       options,
@@ -66,7 +71,7 @@ class ConsumeListView extends Component<Props> {
       renderData = dataSource.slice(0, showLength - 1);
     }
 
-    return renderData.map((v, i) => {
+    return renderData.map((v: dataItem, i: number) => {
       let kingdom = null;
       if (i === 0) {
         kingdom = (
@@ -92,6 +97,7 @@ class ConsumeListView extends Component<Props> {
           {kingdom}
           <div
             className={styles.avatar}
+            onClick={(e) => onConsumeItemClick(e, v)}
             style={{
               backgroundImage: `url(${addImageProcess(
                 v.user_avatar || DEFAULT_AVATAR,

src/components/Payment/Common/PayPlatformOptions/PayPlatformOptions.less

@@ -14,11 +14,11 @@
   font-weight: 400;
   color: #616A79;
 }
-.payment-method-box {
+.payChannelBox {
   padding: 20px 10px 10px 10px;
   text-align: center;
 
-  .payment-method {
+  .paymentImage {
       display: inline-block;
       margin: 0;
       width: 60%;
@@ -32,7 +32,7 @@
       }
   }
 
-  .payitem {
+  .payChannelBlock {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -51,7 +51,7 @@
         height: 36px;
         line-height: 36px;
         
-        .payment-method {
+        .paymentImage {
           margin: 0;
         }
       }
@@ -77,7 +77,7 @@
 
   &.mobile {
       padding: 8px 10px 10px 8px;
-      .payitem {
+      .payChannelBlock {
           display: inline-flex;
           flex-direction: column;
           justify-content: space-around;
@@ -91,7 +91,7 @@
               border-color: #1790FF;
           }
 
-          .payment-method {
+          .paymentImage {
               display: inline-block;
               width: 34px;
               height: 34px;
@@ -101,7 +101,7 @@
 }
 
 @media (max-width: 768px) {
-  .payitem {
+  .payChannelBlock {
       cursor: pointer;
       border: 1px solid transparent;
       &.active {

src/components/Payment/Common/PayPlatformOptions/index.tsx

@@ -17,6 +17,11 @@ type PAY_CHANNEL_VALUE =
   | "ALI_WAP"
   | "WX_WAP"
   | "WX_NATIVE";
+
+type PAY_CHANNEL_CATEGORY_VALUE = "Alipay" | "Wechat" | "Paypal";
+
+interface PAY_CHANNEL_TEXT { zh: string; en: string }
+interface PAY_CHANNEL_IMAGE { desktop: any; mobile: any }
 interface PAY_CHANNEL_TYPE {
   PAYPAL: PAY_CHANNEL_VALUE;
   ALI_WEB: PAY_CHANNEL_VALUE;
@@ -25,13 +30,29 @@ interface PAY_CHANNEL_TYPE {
   WX_NATIVE: PAY_CHANNEL_VALUE;
 }
 
+interface PAY_CHANNEL_CATEGORY {
+  ALI: PAY_CHANNEL_CATEGORY_VALUE,
+  WX: PAY_CHANNEL_CATEGORY_VALUE,
+  PAYPAL: PAY_CHANNEL_CATEGORY_VALUE,
+}
+
 interface Props {
-  payitem: PAY_CHANNEL_VALUE;
-  onPayItemChange: (value: PAY_CHANNEL_VALUE) => void;
+  payChannel: PAY_CHANNEL_VALUE;
+  onPayChannelChange: (value: PAY_CHANNEL_VALUE) => void;
   isMobile: boolean;
   size: "small" | "normal" | "large";
   withTitle: boolean;
-  titleTxt?: string;
+  titleText?: string;
+  locale: "zh" | "en";
+}
+
+interface PayPlatformBlockProps {
+  isMobile: boolean;
+  isActive: boolean;
+  size: "small" | "normal" | "large";
+  onClick: any;
+  image: PAY_CHANNEL_IMAGE;
+  text: PAY_CHANNEL_TEXT;
   locale: "zh" | "en";
 }
 
@@ -43,192 +64,352 @@ export const PAY_CHANNEL: PAY_CHANNEL_TYPE = {
   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>
-      );
-    }
+export const PAY_CHANNEL_CATEGORY: PAY_CHANNEL_CATEGORY = {
+  ALI: "Alipay",
+  WX: "Wechat",
+  PAYPAL: "Paypal",
+}
 
-    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>
-      );
-    }
+const PAY_CHANNEL_INSTANCE: Array<{
+  image: PAY_CHANNEL_IMAGE;
+  text: PAY_CHANNEL_TEXT;
+  key: PAY_CHANNEL_CATEGORY_VALUE;
+}> = [
+  {
+    image: {
+      desktop: iconAlipay,
+      mobile: mobileIconAlipay,
+    },
+    text: {
+      zh: "支付宝",
+      en: "Alipay"
+    },
+    key: PAY_CHANNEL_CATEGORY.ALI,
+  },
+  {
+    image: {
+      desktop: iconWechatpay,
+      mobile: mobileIconWechatpay,
+    },
+    text: {
+      zh: "微信",
+      en: "WeChat",
+    },
+    key: PAY_CHANNEL_CATEGORY.WX,
+  },
+  {
+    image: {
+      desktop: iconPaypal,
+      mobile: mobileIconPaypal,
+    },
+    text: {
+      zh: "PayPal",
+      en: "PayPal",
+    },
+    key: PAY_CHANNEL_CATEGORY.PAYPAL,
+  }
+];
 
+const PayPlatformBlock = ({
+  isMobile = false,
+  isActive = false,
+  size = "normal",
+  onClick,
+  text,
+  image,
+  locale = "zh"
+}: PayPlatformBlockProps) => {
+  const showText = text[locale];
+  if (isMobile) {
     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 className={styles.flexItem}>
+        <div
+          className={classnames(
+            styles.payChannelBlock,
+            {
+              [styles.active]: isActive,
+              ...exportStyleSizeClass(styles, size)
+            },
+            styles[locale]
+          )}
+          onClick={onClick}
+        >
+          <img src={image.mobile} alt={showText} className={styles.paymentImage} />
+          <div className={styles.platformName}>{showText}</div>
         </div>
       </div>
     );
   }
-}
 
-export default PayPlatformOptions;
+  return (
+    <div className={styles.flexItem}>
+      <div
+        className={classnames(
+          styles.payChannelBlock,
+          {
+            [styles.active]: isActive,
+            ...exportStyleSizeClass(styles, size)
+          },
+          styles[locale]
+        )}
+        onClick={onClick}
+      >
+        <span className={styles["payment-method-before"]} />
+        <img src={image.desktop} alt={showText} className={styles.paymentImage} />
+      </div>
+    </div>
+  );
+};
+
+const PayPlatformOptions = ({
+  payChannel,
+  onPayChannelChange,
+  size = "normal",
+  isMobile = false,
+  withTitle = true,
+  titleText,
+  locale = "zh"
+}: Props) => {
+  let titleDOM = null;
+  let payListDOM = [
+    {
+      valueKey: PAY_CHANNEL.ALI_WEB,
+      categoryKey: PAY_CHANNEL_CATEGORY.ALI,
+    },
+    {
+      valueKey: PAY_CHANNEL.WX_NATIVE,
+      categoryKey: PAY_CHANNEL_CATEGORY.WX,
+    },
+    {
+      valueKey: PAY_CHANNEL.PAYPAL,
+      categoryKey: PAY_CHANNEL_CATEGORY.PAYPAL,
+    },
+  ].map(v => {
+    const { valueKey, categoryKey } = v;
+    const targetInstance = PAY_CHANNEL_INSTANCE.find(ins => ins.key === categoryKey);
+    if (targetInstance) {
+      const { text, image } = targetInstance;
+      return (
+        <PayPlatformBlock
+          {...{ isMobile, locale, size }}
+          onClick={() => onPayChannelChange(valueKey)}
+          isActive={valueKey === payChannel}
+          text={text}
+          image={image}
+        />
+      )
+    }
+  });
+  if (withTitle) {
+    titleDOM = (
+      <div className={styles.label}>
+        {titleText || locale === "zh" ? "支付方式" : "Payment"}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {titleDOM}
+      <div
+        className={classnames(styles.payChannelBox, {
+          [styles.mobile]: isMobile
+        })}
+      >
+        <div className={styles.flexContainer}>
+          <div className={styles.flexItem}></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// 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;

stories/Payment.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withInfo } from "@storybook/addon-info";
@@ -174,6 +174,7 @@ stories.add(
     return <ConsumeListView
       isToggle={toggle}
       onToggleChange={() => setToggle(!toggle)}
+      onConsumeItemClick={(e: MouseEvent, clickData: any) => { console.log(clickData); }}
       dataSource={consumeData}
       listLength={consumeData.length}
       showLength={number("showLength", 5)}