feat: first commit

src/components/product-dialog/steps-ui/group-buy.tsx

@@ -0,0 +1,110 @@
+import Taro from '@tarojs/taro';
+
+import { Button } from '@taroify/core';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+import Badge from '@/components/badge';
+import { PREFIX } from '@/components/product-dialog/const';
+import { CollectEventName } from '@/constants/event';
+import { OrderStatus, OrderType, ProductSpecId, ProductType } from '@/constants/product';
+import { logWithPrefix } from '@/utils/common';
+import { collectEvent } from '@/utils/event';
+import {
+  getOrderPrice,
+  requestCreatePayInfo,
+  requestOrderInfo,
+  requestPayment,
+  requestProductBalance,
+} from '@/utils/product';
+import Toast from '@/utils/toast';
+
+interface IProps {
+  source: 'group-list' | 'job-detail';
+  onConfirm: (time: number) => void;
+}
+
+interface Item {
+  id: ProductSpecId;
+  num: number;
+  price: number;
+  badge?: string;
+}
+
+const LIST: Item[] = [
+  { id: ProductSpecId.AddGroup1, num: 1, price: 2 },
+  { id: ProductSpecId.AddGroup2, num: 2, price: 3, badge: '7.5折' },
+  { id: ProductSpecId.AddGroup3, num: 5, price: 6, badge: '6折' },
+];
+
+const log = logWithPrefix('group-buy');
+
+export default function GroupBuy(props: IProps) {
+  const { source, onConfirm } = props;
+  const [selectItem, setSelectItem] = useState(LIST[2]);
+
+  const handleClickItem = useCallback((newSelectItem: Item) => setSelectItem(newSelectItem), []);
+
+  const handleBuy = useCallback(async () => {
+    log('handleBuy', selectItem);
+    try {
+      Taro.showLoading();
+      const { payOrderNo, createPayInfo } = await requestCreatePayInfo({
+        type: OrderType.Group,
+        amt: getOrderPrice(selectItem.price),
+        // amt: selectItem.price,
+        // amt: 1,
+        productCode: ProductType.AddGroup,
+        productSpecId: selectItem.id,
+      });
+      log('handleBuy payInfo', payOrderNo, createPayInfo);
+      await requestPayment({
+        timeStamp: createPayInfo.timeStamp,
+        nonceStr: createPayInfo.nonceStr,
+        package: createPayInfo.packageVal,
+        signType: createPayInfo.signType,
+        paySign: createPayInfo.paySign,
+      });
+      const { status } = await requestOrderInfo({ payOrderNo });
+      log('handleBuy orderInfo', status);
+      if (status !== OrderStatus.Success) {
+        throw new Error('order status error');
+      }
+      const time = await requestProductBalance(ProductType.AddGroup);
+      log('handleBuy new addGroupTime', time);
+      onConfirm(time);
+    } catch (e) {
+      Toast.error('购买失败!');
+      log('handleBuy error', e);
+    } finally {
+      Taro.hideLoading();
+    }
+  }, [selectItem, onConfirm]);
+
+  useEffect(() => {
+    collectEvent(CollectEventName.CREATE_ORDER_VIEW, { orderType: OrderType.Group, source });
+  }, [source]);
+
+  return (
+    <div className={`${PREFIX}__group-buy`}>
+      <div className={`${PREFIX}__group-buy__header`}>购买对接次数</div>
+      <div className={`${PREFIX}__group-buy__container`}>
+        {LIST.map(item => (
+          <div
+            key={item.price}
+            className={classNames(`${PREFIX}__group-buy__item`, { selected: item.price === selectItem.price })}
+            onClick={() => handleClickItem(item)}
+          >
+            <div className={`${PREFIX}__group-buy__item-title`}>{`${item.num} 个`}</div>
+            <div className={`${PREFIX}__group-buy__item-price`}>{`${item.price} 元`}</div>
+            {item.badge && <Badge text={item.badge} />}
+          </div>
+        ))}
+      </div>
+      <Button className={`${PREFIX}__group-buy__button`} onClick={handleBuy}>
+        {`支付 ${selectItem.price} 元`}
+      </Button>
+      <div className={`${PREFIX}__group-buy__tips`}>{`已选：${selectItem.num} 次`}</div>
+    </div>
+  );
+}