Files
pad-tekela-uni/components/SearchBox.vue
2024-12-05 16:30:24 +08:00

115 lines
2.3 KiB
Vue

<template>
<view class="search_wraper">
<input
type="text"
class="filter_input pdr120"
confirm-type="go"
:value="value"
:focus="focusState"
@focus="handleFocus"
@blur="handleBlur"
@confirm="handleSend">
<view class="zd-row buttons_wraper">
<uni-icons v-show="value.length" class="pdr10" type="clear" size="24" color="#fff" @tap="toDel"></uni-icons>
<uni-icons type="scan" size="22" color="#4e6ef2" @tap="toScan"></uni-icons>
</view>
</view>
</template>
<script>
import permision from "@/utils/permission.js"
export default {
data() {
return {
focusState: false
};
},
model: {
prop: 'value',
event: 'input'
},
props: {
value: String
},
methods: {
handleFocus () {
this.focusState = true
},
handleBlur (e) {
this.$emit('input', e.target.value)
// if (e.target.value.length) {
// this.$emit('handleChange', e.target.value)
// }
this.focusState = false
},
toDel () {
this.$emit('input', '')
},
handleSend (e) {
this.$emit('input', e.target.value)
if (e.target.value.length) {
this.$emit('handleChange', e.target.value)
}
},
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
}
}
</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>