card

src/components/Cards/PosterCard.jsx

+import React, { useState, useEffect } from 'react';
+import { Card, Checkbox } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Meta } = Card;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const PosterCard = (props) => {
+  const [ data, setData ] = useState([])
+//   const [ checkedData, setCheckedData ] = useState([])
+
+  useEffect(() => {
+    getCardsList(props.postType);    
+  },[])
+
+
+  const getCardsList = (postType) => {
+    request({ ...apis.poster.posterTemplate, params: { type: postType }}).then((data) => {
+        setData(data)
+      }).catch((err) => {
+        message.info(err.msg || err.message)
+      })
+  }
+
+  const onChange = (template) => (e) => {
+    // debugger
+
+    if (e.target.checked) {
+        if (props.checkedList.indexOf(template.templateId) > -1) {
+            props.onChange(props.checkedList)
+        } else {
+            props.onChange(props.checkedList.concat(template.templateId))
+        }
+    } else {
+        props.onChange(props.checkedList.filter(x => x !== template.templateId))
+    }
+  }
+
+  return (
+      data.map(template => (
+        <Card
+            hoverable
+            style={{ width: 240 }}
+            cover={<img src={template.img} />}
+        >
+
+        <Checkbox checked={props.checkedList.indexOf(template.templateId) !== -1} onChange={onChange(template)}>生成海分享给朋友</Checkbox>
+
+        </Card>
+      ))
+  )
+}
+export default PosterCard
+

src/pages/activity/editActivity.jsx

 import poster1 from '../../assets/poster1.png';
 import poster2 from '../../assets/poster2.png';
 import xiaochengxu from '../../assets/xiaochengxu.png'
+import PosterCard from '../../components/Cards/PosterCard'
 
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 const { TextArea } = Input;
       }
     }
 
+    const [ checkList, setCheckList ] = useState([2])
+
+    const cardChange = (e) => {
+      console.log(e,"123")
+      setCheckList(e)
+    }
+
     return <div>
       <div style={{ display: 'flex' }}>
         <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
-          <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
-            <img style={{ width: '100%', height: '300px' }} src={imgValue ? imgValue : poster1} alt="" />
-            <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
-              <img style={{ width: '70px', height: '70px', border: '4px solid #fff', borderRadius: '35px', marginLeft: '16px' }} src={touxiang} alt="" />
-              <span style={{ color: '#222', fontWeight: '600', margin: '24px 10px 0 14px', fontSize: '17px' }}>喵喵</span>
-              <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您参与</span>
-              <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
-            </div>
-            <p style={{
-              margin: '10px 20px',
-              fontSize: '20px',
-              color: '#222',
-              fontWeight: '600',
-              display: '-webkit-box',
-              lineClamp: '3',
-              height: '60px',
-              WebkitLineClamp: '2',
-              WebkitBoxOrient: 'vertical',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis'
-            }}>{inputValue ? inputValue : '海报标题'}</p>
-
-            <img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} alt="" />
-            <p style={{
-              margin: '16px 20px 28px 20px',
-              fontSize: '17px',
-              color: '#999',
-              display: '-webkit-box',
-              lineClamp: '3',
-              height: '72px',
-              WebkitLineClamp: '3',
-              WebkitBoxOrient: 'vertical',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis'
-            }}>{textAreaValue ? textAreaValue : '海报描述'}</p>
-            <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc', position: 'relative' }}>
-              <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>长按识别小程序码</p>
-              <p style={{ margin: '0', fontSize: '18px', color: '#888' }}>进入<span style={{ margin: '0 5px', fontSize: '18px', color: '#333', fontWeight: '600' }}>{miniappName || '置业V顾问'}</span>报名活动</p>
-              <img style={{ width: '80px', position: 'absolute', right: '30px', top: '10px' }} src={xiaochengxu} alt="" />
-            </div>
-          </div>
-          <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
+           <PosterCard postType="dynamic"  checkedList={checkList} onChange={cardChange} />
         </div>
 
         <div >

src/services/apis.js

     action: 'admin.thirdPartyMiniapp.id.get',
   },
  },
+ poster: {
+  posterTemplate: {
+    url: `${prefix}/posterTemplate`,
+    method: 'GET',
+    action: 'admin.posterTemplate.get',
+  },
+ }
 }