mobile / YH_RNComponent · Commits

Go to a project

Authored by QC-L
Commit 81bedcd812246256ebacf80834868f640039f739 1 parent e246332c

修改体现未绑定银行卡弹框，添加去绑定事件 review by sunkai

Inline Side-by-side
Showing 9 changed files with 239 additions and 6 deletions
@@ -13,6 +13,7 @@ import SureModal from "./SureModal"; @@ -13,6 +13,7 @@ import SureModal from "./SureModal";
13 import WithdrawModal from "./WithdrawModal"; 13 import WithdrawModal from "./WithdrawModal";
14 import GuideModal from "./GuideModal"; 14 import GuideModal from "./GuideModal";
15 import BannerSwiper from './BannerSwiper'; 15 import BannerSwiper from './BannerSwiper';
  16 +import { TipsAlertItem, TipsAlert } from '../../common/components/YH_TipsAlert';
16 17
17 export default class Alliance extends Component { 18 export default class Alliance extends Component {
18 constructor(props) { 19 constructor(props) {
@@ -20,6 +21,7 @@ export default class Alliance extends Component { @@ -20,6 +21,7 @@ export default class Alliance extends Component {
20 21
21 this._renderRow = this._renderRow.bind(this); 22 this._renderRow = this._renderRow.bind(this);
22 this._renderHeader = this._renderHeader.bind(this); 23 this._renderHeader = this._renderHeader.bind(this);
  24 + this._jumpBindCardUrl = this._jumpBindCardUrl.bind(this);
23 25
24 this.dataSource = new ListView.DataSource({ 26 this.dataSource = new ListView.DataSource({
25 rowHasChanged: (r1, r2) => !Immutable.is(r1, r2), 27 rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
@@ -62,7 +64,7 @@ export default class Alliance extends Component { @@ -62,7 +64,7 @@ export default class Alliance extends Component {
62 <View style={[styles.textView, {paddingRight: 30}]}> 64 <View style={[styles.textView, {paddingRight: 30}]}>
63 <TouchableOpacity activeOpacity={1} onPress={() => { 65 <TouchableOpacity activeOpacity={1} onPress={() => {
64 if(!bindStatus){ 66 if(!bindStatus){
65 - this.props.showHelpDialog && this.props.showHelpDialog('请先完成银行卡绑定'); 67 + this.props.showTipsAlertDialog && this.props.showTipsAlertDialog('请先完成银行卡绑定');
66 return 68 return
67 } 69 }
68 if (!this.props.settlementInfo.settlementInfoData.settlementAmount || this.props.settlementInfo.settlementInfoData.settlementAmount === 0) { 70 if (!this.props.settlementInfo.settlementInfoData.settlementAmount || this.props.settlementInfo.settlementInfoData.settlementAmount === 0) {
@@ -200,8 +202,16 @@ export default class Alliance extends Component { @@ -200,8 +202,16 @@ export default class Alliance extends Component {
200 } 202 }
201 } 203 }
202 204
  205 + _jumpBindCardUrl() {
  206 + let bindStatus = this.props.settlementInfo.settlementInfoData.hasBankCard;
  207 + let bindType = bindStatus ? '2' : '1';
  208 + this.props.jumpWithUrl && this.props.jumpWithUrl('我的银行卡', 'bankCard', bindType);
  209 + this.props.hiddenTipsAlertDialog && this.props.hiddenTipsAlertDialog();
  210 + }
  211 +
203 render() { 212 render() {
204 let { 213 let {
  214 + isShowTipsAlert,
205 isShowHelp, 215 isShowHelp,
206 isShowSure, 216 isShowSure,
207 isShowWithdrawal, 217 isShowWithdrawal,
@@ -221,6 +231,13 @@ export default class Alliance extends Component { @@ -221,6 +231,13 @@ export default class Alliance extends Component {
221 let productList = topList.product_list ? topList.product_list.toArray() : []; 231 let productList = topList.product_list ? topList.product_list.toArray() : [];
222 return ( 232 return (
223 <View style={styles.container}> 233 <View style={styles.container}>
  234 + <TipsAlert
  235 + tips={this.props.tips}
  236 + isShow={isShowTipsAlert}
  237 + >
  238 + <TipsAlertItem showStatus='sure' handleAction={this._jumpBindCardUrl}>去绑定</TipsAlertItem>
  239 + <TipsAlertItem showStatus='cancel' handleAction={this.props.hiddenTipsAlertDialog}>取消</TipsAlertItem>
  240 + </TipsAlert>
224 <GuideModal 241 <GuideModal
225 isShowGuide={this.props.isShowGuide} 242 isShowGuide={this.props.isShowGuide}
226 hiddenGuideDialog={this.props.hiddenGuideDialog}/> 243 hiddenGuideDialog={this.props.hiddenGuideDialog}/>
@@ -9,6 +9,7 @@ import ScrollableTabView from 'react-native-scrollable-tab-view'; @@ -9,6 +9,7 @@ import ScrollableTabView from 'react-native-scrollable-tab-view';
9 import TabStatistics from '../components/TabStatistics'; 9 import TabStatistics from '../components/TabStatistics';
10 import Statistics from "./Statistics"; 10 import Statistics from "./Statistics";
11 import ReactNative from "react-native"; 11 import ReactNative from "react-native";
  12 +import { TipsAlertItem, TipsAlert } from '../../common/components/YH_TipsAlert';
12 13
13 14
14 const tabTitles = ['昨日', '本月', '上月']; 15 const tabTitles = ['昨日', '本月', '上月'];
@@ -16,6 +17,7 @@ const tabTitles = ['昨日', '本月', '上月']; @@ -16,6 +17,7 @@ const tabTitles = ['昨日', '本月', '上月'];
16 export default class Data extends Component { 17 export default class Data extends Component {
17 constructor(props) { 18 constructor(props) {
18 super(props); 19 super(props);
  20 + this._jumpBindCardUrl = this._jumpBindCardUrl.bind(this);
19 } 21 }
20 22
21 componentDidMount() { 23 componentDidMount() {
@@ -28,8 +30,16 @@ export default class Data extends Component { @@ -28,8 +30,16 @@ export default class Data extends Component {
28 this.subscription.remove(); 30 this.subscription.remove();
29 } 31 }
30 32
  33 + _jumpBindCardUrl() {
  34 + let bindStatus = this.props.settlementInfo.settlementInfoData.hasBankCard;
  35 + let bindType = bindStatus ? '2' : '1';
  36 + this.props.jumpWithUrl && this.props.jumpWithUrl('我的银行卡', 'bankCard', bindType);
  37 + this.props.hiddenTipsAlertDialog && this.props.hiddenTipsAlertDialog();
  38 + }
  39 +
31 render() { 40 render() {
32 let { 41 let {
  42 + isShowTipsAlert,
33 isShowHelp, 43 isShowHelp,
34 isShowSure, 44 isShowSure,
35 isShowWithdrawal, 45 isShowWithdrawal,
@@ -40,6 +50,13 @@ export default class Data extends Component { @@ -40,6 +50,13 @@ export default class Data extends Component {
40 50
41 return ( 51 return (
42 <ScrollView style={styles.container} scrollEnabled = {scrollEnabled}> 52 <ScrollView style={styles.container} scrollEnabled = {scrollEnabled}>
  53 + <TipsAlert
  54 + tips={this.props.tips}
  55 + isShow={isShowTipsAlert}
  56 + >
  57 + <TipsAlertItem showStatus='sure' handleAction={this._jumpBindCardUrl}>去绑定</TipsAlertItem>
  58 + <TipsAlertItem showStatus='cancel' handleAction={this.props.hiddenTipsAlertDialog}>取消</TipsAlertItem>
  59 + </TipsAlert>
43 <HelpTipsModal 60 <HelpTipsModal
44 tips={this.props.tips} 61 tips={this.props.tips}
45 isShowHelp={isShowHelp} 62 isShowHelp={isShowHelp}
@@ -65,7 +82,7 @@ export default class Data extends Component { @@ -65,7 +82,7 @@ export default class Data extends Component {
65 <View style={[styles.textView, {paddingRight: 30}]}> 82 <View style={[styles.textView, {paddingRight: 30}]}>
66 <TouchableOpacity activeOpacity={1} onPress={() => { 83 <TouchableOpacity activeOpacity={1} onPress={() => {
67 if (!bindStatus) { 84 if (!bindStatus) {
68 - this.props.showHelpDialog && this.props.showHelpDialog('请先完成银行卡绑定'); 85 + this.props.showTipsAlertDialog && this.props.showTipsAlertDialog('请先完成银行卡绑定');
69 return 86 return
70 } 87 }
71 if (!this.props.settlementInfo.settlementInfoData.settlementAmount || this.props.settlementInfo.settlementInfoData.settlementAmount === 0) { 88 if (!this.props.settlementInfo.settlementInfoData.settlementAmount || this.props.settlementInfo.settlementInfoData.settlementAmount === 0) {
@@ -7,6 +7,9 @@ export default keyMirror({ @@ -7,6 +7,9 @@ export default keyMirror({
7 SET_HOST: null, 7 SET_HOST: null,
8 SET_SERVICE_HOST: null, 8 SET_SERVICE_HOST: null,
9 9
  10 + SHOW_TIPS_ALERT_DIALOG: null,
  11 + DISMISS_TIPS_ALERT_DIALOG: null,
  12 +
10 SHOW_HELP_DIALOG: null, 13 SHOW_HELP_DIALOG: null,
11 DISMISS_HELP_DIALOG: null, 14 DISMISS_HELP_DIALOG: null,
12 15
@@ -44,6 +44,8 @@ class AllianceContainer extends Component { @@ -44,6 +44,8 @@ class AllianceContainer extends Component {
44 firstFlag: '0' 44 firstFlag: '0'
45 }; 45 };
46 46
  47 + this._showTipsAlertDialog = this._showTipsAlertDialog.bind(this);
  48 + this._hiddenTipsAlertDialog = this._hiddenTipsAlertDialog.bind(this);
47 this._hiddenGuideDialog = this._hiddenGuideDialog.bind(this); 49 this._hiddenGuideDialog = this._hiddenGuideDialog.bind(this);
48 this._showHelpDialog = this._showHelpDialog.bind(this); 50 this._showHelpDialog = this._showHelpDialog.bind(this);
49 this._hiddenHelpDialog = this._hiddenHelpDialog.bind(this); 51 this._hiddenHelpDialog = this._hiddenHelpDialog.bind(this);
@@ -97,10 +99,20 @@ class AllianceContainer extends Component { @@ -97,10 +99,20 @@ class AllianceContainer extends Component {
97 }); 99 });
98 } 100 }
99 101
  102 + _showTipsAlertDialog(tips) {
  103 + this.setState({
  104 + tips,
  105 + });
  106 + this.props.actions.showTipsAlertDialog();
  107 + }
  108 +
  109 + _hiddenTipsAlertDialog() {
  110 + this.props.actions.hiddenTipsAlertDialog();
  111 + }
  112 +
100 _showHelpDialog(tips) { 113 _showHelpDialog(tips) {
101 - this.state.tips = tips;  
102 this.setState({ 114 this.setState({
103 - tips: this.state.tips, 115 + tips,
104 }); 116 });
105 this.props.actions.showHelpDialog(); 117 this.props.actions.showHelpDialog();
106 } 118 }
@@ -170,6 +182,7 @@ class AllianceContainer extends Component { @@ -170,6 +182,7 @@ class AllianceContainer extends Component {
170 182
171 render() { 183 render() {
172 let { 184 let {
  185 + showTipsAlert,
173 showHelpDialog, 186 showHelpDialog,
174 showSureDialog, 187 showSureDialog,
175 showWithdrawalDialog, 188 showWithdrawalDialog,
@@ -185,6 +198,7 @@ class AllianceContainer extends Component { @@ -185,6 +198,7 @@ class AllianceContainer extends Component {
185 return ( 198 return (
186 <View style={styles.container}> 199 <View style={styles.container}>
187 <Alliance 200 <Alliance
  201 + isShowTipsAlert={showTipsAlert}
188 isShowGuide={isShowGuide} 202 isShowGuide={isShowGuide}
189 isShowHelp={showHelpDialog} 203 isShowHelp={showHelpDialog}
190 isShowSure={showSureDialog} 204 isShowSure={showSureDialog}
@@ -195,6 +209,8 @@ class AllianceContainer extends Component { @@ -195,6 +209,8 @@ class AllianceContainer extends Component {
195 recentlyOrder={recentlyOrder} 209 recentlyOrder={recentlyOrder}
196 topList={topList} 210 topList={topList}
197 tips={tip} 211 tips={tip}
  212 + showTipsAlertDialog={this._showTipsAlertDialog}
  213 + hiddenTipsAlertDialog={this._hiddenTipsAlertDialog}
198 hiddenGuideDialog={this._hiddenGuideDialog} 214 hiddenGuideDialog={this._hiddenGuideDialog}
199 showHelpDialog={this._showHelpDialog} 215 showHelpDialog={this._showHelpDialog}
200 hiddenHelpDialog={this._hiddenHelpDialog} 216 hiddenHelpDialog={this._hiddenHelpDialog}
@@ -42,6 +42,8 @@ class DataContainer extends Component { @@ -42,6 +42,8 @@ class DataContainer extends Component {
42 tips: '', 42 tips: '',
43 }; 43 };
44 44
  45 + this._showTipsAlertDialog = this._showTipsAlertDialog.bind(this);
  46 + this._hiddenTipsAlertDialog = this._hiddenTipsAlertDialog.bind(this);
45 this._showHelpDialog = this._showHelpDialog.bind(this); 47 this._showHelpDialog = this._showHelpDialog.bind(this);
46 this._hiddenHelpDialog = this._hiddenHelpDialog.bind(this); 48 this._hiddenHelpDialog = this._hiddenHelpDialog.bind(this);
47 this._showSureDialog = this._showSureDialog.bind(this); 49 this._showSureDialog = this._showSureDialog.bind(this);
@@ -64,10 +66,20 @@ class DataContainer extends Component { @@ -64,10 +66,20 @@ class DataContainer extends Component {
64 66
65 } 67 }
66 68
  69 + _showTipsAlertDialog(tips) {
  70 + this.setState({
  71 + tips,
  72 + });
  73 + this.props.actions.showTipsAlertDialog();
  74 + }
  75 +
  76 + _hiddenTipsAlertDialog() {
  77 + this.props.actions.hiddenTipsAlertDialog();
  78 + }
  79 +
67 _showHelpDialog(tips) { 80 _showHelpDialog(tips) {
68 - this.state.tips = tips;  
69 this.setState({ 81 this.setState({
70 - tips: this.state.tips, 82 + tips,
71 }); 83 });
72 this.props.actions.showHelpDialog(); 84 this.props.actions.showHelpDialog();
73 } 85 }
@@ -117,6 +129,7 @@ class DataContainer extends Component { @@ -117,6 +129,7 @@ class DataContainer extends Component {
117 129
118 render() { 130 render() {
119 let { 131 let {
  132 + showTipsAlert,
120 showHelpDialog, 133 showHelpDialog,
121 showSureDialog, 134 showSureDialog,
122 showWithdrawalDialog, 135 showWithdrawalDialog,
@@ -129,6 +142,7 @@ class DataContainer extends Component { @@ -129,6 +142,7 @@ class DataContainer extends Component {
129 return ( 142 return (
130 <View style={styles.container}> 143 <View style={styles.container}>
131 <Data 144 <Data
  145 + isShowTipsAlert={showTipsAlert}
132 isShowHelp={showHelpDialog} 146 isShowHelp={showHelpDialog}
133 isShowSure={showSureDialog} 147 isShowSure={showSureDialog}
134 isShowWithdrawal={showWithdrawalDialog} 148 isShowWithdrawal={showWithdrawalDialog}
@@ -136,6 +150,8 @@ class DataContainer extends Component { @@ -136,6 +150,8 @@ class DataContainer extends Component {
136 addSettlement={addSettlement} 150 addSettlement={addSettlement}
137 statisticsInfo={statisticsInfo} 151 statisticsInfo={statisticsInfo}
138 tips={tip} 152 tips={tip}
  153 + showTipsAlertDialog={this._showTipsAlertDialog}
  154 + hiddenTipsAlertDialog={this._hiddenTipsAlertDialog}
139 showHelpDialog={this._showHelpDialog} 155 showHelpDialog={this._showHelpDialog}
140 hiddenHelpDialog={this._hiddenHelpDialog} 156 hiddenHelpDialog={this._hiddenHelpDialog}
141 showSureDialog={this._showSureDialog} 157 showSureDialog={this._showSureDialog}
@@ -7,6 +7,9 @@ import {setproductPool, setSkns} from "../app/appActions"; @@ -7,6 +7,9 @@ import {setproductPool, setSkns} from "../app/appActions";
7 const Platform = require('Platform'); 7 const Platform = require('Platform');
8 8
9 const { 9 const {
  10 + SHOW_TIPS_ALERT_DIALOG,
  11 + DISMISS_TIPS_ALERT_DIALOG,
  12 +
10 SHOW_HELP_DIALOG, 13 SHOW_HELP_DIALOG,
11 DISMISS_HELP_DIALOG, 14 DISMISS_HELP_DIALOG,
12 15
@@ -94,6 +97,18 @@ const { @@ -94,6 +97,18 @@ const {
94 97
95 } = require('../../constants/actionTypes').default; 98 } = require('../../constants/actionTypes').default;
96 99
  100 +export function showTipsAlertDialog() {
  101 + return {
  102 + type: SHOW_TIPS_ALERT_DIALOG,
  103 + }
  104 +}
  105 +
  106 +export function hiddenTipsAlertDialog() {
  107 + return {
  108 + type: DISMISS_TIPS_ALERT_DIALOG,
  109 + }
  110 +}
  111 +
97 export function showHelpDialog() { 112 export function showHelpDialog() {
98 return { 113 return {
99 type: SHOW_HELP_DIALOG, 114 type: SHOW_HELP_DIALOG,
@@ -9,6 +9,7 @@ let InitialState = Record({ @@ -9,6 +9,7 @@ let InitialState = Record({
9 jumpUrl: '', 9 jumpUrl: '',
10 showHelpDialog: false, 10 showHelpDialog: false,
11 showSureDialog: false, 11 showSureDialog: false,
  12 + showTipsAlert: false,
12 showWithdrawalDialog: false, 13 showWithdrawalDialog: false,
13 showBankInfoDialog: false, 14 showBankInfoDialog: false,
14 15
@@ -4,6 +4,9 @@ import InitialState from './allianceInitialState'; @@ -4,6 +4,9 @@ import InitialState from './allianceInitialState';
4 import Immutable, {List} from 'immutable'; 4 import Immutable, {List} from 'immutable';
5 5
6 const { 6 const {
  7 + SHOW_TIPS_ALERT_DIALOG,
  8 + DISMISS_TIPS_ALERT_DIALOG,
  9 +
7 SHOW_HELP_DIALOG, 10 SHOW_HELP_DIALOG,
8 DISMISS_HELP_DIALOG, 11 DISMISS_HELP_DIALOG,
9 12
@@ -100,6 +103,12 @@ export default function couponReducer(state = initialState, action) { @@ -100,6 +103,12 @@ export default function couponReducer(state = initialState, action) {
100 } 103 }
101 104
102 switch (action.type) { 105 switch (action.type) {
  106 + case SHOW_TIPS_ALERT_DIALOG: {
  107 + return state.set('showTipsAlert', true);
  108 + }
  109 + case DISMISS_TIPS_ALERT_DIALOG: {
  110 + return state.set('showTipsAlert', false);
  111 + }
103 case SHOW_HELP_DIALOG: { 112 case SHOW_HELP_DIALOG: {
104 return state.set('showHelpDialog', true); 113 return state.set('showHelpDialog', true);
105 } 114 }
  1 +/*
  2 + * @Author: QC.L
  3 + * @Date: 2018-09-11 16:07:56
  4 + * @Last Modified by: QC.L
  5 + * @Last Modified time: 2018-09-11 16:14:40
  6 + * @Description 弹框 Alert 效果
  7 + */
  8 +'use strict';
  9 +
  10 +import React from 'react';
  11 +import ReactNative from 'react-native';
  12 +
  13 +const {
  14 + StyleSheet,
  15 + Text,
  16 + View,
  17 + Dimensions,
  18 + TouchableOpacity,
  19 + Modal,
  20 +} = ReactNative;
  21 +
  22 +/**
  23 + * 参数1: showStatus 值 sure/cancel
  24 + * 参数2: handleAction 要处理的事件
  25 + */
  26 +function TipsAlertItem(props) {
  27 + return (
  28 + <TouchableOpacity style={styles.click} onPress={() => {
  29 + props.handleAction && props.handleAction();
  30 + }}>
  31 + <Text style={styles[props.showStatus]}>{props.children}</Text>
  32 + </TouchableOpacity>
  33 + );
  34 +}
  35 +
  36 +/**
  37 + * 参数1: isShow true 显示 false 隐藏
  38 + * 参数2: tips 为标题
  39 + */
  40 +class TipsAlert extends React.Component {
  41 + constructor(props) {
  42 + super(props);
  43 + this._renderChildren = this._renderChildren.bind(this);
  44 + }
  45 +
  46 + _renderChildren(children) {
  47 + return children.map((element, index) => {
  48 + if (index === children.length) return element
  49 + return (
  50 + <React.Fragment>
  51 + {element}
  52 + <View style={{width: 0.5, height: '100%', backgroundColor: '#e0e0e0'}}></View>
  53 + </React.Fragment>
  54 + )
  55 + });
  56 + }
  57 +
  58 + render() {
  59 + let { children } = this.props;
  60 + return (
  61 + <Modal
  62 + visible={this.props.isShow}
  63 + animationType={'none'}
  64 + transparent={true}
  65 + onRequestClose={() => {}}>
  66 + <View style={styles.modalContainer}>
  67 + <View style={styles.modalView}>
  68 + <View style={styles.confirmTitleContainer}>
  69 + <Text style={styles.confirmTitle}>{this.props.tips}</Text>
  70 + </View>
  71 + <View style={{width: '100%', height: 0.5, backgroundColor: '#e0e0e0'}}/>
  72 + <View style={styles.confirmBtnContainer}>
  73 + {this._renderChildren(children)}
  74 + </View>
  75 + </View>
  76 + </View>
  77 + </Modal>
  78 + );
  79 + }
  80 +};
  81 +
  82 +export { TipsAlert, TipsAlertItem };
  83 +
  84 +let {width, height} = Dimensions.get('window');
  85 +
  86 +let styles = StyleSheet.create({
  87 + modalContainer: {
  88 + flex: 1,
  89 + width: width,
  90 + height: height,
  91 + alignItems: 'center',
  92 + justifyContent: 'center',
  93 + backgroundColor: 'rgba(0, 0, 0, 0.4)',
  94 + },
  95 + modalView: {
  96 + width: 270,
  97 + borderRadius: 5,
  98 + alignItems: 'center',
  99 + backgroundColor: '#ffffff',
  100 + },
  101 + confirmBtnContainer: {
  102 + width: '100%',
  103 + height: 44.5,
  104 + flexDirection: 'row',
  105 + justifyContent: 'space-between',
  106 + },
  107 + confirmTitleContainer: {
  108 + alignItems: 'center'
  109 + },
  110 + confirmTitle: {
  111 + paddingTop: 20,
  112 + paddingLeft: 30,
  113 + paddingRight: 30,
  114 + paddingBottom: 20,
  115 + color: '#444444',
  116 + fontSize: 14,
  117 + lineHeight: 24,
  118 + textAlign: 'center',
  119 + letterSpacing: -0.09,
  120 + fontFamily: 'PingFang-SC-Regular',
  121 + },
  122 + click: {
  123 + flex: 1,
  124 + alignItems: 'center',
  125 + justifyContent: 'center'
  126 + },
  127 + cancel: {
  128 + fontSize: 17,
  129 + color: '#444444',
  130 + letterSpacing: -0.41,
  131 + fontFamily: 'PingFang-SC-Regular',
  132 + },
  133 + sure: {
  134 + fontSize: 17,
  135 + color: '#D0021B',
  136 + letterSpacing: -0.41,
  137 + fontWeight: 'bold'
  138 + },
  139 +});