pad-nl-three-uni/components/SearchBox.vue

<template>
	<view class="zd-row search_wraper" :class="{'input_focus': focusState}">
		<view class="iconfont icon_search" @tap="toSearch">&#xe6e1;</view>
		<input 
		ref="input"
		type="text" 
		class="search_input" 
		:placeholder="placeholder"
		:value="value"
		:focus="focusState"
		@blur="focusState=false"
		@focus="focusState=true"
		@input="handleChange($event)">
		<view class="iconfont icon-del" @tap="toDel">&#xe6dc;</view>
		<view class="iconfont icon_scan" @tap="checkMpaasScan">&#xe6e2;</view>
	</view>
</template>

<script>
	import permision from "@/utils/permission.js"
	export default {
		data() {
			return {
				cur: '',
				focusState: true
			};
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			placeholder: String,
			value: String,
			seaShow: {
			  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)
				this.$nextTick(() => {
					this.focusState = true
				})
			},
			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
			// #ifdef APP-PLUS
			,
			async checkMpaasScan () {
				var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
				mpaasScanModule.mpaasScan({
					// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
					'scanType':  ['qrCode','barCode'],
					// 是否隐藏相册，默认false不隐藏
					'hideAlbum': false
				},
				(ret) => {
					// uni.showModal({
					// 	title: "弹窗标题",
					// 	// 返回值中，resp_code 表示返回结果值，10：用户取消，11：其他错误，1000：成功
					// 	// 返回值中，resp_message 表示返回结果信息
					// 	// 返回值中，resp_result 表示扫码结果，只有成功才会有返回
					// 	content: JSON.stringify(ret),
					// 	showCancel: false,
					// 	confirmText: "确定"
					// })
					this.$emit('input', ret.resp_result)
				})
			}
			// #endif
		}
	}
</script>

<style lang="stylus">
@import '../common/style/mixin.styl';
.search_wraper
	_wh(100%, 76rpx)
	padding 0 4rpx 0 24rpx
	border 1rpx solid #4980BD
	background-color rgba(45,88,184,0.1)
	border-radius 12rpx
.search_input
	width 100%
	height: 76rpx;
	line-height: 76rpx;
	font-size: 28rpx;
	color: #fff
.icon-del
	_wh(70rpx, 70rpx)
	margin-right 10rpx
	_font(40rpx,70rpx,#a2b6cc,,center)
.icon_scan
	_wh(140rpx, 60rpx)
	_font(40rpx,60rpx,#fff,,center)
	background-color #137ABD
	border-radius 24rpx
.icon_search
	_wh(70rpx, 70rpx)
	_font(40rpx,70rpx,#a2b6cc,,center)
.input_focus
	border: 1rpx solid #889dc7;
	box-shadow: 0 0 0 2rpx rgba(136, 157, 199,.2);
</style>