tuns-mobile-components/src/pages/demo/listcard/index.js

Tuns Design UI

import React from "react";
import ListCard from "../../../components/mobile/src/card/list";

const handleClick = (id, e) => {
  e.stopPropagation(); // 阻止冒泡防止两个click事件冲突
  // eslint-disable-next-line no-console
  console.log(`点击了${id}按钮`);
};

const listCardDemo = () => {
  return (
    <div>
      <h2>listCard Demo</h2>
      <ListCard
        img="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
        title="第一个保险"
        texts={[
          { id: "text1", text: "保险条款1" },
          { id: "text2", text: "保险条款2" },
          { id: "text3", text: "保险条款3" },
        ]}
        money="300"
        promote={[{ id: "pro1", text: "营销活动在这" }]}
        marks={[
          { id: "m1", type: "1" },
          { id: "m2", type: "2" },
          { id: "m3", type: "3" },
        ]}
        button
        // eslint-disable-next-line no-console
        onClick={id => console.log(`item的id为:${id}`)}
        buttonClick={handleClick.bind(this)}
      />
      <ListCard
        img="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
        title="第二个保险"
        texts={[{ id: "text1", text: "保险条款1" }]}
        money="100"
        promote={[
          { id: "pro1", text: "营销活动在这" },
          { id: "pro2", text: "营销活动在这" },
        ]}
        marks={[{ id: "m1", type: "3" }]}
        // eslint-disable-next-line no-console
        onClick={id => console.log(`item的id为:${id}`)}
      />
    </div>
  );
};

export default listCardDemo;