11. 产品详情页

Table表格

import { Typography, Carousel, Image, Rate, Table } from "antd";
import { ColumnsType } from "antd/es/table";
// interface PropsType...
const columns: ColumnsType<RowType> = [
  {
    title: "title",
    dataIndex: "title",
    key: "title",
    align: "left",
    width: 120,
  },
  {
    title: "description",
    dataIndex: "description",
    key: "description",
    align: "center",
  },
];
interface RowType {
  title: string;
  description: string | number | JSX.Element;
  key: number;
}
export const ProductIntro: React.FC<PropsType> = ({title,shortDescription,price,coupons,discount,rating,pictures,
}) => {
    const tableDataSource: RowType[] = [
      {
        key: 0,
        title: "路线名称",
        description: title,
      },
      {
        key: 1,
        title: "价格",
        description: (
          <>
            ¥{" "}
            <Typography.Text type="danger" strong>
              {price}
            </Typography.Text>
          </>
        ),
      },
      {
        key: 2,
        title: "限时抢购折扣",
        description: discount ? (
          <>
            ¥ <Typography.Text delete>{price}</Typography.Text>{" "}
            <Typography.Text type="danger" strong>
              ¥ {discount}
            </Typography.Text>
          </>
        ) : (
          "暂无折扣"
        ),
      },
      {
        key: 2,
        title: "领取优惠",
        description: coupons ? discount : "无优惠券可领",
      },
      {
        key: 2,
        title: "线路评价",
        description: (
          <>
            <Rate allowHalf defaultValue={+rating} />
            <Typography.Text style={{ marginLeft: 10 }}>
              {rating} 星
            </Typography.Text>
          </>
        ),
      },
    ];
  return (
    <div className={styles["intro-container"]}>
      {// ...}
      <Table<RowType>
        columns={columns}
        dataSource={tableDataSource}
        size="small"
        bordered={false}
        pagination={false}
        showHeader={false}
      />
    </div>
  );
};

在React中插入HTML数据

<div
  dangerouslySetInnerHTML={{ __html: product.fees }}
  style={{ margin: 50 }}
  ></div>

锚点菜单

<Anchor className={styles["product-detail-anchor"]}>
  <Menu mode="horizontal">
    <Menu.Item key="1">
      <Anchor.Link href="#feature" title="产品特色"></Anchor.Link>
    </Menu.Item>
    <Menu.Item key="3">
      <Anchor.Link href="#fees" title="费用"></Anchor.Link>
    </Menu.Item>
    <Menu.Item key="4">
      <Anchor.Link href="#notes" title="预订须知"></Anchor.Link>
    </Menu.Item>
    <Menu.Item key="5">
      <Anchor.Link href="#comments" title="用户评价"></Anchor.Link>
    </Menu.Item>
  </Menu>
</Anchor>

评论列表

import { Comment, Tooltip, List } from "antd";
import React from "react";
interface PropsType {
  data: {
    author: string;
    avatar: string;
    content: string;
    createDate: string;
  }[];
}
export const ProductComments: React.FC<PropsType> = ({data}) => {
    return (
      <List
        dataSource={data}
        itemLayout="horizontal"
        renderItem={(item) => {
          return (
            <li>
              <Comment
                author={item.author}
                avatar={item.avatar}
                content={item.content}
                datetime={item.createDate}
              />
            </li>
          );
        }}
      ></List>
    );
}