弹窗需求

components/ScanInput.vue

@@ -0,0 +1,141 @@
+<template>
+	<view class="zd-row search_wraper" :class="{'input_focus': focusState}">
+		<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_scan" @tap="checkMpaasScan">&#xe6e2;</view>
+	</view>
+</template>
+
+<script>
+	import permision from "@/utils/permission.js"
+	export default {
+		data() {
+			return {
+				cur: '',
+				focusState: false
+			};
+		},
+		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%, 70rpx)
+	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: 70rpx;
+	line-height: 70rpx;
+	font-size: 28rpx;
+	color: #fff
+.icon_scan
+	_wh(140rpx, 60rpx)
+	_font(40rpx,60rpx,#fff,,center)
+	border-radius 24rpx
+</style>

components/SearchBox.vue

@@ -135,7 +135,7 @@
 	height: 76rpx;
 	line-height: 76rpx;
 	font-size: 28rpx;
-	color: #6a6a6a
+	color: #fff
 .icon-del
 	_wh(70rpx, 70rpx)
 	margin-right 10rpx