收银机增加商品数字展示

调整每行修改商品数量和删除商品触发区域

src/pages/CounterMixins.js

@@ -75,6 +75,7 @@ const CounterMixins = ComposeComponent => {
       nobodyVoice: false,
       numberValue: '',
       human: false,
+      totalNum: 0,
     };
 
     componentWillMount = async () => {
@@ -922,6 +923,9 @@ const CounterMixins = ComposeComponent => {
           Number(NP.round(totalNum, 2).toFixed(2)) +
           Number(NP.round(v.num, 2).toFixed(2));
       });
+      this.setState({
+        totalNum,
+      });
       Speech.speak('共' + totalNum + '件商品');
     };
 

src/pages/VerticalPage.js

@@ -492,12 +492,15 @@ class VerticalPage extends Component {
       </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}
-          />
+          <Touch
+            style={styles.numChange}
+            onPress={() => this.props.numRemove(item.num, index)}>
+            <Icon
+              name="ios-remove-circle"
+              color={item.num === 1 ? '#909090' : '#00c670'}
+              size={35}
+            />
+          </Touch>
         ) : (
           <View />
         )}
@@ -507,12 +510,11 @@ class VerticalPage extends Component {
           <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)}
-          />
+          <Touch
+            style={styles.numChange}
+            onPress={() => this.props.numAdd(item.num, index)}>
+            <Icon name="ios-add-circle" color="#00c670" size={35} />
+          </Touch>
         ) : (
           <View />
         )}
@@ -590,6 +592,7 @@ class VerticalPage extends Component {
       autoplayTime,
       imgArr,
       adType,
+      totalNum,
     } = this.props;
     let {
       contact,
@@ -761,7 +764,24 @@ class VerticalPage extends Component {
               height: width > 801 && !isCard ? '62%' : '94%',
             }}>
             <View style={{flexDirection: 'row', flex: 1}}>
-              <View style={{width: '100%'}}>
+              <View style={{width: '100%', position: 'relative'}}>
+                <View
+                  pointerEvents="none"
+                  style={{
+                    width: '100%',
+                    height: width > 801 && !isCard ? '62%' : '94%',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    opacity: 0.5,
+                    background: '#ccc',
+                    zIndex: 999,
+                  }}>
+                  <Text style={{fontSize: 500}}>{totalNum}</Text>
+                </View>
                 <View style={{backgroundColor: '#fff'}}>
                   <View
                     style={{
@@ -865,14 +885,20 @@ class VerticalPage extends Component {
                         </View>
                         <View style={styles.TdStyle}>
                           {item.numChange ? (
-                            <Icon
+                            <Touch
+                              style={styles.numChange}
                               onPress={() =>
-                                this.props.numRemove(item.num, index)
-                              }
-                              name="ios-remove-circle"
-                              color={item.num === 1 ? '#909090' : '#00c670'}
-                              size={35}
-                            />
+                                this.props.numAdd(item.num, index)
+                              }>
+                              <Icon
+                                onPress={() =>
+                                  this.props.numRemove(item.num, index)
+                                }
+                                name="ios-remove-circle"
+                                color={item.num === 1 ? '#909090' : '#00c670'}
+                                size={35}
+                              />
+                            </Touch>
                           ) : (
                             <View />
                           )}
@@ -884,12 +910,20 @@ class VerticalPage extends Component {
                             <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)}
-                            />
+                            <Touch
+                              style={styles.numChange}
+                              onPress={() =>
+                                this.props.numAdd(item.num, index)
+                              }>
+                              <Icon
+                                name="ios-add-circle"
+                                color="#00c670"
+                                size={35}
+                                onPress={() =>
+                                  this.props.numAdd(item.num, index)
+                                }
+                              />
+                            </Touch>
                           ) : (
                             <View />
                           )}
@@ -904,15 +938,15 @@ class VerticalPage extends Component {
                               {NP.round(item.prePrice * item.num, 2).toFixed(2)}
                             </Text>
                           )}
-                          <View style={styles.iconStyle}>
+                          <Touch
+                            onPress={() => this.props.removeIndex(index)}
+                            style={styles.iconStyle}>
                             <Icon
-                              style={{marginLeft: 0}}
                               name="ios-close-circle"
                               size={35}
                               color={colors.bg}
-                              onPress={() => this.props.removeIndex(index)}
                             />
-                          </View>
+                          </Touch>
                         </View>
                       </View>
                     );
@@ -1712,8 +1746,9 @@ const styles = {
     position: 'relative',
   },
   iconStyle: {
+    paddingHorizontal: 10,
     position: 'absolute',
-    right: 20,
+    right: 10,
   },
   TdText: {
     fontSize: width > 801 ? 25 : setSpText(30),
@@ -1829,6 +1864,9 @@ const styles = {
     fontSize: scaleSize(45),
     color: '#ffffff',
   },
+  numChange: {
+    paddingHorizontal: 10,
+  },
 };
 
 export default CounterMixins(VerticalPage);