miniapp/src/pages/issue/add/index.jsx

import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Button, Notify, Field, Cell, CellGroup } from '@antmjs/vantui';
import Page from '@/layouts/index';
import LocType from '@/components/locType';
import IssueType from '@/components/issueType';
import Map from '@/components/map';
import Uploader from '@/components/Uploader/index';
import { getLocation } from '@/utils/authorize';
import { ROLE_INSPECTOR } from '@/utils/user';
import mapIcon from '@/assets/icons/marker.png';
import { postTaIssue } from '@/services/taissue';
import { warn } from '@/utils/message';

export default (props) => {

  const [formData, setFormData] = React.useState({
    typeId: undefined,
    typeName: undefined,
    locId: undefined,
    locName: undefined,
    location: undefined,
    addr: undefined,
    content: undefined,
    attachList: [],
  });
  const [showLocType, setShowLocType] = React.useState(false);
  const [showIssueType, setShowIssueType] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  const onLocTypeChange = (_, it) => {
    setFormData({
      ...formData,
      locId: it.typeId,
      locName: it.name,
    });
    setShowLocType(false);
  }

  const onIssueTypeChange = (_, it) => {
    setFormData({
      ...formData,
      typeId: it.typeId,
      typeName: it.name,
    });
    setShowIssueType(false);
  }

  const onFieldChange = (field, value) => {
    setFormData({
      ...formData,
      [field]: value,
    })
  }

  const onSubmit = () => {
    try {
      warn(!formData.addr, '请填写地址')
      warn(!formData.locId, '请选择点位')
      warn(!formData.content, '请填写问题描述')
      warn(!formData.typeId, '请选择问题分类')
      warn(!formData.attachList || formData.attachList.length < 1, '请上传照片')
    } catch (e) {
      return;
    }

    setLoading(true)
    postTaIssue(formData).then(() => {
      setLoading(false);
      Taro.navigateBack({delta: 1});
    }).catch(() => {
      setLoading(false);
    })
  }
  
  React.useMemo(() => {
    getLocation().then((res) => {
      onFieldChange('location', `${res.longitude},${res.latitude}`);
    }).catch((err) => {
      Notify.show({
        message: '获取位置失败, 请退出重试',
        type: 'warning',
      })
    });
  }, []);

  return (
    <Page roles={[ROLE_INSPECTOR]}>
      <LocType
        show={showLocType}
        value={formData.addr}
        onCancel={() => setShowLocType(false)}
        onChange={onLocTypeChange}
      />

      <IssueType
        show={showIssueType}
        value={formData.typeName}
        onCancel={() => setShowIssueType(false)}
        onChange={onIssueTypeChange}
      />

      <Map location={formData.location} />

      <Field
        value={formData.addr}
        leftIcon={mapIcon}
        placeholder="请输入地址"
        onChange={e => onFieldChange('addr', e.detail)}
      />

      <CellGroup style={{marginTop: '20px'}}>
        <Cell
          isLink
          title="点位"
          value={formData.locName}
          onClick={() => setShowLocType(true)}
        />

        <Cell title="问题描述" border={false} />

        <Field
          type="textarea"
          placeholder="请输入问题描述"
          autosize={{ minHeight: '120px' }}
          value={formData.content}
          onChange={e => onFieldChange('content', e.detail)}
        />
      </CellGroup>
      
      <Cell
        isLink
        title="问题分类"
        style={{marginTop: '20px'}}
        value={formData.typeName}
        onClick={() => setShowIssueType(true)}
      />

      
      <CellGroup style={{marginTop: '20px'}}>        
        <Cell title="拍照" border={false} />

        <Cell
          renderTitle={
            <Uploader value={formData.attachList} onChange={e => onFieldChange('attachList',e)} />
          }
        />
      </CellGroup>

      <View style={{margin: '20px auto', padding: '0 1em'}}>
        <Button block type="primary" loading={loading} onClick={onSubmit}>提交</Button>
      </View>
    </Page>
  )
}