Browse Source

ui调整兼容等

fuwei 4 years ago
parent
commit
65146f084c

+ 20 - 3
ghsPad/src/admin/home/components/select-settle.vue

@@ -59,9 +59,17 @@
             <AppInputAll v-model="shopVal" title="总金额" placeholder="总金额"></AppInputAll>
             <AppInputAll v-model="shopVal" title="实收金额" placeholder="实收金额"></AppInputAll>
             <view class="shop-distoracn">优惠5</view>
+            <view class="keyboard-body_box">
+                <VKeyboard
+                    ref="keyboard" 
+                    :pointIsShow="false" 
+                    :digital="true" 
+                    :disorderly="false" 
+                    @typing="typing" 
+                    @enter="enter">
+                </VKeyboard>
+            </view>
         </view>
-        <!-- <textarea @tap="activeKeyboard" disabled :value="input" placeholder="点击调起键盘输入"></textarea> -->
-        <VKeyboard ref="keyboard" :pointIsShow="true" :digital="false" :disorderly="false" @typing="typing" @enter="enter"></VKeyboard>
     </view>
 </template>
 
@@ -81,6 +89,9 @@
                 shopVal: '¥100'
 			};
 		},
+        mounted() {
+            this.activeKeyboard();
+        },
         methods: {
 			//键盘方法
 			activeKeyboard() {
@@ -108,7 +119,7 @@
     .app-select_customer {
         background-color: #ffffff;
         display: flex;
-     
+        height: 90vh;
         .select-left {
             flex: 1;
             padding: 10rpx;
@@ -147,6 +158,8 @@
         .select-right {
             flex: 1;
             padding: 10rpx;
+            display: flex;
+            flex-direction: column;
             & .shop-distoracn {
                 text-align: right;
                 font-size: 14rpx;
@@ -154,5 +167,9 @@
                 color: #008000;
             }
         }
+        & .keyboard-body_box {
+            flex: 1;
+            overflow: hidden;
+        }
     }
 </style>

+ 149 - 114
ghsPad/src/admin/home/components/select-user.vue

@@ -1,124 +1,159 @@
 <template>
-    <view class="app-select_user">
-        <view class="title">客户列表</view>
-        <view class="app-userList_box">
-											<view class="userList-item_box">
-													<view class="head-box">
-															<image class="img" src="../../../static/images/member/bg.png" mode=""></image>
-															<view class="name">花落谁家</view>
-													</view>
-													<view class="footer-box">
-															<view>
-																03-07 12:00
-															</view>
-															<view>欠28755</view>
-													</view>
-											</view>
-											<view class="userList-item_box">
-													<view class="head-box">
-															<image class="img" src="../../../static/images/member/bg.png" mode=""></image>
-															<view class="name">花落谁家</view>
-													</view>
-													<view class="footer-box">
-															<view>
-																03-07 12:00
-															</view>
-															<view>欠28755</view>
-													</view>
-											</view>
-								</view>
-								<VKeyboard
-								ref="keyboard"
-								:pointIsShow="false"
-								:digital="false"
-								:disorderly="false"
-								@typing="typing"
-								@enter="enter">
-								</VKeyboard>
+  <view class="app-select_user">
+    <view class="title">客户列表</view>
+    <view class="app-userList_box">
+      <view class="userList-item_box" v-for="item in 5">
+        <view class="head-box">
+          <image
+            class="img"
+            src="../../../static/images/member/bg.png"
+            mode=""
+          ></image>
+          <view class="name">花落谁家</view>
+        </view>
+        <view class="footer-box">
+          <view> 03-07 12:00 </view>
+          <view>欠28755</view>
+        </view>
+      </view>
+      <view class="userList-item_box">
+        <view class="head-box">
+          <image
+            class="img"
+            src="../../../static/images/member/bg.png"
+            mode=""
+          ></image>
+          <view class="name">花落谁家</view>
+        </view>
+        <view class="footer-box">
+          <view> 03-07 12:00 </view>
+          <view>欠28755</view>
+        </view>
+      </view>
     </view>
+	<input 
+		disabled 
+		class="input-serach_box" 
+		v-model="searchUser" 
+		type="text"
+		placeholder-class="input-placeholder"
+		placeholder="搜索客户"/>
+	 <view class="keyboard-body_box">
+		 
+		<VKeyboard
+		ref="keyboard"
+		:pointIsShow="false"
+		:digital="false"
+		:disorderly="false"
+		@typing="typing"
+		@enter="enter"
+		>
+		</VKeyboard>
+	</view>
+  </view>
 </template>
 
 <script>
-			import VKeyboard from '@/components/plugin/vKeyboard/VKeyboard.vue'
-    export default {
-        name:'selectUser',
-								components:{
-									VKeyboard
-								},
-								data(){
-									return {
-
-									}
-								},
-								mounted(){
-								    this.activeKeyboard()
-								},
-								methods:{
-									//键盘方法
-									activeKeyboard() {
-										this.$refs.keyboard.activate();
-									},
-									typing(e) {
-										if (e.backspace) {
-											if (this.currentNum.length > 0) {
-												this.currentNum = this.input.substring(0, this.input.length - 1);
-											}
-										}
-										else {
-											this.currentNum += e.char;
-										}
-									},
-									enter() {
-										//this.$refs.keyboard.deactivate();
-									}
-								}
-    }
+import VKeyboard from "@/components/plugin/vKeyboard/VKeyboard.vue";
+export default {
+  name: "selectUser",
+  components: {
+    VKeyboard,
+  },
+  data() {
+    return {
+		searchUser: ''
+	};
+  },
+  mounted() {
+    this.activeKeyboard();
+  },
+  methods: {
+    //键盘方法
+    activeKeyboard() {
+      this.$refs.keyboard.activate();
+    },
+    typing(e) {
+	  console.log(888556633,e)
+	  if(e.char === '确定') {
+		  return false
+	  }
+      if (e.backspace) {                                                        
+          this.searchUser = this.searchUser.substring(0, this.searchUser.length - 1);
+      } else {
+        this.searchUser += e.char;
+      }
+    },
+    enter() {
+      //this.$refs.keyboard.deactivate();
+    },
+  },
+};
 </script>
 
-<style lang="scss" scoped>
-    .app-select_user {
-        background-color: #ffffff;
-        padding: 10rpx;
-        & .title {
-            font-size: 14rpx;
-            color: #666666;
+<style lang="scss">
+.app-select_user {
+  background-color: #ffffff;
+  padding: 5rpx;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  & .title {
+    font-size: 14rpx;
+    color: #666666;
+  }
+  & .app-userList_box {
+    padding: 5rpx;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    & .userList-item_box {
+      margin: 0 5rpx 5rpx 0;
+      width: 130rpx;
+      height: 60rpx;
+      border: 1px solid #333;
+      padding: 3rpx;
+      border-radius: 3rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      & .head-box {
+        display: flex;
+        font-size: 12rpx;
+        align-items: center;
+        margin-bottom: 10rpxs;
+        & .name {
+          padding-left: 5rpx;
+        }
+        & > .img {
+          width: 30rpx;
+          height: 30rpx;
+          border-radius: 50%;
         }
-								& .app-userList_box {
-									padding: 10rpx;
-									display: flex;
-									align-items: center;
-									flex-wrap: wrap;
-										& .userList-item_box {
-												 margin: 0 10rpx 10rpx 0;
-													width: 180rpx;
-													height: 100rpx;
-													border: 1px solid #333;
-													padding: 5rpx;
-													border-radius: 5rpx;
-													display: flex;
-													flex-direction: column;
-													justify-content: center;
-												& .head-box {
-														display: flex;
-														font-size: 14rpx;
-														align-items: center;
-														margin-bottom: 10rpxs;
-														 & .name {
-																	padding-left: 5rpx;
-															}
-														& > .img {
-															width: 50rpx;
-															height: 50rpx;
-															border-radius: 50%;
-														}
-												}
-												& .footer-box {
-														font-size: 12rpx;
-														display: flex;
-														justify-content: space-between;
-														align-items: center;
-												}
-										}
-								}
+      }
+      & .footer-box {
+        font-size: 12rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
     }
+  }
+  & .keyboard-body_box {
+	  flex: 1;
+	  overflow: hidden;
+  }
+  & .input-serach_box {
+	  font-size: 20rpx;
+	  line-height: 28rpx;
+	  text-align: center;
+	  height: 28rpx;
+	  
+  }
+  & .input-placeholder {
+		font-size: 18rpx!important;
+		color: #333!important; 
+	}
+}
 </style>

+ 4 - 4
ghsPad/src/admin/home/workbench.vue

@@ -105,21 +105,21 @@
 		<uniPopup
 		:show.sync="isShowFllowNum"
 		type="top"
+		maxHeight="90vh"
 		>
-			<div>
-				<keyboardSetFlower></keyboardSetFlower>
-			</div>
+			<keyboardSetFlower></keyboardSetFlower>
 		</uniPopup>
 		<uniPopup
 		:show.sync="isShowSettle"
 		type="top"
+		maxHeight="90vh"
 		>
 			<selectSettle></selectSettle>
 		</uniPopup>
 		<uniPopup
 		:show.sync="isShowUser"
 		type="top"
-		maxHeight="auto"
+		maxHeight="90vh"
 		>
 			<selectUser></selectUser>
 		</uniPopup>

+ 24 - 12
ghsPad/src/components/app-boardSet-flower.vue

@@ -22,7 +22,9 @@
             <view class="set-residue_box">
                 还剩5扎2支
             </view>
-            <VKeyboard
+        </view>
+        <view class="keyboard-body_box">
+         <VKeyboard
             ref="keyboard" 
             :pointIsShow="false" 
             :digital="true" 
@@ -81,18 +83,24 @@
     .boardset-flowert {
         background-color: #ffffff;
         margin: 0 auto;
-        border-radius: 5upx;
-        padding: 10upx;
+        border-radius: 5rpx;
+        padding: 10rpx;
+        // overflow: hidden;
+        overflow-y: auto;
+        display: flex;
+        height: 90vh;
+        flex-direction: column;
+        box-sizing: border-box;
         & .flower-input_box {
             & .flower-title {
                 text-align: center;
                 color: #333333;
-                font-size: 14upx;
+                font-size: 14rpx;
             }
             & .set-residue_box {
-                font-size: 14upx;
+                font-size: 14rpx;
                 color: #666666;
-                margin-top: 10upx;
+                margin-top: 10rpx;
                 text-align: left;
             }
         }
@@ -102,24 +110,28 @@
             justify-content: center;
             & > view {
                 & .desc {
-                    font-size: 12upx;
-                    margin-bottom: 8upx;
+                    font-size: 12rpx;
+                    margin-bottom: 8rpx;
                 }
                 & .flower-unit_box {
                     display: flex;
                     align-items: center;
                     & > input {
                         flex: 1;
-                        height: 40upx;
+                        height: 40rpx;
                         border-bottom: 1px solid #eee;
                     }
                 }
             }
             & .icon-qiehuan {
-                width: 35upx;
-                height: 35upx;
-                padding: 0 7upx;
+                width: 35rpx;
+                height: 35rpx;
+                padding: 0 7rpx;
             }
         }
+        & .keyboard-body_box {
+            flex: 1;
+            overflow: hidden;
+        }
     }
 </style>

+ 68 - 43
ghsPad/src/components/plugin/vKeyboard/VKeyboard.vue

@@ -5,7 +5,9 @@
 			<view class="digit-button-box">
 				<template v-for="(digit, index) in digits">
 					<!-- <view :key="index" class="enl-key-button enl-digit" @tap="typing('.')" v-if="index === 9">.</view> -->
-					<view :key="index" class="enl-key-button enl-digit" @tap="typing(digit)">{{digit}}</view>
+					<view :key="index" class="enl-key-button enl-digit" @tap="typing(digit)">
+						<text>{{digit}}</text>
+					</view>
 				</template>
 				<view class="enl-key-button enl-digit" v-if="!digital">
 					<!-- <i class="iconfont icon-shouqijianpan enl-middle"  @tap="deactivate"></i> -->
@@ -16,7 +18,7 @@
 				<view class="enl-key-button special-button enl-gray" @tap="backspace"><i class="iconfont icon-backspace enl-large"></i></view>
 				<view class="enl-key-button special-button enl-gray" @tap="enter">
 						<!-- <i class="iconfont icon-huiche enl-large"></i> -->
-						确定
+						<text>确定</text>
 				</view>
 			</view>
 		</view>
@@ -24,7 +26,9 @@
 			<view class="line" v-for="(letters, index) in lines" :key="index">
 				<view class="enl-letter enl-key-button special-key enl-gray" v-if="index === 3 && mode === 'letter'" @tap="toggleCase"><i
 					 :class="'iconfont ' + (lowercase ? 'icon-xiaoxie' : 'icon-daxie')"></i></view>
-				<view class="enl-letter enl-key-button normal" v-for="letter in letters" @tap="typing(letter)" :key="letter">{{letter}}</view>
+				<view class="enl-letter enl-key-button normal" v-for="letter in letters" @tap="typing(letter)" :key="letter">
+					<text>{{letter}}</text>
+				</view>
 				<view class="enl-letter enl-key-button special-key enl-gray" v-if="index === 3" @tap="backspace"><i class="iconfont icon-backspace"></i></view>
 			</view>
 			<view class="line special-line">
@@ -67,6 +71,10 @@
 				type: Boolean,
 				default: true
 			},
+			isEffect:{
+				type:Boolean,
+				default: false
+			}
 			/* ,
 						value: String */
 		},
@@ -166,7 +174,9 @@
 				this.lines = temp;
 			},
 			visible(val) {
-				this.cls = val ? 'slideup' : 'slidedown';
+				if(this.isEffect) {
+					this.cls = val ? 'slideup' : 'slidedown';
+				}
 			}
 		},
 		created() {
@@ -187,14 +197,15 @@
 
 	.iconfont {
 		font-family: "iconfont" !important;
-		font-size: 40upx;
+		font-size: 24rpx;
 		font-style: normal;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 	}
 
 	.enl-size {
-		font-size: 40rpx;
+		// font-size: 24rpx;
+		height: 100%;
 	}
 	.enl-size_custom {
 		// width: 700rpx!important;
@@ -203,7 +214,7 @@
 	.enl-key-button {
 		display: inline-block;
 		overflow: hidden;
-		vertical-align: middle;
+		// vertical-align: middle;
 		border: 1px solid #e6e6e6;
 		color: #333;
 		background-color: #fff;
@@ -213,7 +224,6 @@
 		white-space: nowrap;
 		user-select: none;
 		cursor: pointer;
-
 		&:active {
 			background: #d6d6d6;
 			scale: 0.7;
@@ -226,43 +236,46 @@
 		bottom: 0;
 		left: 0;
 		background: #f5f5f5;
-		padding: .2em 0;
+		padding: 1% 0;
+		height: 100%;
 		z-index: 100;
 		/*全键盘*/
 		.full-keyboard {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			height: 100%;
 			.line {
 				text-align: center;
-
+				flex: 1;
+				width: 100%;
 				&:not(:last-child) {
-					margin-bottom: 0.5em;
+					// margin-bottom: 1%;
 				}
-
 				.enl-letter {
-					height: 1.7em;
-					line-height: 1.7em;
-					font-size: 1em;
-
+					height: 95%;
+					font-size: 20rpx;
+					padding: 0rpx 0rpx;
 					&:not(:last-child) {
-						margin-right: 0.12em;
-						// margin-right: 0.2em;
+						margin-right: 1%;
 					}
 				}
 
 				.normal {
 					// width: 1.73em;
-					width: 1.65em;
+					width: 9%;
 				}
 
 				.special-key {
-					width: 2.6em;
+					width: 9%;
 				}
 			}
 
 			.special-line {
-				padding: 0 0.35em;
+				padding: 0 1%;
 				display: flex !important;
 				justify-content: space-around;
-
+				font-size: 24rpx;
 				.space {
 					flex: 1;
 					display: flex;
@@ -271,7 +284,8 @@
 				}
 
 				.swith-key {
-					width: 2.6em;
+					width: 13%;
+					
 				}
 
 				.enl-logo {
@@ -284,40 +298,51 @@
 		.digit-keyboard {
 			display: flex;
 			flex-direction: row;
-			font-size: 28rpx;
+			font-size: 24rpx;
 			justify-content: center;
+			height: 100%;
 			.digit-button-box {
-				padding: 0 .2em;
-				max-width: 420rpx;
+				padding: 0 1%;
+				flex: 80;
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
 				.enl-digit {
-					width: 4.46em;
-					height: 2.5em;
-					line-height: 2.5em;
-					margin-bottom: .35em;
-
+					width: 32%;
+					height: 23%;
+					// line-height: 20%;
+					margin-bottom: 1%;
+					// vertical-align: middle;
+					// display: flex;
+					// align-items: center;
 					&:nth-child(10),
 					&:nth-child(11),
 					&:nth-child(12) {
 						margin-bottom: 0;
 					}
-
 					&:not(:last-child) {
-						margin-right: .35em;
+						margin-right: 1%;
 					}
 				}
+			    & .enl-key-button {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
 			}
 
 			.special-button-box {
-				flex: 0;
-				padding: 0 .35em 0 0;
+				flex: 20;
+				padding: 0 3% 0 0;
 				.special-button {
-					display: block;
-					line-height: 5.5em;
-					height: 5.5em;
-					width: 4em;
-
+					line-height: 20%;
+					height: 45%;
+					width: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 					&:not(:last-child) {
-						margin-bottom: .35em;
+						margin-bottom: 3%;
 					}
 				}
 			}
@@ -332,11 +357,11 @@
 		}
 
 		.enl-large {
-			font-size: 2em !important;
+			font-size: 24rpx !important;
 		}
 
 		.enl-middle {
-			font-size: 1.2em !important;
+			font-size: 24rpx !important;
 			display: block;
 		}
 	}

+ 1 - 1
ghsPad/src/components/plugin/vKeyboard/utils.js

@@ -10,7 +10,7 @@ export const order = [
 	// ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
 	['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
 	['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
-	['z', 'x', 'c', 'v', 'b', 'n', 'm']
+	['z', 'x', 'c', 'v', 'b', 'n', 'm','确定']
 ];
 
 //随机排序全键盘

+ 2 - 2
ghsPad/src/components/uni-popup.vue

@@ -148,7 +148,7 @@ export default {
         }
 
         &.top {
-            top: 15vh!important;
+            top: 5vh!important;
             left: 50%;
             width: 100%;
             transform: translate(-50%,0)!important;
@@ -200,7 +200,7 @@ export default {
             &.bottom {
                 & .uni-popup__wrapper-box {
                     width: 100%;
-                    overflow-y: scroll;
+                    overflow: hidden;
                     border-top-left-radius: 5upx;
                     border-top-right-radius: 5upx;
                 }

+ 1 - 1
ghsPad/src/pages.json

@@ -375,7 +375,7 @@
 		"onReachBottomDistance": 300,
 		"app-plus":{"titleNView":false},
 		"navigationStyle":"custom",
-		"rpxCalcMaxDeviceWidth": 0,
+		"rpxCalcMaxDeviceWidth": 2000,
 		"rpxCalcBaseDeviceWidth": 1440
 
 	}