Dingdong_client/screens/Detail/Recommend.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Flex } from '@ant-design/react-native';
import { Card, IconButton, Colors } from 'react-native-paper';
import { Div, Image, Text } from 'react-native-magnus';
import { useNavigation } from '@react-navigation/native';

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

import Plus from '../../components/Plus';

export default function Order() {
  const navigation = useNavigation();
  const {
    goodsList,
    checkgoodsSpecification,
    cartMap,
    changeNum,
  } = useModel(Detail, ['goodsList', 'cartMap']);
  const [recommendGoods, setRecommendGoods] = React.useState([]);

  React.useEffect(() => {
    const goods = goodsList.filter((item) => {
      return item.recommend;
    });
    setRecommendGoods(goods);
  }, [goodsList]);

  const goodsListCom = (list) => {
    return list.map((item) => {
      return (
        <Flex.Item
          key={item.id}
          style={{ paddingHorizontal: 3, maxWidth: '50%' }}
        >
          <Card
            elevation={2}
            style={styles.card}
            onPress={() =>
              navigation.navigate('GoodsDetail', {
                goodsId: item.id,
              })
            }
          >
            <Card.Cover
              style={styles.image2}
              resizeMode="cover"
              source={{ uri: item.img }}
            />
            <Card.Content style={styles.content}>
              <Text textAlign="left">{item.name}</Text>
              <Text fontSize="sm" color="gray300" textAlign="left">
                月售：
                {item.totalSales}
              </Text>
              <Div row>
                <Text
                  fontSize="sm"
                  fontWeight="bold"
                  color="red500"
                  textAlign="left"
                >
                  ¥{item.discountAmount || item.amount}
                </Text>
                {!!item.discountAmount && (
                  <Text
                    ml={5}
                    fontSize="xs"
                    color="gray300"
                    textDecorLine="line-through"
                    textDecorColor="gray300"
                    textAlign="left"
                  >
                    ¥{item.amount}
                  </Text>
                )}
              </Div>

              <Plus
                num={cartMap.get(item.id) ? cartMap.get(item.id).num : 0}
                minus={() => {
                  changeNum(
                    cartMap.get(item.id).specIds,
                    cartMap.get(item.id).num - 1
                  );
                }}
                plusEvent={() => checkgoodsSpecification(item)}
              />
            </Card.Content>
          </Card>
        </Flex.Item>
      );
    });
  };

  return (
    <>
      {recommendGoods.length > 0 && (
        <View style={styles.main}>
          <Text fontSize="xl" fontWeight="bold" textAlign="left">
            店主推荐
          </Text>

          <Flex>{goodsListCom(recommendGoods)}</Flex>
        </View>
      )}
    </>
  );
}

const styles = StyleSheet.create({
  main: {
    backgroundColor: '#fff',
    padding: 15,
  },
  plus: {
    position: 'absolute',
    right: 0,
    bottom: 0,
  },
  content: {
    paddingHorizontal: 10,
    paddingBottom: 5,
    marginTop: 5,
  },
});