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 { 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 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">
                满{counpon.fullAmount}元可用
              </Text>
            )}
            {counpon.fullAmount === 0 && (
              <Text fontSize="xs" color="gray300" textAlign="left">
                无金额门槛
              </Text>
            )}
          </Div>
          <Div flex={1}>
            <Text
              color={isEnd ? 'gray400' : 'black'}
              fontSize="xl"
              fontWeight="bold"
            >
              {counpon.name}
            </Text>
            <Text fontSize="xs" color="gray300" textAlign="left">
              限{counpon.startDate}至{counpon.endDate}使用
            </Text>
          </Div>
          {isEnd ? (
            <Text color="gray500" fontSize="sm" textAlign="left">
              已过期
            </Text>
          ) : (
            <Text color="gray500" fontSize="sm" textAlign="left">
              去使用
            </Text>
          )}
        </Div>
      </TouchableRipple>
    </Div>
  );
};

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

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

  return (
    <>
      <Header title="红包卡券" />
      <ScrollView>
        {userCouponList.map((item) => {
          return <CounponItem key={item.id} info={item} />;
        })}

        {userCouponList.length === 0 && userCouponListHis.length === 0 && (
          <Div p={10} alignItems="center">
            <Text>暂无数据</Text>
          </Div>
        )}

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