contact.jsx

import {useState} from 'react';
import Taro from '@tarojs/taro';
import {$} from '@tarojs/extend';
import {
  CellGroup,
  Cell,
  Input,
  Picker,
  TextArea,
  Row,
  Col,
} from '@nutui/nutui-react-taro';
import {Button, View} from '@tarojs/components';
import './index.scss';

function ProForm() {
  // 咨询类别
  const [visCategory, setVisCategory] = useState(false);
  const [category, setCategory] = useState('请选择');
  const categoryList = [
    {text: '厂房咨询', value: 1},
    {text: '园区咨询', value: 2},
    {text: '政策咨询', value: 3},
    {text: '项目咨询', value: 4},
    {text: '其他咨询', value: 5},
  ];

  // 机构名称
  const [orgName, setOrgName] = useState('');
  // 称谓
  const [title, setTitle] = useState('');
  // 联系电话
  const [phone, setPhone] = useState('');
  // 邮箱
  const [email, setEmail] = useState('');
  // 详细需求
  const [notes, setNotes] = useState('');

  // 确认类别
  const confirmCategory = (values) => {
    setCategory(values[0].text);
  };

  // 表单校验
  const checkForm = () => {
    if (category === '请选择' || !category) {
      Taro.showToast({
        title: '请选择咨询类别',
        icon: 'error',
      });
      return false;
    }
    if (!orgName) {
      Taro.showToast({
        title: '请输入机构名称',
        icon: 'error',
      });
      return false;
    }
    if (!title) {
      Taro.showToast({
        title: '请输入您的称谓',
        icon: 'error',
      });
      return false;
    }
    if (!phone) {
      Taro.showToast({
        title: '请输入联系电话',
        icon: 'error',
      });
      return false;
    }
    return true;
  };

  return (
    <View className='form'>
      <Picker
        title='请选择'
        visible={visCategory}
        options={categoryList}
        onConfirm={(list, values) => confirmCategory(list, values)}
        onClose={() => setVisCategory(false)}
        onBlur={checkForm}
      />

      <CellGroup title='咨询类别'>
        <Cell
          title='咨询类别'
          description='*'
          extra={
            <Input
              type='text'
              readOnly
              align='right'
              value={category}
              placeholder='请选择咨询类别'
              onClick={() => setVisCategory(true)}
            />
          }
        />
      </CellGroup>

      <CellGroup title='信息录入'>
        <Cell
          title='您的机构名称'
          description='*'
          extra={
            <Input
              clearable
              type='text'
              align='right'
              value={orgName}
              placeholder='请输入您的机构名称'
              onChange={(value) => setOrgName(value)}
              onBlur={checkForm}
            />
          }
        />

        <Cell
          title='您的称谓'
          description='*'
          extra={
            <Input
              clearable
              type='text'
              align='right'
              value={title}
              placeholder='请输入您的称谓'
              onChange={(value) => setTitle(value)}
              onBlur={checkForm}
            />
          }
        />

        <Cell
          title='您的联系电话'
          description='*'
          extra={
            <Input
              clearable
              type='text'
              align='right'
              value={phone}
              placeholder='请输入您的联系电话'
              onChange={(value) => setPhone(value)}
              onBlur={checkForm}
            />
          }
        />

        <Cell
          title='您的邮箱'
          extra={
            <Input
              clearable
              type='text'
              align='right'
              value={email}
              placeholder='请输入您的邮箱'
              onChange={(value) => setEmail(value)}
            />
          }
        />
      </CellGroup>

      <CellGroup title='详细需求'>
        <TextArea
          maxLength={200}
          showCount
          rows={2}
          value={notes}
          placeholder='请输入您的详细需求'
          onChange={(value) => setNotes(value)}
        />
      </CellGroup>

      <View style={{padding: '0 20px'}}>
        <Button
          onClick={() => {
            const submit =  $('#submit').trigger('tap');
            if (submit) {
              Taro.showToast({
                title: '提交成功',
                icon: 'success',
              });
            }
          }}
        >
          用于检查数据的按钮
        </Button>

        <Row gutter={8}>
          <Col span={16}>
            <Button
              block
              id='submit'
              open-type='contact'
              style={{
                '--nutui-button-border-radius': '5px',
                '--nutui-button-default-color': '#fff',
                '--nutui-button-default-border-color': '#AB010B',
                '--nutui-button-default-background-color': '#AB010B',
                '--nutui-button-default-height': '40px',
                '--nutui-button-default-font-size': '16px',
                fontFamily: 'Arial',
              }}
              showMessageCard
              sendMessageTitle={
                (category !== '请选择' ? `${category}: ` : '') +
                (orgName ? `来自${orgName}的` : '') +
                (title ? `${title}` : '') +
                (phone ? `，电话${phone}` : '') +
                (email ? `，邮箱${email}` : '') +
                (notes ? `，详细需求${notes}` : '')
              }
            >
              在线咨询
            </Button>
          </Col>

          <Col span={8}>
            <Button
              block
              style={{
                '--nutui-button-border-radius': '5px',
                '--nutui-button-default-height': '40px',
                '--nutui-button-default-font-size': '16px',
                '--nutui-button-default-color': '#AB010B',
                '--nutui-button-default-border-color': '#AB010B',
                fontFamily: 'Arial',
              }}
              onClick={() => {
                Taro.showModal({
                  title: '提示',
                  content: '是否清空所有输入的内容？',
                  success: (res) => {
                    if (res.confirm) {
                      setCategory('请选择');
                      setOrgName('');
                      setTitle('');
                      setPhone('');
                      setEmail('');
                      setNotes('');
                    }
                  },
                });
              }}
            >
              清空
            </Button>
          </Col>
        </Row>
      </View>
    </View>
  );
}

function Index() {
  return (
    <View>
      <ProForm />
    </View>
  );
}

export default Index;