点单系统布局

src/components/GoodsList.js

+import React from 'react';
+import {Dimensions, Image, Text, View} from 'react-native';
+import {imgUrl} from '../utils/config';
+// import Touch from './Touch';
+import {setSpText} from '../utils/screen';
+
+const {width, height} = Dimensions.get('window');
+
+export default class GoodsList extends React.Component {
+  state = {
+    num: 0,
+  };
+  render() {
+    let {goodsArr} = this.props;
+    let {num} = this.state;
+    return (
+      <View style={styles.goodsBox}>
+        {goodsArr.length > 0 &&
+          goodsArr.map(v => {
+            return (
+              <View style={styles.goodsItem}>
+                <View style={styles.goodsImg}>
+                  <Image
+                    style={styles.img}
+                    source={{uri: `${imgUrl}${v.image}`}}
+                  />
+                </View>
+                <Text style={styles.goodsName}>{v.name}</Text>
+                <Text style={styles.goodsPrice}>￥{v.prePrice}</Text>
+                <View style={styles.goodsNum}>
+                  <View style={num > 0 ? styles.goodsSub : styles.display}>
+                    <Image
+                      style={styles.img}
+                      source={require('../assets/Order/subtract.png')}
+                    />
+                  </View>
+                  <Text style={num > 0 ? styles.goodsNums : styles.display}>
+                    {num}
+                  </Text>
+                  <View style={styles.goodsAdd}>
+                    <Image
+                      style={styles.img}
+                      source={require('../assets/Order/add.png')}
+                    />
+                  </View>
+                </View>
+              </View>
+            );
+          })}
+      </View>
+    );
+  }
+}
+
+const styles = {
+  goodsBox: {
+    width: width * 0.85,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  goodsItem: {
+    width: width * 0.85 * 0.3333,
+    height: height * 0.8 * 0.31,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+    borderRightWidth: 1,
+    borderRightColor: '#ccc',
+  },
+  goodsImg: {
+    width: width * 0.85 * 0.3333 * 0.95,
+    height: width * 0.85 * 0.3333 * 0.8,
+    marginTop: 10,
+  },
+  goodsName: {
+    width: width * 0.85 * 0.3333 * 0.95,
+    height: 40,
+    lineHeight: 50,
+    fontSize: setSpText(30),
+  },
+  goodsPrice: {
+    width: width * 0.85 * 0.3333 * 0.9,
+    height: 25,
+    textAlign: 'right',
+    paddingRight: 20,
+    marginTop: 5,
+    marginBottom: 5,
+    color: '#e21918',
+    fontSize: setSpText(20),
+  },
+  goodsNum: {
+    width: width * 0.85 * 0.3333 * 0.9,
+    height: 50,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  goodsSub: {
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+    backgroundColor: '#fc4000',
+  },
+  img: {
+    width: '100%',
+    height: '100%',
+  },
+  goodsNums: {
+    width: 50,
+    height: 50,
+    textAlign: 'center',
+    fontSize: 40,
+  },
+  goodsAdd: {
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+    backgroundColor: '#fc4000',
+  },
+  display: {
+    display: 'none',
+  },
+};

src/models/index.js

@@ -10,6 +10,7 @@ import user from './user';
 import store from './store';
 import agora from './agora';
 import lucky from './lucky';
+import searchGoods from './searchGoods';
 
 const {width: _width, height: _height} = Dimensions.get('window');
 
@@ -77,4 +78,5 @@ export default [
   store,
   agora,
   lucky,
+  searchGoods,
 ];

src/models/searchGoods.js

+import * as api from '../services/searchGoods';
+
+export default {
+  namespace: 'searchGoods',
+  state: {},
+  effects: {
+    *getStoreGoods(action, {call}) {
+      return yield call(api.getStoreGoods, action);
+    },
+  },
+};

src/pages/OrderPage.js

 import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import {connect} from 'react-redux';
+import {
+  View,
+  Image,
+  Text,
+  Dimensions,
+  ScrollView,
+  TextInput,
+} from 'react-native';
+import {setSpText} from '../utils/screen';
+import GoodsList from '../components/GoodsList';
 
+const {width, height} = Dimensions.get('window');
+@connect(({searchGoods}) => ({searchGoods}))
 class OrderPage extends Component {
+  state = {
+    goodsArr: [],
+  };
+
+  componentDidMount() {
+    this.getGoodsList();
+  }
+
+  getGoodsList = async () => {
+    let {data} = await this.props.dispatch({
+      type: 'searchGoods/getStoreGoods',
+      page: 0,
+      size: 10,
+    });
+    if (data.code === 1) {
+      this.setState({
+        goodsArr: data.data,
+      });
+    }
+  };
+
   render() {
+    let {goodsArr} = this.state;
     return (
-      <View>
-        <Text>点餐系统</Text>
+      <View style={styles.body}>
+        <View style={styles.search}>
+          <View style={styles.searchInput}>
+            <View style={styles.searchIcon}>
+              <Image
+                style={styles.img}
+                source={require('../assets/Order/search.png')}
+              />
+            </View>
+            <View style={styles.searchText}>
+              <TextInput style={styles.input} />
+            </View>
+            <Text style={styles.searchBtn}>搜索</Text>
+          </View>
+        </View>
+        <View style={styles.info}>
+          <View style={styles.classify} />
+          <ScrollView style={styles.goods}>
+            <GoodsList goodsArr={goodsArr} />
+          </ScrollView>
+        </View>
+        <View style={styles.settle}>
+          <View style={styles.total}>
+            <Text style={{marginLeft: 130, fontSize: setSpText(50)}}>
+              总计:
+              <Text style={{fontSize: setSpText(40), color: '#e21918'}}>
+                ￥99.<Text style={{fontSize: setSpText(25)}}>00</Text>
+              </Text>
+            </Text>
+          </View>
+          <View style={styles.onSubmit}>
+            <Text style={{color: '#fff', fontSize: setSpText(50)}}>结算</Text>
+          </View>
+        </View>
       </View>
     );
   }
 }
 
+const styles = {
+  body: {
+    width,
+    height,
+    backgroundColor: '#fff',
+  },
+  search: {
+    width,
+    height: height * 0.07,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  searchInput: {
+    width: width * 0.9,
+    height: height * 0.07 * 0.85,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: height * 0.07 * 0.85,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  input: {
+    width: '100%',
+    height: '100%',
+    fontSize: setSpText(50),
+  },
+  searchIcon: {
+    width: height * 0.07 * 0.85,
+    height: height * 0.07 * 0.85,
+    marginLeft: 20,
+  },
+  searchText: {
+    width: height * 0.07 * 5.1,
+    height: height * 0.07 * 0.85,
+  },
+  searchBtn: {
+    width: height * 0.07 * 1.2,
+    height: height * 0.07 * 0.7,
+    borderRadius: height * 0.07 * 0.7,
+    fontSize: setSpText(50),
+    color: '#fff',
+    backgroundColor: '#fc4000',
+    textAlign: 'center',
+    lineHeight: height * 0.07 * 0.7,
+  },
+  info: {
+    width,
+    height: height * 0.86,
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderTopColor: '#ccc',
+  },
+  classify: {
+    width: width * 0.15,
+    height: height * 0.86,
+    backgroundColor: '#ccc',
+  },
+  goods: {
+    width: width * 0.8,
+    height: height * 0.86,
+  },
+  goodsBox: {
+    width: width * 0.85,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  goodsItem: {
+    width: width * 0.85 * 0.3333,
+    height: height * 0.8 * 0.31,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+    borderRightWidth: 1,
+    borderRightColor: '#ccc',
+  },
+  goodsImg: {
+    width: width * 0.85 * 0.3333 * 0.95,
+    height: width * 0.85 * 0.3333 * 0.8,
+    backgroundColor: 'skyblue',
+    marginTop: 10,
+  },
+  goodsName: {
+    width: width * 0.85 * 0.3333 * 0.95,
+    height: 40,
+    lineHeight: 50,
+    fontSize: setSpText(30),
+  },
+  goodsPrice: {
+    width: width * 0.85 * 0.3333 * 0.9,
+    height: 25,
+    textAlign: 'right',
+    paddingRight: 20,
+    marginTop: 5,
+    marginBottom: 5,
+    color: '#e21918',
+    fontSize: setSpText(20),
+  },
+  goodsNum: {
+    width: width * 0.85 * 0.3333 * 0.9,
+    height: 50,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  goodsSub: {
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+    backgroundColor: 'pink',
+  },
+  img: {
+    width: '100%',
+    height: '100%',
+  },
+  goodsNums: {
+    width: 50,
+    height: 50,
+    textAlign: 'center',
+    fontSize: 40,
+  },
+  goodsAdd: {
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+    backgroundColor: 'pink',
+  },
+  settle: {
+    width,
+    height: height * 0.07,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#ccc',
+  },
+  total: {
+    width: width * 0.75,
+    height: height * 0.07,
+    justifyContent: 'center',
+  },
+  onSubmit: {
+    width: width * 0.23,
+    height: height * 0.06,
+    borderRadius: height * 0.07,
+    backgroundColor: '#fc4000',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+};
+
 export default OrderPage;

src/pages/SmokePage.js

@@ -78,6 +78,7 @@ class SmokePage extends Component {
         <Touch onPress={this.smileFace}>
           <Image source={require('../assets/ai/face.gif')} />
         </Touch>
+        <Touch style={styles.tip} onPress={this.smileFace}>
           <View style={styles.tip}>
             <Image
               resizeMode="contain"
@@ -86,6 +87,7 @@ class SmokePage extends Component {
             />
             <Text style={styles.tipText}>{tipText}</Text>
           </View>
+        </Touch>
       </View>
     );
   }

src/services/searchGoods.js

+import axios from 'axios';
+import qs from 'qs';
+
+export function getStoreGoods(action) {
+  console.warn(action);
+  return axios.get(`/store/goods/takeout?${qs.stringify(action)}`);
+}