148 lines
3.0 KiB
Vue
148 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<view class="search_wraper">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
class="filter_input pdr120"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:value="value"
|
||
|
|
:focus="focusState"
|
||
|
|
@blur="handleBlur($event)"
|
||
|
|
@input="handleChange($event)">
|
||
|
|
<view class="zd-row buttons_wraper">
|
||
|
|
<!-- <uni-icons @tap="toDel" type="closeempty" size="20" color="#4e6ef2"></uni-icons> -->
|
||
|
|
<uni-icons class="pdr10" @tap="toScan" type="scan" size="20" :color="focusState ? '#ff6a00' : '#4e6ef2'"></uni-icons>
|
||
|
|
<uni-icons @tap="toPhone" type="camera" size="24" color="#4e6ef2" style="margin-top: 2px"></uni-icons>
|
||
|
|
<uni-icons v-show="seaShow" @tap="toSearch" type="search" size="20" color="#4e6ef2"></uni-icons>
|
||
|
|
</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
|
||
|
|
},
|
||
|
|
placeholder: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
focused() {
|
||
|
|
this.focusState = this.focused
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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 toPhone() {
|
||
|
|
// #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%, 80rpx)
|
||
|
|
.pdr120
|
||
|
|
padding-right: 120rpx;
|
||
|
|
.buttons_wraper
|
||
|
|
position absolute
|
||
|
|
top 0
|
||
|
|
right 10rpx
|
||
|
|
_wh(auto, 80rpx)
|
||
|
|
.pdr10
|
||
|
|
padding-right 10rpx
|
||
|
|
</style>
|