143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
<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"></view> -->
|
||
<view class="iconfont icon_scan" @tap="toScan"></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%, 28px)
|
||
padding 0 2px 0 12px
|
||
border 1px solid #4980BD
|
||
background-color rgba(45,88,184,0.1)
|
||
border-radius 6px
|
||
.search_input
|
||
width 100%
|
||
height: 28px;
|
||
line-height: 28px;
|
||
font-size: 12px;
|
||
color: #fff
|
||
.icon_scan
|
||
_wh(70px, 30px)
|
||
_font(20px,30px,#fff,,center)
|
||
border-radius 12px
|
||
</style>
|