Skip to content

A
addInsured-AIA-POC
Commit 3fb62492 authored by marsandheart's avatar marsandheart
Browse files
Options

保单列表页

parent daa95de6
Hide whitespace changes
Inline Side-by-side
Showing with 394 additions and 66 deletions
src/assets/css/common.scss
View file @ 3fb62492
$pramyColor: #CE1F57; $primaryColor: #CE1F57;
\ No newline at end of file \ No newline at end of file
src/components/PolicyListModal.jsx deleted 100644 → 0
View file @ daa95de6
import React from 'react';
import styles from './PolicyListModal.module.scss';
class PolicyListModal extends React.Component {
render() {
// if (!this.props.visible) {
// return <div></div>;
// }
return (
<div className={styles.mask} onClick={this.props.close}>
<div className={styles.main} >
<div className={styles.title}>title</div>
<div>list</div>
</div>
</div>
);
}
}
export default PolicyListModal;
src/components/PolicyListModal.module.scss deleted 100644 → 0
View file @ daa95de6
@import '../assets/css/common.scss';
.mask {
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
background-color: rgba($color: #999999, $alpha: 0.3);
}
.main {
width: 80vw;
height: 80vh;
margin-left: 10vw;
margin-top: 10vh;
border-radius: 3px;
background-color: #999999;
box-shadow: rgba($color: #000000, $alpha: 0.3) 1px 1px 2px;
}
.title {
height: 8vh;
background-color: $pramyColor;
}
src/components/ProductListModal.jsx 0 → 100644
View file @ 3fb62492
import React, { useState } from 'react';
import { Spin } from 'antd';
import styles from './ProductListModal.module.scss';
import TouchOpacity from './TouchOpacity';
import iconCheck from '../assets/img/check.png';
const productList = [
{
id: '1',
name: '(MCI34)附加全佑无忧B款重大疾病保险'
},
{
id: '2',
name: '(M34)附加全佑无忧B款重大疾病保险'
},
{
id: '3',
name: '(MCR8304)附加多重保障'
},
{
id: '4',
name: '(EDNT2384)附加十年期定期寿险'
},
{
id: '5',
name: '(DSIO344)附加全佑无忧B款重大疾病保险'
},
{
id: '6',
name: '(SADF934)附加全佑无忧B款重大疾病保险'
},
{
id: '7',
name: '(SF34)附加十年期定期寿险'
},
{
id: '8',
name: '(DEW34)附加百倍安欣定期寿险'
},
{
id: '9',
name: '(GEB45)附加十年期定期寿险'
},
{
id: '10',
name: '(SFOK345)附加全佑无忧B款重大疾病保险'
},
{
id: '11',
name: '(PLNV834)附加全佑无忧B款重大疾病保险'
},
{
id: '12',
name: '(KIJD9933)附加百倍安欣定期寿险'
},
{
id: '13',
name: '(MJJE23)附加全佑无忧B款重大疾病保险'
},
{
id: '14',
name: '(VNBE345)附加百倍安欣定期寿险'
},
{
id: '15',
name: '(RFJI34)附加十年期定期寿险'
},
{
id: '16',
name: '(PEFO0394)附加百倍安欣定期寿险'
},
{
id: '17',
name: '(FRJ495)附加全佑无忧B款重大疾病保险'
}
];
export default function(props) {
const { visible, addTableData, close } = props;
const [productId, setProductId] = useState('');
const [loadingVisible, toggleLoadingVisible] = useState(false);
const clickMain = (event) => {
// 点击主体的时候禁止冒泡，不关闭modal
event.stopPropagation();
};
const clickItem = (id) => {
if (productId === id) {
setProductId('');
} else {
toggleLoadingVisible(true);
setTimeout(() => {
setProductId(id);
toggleLoadingVisible(false);
}, Math.random() * 1000);
}
};
const submit = () => {
const selectedProduct = productList.find((p) => p.id === productId);
if (selectedProduct) {
addTableData(selectedProduct);
}
close();
};
if (!visible) {
return <div></div>;
}
return (
<div className={styles.mask} onClick={close}>
<div className={styles.main} onClick={clickMain}>
<div className={styles.title}>附加合同选择</div>
<div className={styles.content}>
<div className={styles.info}>
<span>被保险人出生日期：1974年08月07日</span>
<span>请谨慎选择以下产品的成人或儿童计划</span>
<TouchOpacity className={styles.btn}>重置</TouchOpacity>
</div>
<div className={styles.list}>
{productList.map((ele) => (
<TouchOpacity
key={ele.id}
className={productId === ele.id ? styles.itemSelect : styles.item}
onClick={() => {
clickItem(ele.id);
}}
>
<span>{ele.name}</span>
<img src={iconCheck} alt="checkimg" />
</TouchOpacity>
))}
</div>
<div className={styles.footer}>
<TouchOpacity className={styles.btnCancel}>取消</TouchOpacity>
<TouchOpacity className={styles.btn} onClick={submit}>
确定
</TouchOpacity>
</div>
</div>
</div>
{loadingVisible && (
<div className={styles.loading}>
<Spin tip="Loading..."></Spin>
</div>
)}
</div>
);
}
src/components/ProductListModal.module.scss 0 → 100644
View file @ 3fb62492
@import '../assets/css/common.scss';
$maskHeight: 100vh;
$mainHeight: 72vh;
$titleHeight: 8vh;
$infoHeight: 6vh;
$listHeight: 58vh;
$footerHeight: 8vh;
$btnHeight: 4vh;
$mainWidth: 80vw;
$itemWidth: 22vw;
.mask {
width: 100vw;
height: $maskHeight;
position: absolute;
left: 0;
top: 0;
background-color: rgba($color: #999999, $alpha: 0.3);
}
.main {
width: $mainWidth;
height: $mainHeight;
margin-left: 10vw;
margin-top: 10vh;
border-radius: 3px;
background-color: #999999;
box-shadow: rgba($color: #000000, $alpha: 0.3) 1px 1px 2px;
}
.title {
height: $titleHeight;
line-height: $titleHeight;
background-color: $primaryColor;
color: White;
font-size: 18px;
text-align: center;
}
.content{
background-color: white;
height: 100%;
}
.info{
height: $infoHeight;
line-height: $infoHeight;
border-bottom: 1px solid $primaryColor;
span{
font-weight: bold;
margin: 5px 15px;
}
.btn{
margin-top: ($infoHeight - $btnHeight)/2;
margin-right: 15px;
padding: 0 10px;
height: $btnHeight;
line-height: $btnHeight;
user-select:none;
background: #CE1F57;
text-align: center;
color: #FFFFFF;
float: right;
border-radius: 3px;
}
}
.list{
height: $listHeight;
overflow-y: scroll;
.item{
user-select: none;
float: left;
width: $itemWidth;
height: 10vh;
display: flex;
align-items: center;
margin-top: 10px;
margin-bottom: 10px;
margin-left: ($mainWidth - 3*$itemWidth)/4;
padding: 5px;
border: 1px solid #eeeeee;
border-radius: 3px;
img{
width: 26px;
height: 26px;
visibility: hidden;
}
}
.itemSelect{
@extend .item;
border: 1px dashed $primaryColor;
img{
visibility: visible;
}
}
}
.footer{
border-top: 1px solid #eeeeee;
height: $footerHeight;
display: flex;
align-items: center;
.btn{
user-select: none;
background: #CE1F57;
color: #FFFFFF;
width: 16%;
height: 35px;
text-align: center;
line-height: 35px;
border-radius: 3px;
float: left;
margin-left: 8%;
}
.btnCancel{
@extend .btn;
background-color: #eeeeee;
color: #333333;
margin-left: 30%;
}
}
.loading{
position: absolute;
background-color: rgba($color: #000000, $alpha: 0.3);
padding: 20px;
border-radius: 10px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
\ No newline at end of file
src/pages/InsuredInfo.jsx
View file @ 3fb62492
...@@ -5,11 +5,14 @@ import 'antd/dist/antd.css'; ...@@ -5,11 +5,14 @@ import 'antd/dist/antd.css';
import styles from './InsuredInfo.module.scss'; import styles from './InsuredInfo.module.scss';
import TabTitle from '../components/TabTItle'; import TabTitle from '../components/TabTItle';
import IconAIA from '../assets/img/aia-icon.jpg'; import IconAIA from '../assets/img/aia-icon.jpg';
import IconDetail from '../assets/img/detail.png';
import IconCancel from '../assets/img/cancel.png';
import IconCalculate from '../assets/img/calculate.png';
import TouchOpacity from '../components/TouchOpacity'; import TouchOpacity from '../components/TouchOpacity';
import PolicyListModal from '../components/PolicyListModal'; import ProductListModal from '../components/ProductListModal';
const data = [ const initTableData = [
{ {
key: '1', key: '1',
plan: '天佑一生”五合一”疾病保险', plan: '天佑一生”五合一”疾病保险',
...@@ -59,21 +62,43 @@ const columns = [ ...@@ -59,21 +62,43 @@ const columns = [
title: '操作', title: '操作',
key: 'action', key: 'action',
render: (text, record) => ( render: (text, record) => (
<span className={styles.actText}> <div>
<span>修改保额</span> <span className={styles.actText}>修改保额</span>
<Divider type="vertical" /> <Divider type="vertical" />
<span>删除</span> <span className={styles.actText}>删除</span>
</span> </div>
) )
} }
]; ];
export default function() { export default function() {
const [selectedDataKey, setSelectedDataKey] = useState('');
const [tableData, setTableData] = useState(initTableData);
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const addPolicy = () => { const addPolicy = () => {
console.log(' add policy '); console.log(' add policy ');
setModalVisible(!modalVisible); setModalVisible(!modalVisible);
}; };
const addTableData = (product) => {
const key = String(tableData.length + 1);
setSelectedDataKey(key);
setTableData([
...tableData,
{
key,
plan: product.name,
insured: '16516007',
invalidDate: '2020-02-01',
status: '付费期间',
amount: '9000'
}
]);
};
const setRowClassName = (record) => {
return record.key === selectedDataKey ? styles.highLightLine : '';
};
return ( return (
<div className={styles.page}> <div className={styles.page}>
<div className={styles.header}> <div className={styles.header}>
...@@ -106,19 +131,44 @@ export default function() { ...@@ -106,19 +131,44 @@ export default function() {
<div className={styles.tableBox}> <div className={styles.tableBox}>
<Table <Table
columns={columns} columns={columns}
dataSource={data} dataSource={tableData}
pagination={false} pagination={false}
rowClassName={styles.tableBox} rowClassName={setRowClassName}
/> />
</div> </div>
<div className={styles.accountLine}>
<span className={styles.actText}>已签约授权</span>
<span>付款账号：622********3042</span>
</div>
<div className={styles.premLine}>
<span>原保费：559元</span>
<span>
下一期保费：<span className={styles.actText}>762元</span>
</span>
<TouchOpacity className={styles.actText}>
<img src={IconDetail} alt="detail"></img>
款项明细
</TouchOpacity>
</div>
<div className={styles.actionLine}>
<TouchOpacity className={styles.actText}>
<img src={IconCancel} alt="cancel"></img>
撤销
</TouchOpacity>
<TouchOpacity className={styles.actText}>
<img src={IconCalculate} alt="calculate"></img>
保费试算
</TouchOpacity>
</div>
</div> </div>
</div> </div>
<div className={styles.footer}> <div className={styles.footer}>
<TouchOpacity className={styles.footerBtn}>提交</TouchOpacity> <TouchOpacity className={styles.footerBtn}>提交</TouchOpacity>
</div> </div>
<PolicyListModal <ProductListModal
visible={modalVisible} visible={modalVisible}
addTableData={addTableData}
close={() => { close={() => {
setModalVisible(false); setModalVisible(false);
}} }}
......
src/pages/InsuredInfo.module.scss
View file @ 3fb62492
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
.leftMenu{ .leftMenu{
width: 10vw; width: 10vw;
height: 72vh; height: 100%;
float: left; float: left;
background-color: #EDE9E3; background-color: #EDE9E3;
border-right: 1px solid #D5D3D0; border-right: 1px solid #D5D3D0;
...@@ -73,8 +73,8 @@ ...@@ -73,8 +73,8 @@
} }
.content{ .content{
background-color: #EBE9E8; background-color: #EFEDF0;
height: 76vh; height: 100%;
width: 100%; width: 100%;
padding: 2vh; padding: 2vh;
font-size: 1.5vw; font-size: 1.5vw;
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
height:5vh; height:5vh;
line-height: 3.5vh; line-height: 3.5vh;
text-align: center; text-align: center;
padding: 0.5vw; padding: 0.5vw 1vw;
color: #FFFFFF; color: #FFFFFF;
float: left; float: left;
margin: 0.5vw 2vw 0.5vw 0; margin: 0.5vw 2vw 0.5vw 0;
...@@ -105,15 +105,45 @@ ...@@ -105,15 +105,45 @@
.tableBox{ .tableBox{
width: 100%; width: 100%;
background-color: #EFEDF0; height:50vh;
}
.highLightLine{
background-color: #E7D63A;
} }
.actText{ .actText{
user-select:none;
color: #CE1F57;
img{
width: 25px;
height: 25px;
margin-right: 5px;
}
}
.accountLine{
display: flex;
flex-direction: row-reverse;
margin-bottom: 15px;
span{ span{
color: #CE1F57; margin-left: 50px;
} }
} }
.premLine{
display: flex;
margin-bottom: 15px;
span{
margin-right: 80px;
}
}
.actionLine{
display: flex;
justify-content: space-around;
}
.footer{ .footer{
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -121,13 +151,14 @@ ...@@ -121,13 +151,14 @@
} }
.footerBtn{ .footerBtn{
user-select:none;
background: #CE1F57; background: #CE1F57;
min-width:10vw; width: 135px;
height:5vh; height: 35px;
text-align: center; text-align: center;
line-height: 5vh; line-height: 35px;
color: #FFFFFF; color: #FFFFFF;
float: right; float: right;
margin: 0.5vw 2vw; margin: 10px 20px;
border-radius: 3px; border-radius: 3px;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment