add app/pages/payment/CreditCard.js

Strides-SPAPP/app/pages/payment/CreditCard.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import * as Progress from 'react-native-progress';
+import WebView from 'react-native-webview';
+import routeUtil from '../../utils/routeUtil';
+import { PageList } from '../Router';
+
+export default class CreditCard extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      url: 'http://161.117.183.142/juiceplus/cardCancelPage.html',
+      url2: 'http://baidu.com',
+      progress: 0
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.route.params.url) {
+      this.setState({
+        url: this.props.route.params.url
+      });
+    }
+  }
+
+  onPostMessage(data) {
+    //toTopupPage()
+    routeUtil.bridge2Page(PageList.topupNew);
+    /*if (data) {
+      try {
+        const msg = JSON.parse(data);
+        if (msg.msg) {
+          Dialog.showResultDialog(msg.msg, $t('nav.ok'), back => {
+            startPage(PageList.topup);
+          });
+        }
+      } catch (error) {
+        
+      }
+      console.log('WebviewMessage', data)
+    }*/
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Progress.Bar
+          style={styles.progress}
+          width={$vw(100)}
+          height={2}
+          color={colorPrimaryDark}
+          borderWidth={0}
+          borderRadius={0}
+          progress={this.state.progress}/>
+        <WebView
+          style={ui.flex1}
+          source={{ uri: this.state.url}}
+          mixedContentMode={'always'}
+          applicationNameForUserAgent={'juiceplus/1.0'}
+          onLoadProgress={({nativeEvent}) => this.setState({ progress: nativeEvent.progress }) }
+          onLoadEnd={(e) => {
+            //console.log('webview-end', e)
+            this.setState({ progress: 0 }) 
+          }}
+          onMessage={e => this.onPostMessage(e.nativeEvent.data)}/>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  progress: {
+    top: 0,
+    left: 0,
+    position: 'absolute',
+  }
+})