Dingdong_client/screens/userCoupon/CouponScreen.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { TouchableRipple } from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';

import { useTranslation } from 'react-i18next';

import { useNavigation } from '@react-navigation/native';
import { useRequest } from '@umijs/hooks';
import useModel from 'flooks';
import userCoupon from './model'; // 优惠券模块

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

const counpon = {
  amount: 18,
  enabled: true,
  endDate: '2022-12-11',
  fullAmount: 50,
  id: 744,
  merchantId: 189,
  name: '六一优惠',
  startDate: '2022-12-08',
};

const CounponItem = ({ info, isEnd }) => {
  const { t } = useTranslation();
  const navigation = useNavigation();
  return (
    <Div mt={10} mx={5}>
      <TouchableRipple
        disabled={isEnd}
        onPress={() => navigation.navigate('Home', { screen: 'Home' })}
      >
        <Div row bg="white" alignItems="center" py={15} pr={15}>
          <Div minW={80} alignItems="center">
            <Text color={isEnd ? 'gray400' : 'red500'} fontSize="xl">
              ¥{counpon.amount}
            </Text>
            {counpon.fullAmount > 0 && (
              <Text fontSize="xs" color="gray300" textAlign="left">
                {t('man')}
                {counpon.fullAmount}
                {t('yuan-ke-yong')}
              </Text>
            )}
            {counpon.fullAmount === 0 && (
              <Text fontSize="xs" color="gray300" textAlign="left">
                {t('wu-jinemen-jian')}
              </Text>
            )}
          </Div>
          <Div flex={1}>
            <Text
              color={isEnd ? 'gray400' : 'black'}
              fontSize="xl"
              fontWeight="bold"
            >
              {counpon.name}
            </Text>
            <Text fontSize="xs" color="gray300" textAlign="left">
              {t('xian')}
              {counpon.startDate}
              {t('zhi')}
              {counpon.endDate}
              {t('shi-yong')}
            </Text>
          </Div>
          {isEnd ? (
            <Text color="gray500" fontSize="sm" textAlign="left">
              {t('yi-guo-qi')}
            </Text>
          ) : (
            <Text color="gray500" fontSize="sm" textAlign="left">
              {t('qu-shi-yong')}
            </Text>
          )}
        </Div>
      </TouchableRipple>
    </Div>
  );
};

export default function CouponScreen() {
  const { t } = useTranslation();
  const {
    userCouponList,
    userCouponListHis,
    init,
    getBadList,
  } = useModel(userCoupon, ['userCouponList', 'userCouponListHis']);

  useRequest(init, {});
  useRequest(getBadList, {});

  return (
    <>
      <Header title={t('hong-bao-ka-quan')} />
      <ScrollView>
        {userCouponList.map((item) => {
          return <CounponItem key={item.id} info={item} />;
        })}

        {userCouponList.length === 0 && userCouponListHis.length === 0 && (
          <Div p={10} alignItems="center">
            <Text>{t('zan-wu-shu-ju')}</Text>
          </Div>
        )}

        {userCouponListHis.map((item) => {
          return <CounponItem key={item.id} info={item} isEnd />;
        })}
      </ScrollView>
    </>
  );
}