Dingdong_client/screens/Detail/Comment.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, FlatList, RefreshControl } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { Div, Image, Text, Icon, Tag } from 'react-native-magnus';
import { useRequest } from '@umijs/hooks';

import useModel from 'flooks';
import Detail from './model';
import DetailHeader from './DetailHeader';

const AppraisalSortMap = new Map([
  [
    'ALL',
    {
      name: '全部',
    },
  ],
  [
    'LATEST',
    {
      name: '最新',
    },
  ],
  [
    'PRAISE',
    {
      name: '好评',
    },
  ],
  [
    'BAD_REVIEW',
    {
      name: '差评',
      isBad: true,
    },
  ],
  [
    'HAVE_PIC',
    {
      name: '有图',
    },
  ],
]);
const CommentItem = ({ info }) => {
  const imgs = info.img ? info.img.split(',') : [];

  const imageSize = imgs.length > 1 ? 80 : 167;
  return (
    <Div row py={10} px={15} bg="white" mt={10}>
      <Image source={{ uri: info.avatar }} w={33} h={33} />
      <Div flex={1} ml={5}>
        <Div row>
          <Div flex={1}>
            <Text fontSize="sm" textAlign="left">
              {info.nickname}
            </Text>
            <Div row>
              <Icon name="like1" color="brand500" />
              <Text fontSize="sm" color="brand500" textAlign="left">
                {info.likes || 0}
              </Text>
            </Div>
          </Div>
          <Text fontSize="sm" color="gray400" textAlign="left">
            {info.appraiseTime}
          </Text>
        </Div>
        <Text my={5} textAlign="left">
          {info.goodsAppraise}
        </Text>
        <Div row>
          {imgs.map((item, index) => {
            return (
              <Image
                key={index}
                mt={5}
                mr={5}
                source={{ uri: item }}
                w={imageSize}
                h={imageSize}
                rounded={3}
              />
            );
          })}
        </Div>
      </Div>
    </Div>
  );
};

export default function Comment() {
  const { id } = useModel(Detail, ['id']);
  const [comments, setcomments] = React.useState([]);

  const [appraisalSort, setappraisalSort] = React.useState('ALL');
  const appraisalRequest = useRequest(
    `/appraisal/my?merchantId=${id}&appraisalSort=${appraisalSort}`,
    {
      refreshDeps: [id, appraisalSort],
      onSuccess: (result) => {
        setcomments(result);
      },
    }
  );

  return (
    <>
      <Div row p={15}>
        {[...AppraisalSortMap.keys()].map((item) => {
          const info = AppraisalSortMap.get(item);
          const isChoose = appraisalSort === item;
          return (
            <Tag
              key={item}
              bg={isChoose ? 'brand500' : info.isBad ? 'gray200' : 'brand100'}
              color={isChoose ? 'white' : info.isBad ? 'gray500' : 'brand500'}
              fontSize="sm"
              mr={5}
              mb={5}
              onPress={() => setappraisalSort(item)}
            >
              {info.name}
            </Tag>
          );
        })}
      </Div>

      {comments.map((item) => {
        return <CommentItem info={item} key={item.goodsAppraise} />;
      })}

      {comments.length === 0 && (
        <Div px={10} py={20}>
          <Text color="gray300" textAlign="center">
            暂无数据
          </Text>
        </Div>
      )}
    </>
  );
}