|
|
@@ -1,176 +1,258 @@
|
|
|
/*
|
|
|
*
|
|
|
*/
|
|
|
-import React, { Component } from "react";
|
|
|
+import React, { Component } from 'react';
|
|
|
import {
|
|
|
- Platform,
|
|
|
- StyleSheet,
|
|
|
- Text,
|
|
|
- View,
|
|
|
- Image,
|
|
|
- TouchableOpacity,
|
|
|
- FlatList,
|
|
|
- TouchableHighlight,
|
|
|
- DeviceEventEmitter,
|
|
|
- ScrollView,
|
|
|
- Modal,
|
|
|
- Animated,
|
|
|
- TextInput
|
|
|
-} from "react-native";
|
|
|
-import BasePage from "../BasePage";
|
|
|
+ Platform,
|
|
|
+ StyleSheet,
|
|
|
+ Text,
|
|
|
+ View,
|
|
|
+ Image,
|
|
|
+ TouchableOpacity,
|
|
|
+ FlatList,
|
|
|
+ TouchableHighlight,
|
|
|
+ DeviceEventEmitter,
|
|
|
+ ScrollView,
|
|
|
+ Modal,
|
|
|
+ Animated,
|
|
|
+ TextInput
|
|
|
+} from 'react-native';
|
|
|
+import BasePage from '../BasePage';
|
|
|
import Dimensions from '../utils/dimensions';
|
|
|
import TopicTitle from '../components/TopicTitle';
|
|
|
-import CourseTitle from "../components/CourseTitle";
|
|
|
+import CourseTitle from '../components/CourseTitle';
|
|
|
+import wechat from '../utils/wechat';
|
|
|
+import aliPay from '../utils/aliPay';
|
|
|
|
|
|
export default class Buy extends BasePage {
|
|
|
- state = {
|
|
|
- shopData: [
|
|
|
- { title: '1个月', originPrice: '199', price: '49', },
|
|
|
- { title: '12个月', originPrice: '499', price: '199' }
|
|
|
- ],
|
|
|
- currentTapindex: 0,
|
|
|
- slideAnim: new Animated.Value(-150),
|
|
|
- ifDialogShow: false,
|
|
|
- payType: 1
|
|
|
- };
|
|
|
- itemTap = (index) => {
|
|
|
- this.setState({
|
|
|
- currentTapindex: index
|
|
|
- })
|
|
|
- }
|
|
|
- renderItem = (item, index) => {
|
|
|
- return (
|
|
|
- <TouchableOpacity style={this.state.currentTapindex === index ? styles.itemWrapperTap : styles.itemWrapperNormal} onPress={() => { this.itemTap(index) }} key={index}>
|
|
|
- <Text style={this.state.currentTapindex === index ? styles.timeLengthTap : styles.timeLength}>{item.title}</Text>
|
|
|
- <Text style={this.state.currentTapindex === index ? styles.priceTap : styles.price}>￥{item.price}元</Text>
|
|
|
- <Text style={this.state.currentTapindex === index ? styles.originPriceTap : styles.originPrice}>原价:￥{item.originPrice}</Text>
|
|
|
- </TouchableOpacity>
|
|
|
- )
|
|
|
- }
|
|
|
- dialogComeout = (index) => {
|
|
|
- if (index) {
|
|
|
- this.setState({
|
|
|
- ifDialogShow: true
|
|
|
- }, () => {
|
|
|
- Animated.timing(
|
|
|
- this.state.slideAnim,
|
|
|
- {
|
|
|
- toValue: 0,
|
|
|
- duration: 300,
|
|
|
- }
|
|
|
- ).start();
|
|
|
- })
|
|
|
- } else {
|
|
|
- Animated.timing(
|
|
|
- this.state.slideAnim,
|
|
|
- {
|
|
|
- toValue: -150,
|
|
|
- duration: 200,
|
|
|
- }
|
|
|
- ).start();
|
|
|
- setTimeout(() => {
|
|
|
- this.setState({
|
|
|
- ifDialogShow: false
|
|
|
- })
|
|
|
- }, 210)
|
|
|
- }
|
|
|
+ state = {
|
|
|
+ shopData: [
|
|
|
+ { title: '1个月', originPrice: '199', price: '49' },
|
|
|
+ { title: '12个月', originPrice: '499', price: '199' }
|
|
|
+ ],
|
|
|
+ currentTapindex: 0,
|
|
|
+ slideAnim: new Animated.Value(-150),
|
|
|
+ ifDialogShow: false,
|
|
|
+ payType: 1,
|
|
|
+ ticketPrice: 0
|
|
|
+ };
|
|
|
+ itemTap = (index) => {
|
|
|
+ this.setState({
|
|
|
+ currentTapindex: index
|
|
|
+ });
|
|
|
+ };
|
|
|
+ renderItem = (item, index) => {
|
|
|
+ return (
|
|
|
+ <TouchableOpacity
|
|
|
+ style={this.state.currentTapindex === index ? styles.itemWrapperTap : styles.itemWrapperNormal}
|
|
|
+ onPress={() => {
|
|
|
+ this.itemTap(index);
|
|
|
+ }}
|
|
|
+ key={index}
|
|
|
+ >
|
|
|
+ <Text style={this.state.currentTapindex === index ? styles.timeLengthTap : styles.timeLength}>
|
|
|
+ {item.title}
|
|
|
+ </Text>
|
|
|
+ <Text style={this.state.currentTapindex === index ? styles.priceTap : styles.price}>
|
|
|
+ ￥{item.price}元
|
|
|
+ </Text>
|
|
|
+ <Text style={this.state.currentTapindex === index ? styles.originPriceTap : styles.originPrice}>
|
|
|
+ 原价:￥{item.originPrice}
|
|
|
+ </Text>
|
|
|
+ </TouchableOpacity>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ dialogComeout = (index) => {
|
|
|
+ if (index) {
|
|
|
+ this.setState(
|
|
|
+ {
|
|
|
+ ifDialogShow: true
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ Animated.timing(this.state.slideAnim, {
|
|
|
+ toValue: 0,
|
|
|
+ duration: 300
|
|
|
+ }).start();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ Animated.timing(this.state.slideAnim, {
|
|
|
+ toValue: -150,
|
|
|
+ duration: 200
|
|
|
+ }).start();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.setState({
|
|
|
+ ifDialogShow: false
|
|
|
+ });
|
|
|
+ }, 210);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ setPayMethod = (type) => {
|
|
|
+ this.setState(
|
|
|
+ {
|
|
|
+ payType: type
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.dialogComeout(false);
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ };
|
|
|
+ choseTicket = () => {
|
|
|
+ this.toNextPage('Ticket', { choseTicketCallBack: this.choseTicketCallBack.bind(this) });
|
|
|
+ };
|
|
|
+ choseTicketCallBack(item) {
|
|
|
+ /**
|
|
|
+ * type: 1,
|
|
|
+ price: 12,
|
|
|
+ num: 6,
|
|
|
+ time: '2019-12-12'
|
|
|
+ *
|
|
|
+ */
|
|
|
+ this.setState({
|
|
|
+ ticketPrice: item.price
|
|
|
+ });
|
|
|
+ }
|
|
|
+ pay = () => {
|
|
|
+ switch (this.state.payType) {
|
|
|
+ case 1:
|
|
|
+ //微信支付
|
|
|
+ wechat.pay();
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ //阿里支付
|
|
|
+ let params = {
|
|
|
+ partner: 'asdfasdf', //app_id
|
|
|
+ seller_id: '115681592@qq.com', //下单账号，用的芮总QQ邮箱，人家说没有可不填，但为了代表下单身份才用芮总QQ邮箱的
|
|
|
+ out_trade_no: 'ALIPAY15307684880120000000001', //第三方订单号
|
|
|
+ subject: '描述',
|
|
|
+ body: '',
|
|
|
+ total_fee: '0.01', //价格
|
|
|
+ notify_url: 'http://xx.xx.xx.xx/api/0/alipay/alipayCallback', //回调地址
|
|
|
+ service: 'm.pay',
|
|
|
+ payment_type: '1',
|
|
|
+ _input_charset: 'utf-8',
|
|
|
+ it_b_pay: '30m',
|
|
|
+ sign: 'sdfasdf', //签名
|
|
|
+ sign_type: 'RSA'
|
|
|
+ };
|
|
|
+ aliPay.pay(params);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <View style={{ flex: 1 }}>
|
|
|
+ <View
|
|
|
+ style={{
|
|
|
+ height: 30,
|
|
|
+ marginTop: 30
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <CourseTitle
|
|
|
+ width={this.getWindowWidth()}
|
|
|
+ title="VIP购买"
|
|
|
+ lefttype={1}
|
|
|
+ textcolor={'#231F20'}
|
|
|
+ backPress={() => this.goBack()}
|
|
|
+ // backPress={() => alert("左侧按钮")}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ <View style={{ flex: 0.02, backgroundColor: 'rgba(242, 242, 242, 1)' }} />
|
|
|
+ <View style={styles.top}>
|
|
|
+ <Text style={styles.title}>套餐选择</Text>
|
|
|
+ <View>{this.state.shopData.map((item, index) => this.renderItem(item, index))}</View>
|
|
|
+ </View>
|
|
|
+ <View style={{ flex: 0.01, backgroundColor: 'rgba(242, 242, 242, 1)' }} />
|
|
|
+ <TouchableOpacity style={styles.payment} activeOpacity={1} onPress={() => this.dialogComeout(true)}>
|
|
|
+ <Text style={styles.left}>支付方式</Text>
|
|
|
+ <View style={styles.right}>
|
|
|
+ {this.state.payType === 1 ? (
|
|
|
+ <Text style={styles.method}>微信支付</Text>
|
|
|
+ ) : (
|
|
|
+ <Text style={styles.method}>支付宝支付</Text>
|
|
|
+ )}
|
|
|
|
|
|
- }
|
|
|
- setPayMethod = (type) => {
|
|
|
- this.setState({
|
|
|
- payType: type
|
|
|
- },()=>{
|
|
|
- setTimeout(() => {
|
|
|
- this.dialogComeout(false)
|
|
|
- }, 100)
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
- render() {
|
|
|
- return (
|
|
|
- <View style={{ flex: 1 }}>
|
|
|
- <View
|
|
|
- style={{
|
|
|
- height: 30,
|
|
|
- marginTop: 30
|
|
|
- }}
|
|
|
- >
|
|
|
- <CourseTitle
|
|
|
- width={this.getWindowWidth()}
|
|
|
- title="VIP购买"
|
|
|
- lefttype={1}
|
|
|
- textcolor={"#231F20"}
|
|
|
- backPress={() => this.goBack()}
|
|
|
- // backPress={() => alert("左侧按钮")}
|
|
|
- />
|
|
|
- </View>
|
|
|
- <View style={styles.top}>
|
|
|
- <Text style={styles.title}>套餐选择</Text>
|
|
|
- <View>
|
|
|
- {this.state.shopData.map((item, index) => this.renderItem(item, index))}
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- <TouchableOpacity style={styles.payment} onPress={() => this.dialogComeout(true)}>
|
|
|
- <Text style={styles.left}>支付方式</Text>
|
|
|
- <View style={styles.right}>
|
|
|
- <Text style={styles.method}>微信支付</Text>
|
|
|
- <Image source={require('../images/common/arrowRight.png')} />
|
|
|
- </View>
|
|
|
- </TouchableOpacity>
|
|
|
- <View style={styles.bottom}>
|
|
|
- <Text style={styles.bottomLeft}>￥{this.state.shopData[this.state.currentTapindex].price}元</Text>
|
|
|
- <TouchableOpacity style={styles.bottomRight}>
|
|
|
- <Text style={styles.bottomRightText}>支付</Text>
|
|
|
- </TouchableOpacity>
|
|
|
- </View>
|
|
|
- {
|
|
|
- this.state.ifDialogShow
|
|
|
- ?
|
|
|
- <TouchableHighlight
|
|
|
- onPress={() => { this.dialogComeout(false) }}
|
|
|
- style={{ ...styles.dialog }}
|
|
|
- underlayColor={0.1}
|
|
|
- >
|
|
|
- <Animated.View
|
|
|
- style={{ ...styles.payMethod, bottom: this.state.slideAnim }}
|
|
|
- onPress={() => { alert(12311) }}
|
|
|
- >
|
|
|
- <Text style={styles.payText}>选择支付方式</Text>
|
|
|
- <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(1)}>
|
|
|
- <View style={styles.dialogRow}>
|
|
|
- <Image style={styles.payIcon} source={require('../images/common/wxPay.png')} />
|
|
|
- <Text>微信支付</Text>
|
|
|
- </View>
|
|
|
- {
|
|
|
- this.state.payType === 1
|
|
|
- ?
|
|
|
- <Image source={require('../images/common/check.png')} />
|
|
|
- :
|
|
|
- null
|
|
|
- }
|
|
|
+ <Image source={require('../images/common/arrowRight.png')} />
|
|
|
+ </View>
|
|
|
+ </TouchableOpacity>
|
|
|
+ <TouchableOpacity style={styles.payment} activeOpacity={1} onPress={this.choseTicket.bind(this)}>
|
|
|
+ <Text style={styles.left}>使用抵用券</Text>
|
|
|
+ <View style={styles.right}>
|
|
|
+ <Text style={styles.method}>-￥{this.state.ticketPrice}元</Text>
|
|
|
+ <Image source={require('../images/common/arrowRight.png')} />
|
|
|
+ </View>
|
|
|
+ </TouchableOpacity>
|
|
|
+ <View style={{ flex: 0.01, backgroundColor: 'rgba(242, 242, 242, 1)' }} />
|
|
|
+ <View>
|
|
|
+ <Text style={{ fontSize: 14, width: '100%', textAlignVertical: 'center', textAlign: 'center' }}>
|
|
|
+ 开通会员即时生效，有任何问题请联系我们。
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ <View style={styles.bottom}>
|
|
|
+ {this.state.ticketPrice > 0 ? (
|
|
|
+ (price = (
|
|
|
+ <Text style={styles.bottomLeft}>
|
|
|
+ ￥{parseInt(this.state.shopData[this.state.currentTapindex].price) -
|
|
|
+ parseInt(this.state.ticketPrice)}元
|
|
|
+ </Text>
|
|
|
+ ))
|
|
|
+ ) : (
|
|
|
+ <Text style={styles.bottomLeft}>￥{this.state.shopData[this.state.currentTapindex].price}元</Text>
|
|
|
+ )}
|
|
|
|
|
|
- </TouchableOpacity>
|
|
|
- {/* <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(2)}>
|
|
|
- <View style={styles.dialogRow}>
|
|
|
- <Image style={styles.payIcon} source={require('../images/common/aliPay.png')} />
|
|
|
- <Text>支付宝支付</Text>
|
|
|
- </View>
|
|
|
- {
|
|
|
- this.state.payType === 2
|
|
|
- ?
|
|
|
- <Image source={require('../images/common/check.png')} />
|
|
|
- :
|
|
|
- null
|
|
|
- }
|
|
|
- </TouchableOpacity> */}
|
|
|
- <TextInput style={styles.payDialog} />
|
|
|
- </Animated.View>
|
|
|
- </TouchableHighlight>
|
|
|
- :
|
|
|
- null
|
|
|
- }
|
|
|
+ <TouchableOpacity style={styles.bottomRight} onPress={this.pay.bind(this)}>
|
|
|
+ <Text style={styles.bottomRightText}>支付</Text>
|
|
|
+ </TouchableOpacity>
|
|
|
+ </View>
|
|
|
+ {this.state.ifDialogShow ? (
|
|
|
+ <TouchableHighlight
|
|
|
+ onPress={() => {
|
|
|
+ this.dialogComeout(false);
|
|
|
+ }}
|
|
|
+ style={{ ...styles.dialog }}
|
|
|
+ underlayColor={0.1}
|
|
|
+ >
|
|
|
+ <Animated.View
|
|
|
+ style={{ ...styles.payMethod, bottom: this.state.slideAnim }}
|
|
|
+ onPress={() => {
|
|
|
+ alert(12311);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Text style={styles.payText}>选择支付方式</Text>
|
|
|
+ <TouchableOpacity
|
|
|
+ activeOpacity={0.9}
|
|
|
+ style={styles.payDialog}
|
|
|
+ onPress={() => this.setPayMethod(1)}
|
|
|
+ >
|
|
|
+ <View style={styles.dialogRow}>
|
|
|
+ <Image style={styles.payIcon} source={require('../images/common/wxPay.png')} />
|
|
|
+ <Text>微信支付</Text>
|
|
|
+ </View>
|
|
|
+ {this.state.payType === 1 ? (
|
|
|
+ <Image source={require('../images/common/check.png')} />
|
|
|
+ ) : null}
|
|
|
+ </TouchableOpacity>
|
|
|
+ <TouchableOpacity
|
|
|
+ activeOpacity={0.9}
|
|
|
+ style={styles.payDialog}
|
|
|
+ onPress={() => this.setPayMethod(2)}
|
|
|
+ >
|
|
|
+ <View style={styles.dialogRow}>
|
|
|
+ <Image style={styles.payIcon} source={require('../images/common/aliPay.png')} />
|
|
|
+ <Text>支付宝支付</Text>
|
|
|
+ </View>
|
|
|
+ {this.state.payType === 2 ? (
|
|
|
+ <Image source={require('../images/common/check.png')} />
|
|
|
+ ) : null}
|
|
|
+ </TouchableOpacity>
|
|
|
+ {/* <TextInput style={styles.payDialog} /> */}
|
|
|
+ </Animated.View>
|
|
|
+ </TouchableHighlight>
|
|
|
+ ) : null}
|
|
|
|
|
|
- {/* <Modal
|
|
|
+ {/* <Modal
|
|
|
animationType="none "
|
|
|
transparent={true}
|
|
|
visible={true}
|
|
|
@@ -179,163 +261,162 @@ export default class Buy extends BasePage {
|
|
|
}}
|
|
|
|
|
|
></Modal> */}
|
|
|
- </View>
|
|
|
-
|
|
|
- )
|
|
|
- }
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
- top: {
|
|
|
- width: Dimensions.width,
|
|
|
- flexDirection: 'column',
|
|
|
- alignItems: 'center',
|
|
|
- paddingBottom: 20
|
|
|
- },
|
|
|
- title: {
|
|
|
- fontSize: 20,
|
|
|
- color: '#a8674d',
|
|
|
- marginTop: 22,
|
|
|
- },
|
|
|
- itemWrapperNormal: {
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: '#a8674d',
|
|
|
- borderRadius: 27,
|
|
|
- backgroundColor: '#fff',
|
|
|
- flexDirection: 'row',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'space-around',
|
|
|
- width: '86%',
|
|
|
- height: Dimensions.getHeight(53),
|
|
|
- marginTop: 20,
|
|
|
- },
|
|
|
- itemWrapperTap: {
|
|
|
- // borderWidth: 1,
|
|
|
- // borderColor: '#a8674d',
|
|
|
- borderRadius: 27,
|
|
|
- backgroundColor: '#ff7525',
|
|
|
- flexDirection: 'row',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'space-around',
|
|
|
- width: '86%',
|
|
|
- height: Dimensions.getHeight(53),
|
|
|
- marginTop: 20,
|
|
|
- },
|
|
|
- originPriceTap: {
|
|
|
- fontSize: 14,
|
|
|
- color: '#fff',
|
|
|
- textDecorationLine: 'line-through'
|
|
|
- },
|
|
|
- originPrice: {
|
|
|
- fontSize: 14,
|
|
|
- color: '#a8674d',
|
|
|
- textDecorationLine: 'line-through'
|
|
|
- },
|
|
|
- priceTap: {
|
|
|
- fontSize: 20,
|
|
|
- color: '#fff',
|
|
|
- },
|
|
|
- price: {
|
|
|
- fontSize: 20,
|
|
|
- color: '#a8674d',
|
|
|
- },
|
|
|
- timeLengthTap: {
|
|
|
- fontSize: 18,
|
|
|
- color: '#fff',
|
|
|
- },
|
|
|
- timeLength: {
|
|
|
- fontSize: 18,
|
|
|
- color: '#a8674d',
|
|
|
- },
|
|
|
- payment: {
|
|
|
- flexDirection: 'row',
|
|
|
- alignItems: 'center',
|
|
|
- width: Dimensions.width,
|
|
|
- height: 60,
|
|
|
- justifyContent: 'space-between',
|
|
|
- alignItems: 'center',
|
|
|
- borderColor: '#f3f2f7',
|
|
|
- borderTopWidth: 6,
|
|
|
- borderBottomWidth: 6,
|
|
|
- paddingHorizontal: 33
|
|
|
- },
|
|
|
- left: {
|
|
|
- fontSize: 16
|
|
|
- },
|
|
|
- right: {
|
|
|
- flexDirection: 'row',
|
|
|
- alignItems: 'center'
|
|
|
- },
|
|
|
- method: {
|
|
|
- color: '#a8674d',
|
|
|
- fontSize: 16,
|
|
|
- marginRight: 7
|
|
|
- },
|
|
|
- bottom: {
|
|
|
- width: Dimensions.width,
|
|
|
- height: 60,
|
|
|
- flexDirection: 'row',
|
|
|
- position: 'absolute',
|
|
|
- bottom: 0,
|
|
|
- },
|
|
|
- bottomLeft: {
|
|
|
- width: '58%',
|
|
|
- textAlign: 'center',
|
|
|
- lineHeight: 60,
|
|
|
- color: '#a8674d',
|
|
|
- fontSize: 20
|
|
|
- },
|
|
|
- bottomRight: {
|
|
|
- width: '42%',
|
|
|
- fontSize: 16,
|
|
|
- color: '#fff',
|
|
|
- backgroundColor: '#f5880d',
|
|
|
- alignItems: 'center'
|
|
|
- },
|
|
|
- bottomRightText: {
|
|
|
- fontSize: 20,
|
|
|
- color: '#fff',
|
|
|
- textAlign: 'center',
|
|
|
- lineHeight: 60,
|
|
|
- },
|
|
|
- dialog: {
|
|
|
- width: Dimensions.width,
|
|
|
- height: Dimensions.height,
|
|
|
- position: 'absolute',
|
|
|
- backgroundColor: 'rgba(0,0,0,0.4)',
|
|
|
-
|
|
|
- },
|
|
|
- payMethod: {
|
|
|
- width: Dimensions.width,
|
|
|
- height: 150,
|
|
|
- position: 'absolute',
|
|
|
- // bottom: 0,
|
|
|
- backgroundColor: '#fff',
|
|
|
- flexDirection: 'column',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'flex-start'
|
|
|
- },
|
|
|
- payDialog: {
|
|
|
- width: '90%',
|
|
|
- borderTopWidth: 1,
|
|
|
- borderColor: '#e4e4e4',
|
|
|
- flexDirection: 'row',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'space-between',
|
|
|
- flex: 1
|
|
|
- },
|
|
|
- dialogRow: {
|
|
|
- flexDirection: 'row',
|
|
|
- alignItems: 'center',
|
|
|
- },
|
|
|
- payIcon: {
|
|
|
- marginRight: 17
|
|
|
- },
|
|
|
- payText: {
|
|
|
- fontSize: 16,
|
|
|
- color: '#191919',
|
|
|
- alignContent: 'center',
|
|
|
- flex: 1,
|
|
|
- lineHeight: 50
|
|
|
- }
|
|
|
-})
|
|
|
+ top: {
|
|
|
+ width: Dimensions.width,
|
|
|
+ flexDirection: 'column',
|
|
|
+ alignItems: 'center',
|
|
|
+ paddingBottom: 20
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: '#a8674d',
|
|
|
+ marginTop: 22
|
|
|
+ },
|
|
|
+ itemWrapperNormal: {
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#a8674d',
|
|
|
+ borderRadius: 27,
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ flexDirection: 'row',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'space-around',
|
|
|
+ width: '86%',
|
|
|
+ height: Dimensions.getHeight(53),
|
|
|
+ marginTop: 20
|
|
|
+ },
|
|
|
+ itemWrapperTap: {
|
|
|
+ // borderWidth: 1,
|
|
|
+ // borderColor: '#a8674d',
|
|
|
+ borderRadius: 27,
|
|
|
+ backgroundColor: '#ff7525',
|
|
|
+ flexDirection: 'row',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'space-around',
|
|
|
+ width: '86%',
|
|
|
+ height: Dimensions.getHeight(53),
|
|
|
+ marginTop: 20
|
|
|
+ },
|
|
|
+ originPriceTap: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#fff',
|
|
|
+ textDecorationLine: 'line-through'
|
|
|
+ },
|
|
|
+ originPrice: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#a8674d',
|
|
|
+ textDecorationLine: 'line-through'
|
|
|
+ },
|
|
|
+ priceTap: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ price: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: '#a8674d'
|
|
|
+ },
|
|
|
+ timeLengthTap: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ timeLength: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: '#a8674d'
|
|
|
+ },
|
|
|
+ payment: {
|
|
|
+ flexDirection: 'row',
|
|
|
+ alignItems: 'center',
|
|
|
+ width: Dimensions.width,
|
|
|
+ height: 60,
|
|
|
+ justifyContent: 'space-between',
|
|
|
+ alignItems: 'center',
|
|
|
+ borderColor: '#f3f2f7',
|
|
|
+ borderTopWidth: 6,
|
|
|
+ borderBottomWidth: 6,
|
|
|
+ paddingHorizontal: 33
|
|
|
+ },
|
|
|
+ left: {
|
|
|
+ fontSize: 16
|
|
|
+ },
|
|
|
+ right: {
|
|
|
+ flexDirection: 'row',
|
|
|
+ alignItems: 'center'
|
|
|
+ },
|
|
|
+ method: {
|
|
|
+ color: '#a8674d',
|
|
|
+ fontSize: 16,
|
|
|
+ marginRight: 7
|
|
|
+ },
|
|
|
+ bottom: {
|
|
|
+ width: Dimensions.width,
|
|
|
+ height: 60,
|
|
|
+ flexDirection: 'row',
|
|
|
+ position: 'absolute',
|
|
|
+ bottom: 0
|
|
|
+ },
|
|
|
+ bottomLeft: {
|
|
|
+ width: '58%',
|
|
|
+ textAlign: 'center',
|
|
|
+ lineHeight: 60,
|
|
|
+ color: '#a8674d',
|
|
|
+ fontSize: 20
|
|
|
+ },
|
|
|
+ bottomRight: {
|
|
|
+ width: '42%',
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#fff',
|
|
|
+ backgroundColor: '#f5880d',
|
|
|
+ alignItems: 'center'
|
|
|
+ },
|
|
|
+ bottomRightText: {
|
|
|
+ fontSize: 20,
|
|
|
+ color: '#fff',
|
|
|
+ textAlign: 'center',
|
|
|
+ lineHeight: 60
|
|
|
+ },
|
|
|
+ dialog: {
|
|
|
+ width: Dimensions.width,
|
|
|
+ height: Dimensions.height,
|
|
|
+ position: 'absolute',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0.4)'
|
|
|
+ },
|
|
|
+ payMethod: {
|
|
|
+ width: Dimensions.width,
|
|
|
+ height: 150,
|
|
|
+ position: 'absolute',
|
|
|
+ // bottom: 0,
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ flexDirection: 'column',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'flex-start'
|
|
|
+ },
|
|
|
+ payDialog: {
|
|
|
+ width: '90%',
|
|
|
+ borderTopWidth: 1,
|
|
|
+ borderColor: '#e4e4e4',
|
|
|
+ flexDirection: 'row',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'space-between',
|
|
|
+ flex: 1
|
|
|
+ },
|
|
|
+ dialogRow: {
|
|
|
+ flex: 1,
|
|
|
+ flexDirection: 'row',
|
|
|
+ alignItems: 'center'
|
|
|
+ },
|
|
|
+ payIcon: {
|
|
|
+ marginRight: 17
|
|
|
+ },
|
|
|
+ payText: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#191919',
|
|
|
+ alignContent: 'center',
|
|
|
+ flex: 1,
|
|
|
+ lineHeight: 50
|
|
|
+ }
|
|
|
+});
|
