202163综合运用所学知识 持续更新

src/components/productionCollection/productImage.tsx

+import * as React from "react";
+import { withRouter, RouteComponentProps,Link } from "react-router-dom";
+import { Typography, Image } from "antd";
+interface PropsType extends RouteComponentProps {
+  id: string | number;
+  size: "large" | "small";
+  imageSrc: string;
+  price: number | string;
+  title: string;
+}
+
+const ProductImageComponent: React.FC<PropsType> = ({
+  id,
+  size,
+  imageSrc,
+  price,
+  title,
+  history,
+  location,
+  match,
+}) => {
+  return (
+    <Link to={`detail/${id}`} >
+      {size === "large" ? (
+        <Image src={imageSrc} height={280} width={480} />
+      ) : (
+        <Image src={imageSrc} height={120} width={240} />
+      )}
+      <div>
+        <Typography.Text type="secondary">{title.slice(0, 25)}</Typography.Text>
+        <Typography.Text type="danger" strong>
+          ￥{price}起
+        </Typography.Text>
+      </div>
+    </Link>
+  );
+};
+export const ProductImage = withRouter(ProductImageComponent);

src/components/productionCollection/productImageCopy.tsx

+import * as React from "react";
+import {withRouter,RouteComponentProps} from 'react-router-dom'
+import { Typography, Image } from "antd";
+interface PropsType extends RouteComponentProps {
+  id: string | number;
+  size: "large" | "small";
+  imageSrc: string;
+  price: number | string;
+  title: string;
+}
+
+ const ProductImageComponent: React.FC<PropsType> = ({
+  id,
+  size,
+  imageSrc,
+  price,
+  title,
+  history,
+  location,
+  match
+}) => {
+  return (
+    <div onClick={()=>history.push(`detail/${id}`)}>
+      {size === "large" ? (
+        <Image src={imageSrc} height={280} width={480} />
+      ) : (
+        <Image src={imageSrc} height={120} width={240} />
+      )}
+      <div>
+        <Typography.Text type="secondary">{title.slice(0, 25)}</Typography.Text>
+        <Typography.Text type="danger" strong>
+          ￥{price}起
+        </Typography.Text>
+      </div>
+    </div>
+  );
+};
+export const  ProductImage = withRouter(ProductImageComponent)
\ No newline at end of file

src/components/productionCollection/productionCollection.module.css

