feat: first commit

src/components/product-card/index.less

@@ -0,0 +1,34 @@
+@import '@/styles/variables.less';
+
+.product-card {
+  padding: 24px;
+  border-radius: 16px;
+  background: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+
+  &__title {
+    font-size: 28px;
+    line-height: 32px;
+    color: @blColorG1;
+    margin-bottom: 40px;
+  }
+
+  &__item-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 28px;
+    line-height: 40px;
+    margin-bottom: 20px;
+  }
+
+  &__item-name {
+    color: @blColor;
+  }
+
+  &__item-balance {
+    color: @blColorG1;
+  }
+}

src/components/product-card/index.tsx

@@ -0,0 +1,68 @@
+import { Loading } from '@taroify/core';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+
+import { ProductType } from '@/constants/product';
+import { ProductInfo } from '@/types/product';
+import { requestProductList } from '@/utils/product';
+import Toast from '@/utils/toast';
+
+import './index.less';
+
+interface IProps {
+  className?: string;
+}
+
+const PREFIX = 'product-card';
+const getProductDescribe = (type: ProductType) => {
+  switch (type) {
+    case ProductType.GetJob:
+      return '群通告付费联系剩余次数';
+    case ProductType.AddGroup:
+      return '添加定制群剩余次数';
+    default:
+      return '';
+  }
+};
+
+function ProductCard(props: IProps) {
+  const { className } = props;
+  const [loading, setLoading] = useState(false);
+  const [productList, setProductList] = useState<ProductInfo[]>([]);
+  const initRef = useRef(() => {});
+
+  useEffect(() => {
+    initRef.current = async () => {
+      try {
+        setLoading(true);
+        const list = await requestProductList();
+        setProductList(list);
+      } catch (e) {
+        Toast.error('请求失败');
+      } finally {
+        setLoading(false);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    initRef.current();
+  }, []);
+
+  return (
+    <div className={classNames(PREFIX, className)}>
+      <div className={`${PREFIX}__title`}>账户信息</div>
+      {productList.map((product: ProductInfo) => {
+        return (
+          <div className={`${PREFIX}__item-container`} key={product.productId}>
+            <div className={`${PREFIX}__item-name`}>{getProductDescribe(product.productId)}</div>
+            <div className={`${PREFIX}__item-balance`}>{`${product.balance}次`}</div>
+          </div>
+        );
+      })}
+      {loading && <Loading size={20} />}
+    </div>
+  );
+}
+
+export default ProductCard;