Dingdong_client/screens/Detail/ClassificationList.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Image, Text } from 'react-native-magnus';

import { useRequest, useCreation } from '@umijs/hooks';

import useModel from 'flooks';
import Detail from './model';
import Plus from '../../components/Plus';

function Item({ info, cartMap, checkgoodsSpecification, changeNum }) {
  return (
    <Div py={5} px={10} row bg="white">
      <Image
        w={70}
        h={70}
        bg="gray200"
        rounded="sm"
        source={{ uri: info.img }}
      />
      <Div flex={1} ml={5}>
        <Text textAlign="left">{info.name}</Text>
        <Text color="gray300" fontSize="xs" textAlign="left">
          {info.introduction}
        </Text>
        <Text color="gray300" fontSize="xs" textAlign="left">
          月售{info.inventory || 0}
        </Text>
        <Div flex={1} />
        <Div row alignItems="center">
          <Text color="red500" textAlign="left">
            ¥{info.discountAmount || info.amount}
          </Text>
          {!!info.discountAmount && (
            <Text
              color="gray300"
              ml={5}
              fontSize="xs"
              textDecorLine="line-through"
              textDecorColor="gray300"
              textAlign="left"
            >
              ¥{info.amount}
            </Text>
          )}
          <Div flex={1} />
          <Plus
            num={cartMap.has(info.id) ? cartMap.get(info.id).num : 0}
            minus={() => {
              changeNum(
                cartMap.get(info.id).specIds,
                cartMap.get(info.id).num - 1
              );
            }}
            plusEvent={() => checkgoodsSpecification(info)}
          />
        </Div>
      </Div>
    </Div>
  );
}
export default function ClassificationList() {
  const {
    selectClass,
    cartMap,
    checkgoodsSpecification,
    changeNum,
    goodsList,
  } = useModel(Detail, ['selectClass', 'cartMap', 'goodsList']);

  const [typegoodsList, setgoodsList] = React.useState([]);

  const classificationRequest = useRequest(
    `/classification/allGoods?classificationId=${selectClass}`,
    {
      manual: true,
      onSuccess: (result) => {
        // scroll.scrollToOffset(0);
        setgoodsList(
          result.filter((item) => {
            return item;
          }) || []
        );
      },
    }
  );

  const showList = useCreation(() => {
    return typegoodsList.filter((item) => {
      return goodsList.find((goods) => {
        return goods.id === item.id;
      });
    });
  }, [goodsList, typegoodsList]);

  React.useEffect(() => {
    if (selectClass) {
      classificationRequest.run();
    }
  }, [selectClass]);
  // classification;
  return (
    <Div flex={1} bg="white" pb={100}>
      {showList.map((item) => {
        return (
          <Item
            key={item.id}
            info={item}
            cartMap={cartMap}
            checkgoodsSpecification={checkgoodsSpecification}
            changeNum={changeNum}
          />
        );
      })}
      {showList.length === 0 && (
        <Div px={10} py={20}>
          <Text color="gray300" textAlign="center">
            暂无数据
          </Text>
        </Div>
      )}
    </Div>
  );
}