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 {
total: 0,
preTotal: 0,
status: -1,
cardVisible: false,
},
reducers: {
setOrder(state, {data}) {
......@@ -21,6 +22,10 @@ export default {
state.bags = data;
return {...state};
},
cardVisible(state, {visible}) {
state.cardVisible = visible;
return {...state};
},
},
effects: {
*getBags(action, {put, call}) {
......
src/models/index.js
......@@ -11,7 +11,6 @@ import store from './store';
import agora from './agora';
import lucky from './lucky';
import searchGoods from './searchGoods';
import card from './card';
const {width: _width, height: _height} = Dimensions.get('window');
......@@ -80,5 +79,4 @@ export default [
agora,
lucky,
searchGoods,
card,
];
src/pages/CounterMixins.js
......@@ -138,17 +138,22 @@ const CounterMixins = ComposeComponent => {
cardId,
})
.then(async ({data}) => {
this.props.dispatch({
type: 'goods/cardVisible',
visible: false,
});
if (data.code === 1) {
this.orderId = data.data.orderId;
await this.successPay(true);
} else {
Toast.hide();
Speech.speak(data.msg);
this.setState({voiceModal: true, voiceTitle: data.msg});
}
});
setTimeout(() => {
this.setState({voiceModal: false});
}, 2000);
}, 3000);
};
componentWillUnmount = () => {
......@@ -581,7 +586,7 @@ const CounterMixins = ComposeComponent => {
};
submitBarcode = async barcode => {
if (this.props.card) {
if (this.props.goods.cardVisible) {
return await this.handleCard(barcode || this.barcode);
}
this.errGood = null;
......@@ -1023,11 +1028,10 @@ const CounterMixins = ComposeComponent => {
};
}
return connect(({goods, admin, store, card}) => ({
return connect(({goods, admin, store}) => ({
goods,
admin,
store,
card,
}))(Mixins);
};
......
src/pages/VerticalPage.js
......@@ -9,6 +9,7 @@ import CounterMixins from './CounterMixins';
import NP from '../utils/np';
import AutoClick from '../utils/AutoClick';
import Touch from '../components/Touch';
import ModalView from '../components/ModalView';
import counterText from '../assets/Vertical/counterText.png';
import img24h from '../assets/Vertical/24h.png';
import phone from '../assets/Vertical/phone.png';
......@@ -50,6 +51,7 @@ class VerticalPage extends Component {
logo: '',
priceVisible: true,
isCard: false,
cardVisible: false,
};
async componentWillMount() {
......@@ -138,16 +140,12 @@ class VerticalPage extends Component {
group,
});
if (data.code === 1 && data.data) {
if (data.data.cardCounter) {
const state = {priceVisible: data.data.priceVisible};
if (data.data.cardCounter)
// 是否支持刷卡
this.setState({
isCard: true,
});
}
await this.setState({
logo: `${ossLink}/${data.data.logo}`,
priceVisible: data.data.priceVisible,
});
state.isCard = true;
if (data.data.logo) state.logo = `${ossLink}/${data.data.logo}`;
this.setState(state);
}
};
......@@ -546,11 +544,22 @@ class VerticalPage extends Component {
};
cardPayPay = async () => {
Speech.speak('请刷卡');
Toast.loading('请刷卡', 2000, () => {
this.props.dispatch({type: 'card/change'});
const {goodsArr} = this.props;
if (goodsArr.length === 0) {
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() {
......@@ -610,434 +619,459 @@ class VerticalPage extends Component {
const facepay =
this.state.faceType === 'wxpay' ? this.wxFacepay : this.smilepay;
return (
<View style={styles.main}>
{goodsArr.length === 0 && stype === 'guard' ? (
<View style={styles.guardModal}>
<View style={styles.guardModal_image}>
<Image style={styles.Imageee} source={guide} />
<View style={{flex: 1, position: 'relative'}}>
<View style={styles.main}>
{goodsArr.length === 0 && stype === 'guard' ? (
<View style={styles.guardModal}>
<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 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>
) : null}
<HintPhone
visible={hintVisible}
contact={contact}
closeHint={this.closeHint}
/>
<View style={styles.header}>
<View style={styles.left}>
{logoVisible &&
(logo ? (
<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>
<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>
) : null}
<HintPhone
visible={hintVisible}
contact={contact}
closeHint={this.closeHint}
/>
<View style={styles.header}>
<View style={styles.left}>
{logoVisible &&
(logo ? (
<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>
<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 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 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
onContentSizeChange={() =>
this.ref.scrollToEnd({animated: false})
}
ref={ref => (this.ref = ref)}>
{goodsArr.map((item, index) => {
return (
<View
key={index}
style={
index % 2 === 0 ? styles.evenCell : styles.oddCell
}>
<View style={styles.firstTdStyle}>
<Text style={styles.TdText} numberOfLines={1}>
{item.spec ? `${item.name}(${item.spec})` : item.name}
</Text>
</View>
<View style={styles.TdStyle}>
{item.price ? (
// <Text style={styles.TdText}>
// {' '}
// ￥{NP.round(item.price, 2).toFixed(2)}/{item.unit}{' '}
// </Text>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
}}>
<Text
<ScrollView
onContentSizeChange={() =>
this.ref.scrollToEnd({animated: false})
}
ref={ref => (this.ref = ref)}>
{goodsArr.map((item, index) => {
return (
<View
key={index}
style={
index % 2 === 0 ? styles.evenCell : styles.oddCell
}>
<View style={styles.firstTdStyle}>
<Text style={styles.TdText} numberOfLines={1}>
{item.spec
? `${item.name}(${item.spec})`
: item.name}
</Text>
</View>
<View style={styles.TdStyle}>
{item.price ? (
// <Text style={styles.TdText}>
// {' '}
// ￥{NP.round(item.price, 2).toFixed(2)}/{item.unit}{' '}
// </Text>
<View
style={{
fontSize: 20,
textDecorationLine: 'line-through',
color: '#999999',
marginRight: 5,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
}}>
￥{NP.round(item.prePrice, 2).toFixed(2)}
</Text>
{item.unit ? (
<Text
style={{
fontSize: 25,
color: colors.textXSActive,
fontSize: 20,
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)}
</Text>
)}
</View>
)}
</View>
<View style={styles.TdStyle}>
{item.numChange ? (
<Icon
{item.unit ? (
<Text
style={{
fontSize: 25,
color: colors.textXSActive,
}}>
￥{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={() =>
this.props.numRemove(item.num, index)
}
name="ios-remove-circle"
color={item.num === 1 ? '#909090' : '#00c670'}
size={35}
/>
) : (
<View />
)}
<Touch
viewWrap={false}
onPress={() =>
item.numChange && this.props.numChange(index)
}>
<Text style={styles.TdText}> {item.num} </Text>
</Touch>
{item.numChange ? (
<Icon
name="ios-add-circle"
color="#00c670"
size={35}
onPress={() => this.props.numAdd(item.num, index)}
/>
) : (
<View />
)}
</View>
<View style={styles.TdStyleMoney}>
{item.price ? (
<Text style={styles.TdText}>
{NP.round(item.price * item.num, 2).toFixed(2)}
</Text>
) : (
<Text style={styles.TdText}>
{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)}
/>
item.numChange && this.props.numChange(index)
}>
<Text style={styles.TdText}> {item.num} </Text>
</Touch>
{item.numChange ? (
<Icon
name="ios-add-circle"
color="#00c670"
size={35}
onPress={() => this.props.numAdd(item.num, index)}
/>
) : (
<View />
)}
</View>
<View style={styles.TdStyleMoney}>
{item.price ? (
<Text style={styles.TdText}>
{NP.round(item.price * item.num, 2).toFixed(2)}
</Text>
) : (
<Text style={styles.TdText}>
{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>
);
})}
</ScrollView>
{/*<FlatList*/}
{/* style={styles.goodsStyle}*/}
{/* ListHeaderComponent={this.renderHeader}*/}
{/* keyExtractor={this.keyExtractor}*/}
{/* horizontal={false}*/}
{/* data={goodsArr}*/}
{/* renderItem={({item, index}) => this.renderCell(item, index)}*/}
{/*/>*/}
);
})}
</ScrollView>
{/*<FlatList*/}
{/* style={styles.goodsStyle}*/}
{/* ListHeaderComponent={this.renderHeader}*/}
{/* keyExtractor={this.keyExtractor}*/}
{/* horizontal={false}*/}
{/* data={goodsArr}*/}
{/* renderItem={({item, index}) => this.renderCell(item, index)}*/}
{/*/>*/}
</View>
</View>
</View>
<View
style={
goods && goods.bags.length > 0
? styles.btnLowStyle
: styles.btnHighStyle
}>
{!admin.autoClick && (
<View
style={
goods && goods.bags.length > 0
? styles.btnLowStyle
: styles.btnHighStyle
}>
{!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
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'}}
/>
onPress={() => this.props.handleBarcode()}
style={{backgroundColor: '#fc4000', marginRight: 50}}>
<Text style={styles.btnText}>输入条码</Text>
</Touch>
)}
<Touch
onPress={() => this.props.handleBarcode()}
style={{backgroundColor: '#fc4000', marginRight: 50}}>
<Text style={styles.btnText}>输入条码</Text>
</Touch>
{priceVisible && (
{priceVisible && (
<Touch
onPress={() => this.props.handleCodeless()}
style={{
backgroundColor: '#fc4000',
marginRight: 50,
marginLeft: 50,
}}>
<Text style={styles.btnText}>输入价格</Text>
</Touch>
)}
<Touch
onPress={() => this.props.handleCodeless()}
style={{
backgroundColor: '#fc4000',
marginRight: 50,
marginLeft: 50,
}}>
<Text style={styles.btnText}>输入价格</Text>
onPress={this.props.clearList}
style={{backgroundColor: '#fc4000', marginLeft: 50}}>
<Text style={styles.btnText}>清除商品</Text>
</Touch>
)}
<Touch
onPress={this.props.clearList}
style={{backgroundColor: '#fc4000', marginLeft: 50}}>
<Text style={styles.btnText}>清除商品</Text>
</View>
{bagsData.map((v1, k) => {
return (
<View
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>
</View>
{bagsData.map((v1, k) => {
return (
<View
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}>
<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 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
source={require('../assets/Vertical/buy.png')}
style={styles.btnImage}
source={
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>
</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>
<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>
)}
<Text style={styles.payText}>
{isCard ? '点击刷卡支付' : '点击刷脸支付'}
</Text>
</View>
</View>
</Touch>
</View>
</View>
<View style={styles.faceScan}>
<Touch onPress={isCard ? this.cardPayPay : facepay}>
<View>
{isCard ? (
<View style={styles.paymentRight}>
<View style={styles.paymentRightTitle}>
<View style={styles.paymentRightContents}>
<Text style={styles.paymentRightText}>扫码</Text>
<Text style={styles.paymentRightText}>支付</Text>
<Image
source={require('../assets/Vertical/card.png')}
source={require('../assets/Vertical/alipay01.png')}
style={styles.paymentRightImage}
alt=""
/>
) : (
<Image
source={require('../assets/Vertical/face.gif')}
style={styles.faceGif}
source={require('../assets/Vertical/wx.png')}
style={styles.paymentRightImage}
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>
</Touch>
</View>
<View style={styles.paymentRight}>
<View style={styles.paymentRightTitle}>
<View style={styles.paymentRightContents}>
<Text style={styles.paymentRightText}>扫码</Text>
<Text style={styles.paymentRightText}>支付</Text>
<Image
source={require('../assets/Vertical/alipay01.png')}
style={styles.paymentRightImage}
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 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 style={styles.explain}>
<Text style={styles.explainText1}>付款流程：</Text>
<View style={styles.step}>
<Text style={styles.explainText2}>1</Text>
</View>
<Text style={styles.code}>扫描商品条码</Text>
<View style={styles.step}>
<Text style={styles.explainText2}>2</Text>
<View style={styles.explain}>
<Text style={styles.explainText1}>付款流程：</Text>
<View style={styles.step}>
<Text style={styles.explainText2}>1</Text>
</View>
<Text style={styles.code}>扫描商品条码</Text>
<View style={styles.step}>
<Text style={styles.explainText2}>2</Text>
</View>
<Text style={styles.explainText1}>
{isCard ? '刷卡付款' : '微信/支付宝扫二维码或付款码付款'}
</Text>
</View>
<Text style={styles.explainText1}>
{isCard ? '刷卡付款' : '微信/支付宝扫二维码或付款码付款'}
</Text>
</View>
</View>
{width > 801 ? (
<View style={styles.footer}>
{adType === 'image' ? (
imgArr && imgArr.length > 0 ? (
imgArr.length === 1 ? (
imgArr.map((v, index) => (
<Image
key={index}
source={{uri: v}}
style={styles.swiperImg}
/>
))
{width > 801 ? (
<View style={styles.footer}>
{adType === 'image' ? (
imgArr && imgArr.length > 0 ? (
imgArr.length === 1 ? (
imgArr.map((v, index) => (
<Image
key={index}
source={{uri: v}}
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
style={styles.swiper} // 样式
......@@ -1048,13 +1082,18 @@ class VerticalPage extends Component {
showsButtons={false} // 为false时不显示控制按钮
showsPagination={false} // 为false不显示下方圆点
>
{imgArr.map((v, index) => (
<Image
key={index}
source={{uri: v}}
style={styles.swiperImg}
/>
))}
<Image
source={require('../assets/Vertical/first.jpg')}
style={styles.swiperImg}
/>
<Image
source={require('../assets/Vertical/second.jpg')}
style={styles.swiperImg}
/>
<Image
source={require('../assets/Vertical/third.jpg')}
style={styles.swiperImg}
/>
</Swiper>
)
) : (
......@@ -1080,35 +1119,27 @@ class VerticalPage extends Component {
style={styles.swiperImg}
/>
</Swiper>
)
) : (
<Swiper
style={styles.swiper} // 样式
loop // 如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
autoplay // 自动轮播
autoplayTimeout={autoplayTime || 10} // 每隔10秒切换
horizontal // 水平方向，为false可设置为竖直方向
showsButtons={false} // 为false时不显示控制按钮
showsPagination={false} // 为false不显示下方圆点
>
<Image
source={require('../assets/Vertical/first.jpg')}
style={styles.swiperImg}
/>
<Image
source={require('../assets/Vertical/second.jpg')}
style={styles.swiperImg}
/>
<Image
source={require('../assets/Vertical/third.jpg')}
style={styles.swiperImg}
/>
</Swiper>
)}
)}
</View>
) : (
<View />
)}
</View>
<ModalView visible={goods.cardVisible}>
<View
style={{
width: scaleSize(900),
height: scaleSize(300),
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{fontSize: scaleSize(30), color: '#555'}}>
请刷卡付款
</Text>
<Image source={require('../assets/voice.gif')} />
</View>
) : (
<View />
)}
</ModalView>
</View>
);
}
......
yarn.lock
......@@ -5891,18 +5891,6 @@ react-native-qrcode-svg@6.0.6:
prop-types "^15.5.10"
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:
version "12.1.0"
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