Skip to content

B
bh_face_counter
Commit 8cb8c40a by zeven
Options

优化刷卡弹窗效果

parent 57bcc67b
Showing with 515 additions and 468 deletions
android @ 6fc46902
Subproject commit fa20326dbf101fa51561d92998b181f8d46e5ede Subproject commit 6fc469027cd79cc658acbe06d1a70214859ea480
src/components/ModalView.js 0 → 100644
import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
class ModalView extends Component {
render() {
const {visible, children} = this.props;
return visible ? (
<View style={styles.modal} visible={visible}>
{children}
</View>
) : null;
}
}
const styles = StyleSheet.create({
modal: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
// backgroundColor: 'transparent',
zIndex: 999,
},
});
export default ModalView;
src/models/card.js deleted 100644 → 0
export default {
namespace: 'card',
state: false,
reducers: {
change(bool) {
return !bool;
},
},
};
src/models/goods.js
...@@ -8,6 +8,7 @@ export default { ...@@ -8,6 +8,7 @@ export default {
total: 0, total: 0,
preTotal: 0, preTotal: 0,
status: -1, status: -1,
cardVisible: false,
}, },
reducers: { reducers: {
setOrder(state, {data}) { setOrder(state, {data}) {
...@@ -21,6 +22,10 @@ export default { ...@@ -21,6 +22,10 @@ export default {
state.bags = data; state.bags = data;
return {...state}; return {...state};
}, },
cardVisible(state, {visible}) {
state.cardVisible = visible;
return {...state};
},
}, },
effects: { effects: {
*getBags(action, {put, call}) { *getBags(action, {put, call}) {
......
src/models/index.js
...@@ -11,7 +11,6 @@ import store from './store'; ...@@ -11,7 +11,6 @@ import store from './store';
import agora from './agora'; import agora from './agora';
import lucky from './lucky'; import lucky from './lucky';
import searchGoods from './searchGoods'; import searchGoods from './searchGoods';
import card from './card';
const {width: _width, height: _height} = Dimensions.get('window'); const {width: _width, height: _height} = Dimensions.get('window');
...@@ -80,5 +79,4 @@ export default [ ...@@ -80,5 +79,4 @@ export default [
agora, agora,
lucky, lucky,
searchGoods, searchGoods,
card,
]; ];
src/pages/CounterMixins.js
...@@ -138,17 +138,22 @@ const CounterMixins = ComposeComponent => { ...@@ -138,17 +138,22 @@ const CounterMixins = ComposeComponent => {
cardId, cardId,
}) })
.then(async ({data}) => { .then(async ({data}) => {
this.props.dispatch({
type: 'goods/cardVisible',
visible: false,
});
if (data.code === 1) { if (data.code === 1) {
this.orderId = data.data.orderId; this.orderId = data.data.orderId;
await this.successPay(true); await this.successPay(true);
} else { } else {
Toast.hide(); Toast.hide();
Speech.speak(data.msg); Speech.speak(data.msg);
this.setState({voiceModal: true, voiceTitle: data.msg});
} }
}); });
setTimeout(() => { setTimeout(() => {
this.setState({voiceModal: false}); this.setState({voiceModal: false});
}, 2000); }, 3000);
}; };
componentWillUnmount = () => { componentWillUnmount = () => {
...@@ -581,7 +586,7 @@ const CounterMixins = ComposeComponent => { ...@@ -581,7 +586,7 @@ const CounterMixins = ComposeComponent => {
}; };
submitBarcode = async barcode => { submitBarcode = async barcode => {
if (this.props.card) { if (this.props.goods.cardVisible) {
return await this.handleCard(barcode || this.barcode); return await this.handleCard(barcode || this.barcode);
} }
this.errGood = null; this.errGood = null;
...@@ -1023,11 +1028,10 @@ const CounterMixins = ComposeComponent => { ...@@ -1023,11 +1028,10 @@ const CounterMixins = ComposeComponent => {
}; };
} }
return connect(({goods, admin, store, card}) => ({ return connect(({goods, admin, store}) => ({
goods, goods,
admin, admin,
store, store,
card,
}))(Mixins); }))(Mixins);
}; };
......
src/pages/VerticalPage.js
...@@ -9,6 +9,7 @@ import CounterMixins from './CounterMixins'; ...@@ -9,6 +9,7 @@ import CounterMixins from './CounterMixins';
import NP from '../utils/np'; import NP from '../utils/np';
import AutoClick from '../utils/AutoClick'; import AutoClick from '../utils/AutoClick';
import Touch from '../components/Touch'; import Touch from '../components/Touch';
import ModalView from '../components/ModalView';
import counterText from '../assets/Vertical/counterText.png'; import counterText from '../assets/Vertical/counterText.png';
import img24h from '../assets/Vertical/24h.png'; import img24h from '../assets/Vertical/24h.png';
import phone from '../assets/Vertical/phone.png'; import phone from '../assets/Vertical/phone.png';
...@@ -50,6 +51,7 @@ class VerticalPage extends Component { ...@@ -50,6 +51,7 @@ class VerticalPage extends Component {
logo: '', logo: '',
priceVisible: true, priceVisible: true,
isCard: false, isCard: false,
cardVisible: false,
}; };
async componentWillMount() { async componentWillMount() {
...@@ -138,16 +140,12 @@ class VerticalPage extends Component { ...@@ -138,16 +140,12 @@ class VerticalPage extends Component {
group, group,
}); });
if (data.code === 1 && data.data) { if (data.code === 1 && data.data) {
if (data.data.cardCounter) { const state = {priceVisible: data.data.priceVisible};
if (data.data.cardCounter)
// 是否支持刷卡 // 是否支持刷卡
this.setState({ state.isCard = true;
isCard: true, if (data.data.logo) state.logo = `${ossLink}/${data.data.logo}`;
}); this.setState(state);
}
await this.setState({
logo: `${ossLink}/${data.data.logo}`,
priceVisible: data.data.priceVisible,
});
} }
}; };
...@@ -546,11 +544,22 @@ class VerticalPage extends Component { ...@@ -546,11 +544,22 @@ class VerticalPage extends Component {
}; };
cardPayPay = async () => { cardPayPay = async () => {
Speech.speak('请刷卡'); const {goodsArr} = this.props;
Toast.loading('请刷卡', 2000, () => { if (goodsArr.length === 0) {
this.props.dispatch({type: 'card/change'}); this.props.speak('请先扫描商品条码，再刷卡付款', true);
return;
}
Speech.speak('请刷卡付款');
this.props.dispatch({
type: 'goods/cardVisible',
visible: true,
}); });
this.props.dispatch({type: 'card/change'}); setTimeout(() => {
this.props.dispatch({
type: 'goods/cardVisible',
visible: false,
});
}, 8000);
}; };
render() { render() {
...@@ -610,434 +619,459 @@ class VerticalPage extends Component { ...@@ -610,434 +619,459 @@ class VerticalPage extends Component {
const facepay = const facepay =
this.state.faceType === 'wxpay' ? this.wxFacepay : this.smilepay; this.state.faceType === 'wxpay' ? this.wxFacepay : this.smilepay;
return ( return (
<View style={styles.main}> <View style={{flex: 1, position: 'relative'}}>
{goodsArr.length === 0 && stype === 'guard' ? ( <View style={styles.main}>
<View style={styles.guardModal}> {goodsArr.length === 0 && stype === 'guard' ? (
<View style={styles.guardModal_image}> <View style={styles.guardModal}>
<Image style={styles.Imageee} source={guide} /> <View style={styles.guardModal_image}>
<Image style={styles.Imageee} source={guide} />
</View>
<View style={styles.guardModal_button}>
<Touch onPress={() => this.onCall()}>
<View style={styles.guardModal_button_call}>
<Text style={styles.callText}>呼叫客服</Text>
</View>
</Touch>
<Touch onPress={() => this.onNoBuy()}>
<View style={styles.guardModal_button_nobuy}>
<Text style={styles.callText}>无购物出店</Text>
</View>
</Touch>
</View>
</View> </View>
<View style={styles.guardModal_button}> ) : null}
<Touch onPress={() => this.onCall()}> <HintPhone
<View style={styles.guardModal_button_call}> visible={hintVisible}
<Text style={styles.callText}>呼叫客服</Text> contact={contact}
</View> closeHint={this.closeHint}
</Touch> />
<Touch onPress={() => this.onNoBuy()}> <View style={styles.header}>
<View style={styles.guardModal_button_nobuy}> <View style={styles.left}>
<Text style={styles.callText}>无购物出店</Text> {logoVisible &&
</View> (logo ? (
</Touch> <Image style={styles.logo} source={{uri: logo}} />
) : (
<Image
style={styles.logo}
source={require('../assets/Vertical/logo.png')}
/>
))}
<Image style={styles.counterText} source={counterText} />
<Image source={img24h} />
</View> </View>
<Touch onPress={() => this.onCall()} style={{marginLeft: 50}}>
<View style={styles.right}>
<Image style={styles.phone} source={phone} />
<Text style={styles.number}>呼叫客服</Text>
</View>
</Touch>
</View> </View>
) : null} <View style={styles.container}>
<HintPhone <View style={{flexDirection: 'row', flex: 1}}>
visible={hintVisible} <View style={{width: '100%'}}>
contact={contact} <View style={{backgroundColor: '#fff'}}>
closeHint={this.closeHint} <View
/> style={{
<View style={styles.header}> flexDirection: 'row',
<View style={styles.left}> alignItems: 'center',
{logoVisible && justifyContent: 'center',
(logo ? ( }}>
<Image style={styles.logo} source={{uri: logo}} /> <View style={styles.firstThStyle}>
) : ( <Text style={styles.ThText}>商品名称</Text>
<Image </View>
style={styles.logo} <View style={styles.ThStyle}>
source={require('../assets/Vertical/logo.png')} <Text style={styles.ThText}>单价</Text>
/> </View>
))} <View style={styles.ThStyle}>
<Image style={styles.counterText} source={counterText} /> <Text style={styles.ThText}>数量</Text>
<Image source={img24h} /> </View>
</View> <View style={styles.ThStyleMoney}>
<Touch onPress={() => this.onCall()} style={{marginLeft: 50}}> <Text style={styles.ThText}>金额</Text>
<View style={styles.right}> </View>
<Image style={styles.phone} source={phone} /> <View />
<Text style={styles.number}>呼叫客服</Text>
</View>
</Touch>
</View>
<View style={styles.container}>
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{width: '100%'}}>
<View style={{backgroundColor: '#fff'}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={styles.firstThStyle}>
<Text style={styles.ThText}>商品名称</Text>
</View>
<View style={styles.ThStyle}>
<Text style={styles.ThText}>单价</Text>
</View>
<View style={styles.ThStyle}>
<Text style={styles.ThText}>数量</Text>
</View>
<View style={styles.ThStyleMoney}>
<Text style={styles.ThText}>金额</Text>
</View> </View>
<View />
</View> </View>
</View> <ScrollView
<ScrollView onContentSizeChange={() =>
onContentSizeChange={() => this.ref.scrollToEnd({animated: false})
this.ref.scrollToEnd({animated: false}) }
} ref={ref => (this.ref = ref)}>
ref={ref => (this.ref = ref)}> {goodsArr.map((item, index) => {
{goodsArr.map((item, index) => { return (
return ( <View
<View key={index}
key={index} style={
style={ index % 2 === 0 ? styles.evenCell : styles.oddCell
index % 2 === 0 ? styles.evenCell : styles.oddCell }>
}> <View style={styles.firstTdStyle}>
<View style={styles.firstTdStyle}> <Text style={styles.TdText} numberOfLines={1}>
<Text style={styles.TdText} numberOfLines={1}> {item.spec
{item.spec ? `${item.name}(${item.spec})` : item.name} ? `${item.name}(${item.spec})`
</Text> : item.name}
</View> </Text>
<View style={styles.TdStyle}> </View>
{item.price ? ( <View style={styles.TdStyle}>
// <Text style={styles.TdText}> {item.price ? (
// {' '} // <Text style={styles.TdText}>
// ￥{NP.round(item.price, 2).toFixed(2)}/{item.unit}{' '} // {' '}
// </Text> // ￥{NP.round(item.price, 2).toFixed(2)}/{item.unit}{' '}
<View // </Text>
style={{ <View
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
}}>
<Text
style={{ style={{
fontSize: 20, justifyContent: 'center',
textDecorationLine: 'line-through', alignItems: 'center',
color: '#999999', flexDirection: 'row',
marginRight: 5,
}}> }}>
￥{NP.round(item.prePrice, 2).toFixed(2)}
</Text>
{item.unit ? (
<Text <Text
style={{ style={{
fontSize: 25, fontSize: 20,
color: colors.textXSActive, textDecorationLine: 'line-through',
color: '#999999',
marginRight: 5,
}}> }}>
￥{NP.round(item.price, 2).toFixed(2)}/
<Text style={styles.TdText}>{item.unit}</Text>
</Text>
) : (
<Text
style={{
fontSize: 25,
color: colors.textXSActive,
}}>
￥{NP.round(item.price, 2).toFixed(2)}
</Text>
)}
</View>
) : (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
}}>
{item.unit ? (
<Text style={styles.TdText}>
￥{NP.round(item.prePrice, 2).toFixed(2)}/
{item.unit}
</Text>
) : (
<Text style={styles.TdText}>
￥{NP.round(item.prePrice, 2).toFixed(2)} ￥{NP.round(item.prePrice, 2).toFixed(2)}
</Text> </Text>
)} {item.unit ? (
</View> <Text
)} style={{
</View> fontSize: 25,
<View style={styles.TdStyle}> color: colors.textXSActive,
{item.numChange ? ( }}>
<Icon ￥{NP.round(item.price, 2).toFixed(2)}/
<Text style={styles.TdText}>{item.unit}</Text>
</Text>
) : (
<Text
style={{
fontSize: 25,
color: colors.textXSActive,
}}>
￥{NP.round(item.price, 2).toFixed(2)}
</Text>
)}
</View>
) : (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
}}>
{item.unit ? (
<Text style={styles.TdText}>
￥{NP.round(item.prePrice, 2).toFixed(2)}/
{item.unit}
</Text>
) : (
<Text style={styles.TdText}>
￥{NP.round(item.prePrice, 2).toFixed(2)}
</Text>
)}
</View>
)}
</View>
<View style={styles.TdStyle}>
{item.numChange ? (
<Icon
onPress={() =>
this.props.numRemove(item.num, index)
}
name="ios-remove-circle"
color={item.num === 1 ? '#909090' : '#00c670'}
size={35}
/>
) : (
<View />
)}
<Touch
viewWrap={false}
onPress={() => onPress={() =>
this.props.numRemove(item.num, index) item.numChange && this.props.numChange(index)
} }>
name="ios-remove-circle" <Text style={styles.TdText}> {item.num} </Text>
color={item.num === 1 ? '#909090' : '#00c670'} </Touch>
size={35} {item.numChange ? (
/> <Icon
) : ( name="ios-add-circle"
<View /> color="#00c670"
)} size={35}
<Touch onPress={() => this.props.numAdd(item.num, index)}
viewWrap={false} />
onPress={() => ) : (
item.numChange && this.props.numChange(index) <View />
}> )}
<Text style={styles.TdText}> {item.num} </Text> </View>
</Touch> <View style={styles.TdStyleMoney}>
{item.numChange ? ( {item.price ? (
<Icon <Text style={styles.TdText}>
name="ios-add-circle" {NP.round(item.price * item.num, 2).toFixed(2)}
color="#00c670" </Text>
size={35} ) : (
onPress={() => this.props.numAdd(item.num, index)} <Text style={styles.TdText}>
/> {NP.round(item.prePrice * item.num, 2).toFixed(2)}
) : ( </Text>
<View /> )}
)} <View style={styles.iconStyle}>
</View> <Icon
<View style={styles.TdStyleMoney}> style={{marginLeft: 0}}
{item.price ? ( name="ios-close-circle"
<Text style={styles.TdText}> size={35}
{NP.round(item.price * item.num, 2).toFixed(2)} color={colors.bg}
</Text> onPress={() => this.props.removeIndex(index)}
) : ( />
<Text style={styles.TdText}> </View>
{NP.round(item.prePrice * item.num, 2).toFixed(2)}
</Text>
)}
<View style={styles.iconStyle}>
<Icon
style={{marginLeft: 0}}
name="ios-close-circle"
size={35}
color={colors.bg}
onPress={() => this.props.removeIndex(index)}
/>
</View> </View>
</View> </View>
</View> );
); })}
})} </ScrollView>
</ScrollView> {/*<FlatList*/}
{/*<FlatList*/} {/* style={styles.goodsStyle}*/}
{/* style={styles.goodsStyle}*/} {/* ListHeaderComponent={this.renderHeader}*/}
{/* ListHeaderComponent={this.renderHeader}*/} {/* keyExtractor={this.keyExtractor}*/}
{/* keyExtractor={this.keyExtractor}*/} {/* horizontal={false}*/}
{/* horizontal={false}*/} {/* data={goodsArr}*/}
{/* data={goodsArr}*/} {/* renderItem={({item, index}) => this.renderCell(item, index)}*/}
{/* renderItem={({item, index}) => this.renderCell(item, index)}*/} {/*/>*/}
{/*/>*/} </View>
</View> </View>
</View> <View
<View style={
style={ goods && goods.bags.length > 0
goods && goods.bags.length > 0 ? styles.btnLowStyle
? styles.btnLowStyle : styles.btnHighStyle
: styles.btnHighStyle }>
}> {!admin.autoClick && (
{!admin.autoClick && ( <Touch
onPress={this.setting}
style={{
position: 'absolute',
width: scaleSize(100),
height: scaleSize(100),
top: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.1)',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 10,
zIndex: 999,
}}>
<Icons
name="accessibility"
style={{fontSize: setSpText(60), color: '#fff'}}
/>
</Touch>
)}
<Touch <Touch
onPress={this.setting} onPress={() => this.props.handleBarcode()}
style={{ style={{backgroundColor: '#fc4000', marginRight: 50}}>
position: 'absolute', <Text style={styles.btnText}>输入条码</Text>
width: scaleSize(100),
height: scaleSize(100),
top: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.1)',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 10,
zIndex: 999,
}}>
<Icons
name="accessibility"
style={{fontSize: setSpText(60), color: '#fff'}}
/>
</Touch> </Touch>
)} {priceVisible && (
<Touch <Touch
onPress={() => this.props.handleBarcode()} onPress={() => this.props.handleCodeless()}
style={{backgroundColor: '#fc4000', marginRight: 50}}> style={{
<Text style={styles.btnText}>输入条码</Text> backgroundColor: '#fc4000',
</Touch> marginRight: 50,
{priceVisible && ( marginLeft: 50,
}}>
<Text style={styles.btnText}>输入价格</Text>
</Touch>
)}
<Touch <Touch
onPress={() => this.props.handleCodeless()} onPress={this.props.clearList}
style={{ style={{backgroundColor: '#fc4000', marginLeft: 50}}>
backgroundColor: '#fc4000', <Text style={styles.btnText}>清除商品</Text>
marginRight: 50,
marginLeft: 50,
}}>
<Text style={styles.btnText}>输入价格</Text>
</Touch> </Touch>
)} </View>
<Touch {bagsData.map((v1, k) => {
onPress={this.props.clearList} return (
style={{backgroundColor: '#fc4000', marginLeft: 50}}> <View
<Text style={styles.btnText}>清除商品</Text> key={k}
style={goods.bags.length <= 3 ? styles.bag : styles.bagMore}>
{v1.map((v2, i) => {
return (
<Touch key={i} onPress={() => this.props.pushBag(i)}>
<View style={styles.btnBag}>
<Image
source={require('../assets/Vertical/buy.png')}
style={styles.btnImage}
/>
<Text style={styles.textBag}>{v2.name}</Text>
<Text style={styles.textBag}>{v2.price}</Text>
</View>
</Touch>
);
})}
</View>
);
})}
{/*<View style={styles.bag}>*/}
{/* {goods.bags.map((v, k) => {*/}
{/* return (*/}
{/* <Touch key={k} onPress={() => this.props.pushBag(k)}>*/}
{/* <View style={styles.btnBag}>*/}
{/* <Image*/}
{/* source={require('../assets/Vertical/buy.png')}*/}
{/* style={styles.btnImage}*/}
{/* />*/}
{/* <Text style={styles.textBag}>{v.name}</Text>*/}
{/* <Text style={styles.textBag}>{v.price}</Text>*/}
{/* </View>*/}
{/* </Touch>*/}
{/* );*/}
{/* })}*/}
{/*</View>*/}
<View style={styles.shadow} />
<Touch onPress={isCard ? this.cardPayPay : facepay}>
<View style={styles.guide}>
<Text style={styles.guideText}>点击进入</Text>
<Image
source={require('../assets/down.png')}
style={styles.down}
/>
<Text style={styles.guideText}>
{isCard ? '刷卡支付' : '人脸支付'}
</Text>
</View>
</Touch> </Touch>
</View> <View style={styles.payment}>
{bagsData.map((v1, k) => { <View style={styles.paymentLeft}>
return ( <View style={styles.barcode}>
<View <Text style={styles.leftText1}>合计:</Text>
key={k} <Text style={styles.leftText1}>数量:</Text>
style={goods.bags.length <= 3 ? styles.bag : styles.bagMore}> <Text style={styles.leftText1}>优惠:</Text>
{v1.map((v2, i) => { <View style={styles.leftLine1} />
return ( <Text style={styles.leftText1}>金额:</Text>
<Touch key={i} onPress={() => this.props.pushBag(i)}> </View>
<View style={styles.btnBag}> <View style={styles.amount}>
<Text style={styles.leftText2}>
{NP.round(
Number(totalPrice) + Number(totalCount),
2,
).toFixed(2)}
</Text>
<Text style={styles.leftText2}>
{NP.round(total, 2).toFixed(2)}
</Text>
<Text style={styles.leftText2}>
-{NP.round(totalCount, 2).toFixed(2)}
</Text>
<View style={styles.leftLine2} />
<Text style={styles.total}>
{NP.round(totalPrice, 2).toFixed(2)}
</Text>
</View>
</View>
<View style={styles.faceScan}>
<Touch onPress={isCard ? this.cardPayPay : facepay}>
<View>
{isCard ? (
<Image
source={require('../assets/Vertical/card.png')}
alt=""
/>
) : (
<Image
source={require('../assets/Vertical/face.gif')}
style={styles.faceGif}
alt=""
/>
)}
<View style={styles.facePay}>
{!isCard && (
<Image <Image
source={require('../assets/Vertical/buy.png')} source={
style={styles.btnImage} this.state.faceType === 'wxpay'
? require('../assets/Vertical/wxpay.png')
: require('../assets/Vertical/alipay01.png')
}
style={styles.payImage}
alt=""
/> />
<Text style={styles.textBag}>{v2.name}</Text> )}
<Text style={styles.textBag}>{v2.price}</Text> <Text style={styles.payText}>
</View> {isCard ? '点击刷卡支付' : '点击刷脸支付'}
</Touch> </Text>
); </View>
})} </View>
</View> </Touch>
);
})}
{/*<View style={styles.bag}>*/}
{/* {goods.bags.map((v, k) => {*/}
{/* return (*/}
{/* <Touch key={k} onPress={() => this.props.pushBag(k)}>*/}
{/* <View style={styles.btnBag}>*/}
{/* <Image*/}
{/* source={require('../assets/Vertical/buy.png')}*/}
{/* style={styles.btnImage}*/}
{/* />*/}
{/* <Text style={styles.textBag}>{v.name}</Text>*/}
{/* <Text style={styles.textBag}>{v.price}</Text>*/}
{/* </View>*/}
{/* </Touch>*/}
{/* );*/}
{/* })}*/}
{/*</View>*/}
<View style={styles.shadow} />
<Touch onPress={isCard ? this.cardPayPay : facepay}>
<View style={styles.guide}>
<Text style={styles.guideText}>点击进入</Text>
<Image
source={require('../assets/down.png')}
style={styles.down}
/>
<Text style={styles.guideText}>
{isCard ? '刷卡支付' : '人脸支付'}
</Text>
</View>
</Touch>
<View style={styles.payment}>
<View style={styles.paymentLeft}>
<View style={styles.barcode}>
<Text style={styles.leftText1}>合计:</Text>
<Text style={styles.leftText1}>数量:</Text>
<Text style={styles.leftText1}>优惠:</Text>
<View style={styles.leftLine1} />
<Text style={styles.leftText1}>金额:</Text>
</View>
<View style={styles.amount}>
<Text style={styles.leftText2}>
{NP.round(Number(totalPrice) + Number(totalCount), 2).toFixed(
2,
)}
</Text>
<Text style={styles.leftText2}>
{NP.round(total, 2).toFixed(2)}
</Text>
<Text style={styles.leftText2}>
-{NP.round(totalCount, 2).toFixed(2)}
</Text>
<View style={styles.leftLine2} />
<Text style={styles.total}>
{NP.round(totalPrice, 2).toFixed(2)}
</Text>
</View> </View>
</View> <View style={styles.paymentRight}>
<View style={styles.faceScan}> <View style={styles.paymentRightTitle}>
<Touch onPress={isCard ? this.cardPayPay : facepay}> <View style={styles.paymentRightContents}>
<View> <Text style={styles.paymentRightText}>扫码</Text>
{isCard ? ( <Text style={styles.paymentRightText}>支付</Text>
<Image <Image
source={require('../assets/Vertical/card.png')} source={require('../assets/Vertical/alipay01.png')}
style={styles.paymentRightImage}
alt="" alt=""
/> />
) : (
<Image <Image
source={require('../assets/Vertical/face.gif')} source={require('../assets/Vertical/wx.png')}
style={styles.faceGif} style={styles.paymentRightImage}
alt="" alt=""
/> />
)}
<View style={styles.facePay}>
{!isCard && (
<Image
source={
this.state.faceType === 'wxpay'
? require('../assets/Vertical/wxpay.png')
: require('../assets/Vertical/alipay01.png')
}
style={styles.payImage}
alt=""
/>
)}
<Text style={styles.payText}>
{isCard ? '点击刷卡支付' : '点击刷脸支付'}
</Text>
</View> </View>
</View> <View style={styles.paymentRightCode}>
</Touch> <QRCode
</View> logoSize={width > 801 ? 50 : scaleSize(60)}
<View style={styles.paymentRight}> // logoBackgroundColor="#fc4000"
<View style={styles.paymentRightTitle}> logo={logoVisible && require('../assets/logo2.png')}
<View style={styles.paymentRightContents}> size={width > 801 ? 200 : scaleSize(250)}
<Text style={styles.paymentRightText}>扫码</Text> value={`${qrHost || login}/#/counter-order-${
<Text style={styles.paymentRightText}>支付</Text> admin.socket
<Image }`}
source={require('../assets/Vertical/alipay01.png')} />
style={styles.paymentRightImage} </View>
alt=""
/>
<Image
source={require('../assets/Vertical/wx.png')}
style={styles.paymentRightImage}
alt=""
/>
</View>
<View style={styles.paymentRightCode}>
<QRCode
logoSize={width > 801 ? 50 : scaleSize(60)}
// logoBackgroundColor="#fc4000"
logo={logoVisible && require('../assets/logo2.png')}
size={width > 801 ? 200 : scaleSize(250)}
value={`${qrHost || login}/#/counter-order-${admin.socket}`}
/>
</View> </View>
</View> </View>
</View> </View>
</View> <View style={styles.explain}>
<View style={styles.explain}> <Text style={styles.explainText1}>付款流程：</Text>
<Text style={styles.explainText1}>付款流程：</Text> <View style={styles.step}>
<View style={styles.step}> <Text style={styles.explainText2}>1</Text>
<Text style={styles.explainText2}>1</Text> </View>
</View> <Text style={styles.code}>扫描商品条码</Text>
<Text style={styles.code}>扫描商品条码</Text> <View style={styles.step}>
<View style={styles.step}> <Text style={styles.explainText2}>2</Text>
<Text style={styles.explainText2}>2</Text> </View>
<Text style={styles.explainText1}>
{isCard ? '刷卡付款' : '微信/支付宝扫二维码或付款码付款'}
</Text>
</View> </View>
<Text style={styles.explainText1}>
{isCard ? '刷卡付款' : '微信/支付宝扫二维码或付款码付款'}
</Text>
</View> </View>
</View> {width > 801 ? (
{width > 801 ? ( <View style={styles.footer}>
<View style={styles.footer}> {adType === 'image' ? (
{adType === 'image' ? ( imgArr && imgArr.length > 0 ? (
imgArr && imgArr.length > 0 ? ( imgArr.length === 1 ? (
imgArr.length === 1 ? ( imgArr.map((v, index) => (
imgArr.map((v, index) => ( <Image
<Image key={index}
key={index} source={{uri: v}}
source={{uri: v}} style={styles.swiperImg}
style={styles.swiperImg} />
/> ))
)) ) : (
<Swiper
style={styles.swiper} // 样式
loop // 如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
autoplay // 自动轮播
autoplayTimeout={autoplayTime || 10} // 每隔10秒切换
horizontal // 水平方向，为false可设置为竖直方向
showsButtons={false} // 为false时不显示控制按钮
showsPagination={false} // 为false不显示下方圆点
>
{imgArr.map((v, index) => (
<Image
key={index}
source={{uri: v}}
style={styles.swiperImg}
/>
))}
</Swiper>
)
) : ( ) : (
<Swiper <Swiper
style={styles.swiper} // 样式 style={styles.swiper} // 样式
...@@ -1048,13 +1082,18 @@ class VerticalPage extends Component { ...@@ -1048,13 +1082,18 @@ class VerticalPage extends Component {
showsButtons={false} // 为false时不显示控制按钮 showsButtons={false} // 为false时不显示控制按钮
showsPagination={false} // 为false不显示下方圆点 showsPagination={false} // 为false不显示下方圆点
> >
{imgArr.map((v, index) => ( <Image
<Image source={require('../assets/Vertical/first.jpg')}
key={index} style={styles.swiperImg}
source={{uri: v}} />
style={styles.swiperImg} <Image
/> source={require('../assets/Vertical/second.jpg')}
))} style={styles.swiperImg}
/>
<Image
source={require('../assets/Vertical/third.jpg')}
style={styles.swiperImg}
/>
</Swiper> </Swiper>
) )
) : ( ) : (
...@@ -1080,35 +1119,27 @@ class VerticalPage extends Component { ...@@ -1080,35 +1119,27 @@ class VerticalPage extends Component {
style={styles.swiperImg} style={styles.swiperImg}
/> />
</Swiper> </Swiper>
) )}
) : ( </View>
<Swiper ) : (
style={styles.swiper} // 样式 <View />
loop // 如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。 )}
autoplay // 自动轮播 </View>
autoplayTimeout={autoplayTime || 10} // 每隔10秒切换 <ModalView visible={goods.cardVisible}>
horizontal // 水平方向，为false可设置为竖直方向 <View
showsButtons={false} // 为false时不显示控制按钮 style={{
showsPagination={false} // 为false不显示下方圆点 width: scaleSize(900),
> height: scaleSize(300),
<Image backgroundColor: 'white',
source={require('../assets/Vertical/first.jpg')} justifyContent: 'center',
style={styles.swiperImg} alignItems: 'center',
/> }}>
<Image <Text style={{fontSize: scaleSize(30), color: '#555'}}>
source={require('../assets/Vertical/second.jpg')} 请刷卡付款
style={styles.swiperImg} </Text>
/> <Image source={require('../assets/voice.gif')} />
<Image
source={require('../assets/Vertical/third.jpg')}
style={styles.swiperImg}
/>
</Swiper>
)}
</View> </View>
) : ( </ModalView>
<View />
)}
</View> </View>
); );
} }
......
yarn.lock
...@@ -5891,18 +5891,6 @@ react-native-qrcode-svg@6.0.6: ...@@ -5891,18 +5891,6 @@ react-native-qrcode-svg@6.0.6:
prop-types "^15.5.10" prop-types "^15.5.10"
qrcode "^1.3.2" qrcode "^1.3.2"
react-native-root-modal@^5.0.1:
version "5.0.1"
resolved "https://registry.npm.taobao.org/react-native-root-modal/download/react-native-root-modal-5.0.1.tgz#8b49f523f70732f1697961edc42174f81259e6c1"
integrity sha1-i0n1I/cHMvFpeWHtxCF0+BJZ5sE=
dependencies:
react-native-root-siblings "^4.0.0"
react-native-root-siblings@^4.0.0:
version "4.1.1"
resolved "https://registry.nlark.com/react-native-root-siblings/download/react-native-root-siblings-4.1.1.tgz#b7742db7634a87f507eb99a5fd699c4f10c46ab0"
integrity sha1-t3Qtt2NKh/UH65ml/WmcTxDEarA=
react-native-svg@12.1.0: react-native-svg@12.1.0:
version "12.1.0" version "12.1.0"
resolved "https://registry.npm.taobao.org/react-native-svg/download/react-native-svg-12.1.0.tgz#acfe48c35cd5fca3d5fd767abae0560c36cfc03d" resolved "https://registry.npm.taobao.org/react-native-svg/download/react-native-svg-12.1.0.tgz#acfe48c35cd5fca3d5fd767abae0560c36cfc03d"
......
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