Skip to content

B
bh_face_counter
Commit d729545c by 钟昊
Options

没有经过测试的订单详情弹窗

parent 1285c7f2
Showing with 416 additions and 2 deletions
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/App.js
......@@ -34,6 +34,7 @@ axios.interceptors.request.use(config => {
if (window.auth) {
// 门店Token
config.headers.common.Authorization = `Bearer ${window.auth.token}`;
// console.log("Token", `Bearer ${window.auth.token}`)
}
return config;
});
......
src/components/OrderDetailMini.js 0 → 100644
import React, {Component} from 'react';
import {Modal, View, Text, Image, FlatList, ScrollView} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import ModalStyles from './Modal/styles';
import {font} from '../utils/common';
import NP from '../utils/np';
import {setSpText, scaleSize} from '../utils/screen';
const mStyles = {
...ModalStyles,
innerContainer: {
...ModalStyles.innerContainer,
},
header: {
...ModalStyles.header,
fontSize: font.title,
},
};
class OrderDetailMini extends Component {
state = {
conatct: '',
storeName: '',
};
async componentWillMount() {
let contact = await AsyncStorage.getItem('CONTACT');
let storeName = await AsyncStorage.getItem('NAME');
this.setState({
contact,
storeName,
});
}
// 生成不重复的key
keyExtractor = (item, index) => {
return String(index);
};
renderHeader = () => {
return (
<View
style={{
flex: 1,
flexDirection: 'column',
paddingLeft: scaleSize(25),
paddingRight: scaleSize(25),
}}>
<View style={{backgroundColor: '#FFFFFF'}}>
<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.ThStyle}>
<Text style={styles.ThText}>金额</Text>
</View>
</View>
</View>
<View style={styles.line} />
</View>
);
};
// 显示数据
renderCell = (item, index) => (
<View style={index % 2 === 0 ? styles.oddCell : styles.evenCell}>
<View style={styles.firstTdStyle}>
<Text style={styles.TdText} numberOfLines={1}>
{item.name}
</Text>
</View>
<View style={styles.TdStyle}>
{item.price ? (
<Text style={styles.TdText}>
{NP.round(item.price, 2).toFixed(2)}
</Text>
) : (
<Text style={styles.TdText}>
{NP.round(item.prePrice, 2).toFixed(2)}
</Text>
)}
</View>
<View style={styles.TdStyle}>
<Text style={styles.TdText}> {NP.round(item.num, 0).toFixed(0)} </Text>
</View>
<View style={styles.TdStyle}>
{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>
</View>
);
render() {
const {goodsArr, faceType, ...props} = this.props;
let totalPrice = 0; // 总价
let totalCount = 0; // 总优惠
let number = 0; // 总数量
goodsArr.map(item => {
number += item.num;
if (item.price) {
totalPrice += item.price * item.num;
totalCount += (item.prePrice - item.price) * item.num;
} else {
totalPrice += item.prePrice * item.num;
}
});
this.totalPrice = totalPrice;
this.totalCount = totalCount;
if (faceType === 'alipay') {
styles.header = {...styles.header, backgroundColor: '#1b7dc7'};
}
return (
<Modal styles={mStyles} {...props}>
<View style={styles.modalBackgroundStyle}>
<View style={styles.modal}>
<View style={styles.header}>
<View style={styles.headline}>
<Text style={styles.headTitle}>核对订单页面</Text>
</View>
</View>
{goodsArr && goodsArr.length > 0 ? (
<View style={styles.container}>
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{width: '100%'}}>
<ScrollView>
<FlatList
style={styles.goodsStyle}
ListHeaderComponent={this.renderHeader}
keyExtractor={this.keyExtractor}
horizontal={false}
data={goodsArr}
renderItem={({item, index}) =>
this.renderCell(item, index)
}
/>
</ScrollView>
</View>
</View>
<View style={styles.line} />
<View style={styles.amount}>
<View style={styles.total}>
<Text style={styles.totalText}>合计</Text>
<Text style={styles.totalText}>
￥{' '}
{NP.round(
Number(totalPrice) + Number(totalCount),
2,
).toFixed(2)}
</Text>
</View>
<View style={styles.total}>
<Text style={styles.totalText}>数量</Text>
<Text style={styles.totalText}>
{NP.round(number, 0).toFixed(0)}
</Text>
</View>
<View style={styles.total}>
<Text style={styles.totalText}>优惠</Text>
<Text style={styles.discount}>
-￥ {NP.round(totalCount, 2).toFixed(2)}
</Text>
</View>
</View>
<View style={styles.line} />
<View style={styles.realPay}>
<View style={styles.total}>
<Text style={styles.totalText}>实付金额</Text>
<Text style={styles.totalText}>
￥ {NP.round(totalPrice, 2).toFixed(2)}
</Text>
</View>
</View>
</View>
) : (
<View style={styles.container}>
<View style={styles.emptyContainer}>
<View style={styles.empty}>
<Image
source={require('../assets/empty.png')}
style={styles.emptyImg}
/>
</View>
</View>
</View>
)}
</View>
</View>
</Modal>
);
}
}
const styles = {
modalBackgroundStyle: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
height: '100%',
width: '100%',
},
modal: {
height: scaleSize(1500),
width: scaleSize(950),
backgroundColor: '#fff',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 20,
},
header: {
flex: 0.15,
backgroundColor: 'rgb(0,205,102)',
width: '100%',
flexDirection: 'column',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
headline: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
headTitle: {
fontSize: setSpText(100),
color: '#fff',
},
container: {
flex: 0.85,
width: '100%',
flexDirection: 'column',
},
emptyContainer: {
flex: 1,
marginLeft: '5%',
marginRight: '5%',
backgroundColor: '#FFFFFF',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
empty: {
flexDirection: 'row',
margin: scaleSize(5),
},
emptyImg: {
width: scaleSize(600),
height: scaleSize(700),
resizeMode: 'contain',
},
goodsStyle: {
width: '100%',
},
firstThStyle: {
width: '40%',
alignItems: 'flex-start',
paddingTop: scaleSize(14),
paddingBottom: scaleSize(14),
paddingLeft: scaleSize(8),
paddingRight: scaleSize(8),
marginLeft: '3%',
},
ThStyle: {
width: '20%',
alignItems: 'center',
paddingTop: scaleSize(14),
paddingBottom: scaleSize(14),
paddingLeft: scaleSize(8),
paddingRight: scaleSize(8),
},
ThText: {
fontSize: setSpText(55),
},
oddCell: {
flexDirection: 'row',
backgroundColor: '#fff',
},
evenCell: {
flexDirection: 'row',
backgroundColor: '#F0F0F0',
},
firstTdStyle: {
width: '40%',
justifyContent: 'center',
alignItems: 'flex-start',
paddingTop: scaleSize(14),
paddingBottom: scaleSize(14),
paddingLeft: scaleSize(8),
paddingRight: scaleSize(8),
marginLeft: '5%',
},
TdStyle: {
flexDirection: 'row',
width: '20%',
alignItems: 'center',
justifyContent: 'center',
paddingTop: scaleSize(14),
paddingBottom: scaleSize(14),
paddingLeft: scaleSize(8),
paddingRight: scaleSize(90),
},
TdText: {
fontSize: setSpText(45),
},
amount: {
justifyContent: 'center',
flexDirection: 'column',
height: '18.5%',
backgroundColor: '#FFF',
marginLeft: '10%',
marginRight: '10%',
},
total: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: scaleSize(5),
},
totalText: {
fontSize: setSpText(55),
},
discount: {
fontSize: setSpText(60),
color: 'red',
},
line: {
width: '100%',
borderWidth: 1,
borderColor: '#ddd',
height: 1,
},
realPay: {
flexDirection: 'column',
height: '10%',
backgroundColor: '#FFF',
marginLeft: '10%',
marginRight: '10%',
justifyContent: 'center',
},
};
export default OrderDetailMini;
src/models/goods.js
......@@ -96,5 +96,8 @@ export default {
*balancePay(action, {call}) {
return yield call(api.balancePay, action);
},
*getOrderCounter(action, {call}) {
return yield call(api.getOrderCounter, action);
},
},
};
src/pages/FacePage.js
......@@ -8,6 +8,7 @@ import PhoneModal from '../components/PhoneModal';
import VerifyCodeModal from '../components/VerifyCodeModal';
import QRCode from 'react-native-qrcode-svg';
import OrderDetailsModal from '../components/OrderDetailsModal';
import OrderDetailMini from '../components/OrderDetailMini';
import TipsModal from '../components/TipsModal';
import LoadingModal from '../components/LoadingModal';
import delay from '../utils/delay';
......@@ -30,6 +31,7 @@ class FacePage extends Component {
phoneModal: false, // 显示输入电话号码弹窗
verifyCodeModal: false, // 显示输入验证码弹窗
orderDetailsModal: false, // 显示订单详情弹窗
orderDetailMini: false,
goodsArr: [],
talkCall: 2, // 0请求通话，1通话中，2，已挂断通话，待机状态
contact: '',
......@@ -39,6 +41,7 @@ class FacePage extends Component {
tip: '',
tipsModal: false,
faceType: 'wxpay',
// 屏保模式
sleep: true,
loadingModal: false,
qrCode: '',
......@@ -49,6 +52,7 @@ class FacePage extends Component {
};
phone = ''; // 监听用户输入手机
// 设备类型
// sense = true; // 测试即拿刷脸设备
async componentWillMount() {
......@@ -150,6 +154,31 @@ class FacePage extends Component {
orderDetailsModal: false,
});
};
/**
* @param {String} timeoutt 超时时间
*/
orderDetailMiniPop = timeoutt => {
this.setState({
orderDetailMini: true,
});
// 没有清空计时器的操作，可能造成内存溢出
setTimeout(() => {
this.setState({
orderDetailMini: false,
});
}, timeoutt);
};
/**
* 拉取数据，同步至state
*/
getOrderDetailMiniCounter = async () => {
const {data} = await this.props.dispatch({
type: 'goods/getOrderCounter',
});
this.setState({
goodsArr: data,
});
};
listen = async () => {
try {
......@@ -195,7 +224,9 @@ class FacePage extends Component {
else if (this.action === 'leave') {
// 出门身份识别提示
Speech.speak('正在进行安全检查');
this.loading(true, 30000);
this.getOrderDetailMiniCounter();
this.orderDetailMiniPop(30000);
// this.loading(true, 30000);
}
}
};
......@@ -282,6 +313,11 @@ class FacePage extends Component {
code: ret.code,
});
if (ret) {
if (ret.code === 1 && ret.action === 'leave') {
this.setState({
orderDetailMini: false,
});
}
if (ret.code < 0 || ret.code === 401) {
// 未授权，提示用户扫码验证
let tipText = ret.msg;
......@@ -652,6 +688,7 @@ class FacePage extends Component {
verifyCodeModal,
phoneModal,
orderDetailsModal,
orderDetailMini,
goodsArr,
talkCall,
storeName,
......@@ -717,6 +754,14 @@ class FacePage extends Component {
current={current}
faceType={faceType}
/>
<OrderDetailMini
visible={orderDetailMini}
transparent
onRequestClose={this.handleOrderClose}
goodsArr={goodsArr}
dispatch={dispatch}
faceType={faceType}
/>
<TipsModal
visible={tipsModal}
transparent
......
src/services/goods.js
......@@ -74,3 +74,7 @@ export function payscoreinfo() {
export function balancePay(action) {
return axios.post('/store/goods/balancePay', qs.stringify(action));
}
export function getOrderCounter() {
return axios.get('/store/goods/counter');
}
\ No newline at end of file
src/utils/config.js
......@@ -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.166: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/';
......
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