💥 feat(模块): 加群

src/pages/table-list/city-operation/index.tsx

@@ -5,9 +5,8 @@ import {
   ProFormInstance,
   ProFormSelect,
   ProFormText,
-  ProFormDigit,
-  ProFormMoney,
   ProFormUploadButton,
+  ProFormDependency,
 } from '@ant-design/pro-components';
 import { ModalForm, PageContainer, ProTable } from '@ant-design/pro-components';
 import '@umijs/max';
@@ -37,6 +36,38 @@ const useStyles = createStyles(({ token }) => {
   };
 });
 
+const MIN_GROUP_SIZE = 20;
+export enum ProductSpecId {
+  GroupBatchPublish20 = 'GROUP_BATCH_PUSH_20',
+  GroupBatchPublish50 = 'GROUP_BATCH_PUSH_50',
+  GroupBatchPublish60 = 'GROUP_BATCH_PUSH_60',
+  GroupBatchPublish80 = 'GROUP_BATCH_PUSH_80',
+  GroupBatchPublish100 = 'GROUP_BATCH_PUSH_100',
+  GroupBatchPublish150 = 'GROUP_BATCH_PUSH_150',
+  GroupBatchPublish300 = 'GROUP_BATCH_PUSH_300',
+  GroupBatchPublish500 = 'GROUP_BATCH_PUSH_500',
+  GroupBatchPublish750 = 'GROUP_BATCH_PUSH_750',
+  GroupBatchPublish800 = 'GROUP_BATCH_PUSH_800',
+  GroupBatchPublish1000 = 'GROUP_BATCH_PUSH_1000',
+}
+const GROUP_OPTIONS = [
+  { value: MIN_GROUP_SIZE, productSpecId: ProductSpecId.GroupBatchPublish20, label: '20', price: 18 },
+  { value: 50, productSpecId: ProductSpecId.GroupBatchPublish50, label: '50', price: 40 },
+  { value: 60, productSpecId: ProductSpecId.GroupBatchPublish60, label: '60', price: 48 },
+  { value: 80, productSpecId: ProductSpecId.GroupBatchPublish80, label: '80', price: 58 },
+  { value: 100, productSpecId: ProductSpecId.GroupBatchPublish100, label: '100', price: 68 },
+  { value: 150, productSpecId: ProductSpecId.GroupBatchPublish150, label: '150', price: 98 },
+  { value: 300, productSpecId: ProductSpecId.GroupBatchPublish300, label: '300', price: 128 },
+  { value: 500, productSpecId: ProductSpecId.GroupBatchPublish500, label: '500', price: 168 },
+  { value: 750, productSpecId: ProductSpecId.GroupBatchPublish750, label: '750', price: 188 },
+  { value: 800, productSpecId: ProductSpecId.GroupBatchPublish800, label: '800', price: 198 },
+  { value: 1000, productSpecId: ProductSpecId.GroupBatchPublish1000, label: '1000', price: 288 },
+];
+const calcPrice = (sendCount: number) => {
+  const originalPrice = sendCount * 1;
+  const price = GROUP_OPTIONS.find(o => o.value === sendCount)?.price || 18;
+  return { price, originalPrice };
+};
 const TableList: React.FC = () => {
   const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
   const [currentRow, setCurrentRow] = useState<API.CityOperatorListItem>();
@@ -228,7 +259,7 @@ const TableList: React.FC = () => {
             groupLink: formData.groupLink,
             sendCount: formData.sendCount,
             groupQrCode: formData.qrCode[0].xhr.responseURL,
-            price: formData.price,
+            price: calcPrice(formData.sendCount).price,
           };
           console.log('update confirm', formData, params);
           try {
@@ -266,29 +297,22 @@ const TableList: React.FC = () => {
           }}
           action={handleUpload}
         />
-        <ProFormDigit name="sendCount" label="可群发数量" min={1} fieldProps={{ precision: 0 }} />
+        <ProFormSelect
-        <ProFormMoney
+          mode="single"
-          name="price"
+          name="sendCount"
-          label="价格"
+          label="可群发数量"
-          min={0}
+          options={GROUP_OPTIONS}
-          fieldProps={{
+          rules={[{ required: true, message: '必填项' }]}
-            precision: 0,
-            formatter: value => {
-              if (!value) return '0';
-              return `${Math.floor(value / 100)}`;
-            },
-            parser: value => {
-              if (!value) return 0;
-              const numValue = parseInt(value.toString().replace(/[^\d]/g, ''));
-              return numValue * 100;
-            },
-          }}
-          transform={(value, namePath) => {
-            return {
-              [namePath]: value ? Math.round(Number(value)) : 0,
-            };
-          }}
         />
+        <ProFormDependency name={['sendCount']}>
+          {({ sendCount }) =>
+            sendCount ? (
+              <div>
+                价格：{calcPrice(sendCount).price}（原价：{calcPrice(sendCount).originalPrice}）
+              </div>
+            ) : null
+          }
+        </ProFormDependency>
       </ModalForm>
     </PageContainer>
   );