收银台界面袋子可分为两行

src/pages/VerticalPage.js

@@ -365,7 +365,19 @@ class VerticalPage extends Component {
   render() {
     let {admin, goods, goodsArr, qrHost, current} = this.props;
     let {contact} = this.state;
-    pageSize = goods && goods.bags.length > 0 ? 7 : pageSize;
+    pageSize =
+      goods && goods.bags.length > 0
+        ? goods && goods.bags.length > 6
+          ? 6
+          : 7
+        : pageSize;
+    let bagsData = [];
+    if (goods && goods.bags) {
+      let num = Math.ceil(goods.bags.length / 3);
+      for (let i = 0; i < num; i++) {
+        bagsData.push(goods.bags.slice(i * 3, i * 3 + 3));
+      }
+    }
     window.pageSize = pageSize;
     contact = contact || '未授权';
     let goodsLength = Math.ceil(parseFloat(goodsArr.length / pageSize));
@@ -473,22 +485,44 @@ class VerticalPage extends Component {
               <Text style={styles.btnText}>清除商品</Text>
             </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>
+          {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={this.wxFacepay}>
             <View style={styles.guide}>
@@ -740,6 +774,14 @@ const styles = {
     backgroundColor: '#F0F0F0',
     // paddingBottom: 20,
   },
+  bagMore: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    backgroundColor: '#F0F0F0',
+    marginLeft: '5%',
+    // paddingBottom: 20,
+  },
   btnBag: {
     flexDirection: 'row',
     alignItems: 'center',