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, Uploader } from '@antmjs/vantui';
import Page from '@/layouts/index';
import LocType from '@/components/locType';
import IssueType from '@/components/issueType';
import Map from '@/components/map';
import ImageUploader from '@/components/Uploader/ImageUploader';
import getAuthorize from '@/utils/authorize';
import { ROLE_INSPECTOR } from '@/utils/user';
import mapIcon from '@/assets/icons/marker.png';

export default (props) => {

  const [formData, setFormData] = React.useState({
    typeId: undefined,
    typeName: undefined,
    locId: undefined,
    locName: undefined,
    location: undefined,
    addr: undefined,
    content: undefined,
    images: [],
  });
  const [showLocType, setShowLocType] = React.useState(false);
  const [showIssueType, setShowIssueType] = 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,
    })
  }
  
  React.useMemo(() => {
    getAuthorize('scope.userLocation').then(() => {
      Taro.getLocation({
        success(res) {
          onFieldChange('location', `${res.longitude},${res.latitude}`);
        },
        fail() {
          Notify.show({
            message: '获取位置失败, 请退出重试',
            type: 'warning',
          })
        }
      });
    }).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={
            <ImageUploader value={formData.images} onChange={e => onFieldChange('images',e)} />
          }
        />
      </CellGroup>

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