Dingdong_client/screens/Detail/ReportBusinessScreen.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import {
  Div,
  Button,
  Image,
  Text,
  Avatar,
  Radio,
  RadioGroup,
} from 'react-native-magnus';
import { TextareaItem } from '@ant-design/react-native';

import { ScrollView } from 'react-native-gesture-handler';
import { useCreation } from '@umijs/hooks';
import useModel from 'flooks';
import User from '../../flooks/User'; // detail模块通用方法
import DetailModel from './model'; // detail模块通用方法
import Order from '../Order/model';

import Header from '../../components/Header';
import ImagePicker from '../../components/ImagePicker';

const reasomsMap = new Map([
  [
    '商家资质问题（缺少相关从业资质）',
    { name: '商家资质问题（缺少相关从业资质）' },
  ],
  [
    '商家价格问题（价格虚高恶意设置高满减）',
    { name: '商家价格问题（价格虚高恶意设置高满减）' },
  ],
  ['商家品类问题（品类设置不符）', { name: '商家品类问题（品类设置不符）' }],
  ['商家logo问题（涉及侵权）', { name: '商家logo问题（涉及侵权）' }],
  [
    '商家配送问题（起送价、餐盒费设置过高）',
    { name: '商家配送问题（起送价、餐盒费设置过高）' },
  ],
  ['其它问题', { name: '其它问题' }],
]);

export default function ReportBusinessScreen({ navigation }) {
  const { merchantInfo, complaintSave } = useModel(DetailModel, [
    'merchantInfo',
  ]);
  const { id } = useModel(User, ['id']);
  const { logo, showName, mid } = merchantInfo;

  const [type, settype] = React.useState('商家资质问题（缺少相关从业资质）');

  const [imgList, setimgList] = React.useState(['']);
  const [content, setcontent] = React.useState('');

  function changeImg(img, index) {
    const list = [...imgList];
    if (!img) {
      list.splice(index, 1);
    } else {
      list.splice(index, 1, img);
    }
    if (index === list.length - 1 && list.length < 4) {
      list.push('');
    }
    setimgList(list);
  }

  function deleteImg(index) {
    const list = [...imgList];
    if (!list[index]) {
      return null;
    } else {
      return () => changeImg('', index);
    }
  }

  const canSubmit = useCreation(() => {
    if (type && content) {
      return true;
    } else {
      return false;
    }
  }, [type, content, imgList]);

  function submit() {
    const img = [...imgList].filter((item) => {
      return item;
    });
    complaintSave(id, mid, type, content, img.join(',')).then(() => {
      navigation.goBack();
    });
  }

  return (
    <>
      <Header title="举报商家" />
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#fff',
        }}
      >
        <Div bg="white" px={15} py={5}>
          <Div
            row
            alignItems="center"
            py={15}
            borderBottomWidth={1}
            borderColor="gray200"
          >
            <Image w={33} h={33} rounded="sm" source={{ uri: logo }} />
            <Text fontSize="xl" fontWeight="bold" ml={10}>
              {showName}
            </Text>
          </Div>

          <Div py={5} borderBottomWidth={1} borderColor="gray200">
            <Text py={5} fontSize="xs">
              举报商家存在如下问题：
            </Text>
            <RadioGroup value={type} onChange={(value: any) => settype(value)}>
              {[...reasomsMap.keys()].map((item, index) => {
                return (
                  <Radio
                    key={index}
                    value={item}
                    activeColor="brand500"
                    inactiveColor="gray300"
                    py={5}
                  >
                    <Text
                      color={item === type ? 'brand500' : 'gray300'}
                      fontSize="xs"
                      ml={10}
                    >
                      {reasomsMap.get(item).name}
                    </Text>
                  </Radio>
                );
              })}
            </RadioGroup>
          </Div>
          <Div row py={10}>
            {imgList.map((item, index) => {
              return (
                <ImagePicker
                  key={index}
                  img={item}
                  setImg={(img) => changeImg(img, index)}
                  cancelEvent={deleteImg(index)}
                />
              );
            })}
          </Div>
          <Div mb={10}>
            <TextareaItem
              rows={4}
              placeholder="可补充具体投诉内容，您的投诉真实性对我们的处理至关重要"
              count={50}
              style={{
                backgroundColor: '#eeeeee',
                paddingVertical: 10,
                fontSize: 10,
                borderBottomWidth: 0,
              }}
              onChange={setcontent}
            />
          </Div>
          <Button
            block
            bg="brand500"
            color="white"
            my={10}
            mx={20}
            onPress={submit}
            disabled={!canSubmit}
          >
            提交
          </Button>
        </Div>
      </ScrollView>
    </>
  );
}