Skip to content

B
BasicApp
Commit f91124d9 authored by shiyunjie's avatar shiyunjie
Browse files
Options

保险产品列表

parent 4ff2137e
Show whitespace changes
Inline Side-by-side
Showing with 256 additions and 174 deletions
src/components/TabBarIndicator/index.js 0 → 100644
View file @ f91124d9
//@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>
);
}
}
src/pages/InsuranceList/InsuranceAPI.js
View file @ f91124d9
......@@ -18,8 +18,8 @@ export async function queryInsuranceListByUid(params : RiskTakerParams) {
return [];
}
export async function queryInsuranceDetail(params : RiskTakerParams) {
console.log('queryInsuranceDetail', params);
export async function queryInsuranceProducts(params : RiskTakerParams) {
console.log('queryInsuranceProducts', params);
const body = await fetchCoreAPI('001002', params);
console.log('fetchCoreAPI:', body);
if (_.get(body, 'code') === '0000' && _.get(body, 'data')) {
......
src/pages/home/PolicyPage.js
View file @ f91124d9
......@@ -15,30 +15,33 @@ import {
View,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import FastImage from 'react-native-fast-image';
import { TabBar, TabView } from 'react-native-tab-view';
import { LargeList } from 'react-native-largelist-v3';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
import { push } from '../../BasicNavigator/actions';
import NavigationBar, { NavHeight } from '../../components/NavigationBar';
import decorator from '../../utils/decorator';
import Text from '../../components/Text';
import { ENV, resourceURLMapping } from '../../utils/constants';
import ListItem from '../InsuranceList/ListItem';
import { queryInsuranceListByUid } from '../InsuranceList/InsuranceAPI';
import { queryInsuranceProducts } from '../InsuranceList/InsuranceAPI';
import TabBarIndicatorLinear from '../../components/TabBarIndicator';
import {
renderPolicyHeader,
renderPolicyTab,
headerHeight,
tabHeight,
} from './policyRenderUtil';
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({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
header: {
height: 150,
},
tab: {
width: global.SCREEN_WIDTH / 4,
width: tabWidth,
},
label: {
fontWeight: 'bold',
......@@ -49,9 +52,9 @@ const styles = StyleSheet.create({
const typeArr : Array<> = [
{ key: 'ALL', title: '全部', type: 1 },
{ key: 'SAVE', title: '保障中', type: 41 },
{ key: 'EXPIRED', title: '已失效', type: 10 },
{ key: 'EXPIRED2', title: '其他', type: 10 },
{ key: 'SAVE', title: '人寿', type: 41 },
{ key: 'EXPIRED', title: '财险', type: 10 },
{ key: 'EXPIRED2', title: '养老', type: 20 },
];
const typeData = {
......@@ -63,14 +66,16 @@ const typeData = {
class PolicyPage extends Component<Props> {
constructor(props) {
super(props);
this.itemHeight = (global.SCREEN_WIDTH - 30) * 137 / 345 + 12;
this.titleHeight = (this.itemHeight - 12) * 80 / 137;
this.state = {
data: [],
type: typeData,
};
}
componentDidMount() : void {
this.queryList();
}
_handleIndexChange = (index) => {
const type = {
index,
......@@ -82,23 +87,29 @@ class PolicyPage extends Component<Props> {
renderIndexPath = ({ section, row }) => {
const { theme, pushTo } = this.props;
const item = this.state.data[section].items[row];
console.log('renderIndexPath:', item)
return (
<ListItem
section={section}
row={row}
item={item}
titleHeight={this.titleHeight}
itemHeight={this.itemHeight}
onPress={() => pushTo('InsuranceDetail', item)}
<TouchableOpacity
onPress={() => pushTo('ProductDetailPage', item)}
>
<FastImage
style={{
width: listItemWidth,
height: listItemHeight,
}}
source={{
uri: item.iconUrl,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
</TouchableOpacity>
);
};
queryList = async () => {
const list = await queryInsuranceListByUid({ params: { uid: 'u0000001' } });
console.log('list:', list);
const list = await queryInsuranceProducts({});
console.log('queryInsuranceProducts:', list);
if (list) {
this.setState({
data: [
......@@ -128,13 +139,13 @@ class PolicyPage extends Component<Props> {
backgroundColor: '#F4F5F5',
}}
contentStyle={[
{ height: global.SCREEN_HEIGHT - NavHeight - 50, backgroundColor: '#F4F5F5' },
{ height: global.SCREEN_HEIGHT - headerHeight - tabHeight, backgroundColor: '#F4F5F5' },
]}
data={this.state.data}
onRefresh={this.onRefresh}
endRefresh={this.endRefresh}
refreshHeader={CommonLottieHeader}
heightForIndexPath={() => this.itemHeight}
heightForIndexPath={() => listItemHeight}
heightForSection={() => 0}
renderIndexPath={this.renderIndexPath}
/>
......@@ -144,128 +155,24 @@ class PolicyPage extends Component<Props> {
<TabBar
{...item}
scrollEnabled
indicatorStyle={{ width:36, backgroundColor: this.props.theme.ThemeColor }}
indicatorStyle={{ width: tabWidth }}
style={{ backgroundColor: '#fff', height: 50 }}
tabStyle={styles.tab}
labelStyle={[styles.label]}
activeColor={this.props.theme.ThemeColor}
inactiveColor="#666"
renderIndicator={(props) => (
<TabBarIndicatorLinear {...props} />
)}
/>
)
render() {
const { pushTo } = this.props;
return (
<View style={[styles.container, { backgroundColor: '#fff' }]}>
<LinearGradient
start={{ x: 0.5, y: 0 }}
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>
{renderPolicyHeader(this.props)}
{renderPolicyTab(this.props)}
<View style={{ height: 43 }} />
<TabView
navigationState={this.state.type}
......
src/pages/home/policyRenderUtil.js 0 → 100644
View file @ f91124d9
/**
* @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,
};
src/utils/api/APIConfig.js
View file @ f91124d9
......@@ -13,8 +13,8 @@ export const ServiceContent = ''
export const APICodeToUrl = {
'001001': '/sysapp/getpolicylist', // 获取我的保单
'001002': '/sysapp/getpolicyDetail', // 获取保单详情
'001001': '/sysapp/getPolicyList', // 获取我的保单
'001002': '/sysapp/getProductList', // 获取保险产品
//实时贷请求
'06001': '/lifems/loan/checkLoanLimit', // 获取保单列表，额度
......
src/utils/api/localData.js
View file @ f91124d9
......@@ -56,35 +56,17 @@ export default {
}],
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',
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: {
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',
bannerIconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png',
productIntroductionUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png',
serviceProcessUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png',
importantNotificationUrl: '',
tagNameList: [
'1-75周岁',
......@@ -94,15 +76,15 @@ export default {
{
blueId: '200000155',
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: {
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',
bannerIconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png',
productIntroductionUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png',
serviceProcessUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png',
importantNotificationUrl: '',
tagNameList: [
'1-75周岁',
......@@ -112,15 +94,15 @@ export default {
{
blueId: '200000152',
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: {
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',
bannerIconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png',
productIntroductionUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png',
serviceProcessUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png',
importantNotificationUrl: '',
tagNameList: [
'1-75周岁',
......
src/utils/api/mockUtil.js
View file @ f91124d9
......@@ -20,9 +20,10 @@ function get001001(data) {
return result;
}
//获取保单详情
//获取保险产品
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