扫码组件优化

common/style/reset.css

@@ -134,6 +134,6 @@ input[type="button"], input[type="submit"], input[type="search"], input[type="re
 .mgb10 {
 	margin-bottom: 10rpx;
 }
-.mgr10 {
+.mgr20 {
-	margin-right: 10rpx;
+	margin-right: 20rpx;
 }

components/LinkScan.vue

@@ -13,7 +13,7 @@
 				@blur="handleBlur"
 				@confirm="handleSend">
 			</view>
-			<uni-icons v-show="scanList.length" class="mgr10" type="clear" size="22" color="#666" @tap="toDel"></uni-icons>
+			<uni-icons v-show="scanList.length" class="mgr20" type="clear" size="24" color="#666" @tap="toDel"></uni-icons>
 			<uni-icons type="scan" size="22" :color="focusState ? '#D7592F' : '#666'" @tap="focusState=true"></uni-icons>
 		</view>
 		<view v-show="scanList.length > 0 && show" class="scan_list_select">

components/SearchBox.vue

@@ -1,18 +1,16 @@
 <template>
-	<view class="search_wraper">
+	<view class="zd-row scan_wraper">
 		<input 
 		type="text" 
-		class="filter_input search_input" 
+		class="zd-col-24 search_input" 
+		confirm-type="go"
 		:value="value"
 		:focus="focusState"
-		@blur="handleBlur($event)"
+		@focus="handleFocus"
-		@input="handleChange($event)">
+		@blur="handleBlur"
-		<view class="buttons_wraper">
+		@confirm="handleSend">
-			<view class="iconfont icon_del" @tap="toDel">&#xe6dc;</view>
+		<uni-icons v-show="value.length" class="mgr20" type="clear" size="24" color="#666" @tap="toDel"></uni-icons>
-			<view class="iconfont icon_scan" :class="{'icon_scan_active': focusState === true}" @tap="toScan">&#xe6e2;</view>
+		<uni-icons type="scan" size="22" :color="focusState ? '#D7592F' : '#666'" @tap="focusState=true"></uni-icons>
-			<view class="iconfont icon_phone" @tap="toPhone">&#xe663;</view>
-			<view v-show="seaShow" class="iconfont icon_search" @tap="toSearch">&#xe6e1;</view>
-		</view>
 	</view>
 </template>
 
@@ -51,93 +49,37 @@
 			}
 	    },
 		methods: {
-			handleChange ($event) {
+			handleFocus () {
-				this.cur = $event.target.value
+				this.focusState = true
-				this.$emit('input', this.cur)
-				this.$emit('handleChange', this.cur)
-				if (this.focusState) {
-					this.focusState = false
-				}
 			},
-			handleBlur () {
+			handleBlur (e) {
+				this.$emit('input', e.target.value)
+				this.$emit('handleChange', e.target.value)
 				this.focusState = false	
 			},
-			toSearch () {
-				this.$emit('toSearch', this.cur)
-			},
 			toDel () {
-				this.cur = ''
 				this.$emit('input', '')
 			},
-			toScan () {
+			handleSend (e) {
-				setTimeout(() => {
+				this.$emit('input', e.target.value)
-					this.focusState = true
+				this.$emit('handleChange', e.target.value)
-				},0)
-				setTimeout(() => {
-					uni.hideKeyboard()
-				}, 300)
-				this.cur = ''
-				this.$emit('input', '')
-			},
-			async toPhone() {
-				// #ifdef APP-PLUS
-				let status = await this.checkPermission();
-				if (status !== 1) {
-				    return;
 			}
-				// #endif
-				uni.scanCode({
-					success: (res) => {
-						this.$emit('input', res.result)
-						this.$emit('handleChange', res.result)
-					},
-					fail: (err) => {
-						// uni.showToast({
-						// 	title: '出错',
-						// 	icon: 'none'
-						// })
-					}
-				});
-			}
-			// #ifdef APP-PLUS
-			,
-			async checkPermission(code) {
-				let status = permision.isIOS ? await permision.requestIOS('camera') :
-					await permision.requestAndroid('android.permission.CAMERA');
-			
-				if (status === null || status === 1) {
-					status = 1;
-				} else {
-					uni.showModal({
-						content: "需要相机权限",
-						confirmText: "设置",
-						success: function(res) {
-							if (res.confirm) {
-								permision.gotoAppSetting();
-							}
-						}
-					})
-				}
-				return status;
-			}
-			// #endif
 		}
 	}
 </script>
 
 <style lang="stylus" scoped>
 @import '../common/style/mixin.styl';
-.search_wraper
+.scan_wraper
 	position relative
 	_wh(100%, 80rpx)
+	border: 1px solid #dcdfe6;
+	background-color: #fff;
+	border-radius: 10rpx;
+	padding: 0 10rpx
 .search_input
-	padding-right: 160rpx;
+	height 80rpx;
-.buttons_wraper
+	_font(28rpx, 80rpx, #606266,,)
-	position absolute
+	border: 0;
-	top 0
+	background-color: transparent;
-	right 10rpx
-	_wh(auto, 80rpx)
-	_fj(flex-end)
-.icon_scan_active
-	color $red
 </style>