扫码

App.vue

@@ -2,7 +2,7 @@
 	export default {
 		onLaunch: function() {
 			// #ifdef APP-PLUS
-			// plus.screen.lockOrientation('landscape-primary');
+			plus.screen.lockOrientation('portrait-primary');
 			plus.navigator.setFullscreen(true);
 			// #endif
 		},

components/SearchBox.vue

@@ -4,11 +4,12 @@
 		type="text" 
 		class="filter_input search_input" 
 		:value="value"
-		:focus="focused"
+		:focus="focusState"
+		@blur="handleBlur($event)"
 		@input="handleChange($event)">
 		<view class="buttons_wraper">
 			<span class="iconfont icon-del" @tap="toDel">&#xe6dc;</span>
-			<span class="iconfont icon_scan" @tap="toScan">&#xe6e2;</span>
+			<span class="iconfont icon_scan" :class="{'icon_scan_active': focusState === true}" @tap="toScan">&#xe6e2;</span>
 			<span v-show="seaShow" class="iconfont icon_search" @tap="toSearch">&#xe6e1;</span>
 		</view>
 	</view>
@@ -19,7 +20,8 @@
 	export default {
 		data() {
 			return {
-				cur: ''
+				cur: '',
+				focusState: false
 			};
 		},
 		model: {
@@ -37,60 +39,82 @@
 				default: false
 			}
 		},
+		mounted () {
+		    if (this.focused) {
+				this.focusState = true
+			}
+	    },
 		methods: {
 			handleChange ($event) {
 				this.cur = $event.target.value
 				this.$emit('input', this.cur)
 				this.$emit('handleChange', this.cur)
+				if (this.focusState) {
+					this.focusState = false
+				}
+			},
+			handleBlur () {
+				this.focusState = false	
 			},
 			toSearch () {
 				this.$emit('toSearch', this.cur)
 			},
 			toDel () {
+				this.cur = ''
 				this.$emit('input', '')
 			},
-			async toScan() {
+			toScan () {
-				// #ifdef APP-PLUS
+				setTimeout(() => {
-				let status = await this.checkPermission();
+					this.focusState = true
-				if (status !== 1) {
+				},0)
-				    return;
+				setTimeout(() => {
-				}
+					uni.hideKeyboard()
-				// #endif
+				}, 300)
-				uni.scanCode({
+				this.cur = ''
-					success: (res) => {
+				this.$emit('input', '')
-						this.$emit('input', res.result)
-						this.$emit('handleChange', res.result)
-					},
-					fail: (err) => {
-						// uni.showToast({
-						// 	title: '出错',
-						// 	icon: 'none'
-						// })
-					}
-				});
 			}
-			// #ifdef APP-PLUS
+			// async toScan() {
-			,
+			// 	// #ifdef APP-PLUS
-			async checkPermission(code) {
+			// 	let status = await this.checkPermission();
-				let status = permision.isIOS ? await permision.requestIOS('camera') :
+			// 	if (status !== 1) {
-					await permision.requestAndroid('android.permission.CAMERA');
+			// 	    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) {
+			// 	if (status === null || status === 1) {
-					status = 1;
+			// 		status = 1;
-				} else {
+			// 	} else {
-					uni.showModal({
+			// 		uni.showModal({
-						content: "需要相机权限",
+			// 			content: "需要相机权限",
-						confirmText: "设置",
+			// 			confirmText: "设置",
-						success: function(res) {
+			// 			success: function(res) {
-							if (res.confirm) {
+			// 				if (res.confirm) {
-								permision.gotoAppSetting();
+			// 					permision.gotoAppSetting();
-							}
+			// 				}
-						}
+			// 			}
-					})
+			// 		})
-				}
+			// 	}
-				return status;
+			// 	return status;
-			}
+			// }
-			// #endif
+			// // #endif
 		}
 	}
 </script>
@@ -107,4 +131,6 @@
 	top 0
 	right 0
 	_wh(auto, 70rpx)
+.icon_scan_active
+	color $red
 </style>

components/SearchBox1.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="search_wraper">
+		<input 
+		type="text" 
+		class="filter_input search_input" 
+		:value="value"
+		:focus="focused"
+		@input="handleChange($event)">
+		<view class="buttons_wraper">
+			<span class="iconfont icon-del" @tap="toDel">&#xe6dc;</span>
+			<span class="iconfont icon_scan" @tap="toScan">&#xe6e2;</span>
+			<span v-show="seaShow" class="iconfont icon_search" @tap="toSearch">&#xe6e1;</span>
+		</view>
+	</view>
+</template>
+
+<script>
+	import permision from "@/utils/permission.js"
+	export default {
+		data() {
+			return {
+				cur: ''
+			};
+		},
+		model: {
+			prop: 'value',
+			event: 'input'
+		},
+		props: {
+			value: String,
+			seaShow: {
+			  type: Boolean,
+			  default: false
+			},
+			focused: {
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			handleChange ($event) {
+				this.cur = $event.target.value
+				this.$emit('input', this.cur)
+				this.$emit('handleChange', this.cur)
+			},
+			toSearch () {
+				this.$emit('toSearch', this.cur)
+			},
+			toDel () {
+				this.$emit('input', '')
+			},
+			async toScan() {
+				// #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">
+@import '../common/style/mixin.styl';
+.search_wraper
+	position relative
+	_wh(100%, 70rpx)
+.search_input
+	padding-right: 160rpx;
+.buttons_wraper
+	position absolute
+	top 0
+	right 0
+	_wh(auto, 70rpx)
+</style>