Commit f91124d9 authored by shiyunjie's avatar shiyunjie

保险产品列表

parent 4ff2137e
//@flow
import React from 'react';
import { StyleSheet, } from 'react-native';
import TabBarIndicator from 'react-native-tab-view/src/TabBarIndicator';
import Animated from "react-native-reanimated";
import LinearGradient from "react-native-linear-gradient";
const styles = StyleSheet.create({
indicator: {
position: 'absolute',
left: 0,
bottom: 0,
right: 0,
height: 2,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
},
});
export default class TabBarIndicatorLinear extends TabBarIndicator {
render() : any {
const { width, position, navigationState, style } = this.props;
const { routes } = navigationState;
const translateX = this.getTranslateX(position, routes, width);
return (
<Animated.View
style={[
styles.indicator,
{ width: `${100 / routes.length}%` },
// If layout is not available, use `left` property for positioning the indicator
// This avoids rendering delay until we are able to calculate translateX
width
? { transform: [{ translateX }]}
: { left: `${(100 / routes.length) * navigationState.index}%` },
style,
]}
>
<LinearGradient
start={{ x: 0.22, y: 0.5 }}
end={{ x: 1, y: 1 }}
locations={[0, 1]}
colors={['#078CF3', '#01F6C6']}
style={{ width: 36, height: 3 }}
/>
</Animated.View>
);
}
}
...@@ -18,8 +18,8 @@ export async function queryInsuranceListByUid(params : RiskTakerParams) { ...@@ -18,8 +18,8 @@ export async function queryInsuranceListByUid(params : RiskTakerParams) {
return []; return [];
} }
export async function queryInsuranceDetail(params : RiskTakerParams) { export async function queryInsuranceProducts(params : RiskTakerParams) {
console.log('queryInsuranceDetail', params); console.log('queryInsuranceProducts', params);
const body = await fetchCoreAPI('001002', params); const body = await fetchCoreAPI('001002', params);
console.log('fetchCoreAPI:', body); console.log('fetchCoreAPI:', body);
if (_.get(body, 'code') === '0000' && _.get(body, 'data')) { if (_.get(body, 'code') === '0000' && _.get(body, 'data')) {
......
...@@ -15,30 +15,33 @@ import { ...@@ -15,30 +15,33 @@ import {
View, View,
} from 'react-native'; } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import FastImage from 'react-native-fast-image'; import FastImage from 'react-native-fast-image';
import { TabBar, TabView } from 'react-native-tab-view'; import { TabBar, TabView } from 'react-native-tab-view';
import { LargeList } from 'react-native-largelist-v3'; import { LargeList } from 'react-native-largelist-v3';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader'; import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
import { push } from '../../BasicNavigator/actions'; import { push } from '../../BasicNavigator/actions';
import NavigationBar, { NavHeight } from '../../components/NavigationBar';
import decorator from '../../utils/decorator'; import decorator from '../../utils/decorator';
import Text from '../../components/Text'; import { queryInsuranceProducts } from '../InsuranceList/InsuranceAPI';
import { ENV, resourceURLMapping } from '../../utils/constants'; import TabBarIndicatorLinear from '../../components/TabBarIndicator';
import ListItem from '../InsuranceList/ListItem'; import {
import { queryInsuranceListByUid } from '../InsuranceList/InsuranceAPI'; renderPolicyHeader,
renderPolicyTab,
headerHeight,
tabHeight,
} from './policyRenderUtil';
type Props = {}; type Props = {};
const tabWidth = global.SCREEN_WIDTH / 4;
const listItemHeight = (global.SCREEN_WIDTH - 10) * 255 / 365
const listItemWidth = global.SCREEN_WIDTH - 10;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#F5FCFF', backgroundColor: '#F5FCFF',
}, },
header: {
height: 150,
},
tab: { tab: {
width: global.SCREEN_WIDTH / 4, width: tabWidth,
}, },
label: { label: {
fontWeight: 'bold', fontWeight: 'bold',
...@@ -49,9 +52,9 @@ const styles = StyleSheet.create({ ...@@ -49,9 +52,9 @@ const styles = StyleSheet.create({
const typeArr : Array<> = [ const typeArr : Array<> = [
{ key: 'ALL', title: '全部', type: 1 }, { key: 'ALL', title: '全部', type: 1 },
{ key: 'SAVE', title: '保障中', type: 41 }, { key: 'SAVE', title: '人寿', type: 41 },
{ key: 'EXPIRED', title: '已失效', type: 10 }, { key: 'EXPIRED', title: '财险', type: 10 },
{ key: 'EXPIRED2', title: '其他', type: 10 }, { key: 'EXPIRED2', title: '养老', type: 20 },
]; ];
const typeData = { const typeData = {
...@@ -63,14 +66,16 @@ const typeData = { ...@@ -63,14 +66,16 @@ const typeData = {
class PolicyPage extends Component<Props> { class PolicyPage extends Component<Props> {
constructor(props) { constructor(props) {
super(props); super(props);
this.itemHeight = (global.SCREEN_WIDTH - 30) * 137 / 345 + 12;
this.titleHeight = (this.itemHeight - 12) * 80 / 137;
this.state = { this.state = {
data: [], data: [],
type: typeData, type: typeData,
}; };
} }
componentDidMount() : void {
this.queryList();
}
_handleIndexChange = (index) => { _handleIndexChange = (index) => {
const type = { const type = {
index, index,
...@@ -82,23 +87,29 @@ class PolicyPage extends Component<Props> { ...@@ -82,23 +87,29 @@ class PolicyPage extends Component<Props> {
renderIndexPath = ({ section, row }) => { renderIndexPath = ({ section, row }) => {
const { theme, pushTo } = this.props; const { theme, pushTo } = this.props;
const item = this.state.data[section].items[row]; const item = this.state.data[section].items[row];
console.log('renderIndexPath:', item)
return ( return (
<ListItem <TouchableOpacity
section={section} onPress={() => pushTo('ProductDetailPage', item)}
row={row} >
item={item} <FastImage
titleHeight={this.titleHeight} style={{
itemHeight={this.itemHeight} width: listItemWidth,
onPress={() => pushTo('InsuranceDetail', item)} height: listItemHeight,
}}
source={{
uri: item.iconUrl,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/> />
</TouchableOpacity>
); );
}; };
queryList = async () => { queryList = async () => {
const list = await queryInsuranceListByUid({ params: { uid: 'u0000001' } }); const list = await queryInsuranceProducts({});
console.log('list:', list); console.log('queryInsuranceProducts:', list);
if (list) { if (list) {
this.setState({ this.setState({
data: [ data: [
...@@ -128,13 +139,13 @@ class PolicyPage extends Component<Props> { ...@@ -128,13 +139,13 @@ class PolicyPage extends Component<Props> {
backgroundColor: '#F4F5F5', backgroundColor: '#F4F5F5',
}} }}
contentStyle={[ contentStyle={[
{ height: global.SCREEN_HEIGHT - NavHeight - 50, backgroundColor: '#F4F5F5' }, { height: global.SCREEN_HEIGHT - headerHeight - tabHeight, backgroundColor: '#F4F5F5' },
]} ]}
data={this.state.data} data={this.state.data}
onRefresh={this.onRefresh} onRefresh={this.onRefresh}
endRefresh={this.endRefresh} endRefresh={this.endRefresh}
refreshHeader={CommonLottieHeader} refreshHeader={CommonLottieHeader}
heightForIndexPath={() => this.itemHeight} heightForIndexPath={() => listItemHeight}
heightForSection={() => 0} heightForSection={() => 0}
renderIndexPath={this.renderIndexPath} renderIndexPath={this.renderIndexPath}
/> />
...@@ -144,128 +155,24 @@ class PolicyPage extends Component<Props> { ...@@ -144,128 +155,24 @@ class PolicyPage extends Component<Props> {
<TabBar <TabBar
{...item} {...item}
scrollEnabled scrollEnabled
indicatorStyle={{ width:36, backgroundColor: this.props.theme.ThemeColor }} indicatorStyle={{ width: tabWidth }}
style={{ backgroundColor: '#fff', height: 50 }} style={{ backgroundColor: '#fff', height: 50 }}
tabStyle={styles.tab} tabStyle={styles.tab}
labelStyle={[styles.label]} labelStyle={[styles.label]}
activeColor={this.props.theme.ThemeColor} activeColor={this.props.theme.ThemeColor}
inactiveColor="#666" inactiveColor="#666"
renderIndicator={(props) => (
<TabBarIndicatorLinear {...props} />
)}
/> />
) )
render() { render() {
const { pushTo } = this.props;
return ( return (
<View style={[styles.container, { backgroundColor: '#fff' }]}> <View style={[styles.container, { backgroundColor: '#fff' }]}>
<LinearGradient {renderPolicyHeader(this.props)}
start={{ x: 0.5, y: 0 }} {renderPolicyTab(this.props)}
end={{ x: 0.5, y: 1 }}
locations={[0, 1]}
colors={['#08BFF9', '#4A98E0']}
style={[styles.header]}
>
<View>
<NavigationBar
style={{ backgroundColor: '#00000000' }}
title="保险"
/>
<View
style={{
height: 25,
flexDirection: 'row',
marginTop: 8,
paddingLeft: 15,
}}
>
<Text style={{
color: '#fff',
fontSize: 18,
}}
>
太平保险
</Text>
<Text
style={{
color: '#fff',
fontSize: 12,
marginTop: 6,
marginLeft: 2,
}}
>
为您精选
</Text>
</View>
</View>
</LinearGradient>
<View
style={{
height: 86,
backgroundColor: '#fff',
borderRadius: 10,
position: 'absolute',
zIndex: 3,
top: 107,
left: 15,
right: 15,
bottom: global.SCREEN_HEIGHT - 193,
elevation: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: '#D0DBFF',
shadowOpacity: 1,
shadowRadius: 5,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<View style={{
flex: 1,
height: 86,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<FastImage
style={{
width: 36,
height: 36,
}}
source={{
uri: `${resourceURLMapping[ENV]}insure_wodebaodan.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }}>我的保单</Text>
</View>
<View style={{ backgroundColor: '#ccc', height: 43, width: 1 }} />
<View style={{
flex: 1,
height: 86,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<FastImage
style={{
width: 36,
height: 36,
}}
source={{
uri: `${resourceURLMapping[ENV]}insure_wodedingdan.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }}>我的订单</Text>
</View>
</View>
<View style={{ height: 43 }} /> <View style={{ height: 43 }} />
<TabView <TabView
navigationState={this.state.type} navigationState={this.state.type}
......
/**
* @flow
*/
import React from 'react';
import { View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import FastImage from 'react-native-fast-image';
import NavigationBar from '../../components/NavigationBar';
import Text from '../../components/Text';
import { ENV, resourceURLMapping } from '../../utils/constants';
export const headerHeight = 150;
export const tabHeight = 43;
export function renderPolicyHeader(props) {
return (
<LinearGradient
start={{ x: 0.5, y: 0 }}
end={{ x: 0.5, y: 1 }}
locations={[0, 1]}
colors={['#08BFF9', '#4A98E0']}
style={[{
height: headerHeight,
}]}
>
<View>
<NavigationBar
style={{ backgroundColor: '#00000000' }}
title="保险"
/>
<View
style={{
height: 25,
flexDirection: 'row',
marginTop: 8,
paddingLeft: 15,
}}
>
<Text style={{
color: '#fff',
fontSize: 18,
}}
>
太平保险
</Text>
<Text
style={{
color: '#fff',
fontSize: 12,
marginTop: 6,
marginLeft: 2,
}}
>
为您精选
</Text>
</View>
</View>
</LinearGradient>
);
}
export function renderPolicyTab(props) {
return (
<View
style={{
height: tabHeight * 2,
backgroundColor: '#fff',
borderRadius: 10,
position: 'absolute',
zIndex: 3,
top: headerHeight - tabHeight,
left: 15,
right: 15,
bottom: global.SCREEN_HEIGHT - headerHeight - tabHeight,
elevation: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: '#D0DBFF',
shadowOpacity: 1,
shadowRadius: 5,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<View style={{
flex: 1,
height: tabHeight * 2,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<FastImage
style={{
width: 36,
height: 36,
}}
source={{
uri: `${resourceURLMapping[ENV]}insure_wodebaodan.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }}>我的保单</Text>
</View>
<View style={{ backgroundColor: '#ccc', height: tabHeight, width: 1 }} />
<View style={{
flex: 1,
height: tabHeight * 2,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<FastImage
style={{
width: 36,
height: 36,
}}
source={{
uri: `${resourceURLMapping[ENV]}insure_wodedingdan.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }}>我的订单</Text>
</View>
</View>
);
}
export default {
renderPolicyTab,
renderPolicyHeader,
headerHeight,
tabHeight,
};
...@@ -13,8 +13,8 @@ export const ServiceContent = '' ...@@ -13,8 +13,8 @@ export const ServiceContent = ''
export const APICodeToUrl = { export const APICodeToUrl = {
'001001': '/sysapp/getpolicylist', // 获取我的保单 '001001': '/sysapp/getPolicyList', // 获取我的保单
'001002': '/sysapp/getpolicyDetail', // 获取保单详情 '001002': '/sysapp/getProductList', // 获取保险产品
//实时贷请求 //实时贷请求
'06001': '/lifems/loan/checkLoanLimit', // 获取保单列表,额度 '06001': '/lifems/loan/checkLoanLimit', // 获取保单列表,额度
......
...@@ -56,35 +56,17 @@ export default { ...@@ -56,35 +56,17 @@ export default {
}], }],
product: [ product: [
{ {
blueId: '2001',
company: 'PROPERTY',
iconUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=435466660,1319228756&fm=26&gp=0.jpg',
detail: {
name: '“驾乘至尊宝”驾乘人员人身意外综合保险',
description: '不限被保险人、最高50万保障',
detailsPageWxshareUrl: '',
guaranteeContent: '[{"text":[{"name":"驾乘意外身故、残疾","value":"25万元/份"},{"name":"驾乘意外伤害医疗","value":"1万元/份"}]},{"text":[{"name":"驾乘意外身故、残疾","value":"50万元/份"},{"name":"驾乘意外伤害医疗","value":"3万元/份"}]}]',
bannerIconUrl: 'https://58.49.129.4/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png',
productIntroductionUrl: 'https://58.49.129.4/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png',
serviceProcessUrl: 'https://58.49.129.4/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png',
importantNotificationUrl: '',
tagNameList: [
'1-75周岁',
],
},
},
{
blueId: '200000156', blueId: '200000156',
company: 'PROPERTY', company: 'PROPERTY',
iconUrl: 'https://58.49.129.4/static/insurance_img/201906/03/1babf50701374e79b2d0e1758d7e6d42.png', iconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/03/1babf50701374e79b2d0e1758d7e6d42.png',
detail: { detail: {
name: '“驾乘至尊宝”驾乘人员人身意外综合保险', name: '“驾乘至尊宝”驾乘人员人身意外综合保险',
description: '不限被保险人、最高50万保障', description: '不限被保险人、最高50万保障',
detailsPageWxshareUrl: '', detailsPageWxshareUrl: '',
guaranteeContent: '[{"text":[{"name":"驾乘意外身故、残疾","value":"25万元/份"},{"name":"驾乘意外伤害医疗","value":"1万元/份"}]},{"text":[{"name":"驾乘意外身故、残疾","value":"50万元/份"},{"name":"驾乘意外伤害医疗","value":"3万元/份"}]}]', guaranteeContent: '[{"text":[{"name":"驾乘意外身故、残疾","value":"25万元/份"},{"name":"驾乘意外伤害医疗","value":"1万元/份"}]},{"text":[{"name":"驾乘意外身故、残疾","value":"50万元/份"},{"name":"驾乘意外伤害医疗","value":"3万元/份"}]}]',
bannerIconUrl: 'https://58.49.129.4/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png', bannerIconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png',
productIntroductionUrl: 'https://58.49.129.4/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png', productIntroductionUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png',
serviceProcessUrl: 'https://58.49.129.4/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png', serviceProcessUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png',
importantNotificationUrl: '', importantNotificationUrl: '',
tagNameList: [ tagNameList: [
'1-75周岁', '1-75周岁',
...@@ -94,15 +76,15 @@ export default { ...@@ -94,15 +76,15 @@ export default {
{ {
blueId: '200000155', blueId: '200000155',
company: 'PENSION', company: 'PENSION',
iconUrl: 'https://58.49.129.4/static/insurance_img/201906/03/fd0db92ce55645b3b00c4035d25902c7.png', iconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/03/fd0db92ce55645b3b00c4035d25902c7.png',
detail: { detail: {
name: '“驾乘至尊宝”驾乘人员人身意外综合保险', name: '“驾乘至尊宝”驾乘人员人身意外综合保险',
description: '不限被保险人、最高50万保障', description: '不限被保险人、最高50万保障',
detailsPageWxshareUrl: '', detailsPageWxshareUrl: '',
guaranteeContent: '[{"text":[{"name":"驾乘意外身故、残疾","value":"25万元/份"},{"name":"驾乘意外伤害医疗","value":"1万元/份"}]},{"text":[{"name":"驾乘意外身故、残疾","value":"50万元/份"},{"name":"驾乘意外伤害医疗","value":"3万元/份"}]}]', guaranteeContent: '[{"text":[{"name":"驾乘意外身故、残疾","value":"25万元/份"},{"name":"驾乘意外伤害医疗","value":"1万元/份"}]},{"text":[{"name":"驾乘意外身故、残疾","value":"50万元/份"},{"name":"驾乘意外伤害医疗","value":"3万元/份"}]}]',
bannerIconUrl: 'https://58.49.129.4/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png', bannerIconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png',
productIntroductionUrl: 'https://58.49.129.4/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png', productIntroductionUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png',
serviceProcessUrl: 'https://58.49.129.4/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png', serviceProcessUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png',
importantNotificationUrl: '', importantNotificationUrl: '',
tagNameList: [ tagNameList: [
'1-75周岁', '1-75周岁',
...@@ -112,15 +94,15 @@ export default { ...@@ -112,15 +94,15 @@ export default {
{ {
blueId: '200000152', blueId: '200000152',
company: 'LIFE', company: 'LIFE',
iconUrl: 'https://58.49.129.4/static/insurance_img/201906/03/dac832df067341aa958e417b909573c9.png', iconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/03/dac832df067341aa958e417b909573c9.png',
detail: { detail: {
name: '“驾乘至尊宝”驾乘人员人身意外综合保险', name: '“驾乘至尊宝”驾乘人员人身意外综合保险',
description: '不限被保险人、最高50万保障', description: '不限被保险人、最高50万保障',
detailsPageWxshareUrl: '', detailsPageWxshareUrl: '',
guaranteeContent: '[{"text":[{"name":"驾乘意外身故、残疾","value":"25万元/份"},{"name":"驾乘意外伤害医疗","value":"1万元/份"}]},{"text":[{"name":"驾乘意外身故、残疾","value":"50万元/份"},{"name":"驾乘意外伤害医疗","value":"3万元/份"}]}]', guaranteeContent: '[{"text":[{"name":"驾乘意外身故、残疾","value":"25万元/份"},{"name":"驾乘意外伤害医疗","value":"1万元/份"}]},{"text":[{"name":"驾乘意外身故、残疾","value":"50万元/份"},{"name":"驾乘意外伤害医疗","value":"3万元/份"}]}]',
bannerIconUrl: 'https://58.49.129.4/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png', bannerIconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png',
productIntroductionUrl: 'https://58.49.129.4/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png', productIntroductionUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png',
serviceProcessUrl: 'https://58.49.129.4/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png', serviceProcessUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png',
importantNotificationUrl: '', importantNotificationUrl: '',
tagNameList: [ tagNameList: [
'1-75周岁', '1-75周岁',
......
...@@ -20,9 +20,10 @@ function get001001(data) { ...@@ -20,9 +20,10 @@ function get001001(data) {
return result; return result;
} }
//获取保单详情 //获取保险产品
function get001002() { function get001002() {
const { product } = localData;
return product;
} }
......
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