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

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

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

// import Alipay from '../Alipay';
// import Wxpay from '../Wxpay';
// import BankPay from '../BankPay';

// import aliSrc from '/assets/icons/ali.svg';
// import wxSrc from '/assets/icons/wx.svg';
// import bankSrc from '/assets/icons/bank.svg';
import { orderConfirmAction } from '../../../../request/actions';

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

// const TabItem = ({ src, text }) => (
//   <View className={styles['tabitem']}>
//     <img src={src} />
//     {text}
//   </View>
// );

export default function FormBar() {
  const [form] = Form.useForm();
  // const [showFee, updateShowFee] = useState(false);

  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 way = Form.useWatch('way', form);
  // const feeway = Form.useWatch('feeway', form);

  // const detailRenderer = useMemo(() => {
  //   return {
  //     alipay: <Alipay namePrefix='pay' />,
  //     wx: <Wxpay namePrefix='pay' />,
  //     bank: <BankPay namePrefix='pay' />
  //   }[way];
  // }, [way]);

  // const feeDetailRenderer = useMemo(() => {
  //   return {
  //     alipay: <Alipay namePrefix='fee' />,
  //     wx: <Wxpay namePrefix='fee' />,
  //     bank: <BankPay namePrefix='fee' />
  //   }[feeway];
  // }, [feeway]);

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

  return (
    <View className={styles.container}>
      <Form form={form} className={styles.form} layout='horizontal' >
        <View className={styles.title}>
          收款信息
        </View>
        <Form.Item name='orderId' label='订单编号' childElementPosition='right'>
          <FormLabel />
        </Form.Item>
        <Form.Item name='orderDate' label='订单日期' childElementPosition='right'>
          <FormLabel />
        </Form.Item>
        <Form.Item name='orderPrice' label='订单金额' childElementPosition='right'>
          <FormLabel render={val => `￥${val || 0}`} />
        </Form.Item>
        <Form.Item name='feePrice' label='服务费金额' childElementPosition='right'>
          <FormLabel render={val => `￥${val || 0}`} />
        </Form.Item>
        <Form.Item name='payUserTelephone' label='付款账号' childElementPosition='right'>
          <FormLabel />
        </Form.Item>
        <Form.Item style={!payImage ? { display: 'none' } : {}} name='payImage' label='付款凭证' childElementPosition='right'>
          <FormImage readonly />
        </Form.Item>
        <Form.Item style={!feeImage ? { display: 'none' } : {}} name='feeImage' label='服务费凭证' childElementPosition='right'>
          <FormImage readonly />
        </Form.Item>
        {/* <Form.Item
          name='way'
          label='提现方式'
          valuePropName='activeKey'
          initialValue='alipay'
          childElementPosition='right'
        >
          <CapsuleTabs style={{ padding: 0 }}>
            <CapsuleTabs.Tab title={<TabItem text='支付宝' src={aliSrc} />} key='alipay' />
            <CapsuleTabs.Tab title={<TabItem text='微信' src={wxSrc} />} key='wx' />
            <CapsuleTabs.Tab title={<TabItem text='银行卡' src={bankSrc} />} key='bank' />
          </CapsuleTabs>
        </Form.Item>
        {detailRenderer}
        {showFee && (
          <React.Fragment>
            <View className={styles.title}>
              服务费收款信息
            </View>
            <Form.Item name='feePrice' label='服务费' childElementPosition='right'>
              <FormLabel render={val => `￥${val || 0}`} />
            </Form.Item>
            <Form.Item name='feeImage' label='服务费付款凭证' childElementPosition='right'>
              <FormImage readonly />
            </Form.Item>
            <Form.Item
              name='feeway'
              label='提现方式'
              valuePropName='activeKey'
              initialValue='alipay'
              childElementPosition='right'
            >
              <CapsuleTabs style={{ padding: 0 }}>
                <CapsuleTabs.Tab title={<TabItem text='支付宝' src={aliSrc} />} key='alipay' />
                <CapsuleTabs.Tab title={<TabItem text='微信' src={wxSrc} />} key='wx' />
                <CapsuleTabs.Tab title={<TabItem text='银行卡' src={bankSrc} />} key='bank' />
              </CapsuleTabs>
            </Form.Item>
            {feeDetailRenderer}
          </React.Fragment>
        )} */}
      </Form >
      <Button color='primary' shape='rounded' className={styles.submit} onClick={handleSubmit}>
        确认收款
      </Button>
    </View>
  )
}