hht-tongbo/components/SearchBox.vue

<template>
	<view class="search_wraper">
		<input 
		type="text" 
		class="filter_input search_input" 
		:value="value"
		: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" :class="{'icon_scan_active': focusState === true}" @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: '',
				focusState: false
			};
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: String,
			seaShow: {
			  type: Boolean,
			  default: false
			},
			focused: {
				type: Boolean,
				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', '')
			},
			toScan () {
				setTimeout(() => {
					this.focusState = true
				},0)
				setTimeout(() => {
					uni.hideKeyboard()
				}, 300)
				this.cur = ''
				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)
.icon_scan_active
	color $red
</style>