+.content {
+    margin-top: 30px;
+    padding: 30px;
+    background-color: white;
+}
+
+.side-image {
+    width: 180px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+

src/components/productionCollection/productionCollection.tsx

+import React from "react";
+import styles from "./productionCollection.module.css";
+import { Row, Col, Divider } from "antd";
+import { ProductImage } from "./productImage";
+
+interface PropsType {
+  title: JSX.Element;
+  sideImage: string;
+  products: any[];
+}
+
+export const ProductCollection: React.FC<PropsType> = ({
+  title,
+  sideImage,
+  products,
+}) => {
+  return (
+    <div className={styles.content}>
+      <Divider orientation="left">{title}</Divider>
+      <Row>
+        <Col span={4}>
+          <img src={sideImage} className={styles["side-image"]} alt="" />
+        </Col>
+        <Col span={20}>
+          <Row>
+            <Col span={12}>
+              <ProductImage
+                id={products[0].id}
+                size={"large"}
+                title={products[0].title}
+                imageSrc={products[0].touristRoutePictures[0].url}
+                price={products[0].price}
+              />
+            </Col>
+            <Col span={12}>
+              <Row>
+                <Col span={12}>
+                  <ProductImage
+                    id={products[1].id}
+                    size="small"
+                    title={products[1].title}
+                    imageSrc={products[1].touristRoutePictures[0].url}
+                    price={products[1].price}
+                  />
+                </Col>
+                <Col span={12}>
+                  <ProductImage
+                    id={products[2].id}
+                    size="small"
+                    title={products[2].title}
+                    imageSrc={products[2].touristRoutePictures[0].url}
+                    price={products[2].price}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col span={12}>
+                  <ProductImage
+                    id={products[3].id}
+                    size="small"
+                    title={products[3].title}
+                    imageSrc={products[3].touristRoutePictures[0].url}
+                    price={products[3].price}
+                  />
+                </Col>
+                <Col span={12}>
+                  <ProductImage
+                    id={products[4].id}
+                    size="small"
+                    title={products[4].title}
+                    imageSrc={products[4].touristRoutePictures[0].url}
+                    price={products[4].price}
+                  />
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={6}>
+              <ProductImage
+                id={products[5].id}
+                size="small"
+                title={products[5].title}
+                imageSrc={products[5].touristRoutePictures[0].url}
+                price={products[5].price}
+              />
+            </Col>
+            <Col span={6}>
+              <ProductImage
+                id={products[6].id}
+                size="small"
+                title={products[6].title}
+                imageSrc={products[6].touristRoutePictures[0].url}
+                price={products[6].price}
+              />
+            </Col>
+            <Col span={6}>
+              <ProductImage
+                id={products[7].id}
+                size="small"
+                title={products[7].title}
+                imageSrc={products[7].touristRoutePictures[0].url}
+                price={products[7].price}
+              />
+            </Col>
+            <Col span={6}>
+              <ProductImage
+                id={products[8].id}
+                size="small"
+                title={products[8].title}
+                imageSrc={products[8].touristRoutePictures[0].url}
+                price={products[8].price}
+              />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </div>
+  );
+};

src/components/sideMenu/SideMenu.module.css

+.side-menu {
+    width: 256px;
+    border: 5px solid #1976D2 !important;
+}
\ No newline at end of file

src/components/sideMenu/SideMenu.tsx

+import React from "react";
+import styles from "./SideMenu.module.css";
+import { sideMenuList } from "./mockup";
+import { Menu } from "antd";
+import { GifOutlined } from "@ant-design/icons";
+
+export const SideMenu: React.FC = () => {
+  return (
+    <Menu mode="vertical" className={styles["side-menu"]}>
+      {sideMenuList.map((m, index) => (
+        <Menu.SubMenu
+          key={`side-menu-${index}`}
+          title={
+            <span>
+              <GifOutlined />
+              {m.title}
+            </span>
+          }
+        >
+          {m.subMenu.map((sm, smindex) => (
+            <Menu.SubMenu
+              key={`sub-menu-${smindex}`}
+              title={
+                <span>
+                  <GifOutlined />
+                  {sm.title}
+                </span>
+              }
+            >
+              {sm.subMenu.map((sms, smsindex) => (
+                <Menu.Item key={`sub-sub-menu-${smsindex}`}>
+                  <span>
+                    <GifOutlined />
+                    {sms}
+                  </span>
+                </Menu.Item>
+              ))}
+            </Menu.SubMenu>
+          ))}
+        </Menu.SubMenu>
+      ))}
+    </Menu>
+  );
+};

src/components/sideMenu/index.ts

+export * from './SideMenu'
\ No newline at end of file

src/components/sideMenu/mockup.ts

+export const sideMenuList = [
+  {
+    title: "主题旅游",
+    subMenu: [
+      {
+        title: "爸妈游",
+        subMenu: ["祈福拜佛", "古镇游玩", "桂林山水", "红色之旅"],
+      },
+      {
+        title: "亲子游",
+        subMenu: ["上海迪士尼", "探险体验", "海洋公园", "感受名校"],
+      },
+      {
+        title: "蜜月游",
+        subMenu: ["浪漫海岛", "豪华酒店", "购物血拼", "全球婚礼"],
+      },
+    ],
+  },
+  {
+    title: "周边游",
+    subMenu: [
+      {
+        title: "周边目的地",
+        subMenu: ["杭州", "南京", "苏州", "黄山"],
+      },
+      {
+        title: "热门景点",
+        subMenu: ["普陀山", "千岛湖", "乌镇古镇", "宏村"],
+      },
+    ],
+  },
+  {
+    title: "国内游",
+    subMenu: [
+      {
+        title: "广东",
+        subMenu: ["广州", "深圳", "珠海", "惠州"],
+      },
+      {
+        title: "浙江",
+        subMenu: ["杭州", "普陀山", "千岛湖", "宁波"],
+      },
+      {
+        title: "江苏",
+        subMenu: ["舟山", "乌镇", "干山", "湖州"],
+      },
+    ],
+  },
+  {
+    title: "东南亚",
+    subMenu: [
+      {
+        title: "热门目的地",
+        subMenu: ["新加坡", "巴厘岛", "越南", "柬埔寨"],
+      },
+      {
+        title: "热门景点",
+        subMenu: ["下龙湾", "吴哥窟", "西哈努克", "槟城珍珠岛"],
+      },
+    ],
+  },
+  {
+    title: "欧洲",
+    subMenu: [
+      {
+        title: "热门邮轮航线",
+        subMenu: ["欧洲河轮", "北欧邮轮", "爱琴海邮轮", "英伦三岛"],
+      },
+      {
+        title: "热门景点",
+        subMenu: ["贝加尔湖", "普罗旺斯", "阿尔卑斯", "圣托里尼岛"],
+      },
+      {
+        title: "蜜月游",
+        subMenu: ["极光中心", "俄罗斯远东地区", "英格兰少女峰", "玻璃海滩"],
+      },
+    ],
+  },
+];
+
+/**
+ * 首页推荐产品数据
+ * */
+// 爆款推荐
+export const productList1 = [
+  {
+    id: 1,
+    title:
+      "埃及阿斯旺+卢克索+红海Red Sea+开罗+亚历山大12日跟团游(5钻)·【官方旗舰明星纯玩团】25人封顶|含签证小费全程餐|3晚尼罗河游轮+3晚红海全包度假村+1晚底比斯古都|升级内陆飞机|优质中文导游队伍|七大神庙+赠项目",
+    price: "11990",
+  },
+  {
+    id: 2,
+    title: "摩洛哥撒哈拉沙漠+卡萨布兰卡+马拉喀什+舍夫沙...",
+    price: "13290",
+  },
+  {
+    id: 3,
+    title: "越南胡志明市+美奈+芽庄+河内7日6晚跟团游(4钻)...",
+    price: "4000",
+  },
+  {
+    id: 4,
+    title: "迪拜+阿布扎比6日跟团游(5钻)·【携程国旅纯玩...",
+    price: "7399",
+  },
+  {
+    id: 5,
+    title: "泰国曼谷+芭堤雅6日5晚跟团游(5钻)·【纯玩】『可...",
+    price: "3499",
+  },
+  {
+    id: 6,
+    title: "日本大阪+京都+箱根+东京6日5晚跟团游(4钻)·【浪...",
+    price: "5999",
+  },
+  {
+    id: 7,
+    title: "新加坡+马来西亚6日5晚跟团游(5钻)·【纯玩无购物...",
+    price: "6199",
+  },
+  {
+    id: 8,
+    title: "法国+德国+意大利+瑞士12日跟团游(4钻)·【匠心定...",
+    price: "13699",
+  },
+  {
+    id: 9,
+    title: "印度尼西亚巴厘岛7日5晚私家团(5钻)·A线独栋泳...",
+    price: "5021",
+  },
+];

src/custom.d.ts

+declare module "*.css" {
+  const css: { [key: string]: string };
+  export default css;
+}

src/index.css

+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.tsx

+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+import 'antd/dist/antd.css'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+

src/pages/Home/home.module.css

+.page-content {
+    width: 1090px;
+    margin-left: auto;
+    margin-right: auto;
+    min-height: 75vh;
+  }
+  
\ No newline at end of file

src/pages/Home/home.tsx

+import * as React from "react";
+// import { Component } from "react";
+import {
+  Header,
+  Footer,
+  SideMenu,
+  Carouseee,
+  ProductCollection,
+  Bussiness,
+} from "../../components";
+import styles from "./home.module.css";
+import { productList1, productList2, productList3 } from "./mockups";
+import sideImage1 from "../../assets/images/sider_2019_02-04-2.png";
+import sideImage2 from "../../assets/images/sider_2019_02-04.png";
+import sideImage3 from "../../assets/images/sider_2019_12-09.png";
+import { Row, Col, Typography } from "antd";
+
+export class HomePage extends React.Component {
+  // constructor(props: HomePageProps) {
+  //     super(props);
+  //     this.state = { :  };
+  // }
+  render() {
+    return (
+      <>
+        <Header />
+        {/* 页面内容 */}
+        <div className={styles["page-content"]}>
+          <Row style={{ marginTop: 20 }}>
+            <Col span={6}>
+              <div>
+                <SideMenu />
+              </div>
+            </Col>
+            <Col span={18}>
+              <div>
+                <Carouseee />
+              </div>
+            </Col>
+          </Row>
+
+          <ProductCollection
+            title={
+              <Typography.Title level={3} type="warning">
+                爆款推荐
+              </Typography.Title>
+            }
+            sideImage={sideImage1}
+            products={productList1}
+          />
+          <ProductCollection
+            title={
+              <Typography.Title level={3} type="danger">
+                新品上市
+              </Typography.Title>
+            }
+            sideImage={sideImage2}
+            products={productList2}
+          />
+          <ProductCollection
+            title={
+              <Typography.Title level={3} type="success">
+                国内游推荐
+              </Typography.Title>
+            }
+            sideImage={sideImage3}
+            products={productList3}
+          />
+          <Bussiness />
+        </div>
+
+        <Footer />
+      </>
+    );
+  }
+}
+
+

src/pages/Home/index.ts

+export * from './home'
\ No newline at end of file

src/pages/Home/mockups.ts

+/**
+ * 首页推荐产品数据
+ * */
+// 爆款推荐
+export const productList1 = [
+  {
+    id: 1,
+    title:
+      "埃及阿斯旺+卢克索+红海Red Sea+开罗+亚历山大12日跟团游(5钻)·【官方旗舰明星纯玩团】25人封顶|含签证小费全程餐|3晚尼罗河游轮+3晚红海全包度假村+1晚底比斯古都|升级内陆飞机|优质中文导游队伍|七大神庙+赠项目",
+    price: "11990",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: "摩洛哥撒哈拉沙漠+卡萨布兰卡+马拉喀什+舍夫沙...",
+    price: "13290",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 3,
+    title: "越南胡志明市+美奈+芽庄+河内7日6晚跟团游(4钻)...",
+    price: "4000",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 4,
+    title: "迪拜+阿布扎比6日跟团游(5钻)·【携程国旅纯玩...",
+    price: "7399",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 5,
+    title: "泰国曼谷+芭堤雅6日5晚跟团游(5钻)·【纯玩】『可...",
+    price: "3499",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 6,
+    title: "日本大阪+京都+箱根+东京6日5晚跟团游(4钻)·【浪...",
+    price: "5999",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 7,
+    title: "新加坡+马来西亚6日5晚跟团游(5钻)·【纯玩无购物...",
+    price: "6199",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 8,
+    title: "法国+德国+意大利+瑞士12日跟团游(4钻)·【匠心定...",
+    price: "13699",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 9,
+    title: "印度尼西亚巴厘岛7日5晚私家团(5钻)·A线独栋泳...",
+    price: "5021",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+];
+
+// 新品上市
+export const productList2 = [
+  {
+    id: 10,
+    title:
+      "南京3日2晚跟团游(4钻)·观中山陵+游总统府+览博物院『游六朝古都 听漫长历史』&逛秦淮河风光带+老门东『品美食 唤醒您的舌尖』&牛首山+报恩寺『诚心祈福 放空心灵』& 2晚连住4钻酒店",
+    price: "11990",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 11,
+    title: "摩洛哥撒哈拉沙漠+卡萨布兰卡+马拉喀什+舍夫沙...",
+    price: "13290",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 12,
+    title: "越南胡志明市+美奈+芽庄+河内7日6晚跟团游(4钻)...",
+    price: "4000",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 13,
+    title: "迪拜+阿布扎比6日跟团游(5钻)·【携程国旅纯玩...",
+    price: "7399",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 14,
+    title: "泰国曼谷+芭堤雅6日5晚跟团游(5钻)·【纯玩】『可...",
+    price: "3499",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 15,
+    title: "日本大阪+京都+箱根+东京6日5晚跟团游(4钻)·【浪...",
+    price: "5999",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 16,
+    title: "新加坡+马来西亚6日5晚跟团游(5钻)·【纯玩无购物...",
+    price: "6199",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 17,
+    title: "法国+德国+意大利+瑞士12日跟团游(4钻)·【匠心定...",
+    price: "13699",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 18,
+    title: "印度尼西亚巴厘岛7日5晚私家团(5钻)·A线独栋泳...",
+    price: "5021",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+];
+
+// 国内游推荐
+export const productList3 = [
+  {
+    id: 19,
+    title:
+      "埃及阿斯旺+卢克索+红海Red Sea+开罗+亚历山大12日跟团游(5钻)·【官方旗舰明星纯玩团】25人封顶|含签证小费全程餐|3晚尼罗...",
+    price: "11990",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 20,
+    title: "摩洛哥撒哈拉沙漠+卡萨布兰卡+马拉喀什+舍夫沙...",
+    price: "13290",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 21,
+    title: "越南胡志明市+美奈+芽庄+河内7日6晚跟团游(4钻)...",
+    price: "4000",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 22,
+    title: "迪拜+阿布扎比6日跟团游(5钻)·【携程国旅纯玩...",
+    price: "7399",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 23,
+    title: "泰国曼谷+芭堤雅6日5晚跟团游(5钻)·【纯玩】『可...",
+    price: "3499",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 24,
+    title: "日本大阪+京都+箱根+东京6日5晚跟团游(4钻)·【浪...",
+    price: "5999",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 25,
+    title: "新加坡+马来西亚6日5晚跟团游(5钻)·【纯玩无购物...",
+    price: "6199",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 26,
+    title: "法国+德国+意大利+瑞士12日跟团游(4钻)·【匠心定...",
+    price: "13699",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+  {
+    id: 27,
+    title: "印度尼西亚巴厘岛7日5晚私家团(5钻)·A线独栋泳...",
+    price: "5021",
+    touristRoutePictures: [
+      {
+        url: "https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg",
+      },
+    ],
+  },
+];

src/pages/detail/detail.tsx

+import * as React from 'react';
+import { Component } from 'react';
+import {RouteComponentProps} from 'react-router-dom';
+interface MatchParams {
+    tourisRouteId:string
+}
+ export const Deatil:React.FC<RouteComponentProps<MatchParams>> =(props)=>{
+     return(
+         <h1>xiangqinguemian,路线id：{props.match.params.tourisRouteId}</h1>
+     )
+ }
\ No newline at end of file

src/pages/detail/index.ts

+export * from './detail'
\ No newline at end of file

src/pages/index.ts

+export * from'./Home'
+export * from './register'
+export * from './signin'
+export * from './detail'
\ No newline at end of file

src/pages/register/index.ts

+export * from './register'
\ No newline at end of file