Dingdong_client/screens/userCoupon/OrderCouponScreen.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Icon } 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, canUse, isChoose }) => {
  const navigation = useNavigation();
  return (
    <Div mt={10} mx={5}>
      <TouchableRipple
        disabled={!canUse}
        onPress={() => navigation.navigate('Home', { screen: 'Home' })}
      >
        <Div row bg="white" alignItems="center" pt={15} pr={15}>
          <Div minW={80} alignItems="center">
            <Text color={!canUse ? '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={!canUse ? 'gray400' : 'black'}
              fontSize="xl"
              fontWeight="bold"
            >
              {counpon.name}
            </Text>
            <Text fontSize="xs" color="gray300" textAlign="left">
              限{counpon.startDate}至{counpon.endDate}使用
            </Text>
          </Div>
          {canUse && (
            <Icon
              name="checkcircle"
              color={isChoose ? 'brand500' : 'gray200'}
              size={16}
            />
          )}
        </Div>
        <Div pb={15}>
          {isEnd && <Text mt={10}>优惠券已过期</Text>}
          {!isEnd && !canUse && <Text mt={10}>店铺不可用</Text>}
        </Div>
      </TouchableRipple>
    </Div>
  );
};

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

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

  return (
    <>
      <Header title="选择优惠券" />
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, backgroundColor: '#eee' }}
      >
        {userCouponList.map((item) => {
          return <CounponItem key={item.id} info={item} canUse />;
        })}

        {userCouponList.length === 0 && (
          <Div p={10} alignItems="center">
            <Text textAlign="center">无可用优惠券</Text>
          </Div>
        )}

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