154 lines
3.4 KiB
Vue
154 lines
3.4 KiB
Vue
<template>
|
||
<view class="search_wraper">
|
||
<input
|
||
type="text"
|
||
class="search_input"
|
||
:placeholder="placeholder"
|
||
:value="value"
|
||
:focus="focused"
|
||
@input="handleChange($event)">
|
||
<view class="buttons_wraper">
|
||
<view class="iconfont icon-del" @tap="toDel"></view>
|
||
<view class="iconfont icon_scan" @tap="checkMpaasScan"></view>
|
||
<view v-show="seaShow" class="iconfont icon_search" @tap="toSearch"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import permision from "@/utils/permission.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
cur: ''
|
||
};
|
||
},
|
||
model: {
|
||
prop: 'value',
|
||
event: 'input'
|
||
},
|
||
props: {
|
||
placeholder: String,
|
||
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
|
||
// #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
|
||
position relative
|
||
_wh(100%, 35px)
|
||
.search_input
|
||
border 1px solid #e5e5e5
|
||
border-radius 4px
|
||
height: 35px;
|
||
line-height: 35px;
|
||
padding-left 10px;
|
||
padding-right 100px;
|
||
font-size: 14px;
|
||
color: #6a6a6a
|
||
.buttons_wraper
|
||
_fj()
|
||
position absolute
|
||
top 0
|
||
right 0
|
||
_wh(auto, 35px)
|
||
.icon-del
|
||
_wh(30px, 35px)
|
||
_font(30px,35px,#6a6a6a,,center)
|
||
.icon_scan
|
||
_wh(30px, 35px)
|
||
_font(30px,35px,#6a6a6a,,center)
|
||
.icon_search
|
||
_wh(30px, 35px)
|
||
_font(30px,35px,#6a6a6a,,center)
|
||
</style>
|