miniapp/src/pages/check/edit/index.jsx

import React from 'react';
import Map from '@/components/map';
import Page from '@/layouts/index';
import { Button, Field, Cell, CellGroup, Row, Col, Image } from '@antmjs/vantui';
import mapIcon from '@/assets/icons/marker.png';
import LocType from '@/components/LocType';
import { View, Input } from '@tarojs/components';
import Uploader from '@/components/Uploader/index';
import ScrollPage from '@/components/ScrollPage/index';
import icon from '@/assets/icons/box.png';
import Choice from "./components/Choice";

export default (props) => {
  const {
    issue,
    readOnly,
    showOrg,
    showExpireDate,
    renderFields,
    renderAction,
  } = props;

  const [inx, setInx] = React.useState(-1);

  const num = 1;
  const count = 15;

  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 [evaluationPage, setEvaluationPage] = React.useState(true);
  const [evaluationPage2, setEvaluationPage2] = React.useState(false);
  const [evaluationPage3, setEvaluationPage3] = React.useState(false);
  const [scrollPage, setScrollPage] = React.useState(false);

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

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

  const onChangePage = () => {
    setEvaluationPage(false);
    setEvaluationPage2(true);
  }

  const onChangePage2 = () => {
    setEvaluationPage2(false);
    setEvaluationPage3(true);
  }

  const onChangePage3 = () => {
    setEvaluationPage3(false);
    setScrollPage(true);
  }

  return (
    <>
      <Page>
        {
          evaluationPage && (<>
            <LocType
              show={showLocType}
              value={formData.addr}
              onCancel={() => setShowLocType(false)}
              onChange={onLocTypeChange}
            />
            <Map location={formData.location} />
            <CellGroup>
              <Cell
                title="点位"
                isLink
                value={formData.locName}
                onClick={() => !readOnly && setShowLocType(true)}
              />
              <Field
                placeholder="请输入地址"
                value={formData.addr}
                leftIcon={mapIcon}
              // readonly={readOnly}
              // onChange={e => setFieldChange('addr', e.detail)}
              />
            </CellGroup>

            <CellGroup style={{ padding: 'var(--main-space)', position: 'relative', top: '330px' }}>
              <Button
                type="primary"
                block
                onClick={onChangePage}
              >
                下一步
              </Button>
            </CellGroup>
          </>)
        }

        {
          evaluationPage2 && (
            <View style={{ flex: '1' }}>

              <Choice />

              <CellGroup>
                <Cell title="评测标准" border={false} size="large" />
                <Row>
                  <Col offset="2" span="20">
                    <Cell
                      title="
                  在显著位置看到市民公约或居民公约展示"
                      border={false}
                      style={{ paddingTop: '0px' }}
                    />
                  </Col>
                </Row>
              </CellGroup>

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

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

              <View style={{ position: 'relative', marginBottom: '20px', flex: 'none' }}>
                <View style={{ position: 'absolute', width: '100%', top: '100px' }}>
                  <CellGroup style={{ marginTop: '20px', padding: 'var(--main-space)' }}>
                    <Button
                      type="primary"
                      block
                      onClick={onChangePage2}
                    >
                      下一题
                    </Button>
                  </CellGroup>

                  <CellGroup>
                    <Cell
                      style={{ textAlign: 'right' }}
                    >
                      <Image src={icon} width="25px" height="25px"
                        style={{ verticalAlign: 'middle', marginRight: '10px' }}
                      />
                      {num + '/' + count}
                    </Cell>
                  </CellGroup>
                </View>
              </View>
            </View>)
        }

        {
          evaluationPage3 && (
            <ScrollPage>
              <CellGroup>
                <Cell title="测评内容" border={false} size="large" style={{ paddingBottom: '0px' }} />
                <View style={{ padding: 'var(--main-space)', paddingTop: '0px' }}>
                  <View style={{ padding: 'var(--main-space)', fontSize: '14px', color: 'var(--main-bg-color)' }}>
                    垃圾乱扔，乱张贴（具体标准），测评结果：<Input type="text" style={{ width: '45px', display: 'inline-block', verticalAlign: 'middle' }} />处。（此处填写数字）
                  </View>
                </View>
              </CellGroup>

              <CellGroup>
                <Cell title="评测标准" border={false} size="large" />
                <Row>
                  <Col offset="2" span="20">
                    <Cell
                      title="
                    (1)每看到1处垃圾乱扔(1平方米以内的垃圾算作1处)计为1处;
                    (2)每看到1处乱张贴乱涂写乱刻画《1平米内出现的算作1 处在统一设置的信息栏中张贴的小广告不算作失分点)计为1处;
                    (3)每看到建筑物外立面的1处大面积破损污损《高3米以上、宽2米以上)计为1处。"
                      border={false}
                      style={{ paddingTop: '0px' }}
                    />
                  </Col>
                </Row>
              </CellGroup>

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

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

              <CellGroup style={{ marginTop: '20px', padding: 'var(--main-space)' }}>
                <Row>
                  <Col offset="1" span="10">
                    <Button
                      type="primary"
                      block
                    >
                      上一题
                    </Button>
                  </Col>
                  <Col offset="2" span="10">
                    <Button
                      type="primary"
                      block
                      onClick={onChangePage3}
                    >
                      下一题
                    </Button>
                  </Col>
                </Row>
              </CellGroup>
            </ScrollPage>)
        }
      </Page >
      <View>
        {
          scrollPage && (
            <ScrollPage />
          )
        }
      </View>
    </>
  )
}