distribution-management/src/pages/MiniApp/ModuleConfig/vip/template.tsx

import { Card, Col, Row } from "antd";
import jb from '../../../../../public/jb.png';
import vip from '../../../../../public/vip.png';
import top from '../../../../../public/top-r1.png';
import { createStyles } from "antd-style";
import { useModel } from "@umijs/max";


export function Template(params: { data: any }) {
    let { data } = params
    let { getEnum } = useModel("global")
    let { firstRecharge, rechargeConfigList } = data
    const useStyles = createStyles((props) => {
        let { token } = props
        let navTheme = localStorage.getItem("navTheme")//全局 2亮色 3黑色
        return {
            cardBox: {
                position: 'relative'
            },
            bgVip: {
                backgroundImage: "linear-gradient(180deg, #fff1dc 60%, #fffdfa 100%)",
                color: navTheme == "3" ? "#000" : "unset"
            },
            bg: {
                backgroundImage: 'linear-gradient(180deg, #ffeced 60%, #fffafa 100%)',
                color: navTheme == "3" ? "#000" : "unset"
            },
            topRight: {
                lineHeight: '20px',
                background: "#ff2441",
                position: 'absolute',
                top: 0,
                right: 0,
                fontSize: 12,
                borderRadius: "0px 8px 0 8px",
            },
            topRightVip: {
                background: "#ffd89d !important",
            },
            // 
            topRightSpan1: { display: 'inline-block', background: `url(${top}) no-repeat`, minWidth: 40, height: 20, padding: "0 10px 0 6px", backgroundSize: "100% 100%", color: "#fff" },
            topRightSpan2: { color: "#fff", display: 'inline-block', padding: "0 5px" },
            del: { fontSize: 14, textDecoration: 'line-through', marginLeft: 7, color: token.colorTextTertiary, fontWeight: "500" }
        }
    });
    let { styles } = useStyles()

    return <Card bordered={false} >
        <Row gutter={[0, 15]}>
            {
                rechargeConfigList?.map((item: any, index: any) => {
                    let {
                        color,//背景色
                        description,//整数购买文案
                        extra,//右上角描述值
                        gearType,//充值类型
                        gift,//赠送
                        obtain,//获得书币/vip每天价格
                        price,//价格
                        subscript,//右上角文案 首充|超值等
                        vipDays,//vip天数
                    } = item
                    switch (gearType) {
                        case 1://充值
                            return <Col key={index} span={11} offset={index % 2 === 0 ? 0 : 1} >
                                <Card className={`${styles.cardBox} ${color && styles.bg}`} styles={{ body: { maxHeight: 90, padding: '20px 15px' } }}>
                                    {/* 右上角 */}
                                    <div className={`${styles.topRight}`} style={subscript ? { borderRadius: "8px 8px 0 8px", } : {}} >
                                        {
                                            <>
                                                {subscript && <span className={styles.topRightSpan1}>{subscript}</span>}
                                                <span className={styles.topRightSpan2} style={subscript ? { transform: 'translateX(-4px)' } : {}}>多送{extra}元</span>
                                            </>
                                        }
                                    </div>
                                    <div style={{ display: 'flex', flexFlow: 'column' }}>
                                        <strong >
                                            <span style={{ fontSize: '20px', marginRight: 3 }} >￥</span>
                                            <span style={{ fontSize: 22, fontFamily: 'Yuewen Font' }}>{price}</span>
                                        </strong>
                                        <span style={{ fontSize: 12, marginTop: 2, color: "#777", display: 'block' }}>{obtain}书币 送{gift}书券</span>
                                    </div>
                                    {color && <img src={jb} style={{ position: 'absolute', right: 0, bottom: 0, width: 50 }} />}
                                </Card>
                            </Col>
                        case 2://vip
                            let vipEnum = getEnum("VIP_DAYS","arr") 
                            let vipStr = vipEnum?.find((i: { value: any; }) => i.value === vipDays)?.label || ""
                            return <Col key={index} span={11} offset={index % 2 === 0 ? 0 : 1} >
                                <Card className={`${styles.cardBox} ${color && styles.bgVip}`} styles={{ body: { maxHeight: 90, padding: '20px 15px' } }}>
                                    {/* 右上角 */}
                                    <div className={`${styles.topRight} ${styles.topRightVip}`} style={subscript ? { borderRadius: "8px 8px 0 8px", } : {}}>
                                        {
                                            <>
                                                {subscript && <span className={styles.topRightSpan1}>{subscript}</span>}
                                                <span className={styles.topRightSpan2}>{vipStr}</span>
                                            </>
                                        }
                                    </div>
                                    <div style={{ display: 'flex', flexFlow: 'column' }}>
                                        <strong >
                                            <span style={{ fontSize: '20px', marginRight: 3 }} >￥</span>
                                            <span style={{ fontSize: 22, fontFamily: 'Yuewen Font' }}>{price}</span>
                                        </strong>
                                        <span style={{ fontSize: 12, marginTop: 2, color: "#777", display: 'block' }}>￥{obtain}元/天</span>
                                    </div>
                                    {color && <img src={vip} style={{ position: 'absolute', right: 0, bottom: 0, width: 30 }} />}
                                </Card>
                            </Col>
                        case 3://整本
                            return <Col key={index} span={11} offset={index % 2 === 0 ? 0 : 1} >
                                <Card className={`${styles.cardBox} `} styles={{ body: { maxHeight: 90, padding: '20px 15px' } }}>
                                    {/* 右上角 */}
                                    <div className={styles.topRight}>
                                        {
                                            subscript ? <> <span>{item.description}</span></> : <>
                                                <span className={styles.topRightSpan1}>{subscript}</span>
                                                <span className={styles.topRightSpan2}>{item.description}</span>
                                            </>
                                        }
                                    </div>
                                    <div style={{ display: 'flex', flexFlow: 'column' }}>
                                        <strong >
                                            <span style={{ fontSize: '20px', marginRight: 3 }} >￥</span>
                                            <span style={{ fontSize: 22, fontFamily: 'Yuewen Font' }}>{price}</span>
                                            {/* {isVip && item.gift && <span className={styles.del}>￥{item.gift}</span>} */}
                                        </strong>
                                        {/* {isVip ?
                                    <span style={{ fontSize: 12, marginTop: 2, color: "#777", display: 'block' }}>{isOne ? "仅" : "￥"}{item.extra}元/天</span>
                                    :
                                    <span style={{ fontSize: 12, marginTop: 2, color: "#777", display: 'block' }}>{item.gift}书币 送{item.extra}书券</span>} */}
                                    </div>
                                    {/* {isOne && <img src={isVip ? vip : jb} style={{ position: 'absolute', right: 0, bottom: 0, width: isVip ? 30 : 50 }} />} */}
                                </Card>
                            </Col>
                        default:
                            break;
                    }

                })
            }
        </Row>
    </Card >
}