cnyanglao-ryc/src/pages/feeconfirm/components/FormBar/index.jsx

import { View } from '@tarojs/components';
import { Button, Form, Modal, Toast } from 'antd-mobile';

import FormImage from '/components/FormImage';
import FormLabel from '/components/FormLabel';
import React, { useEffect } from 'react';
import { getOrderInfoAction } from '/request/actions';
import { getUrlParam } from '/utils';
import Taro from '@tarojs/taro';

import { orderConfirmAction } from '../../../../request/actions';

import styles from './index.module.less';

export default function FormBar() {
  const [form] = Form.useForm();

  useEffect(() => {
    getOrderInfoAction({
      orderId: getUrlParam('orderId')
    }).then(res => {
      const orderShopInfo = res.orderShopInfo || {};
      const feeShopInfo = res.feeShopInfo || {};
      const _orderShopInfo = Object.keys(orderShopInfo).reduce((res, key) => {
        return {
          ...res,
          [`pay-${key}`]: orderShopInfo[key]
        }
      }, {});
      const _feeShopInfo = Object.keys(orderShopInfo).reduce((res, key) => {
        return {
          ...res,
          [`fee-${key}`]: feeShopInfo[key]
        }
      }, {});
      form.setFieldsValue({
        ...res,
        ..._orderShopInfo,
        ..._feeShopInfo
      });

      // updateShowFee(res.feePrice || res.feeImage || res.feeShopInfo)
    });
  }, []);

  const handleSubmit = () => {
    Modal.confirm({
      title: '是否确认收款?',
      onConfirm: async () => {
        try {
          const orderId = getUrlParam('orderId');
          await orderConfirmAction({ orderId });
          Toast.show({
            icon: 'success',
            content: '已成功确认收款信息'
          });
          Taro.navigateTo({
            url: '/pages/dataset/index'
          });
        }
        catch (err) {
          console.log('err: ', err);
        }
      }
    })
  };

  const payImage = Form.useWatch('payImage', form);
  const feeImage = Form.useWatch('feeImage', form);

  return (
    <View className={styles.container}>
      <Form form={form} className={styles.form} layout='vertical' >
        <View className={styles.title}>
          收款信息
        </View>
        <Form.Item name='orderId' label='订单编号' >
          <FormLabel />
        </Form.Item>
        <Form.Item name='orderDate' label='订单日期' >
          <FormLabel />
        </Form.Item>
        <Form.Item name='orderPrice' label='订单金额' >
          <FormLabel render={val => `￥${val || 0}`} />
        </Form.Item>
        <Form.Item name='feePrice' label='服务费金额' >
          <FormLabel render={val => `￥${val || 0}`} />
        </Form.Item>
        <Form.Item name='payUserTelephone' label='付款账号' >
          <FormLabel />
        </Form.Item>
        <Form.Item style={!payImage ? { display: 'none' } : {}} name='payImage' label='付款凭证' >
          <FormImage readonly />
        </Form.Item>
        <Form.Item style={!feeImage ? { display: 'none' } : {}} name='feeImage' label='服务费凭证' >
          <FormImage readonly />
        </Form.Item>
      </Form >
      <Button color='primary' shape='rounded' className={styles.submit} onClick={handleSubmit}>
        确认收款
      </Button>
    </View>
  )
}