Commit 831ce2f1 by Confettis

feat: 适配刷卡

parent 97130656
......@@ -31,6 +31,7 @@
"react-native-code-push": "^6.3.0",
"react-native-keyevent": "0.2.8",
"react-native-qrcode-svg": "6.0.6",
"react-native-root-modal": "^5.0.1",
"react-native-svg": "12.1.0",
"react-native-swiper": "1.6.0",
"react-native-vector-icons": "6.6.0",
......
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import Modal from 'react-native-root-modal';
class ModalView extends Component {
render() {
const {visible, children} = this.props;
return (
<Modal style={styles.modal} visible={visible}>
{children}
</Modal>
);
}
}
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)',
},
});
export default ModalView;
export default {
namespace: 'card',
state: false,
reducers: {
change(bool) {
return !bool;
},
},
};
......@@ -11,6 +11,7 @@ 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');
......@@ -79,4 +80,5 @@ export default [
agora,
lucky,
searchGoods,
card,
];
......@@ -125,6 +125,10 @@ const CounterMixins = ComposeComponent => {
this.listen();
};
handleCard = async cardId => {
console.log(cardId);
};
componentWillUnmount = () => {
clearInterval(this.clearListInter);
clearInterval(this.payInter);
......@@ -555,6 +559,10 @@ const CounterMixins = ComposeComponent => {
};
submitBarcode = async barcode => {
console.log(this.props.card);
if (this.props.card) {
return await this.handleCard(barcode || this.barcode);
}
this.errGood = null;
if (!window.auth) {
const msg = '系统未授权,无法查询商品';
......@@ -994,7 +1002,12 @@ const CounterMixins = ComposeComponent => {
};
}
return connect(({goods, admin, store}) => ({goods, admin, store}))(Mixins);
return connect(({goods, admin, store, card}) => ({
goods,
admin,
store,
card,
}))(Mixins);
};
const CloseButton = ({onClose, style}) => {
......
......@@ -5,7 +5,6 @@ import Swiper from 'react-native-swiper';
import QRCode from 'react-native-qrcode-svg';
import Icon from 'react-native-vector-icons/Ionicons';
import Icons from 'react-native-vector-icons/MaterialIcons';
// import { connect } from 'react-redux';
import CounterMixins from './CounterMixins';
import NP from '../utils/np';
import AutoClick from '../utils/AutoClick';
......@@ -32,13 +31,13 @@ import Smilepay from '../utils/Smilepay';
import {leaveTalkCall, onTalkCall} from '../utils/agora';
import Toast from '../components/Toast';
import {ossLink} from '../utils/config';
import ModalView from '../components/ModalView';
let pageSize = 8; // 分页大小
window.pageSize = pageSize;
// const wait = t => new Promise(resolve => setTimeout(resolve, t));
// @connect(({ app }) => ({ app }))
class VerticalPage extends Component {
state = {
contact: '',
......@@ -51,6 +50,7 @@ class VerticalPage extends Component {
logoVisible: true,
logo: '',
priceVisible: true,
isCard: false,
};
async componentWillMount() {
......@@ -139,6 +139,12 @@ class VerticalPage extends Component {
group,
});
if (data.code === 1 && data.data) {
if (data.data.cardCounter) {
// 是否支持刷卡
this.setState({
isCard: true,
});
}
await this.setState({
logo: `${ossLink}/${data.data.logo}`,
priceVisible: data.data.priceVisible,
......@@ -540,6 +546,10 @@ class VerticalPage extends Component {
}
};
cardPayPay = async () => {
this.props.dispatch({type: 'card/change'});
};
render() {
let {
admin,
......@@ -549,6 +559,7 @@ class VerticalPage extends Component {
autoplayTime,
imgArr,
adType,
card,
} = this.props;
let {
contact,
......@@ -557,6 +568,7 @@ class VerticalPage extends Component {
logo,
priceVisible,
stype,
isCard,
} = this.state;
pageSize =
goods && goods.bags.length > 0
......@@ -897,14 +909,16 @@ class VerticalPage extends Component {
{/* })}*/}
{/*</View>*/}
<View style={styles.shadow} />
<Touch onPress={facepay}>
<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}>人脸支付</Text>
<Text style={styles.guideText}>
{isCard ? '刷卡支付' : '人脸支付'}
</Text>
</View>
</Touch>
<View style={styles.payment}>
......@@ -935,14 +949,19 @@ class VerticalPage extends Component {
</View>
</View>
<View style={styles.faceScan}>
<Touch onPress={facepay}>
<Touch onPress={isCard ? this.cardPayPay : facepay}>
<View>
<Image
source={require('../assets/Vertical/face.gif')}
source={
isCard
? require('../assets/Vertical/card.png')
: require('../assets/Vertical/face.gif')
}
style={styles.faceGif}
alt=""
/>
<View style={styles.facePay}>
{!isCard && (
<Image
source={
this.state.faceType === 'wxpay'
......@@ -952,7 +971,10 @@ class VerticalPage extends Component {
style={styles.payImage}
alt=""
/>
<Text style={styles.payText}>点击刷脸支付</Text>
)}
<Text style={styles.payText}>
{this.state.isCard ? '点击刷脸支付' : '点击刷卡支付'}
</Text>
</View>
</View>
</Touch>
......@@ -960,7 +982,9 @@ class VerticalPage extends Component {
<View style={styles.paymentRight}>
<View style={styles.paymentRightTitle}>
<View style={styles.paymentRightContents}>
<Text style={styles.paymentRightText}>扫码</Text>
<Text style={styles.paymentRightText}>
{isCard ? '刷卡' : '扫码'}
</Text>
<Text style={styles.paymentRightText}>支付</Text>
<Image
source={require('../assets/Vertical/alipay01.png')}
......@@ -972,6 +996,11 @@ class VerticalPage extends Component {
style={styles.paymentRightImage}
alt=""
/>
<Image
source={require('../assets/Vertical/card.png')}
style={styles.paymentRightImage}
alt=""
/>
</View>
<View style={styles.paymentRightCode}>
<QRCode
......@@ -995,7 +1024,7 @@ class VerticalPage extends Component {
<Text style={styles.explainText2}>2</Text>
</View>
<Text style={styles.explainText1}>
微信/支付宝扫二维码或付款码付款
{isCard ? '刷卡付款' : '微信/支付宝扫二维码或付款码付款'}
</Text>
</View>
</View>
......@@ -1082,6 +1111,10 @@ class VerticalPage extends Component {
) : (
<View />
)}
<ModalView visible={card} maskClosable transparent>
<Text>请刷卡</Text>
</ModalView>
</View>
);
}
......@@ -1473,8 +1506,8 @@ const styles = {
fontSize: width > 801 ? 35 : 30,
},
paymentRightImage: {
width: width > 801 ? 50 : 40,
height: width > 801 ? 50 : 40,
width: width > 801 ? 40 : 30,
height: width > 801 ? 40 : 30,
marginTop: 5,
marginBottom: 5,
},
......
......@@ -2,7 +2,7 @@ const app = ''; // eg: .25h/.eg
export const isProd = process.env.NODE_ENV === 'production';
export const host = isProd
? `https://api${app}.vs-u.com`
: 'http://192.168.88.43:7001';
: 'http://192.168.88.88:7001';
export const login = `https://m${app}.vs-u.com`;
export const qrHost = login;
export const imgUrl = 'http://barcod.oss-cn-shenzhen.aliyuncs.com/images/';
......
......@@ -5891,6 +5891,18 @@ 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