Dingdong_client/screens/Main/Home/SpecialArea.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet } from 'react-native';
import { Flex, WingBlank } from '@ant-design/react-native';
import { Div, Button, Text } from 'react-native-magnus';
import { useNavigation } from '@react-navigation/native';
import { Card } from 'react-native-paper';
import useModel from 'flooks';
import HomeModel from './model';
import CountDown from '../../../components/CountDown ';
import Banner from './Banner';

// 优惠专区
export default function SpecialArea() {
  const navigation = useNavigation();
  const { t } = useTranslation();

  const { promote1, promote2, bannerList } = useModel(HomeModel);
  const promote1Card = (list) => {
    return list.map((item) => {
      const merchant = item.merchant || {};
      return (
        <Div key={item.id} flex={1} mx={1.5} maxW="50%">
          <Card
            key={item.id}
            onPress={() => {
              navigation.navigate('MerchantDetail', {
                merchantId: item.merchantId,
              });
            }}
          >
            <Card.Cover
              style={styles.image}
              resizeMode="cover"
              source={{ uri: merchant.logo }}
            />
            <Div py={8} px={10}>
              <Text>{merchant.name}</Text>
              <Div row>
                <Text fontSize="sm" mr={5}>
                  {t('dao-ji-shi')}
                </Text>
                <CountDown
                  endTime={item.endDateTime}
                  format="yyyy-MM-DD HH:mm:ss"
                  valueFormat="D天 HH时mm分ss秒"
                  size="sm"
                  color="red500"
                />
              </Div>
            </Div>
          </Card>
        </Div>
      );
    });
  };

  const promote2Card = (list) => {
    return list.map((item) => {
      const merchant = item.merchant || {};
      return (
        <Div key={item.id} flex={1} mx={1.5} maxW="25%" shadow="xs">
          <Card
            onPress={() => {
              navigation.navigate('MerchantDetail', {
                merchantId: item.merchantId,
              });
            }}
          >
            <Card.Cover
              style={styles.image2}
              resizeMode="cover"
              source={{ uri: merchant.logo }}
            />
            <Card.Content style={styles.main2}>
              <Text fontSize="xs" numberOfLines={1} ellipsizeMode="tail">
                {merchant.name}
              </Text>
            </Card.Content>
          </Card>
        </Div>
      );
    });
  };
  return (
    <>
      <Div bg="white" px={15}>
        <Text fontSize="xl" fontWeight="bold" py={5}>
          {t('you-hui-zhuan-qu')}
        </Text>
        <Div row mb={5}>
          {promote1Card(promote1)}
        </Div>
        <Div row mb={10}>
          {promote2Card(promote2)}
        </Div>

        <Text fontSize="xl" fontWeight="bold" py={5}>
          {t('you-hui-zhuan-qu')}
        </Text>

        <Banner type="AREA" round noDots />
      </Div>
    </>
  );
}

const styles = StyleSheet.create({
  image: {
    height: 77,
  },
  image2: {
    height: 80,
  },
  main2: {
    paddingBottom: 6,
    paddingVertical: 6,
    paddingHorizontal: 10,
  },
  content: {
    marginTop: 5,
  },
  content2: {
    marginTop: 3,
  },
  imageMain: {
    height: 74,
    borderRadius: 3,
    marginTop: 5,
  },
});