<template>
|
<view class="auto-complete-scan-input-form-item-compontent">
|
<view class="p-form-label" v-if="label"><text v-if="required" class="required-tag">*</text>{{label}}：</view>
|
<view class="input-row" @tap.stop="onOpenPicker">
|
<view class="mask" @tap.stop="" v-if="disabled"></view>
|
<view class="input-view">
|
<text v-if="!innerValue" class="placeholder">{{placeholder}}</text>
|
<text v-else>{{innerValue}}</text>
|
</view>
|
<view class="close-view" @tap.stop="onClear" v-if="innerValue && clearable">
|
<view class="close-circle">
|
<u-icon
|
name="close"
|
size="11"
|
color="#ffffff"
|
customStyle="line-height: 12px"
|
></u-icon>
|
</view>
|
</view>
|
</view>
|
<view class="msg-row" v-if="msg" :class="[msgType==='info'?'info-type':'']">{{msg}}</view>
|
|
<u-popup mode="center" :show="pickerVisible" :closeOnClickOverlay="false" :safeAreaInsetTop="false" :safeAreaInsetBottom="false">
|
<view class="auto-complete-picker-page" :style="{
|
paddingTop:safetySize.top+'px',
|
paddingBottom:safetySize.bottom+'px',
|
paddingLeft:safetySize.left+'px',
|
paddingRight:safetySize.right+'px'
|
}">
|
<view class="picker-input-box">
|
<view class="input-row">
|
<view class="input-view">
|
<u--input
|
:clearable="true"
|
border="none"
|
:type="type"
|
:placeholder="placeholder"
|
:focus="pickerFocus"
|
v-model.trim="pickerValue"
|
@clear="onPickerClear"
|
@confirm="onPickerInputConfirm"
|
/>
|
</view>
|
<view class="scan-view" v-if="hasScan">
|
<view @tap.stop="onPickerScan"><u-icon name="scan" color="#F18201" :size="32"></u-icon></view>
|
</view>
|
</view>
|
</view>
|
<view class="picker-err-box" v-if="pickerErrMsg">{{pickerErrMsg}}</view>
|
<view class="picker-list-view">
|
<view class="picker-list-group">
|
<view class="picker-item auto-wrap" v-for="(item,index) in list" :key="'picker-item-'+index" @tap.stop="onItemClick(item)">{{item}}</view>
|
</view>
|
</view>
|
<view class="picker-bottom-btns">
|
<view class="btn-frame"><u-button text="取 消" @click="onCancelPicker"></u-button></view>
|
<view class="divider"></view>
|
<view class="btn-frame"><u-button type="primary" text="确 认" @click="onPickerConfirm"></u-button></view>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import { getObjectType } from '@/static/js/utils/index.js'
|
export default {
|
name:'autoCompleteScanInputFormItemCompontent',
|
emits:['input','changeOptions','clear','confirm','change'],
|
props:{
|
type:{
|
type:String,
|
default:'text'
|
},
|
label:{
|
type:String,
|
default:''
|
},
|
placeholder:{
|
type:String,
|
default:'请输入...'
|
},
|
msg:{
|
type:String,
|
default:''
|
},
|
pickerErrMsg:{
|
type:String,
|
default:''
|
},
|
msgType:{
|
type:String,
|
default:'error'
|
},
|
value:{
|
type:[String,Number,null],
|
default:null
|
},
|
hasScan:{
|
type:Boolean,
|
default:true
|
},
|
disabled:{
|
type:Boolean,
|
default:false
|
},
|
clearable:{
|
type:Boolean,
|
default:true
|
},
|
required:{
|
type:Boolean,
|
default:false
|
},
|
initPickerList:{
|
type:Boolean,
|
default:false
|
}
|
},
|
data(){
|
return {
|
innerValue:'',
|
pickerValue:'',
|
pickerVisible:false,
|
pickerFocus:false,
|
list:[],
|
safetySize:{
|
top:0,
|
bottom:0,
|
left:0,
|
right:0
|
}
|
}
|
},
|
watch:{
|
value(newVal,oldVal){
|
if (newVal!==this.innerValue) {
|
this.innerValue = newVal;
|
}
|
},
|
innerValue(newVal,oldVal){
|
if (newVal!==this.value) {
|
this.$emit('input',newVal)
|
this.$emit('change',newVal)
|
}
|
}
|
},
|
methods:{
|
onOpenPicker(){
|
this.pickerValue = this.innerValue
|
this.pickerVisible = true
|
this.$nextTick(()=>{
|
this.pickerFocus = true
|
})
|
if (this.initPickerList) {
|
this.getPickerList()
|
}
|
},
|
onClear(){
|
this.innerValue = null;
|
this.$emit('clear')
|
},
|
onPickerClear(){
|
this.pickerValue = null
|
},
|
onPickerInputConfirm(){
|
this.getPickerList()
|
},
|
getPickerList(){
|
this.$emit('changeOptions',this.pickerValue,(d)=>{
|
if (getObjectType(d)==='array') {
|
this.list = [...d]
|
}
|
})
|
},
|
onItemClick(val){
|
this.pickerValue = val;
|
this.list = []
|
},
|
onPickerScan(){
|
uni.scanCode({
|
success:(res)=>{
|
this.pickerValue = res.result;
|
this.getPickerList()
|
},
|
fail:function(){
|
console.log('scanCode fail')
|
}
|
})
|
},
|
closePicker(){
|
this.pickerVisible = false
|
this.pickerFocus = false
|
},
|
onCancelPicker(){
|
this.closePicker()
|
},
|
onPickerConfirm(){
|
this.innerValue = this.pickerValue
|
this.$emit('confirm',this.innerValue)
|
this.closePicker()
|
}
|
},
|
created() {
|
this.innerValue = this.value
|
},
|
beforeMount(){
|
let safety = this.$store.getters['system/getSafety'];
|
if (safety) {
|
this.safetySize.top = safety.top
|
this.safetySize.bottom = safety.bottom
|
this.safetySize.left = safety.left
|
this.safetySize.right = safety.right
|
} else {
|
uni.getSystemInfo({
|
success:(res=>{
|
if (!res.safeAreaInsets) res.safeAreaInsets = {}
|
this.safetySize.top = res.safeAreaInsets.top || 0;
|
this.safetySize.bottom = res.safeAreaInsets.bottom || 0;
|
this.safetySize.left = res.safeAreaInsets.left || 0;
|
this.safetySize.right = res.safeAreaInsets.right || 0;
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.auto-complete-scan-input-form-item-compontent{
|
width: 100%;
|
.p-form-label{
|
font-size: 32rpx;
|
color: $u-tips-color;
|
padding-bottom: 12rpx;
|
padding-left: 20rpx;
|
.required-tag{
|
color:$u-error;
|
}
|
}
|
.msg-row{
|
padding: 6rpx 20rpx 0 20rpx;
|
line-height: 1.3;
|
font-size: 24rpx;
|
color: $u-error;
|
word-break:break-all;
|
word-wrap:break-word;
|
&.info-type{
|
color:$color-blue;
|
}
|
}
|
}
|
.input-row{
|
width: 100%;
|
height: 90rpx;
|
overflow: hidden;
|
background-color: $uni-bg-color;
|
display: flex;
|
align-items: center;
|
position: relative;
|
.close-view{
|
.close-circle{
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: #c6c7cb;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
transform: scale(0.82);
|
margin-left: 4px;
|
}
|
}
|
.scan-view,.close-view{
|
flex-shrink: 0;
|
}
|
.scan-view,.close-view{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.scan-view{
|
padding-right: 10rpx;
|
}
|
.input-view{
|
flex-grow: 1;
|
padding-left: 20rpx;
|
font-size: 30rpx;
|
white-space:nowrap;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
color: rgb(48, 49, 51);
|
.placeholder{
|
color: rgb(192, 196, 204);
|
}
|
}
|
&>.mask{
|
background-color: #000;
|
opacity: 0.25;
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 100;
|
}
|
}
|
.auto-complete-picker-page{
|
width: 100vw;
|
height: 100vh;
|
box-sizing: border-box;
|
background-color: #f2f2f2;
|
display: flex;
|
flex-direction: column;
|
.picker-input-box,.picker-bottom-btns,.picker-err-box{
|
flex-shrink: 0;
|
}
|
.picker-input-box{
|
padding: 16rpx;
|
.input-row{
|
border-radius: 6rpx;
|
}
|
}
|
.picker-err-box{
|
color: $u-error;
|
padding: 0 16rpx 16rpx 16rpx;
|
line-height: 1.3;
|
font-size: 24rpx;
|
word-break:break-all;
|
word-wrap:break-word;
|
}
|
.picker-bottom-btns{
|
display: flex;
|
padding: 10rpx 20rpx;
|
.btn-frame{
|
width: 1%;
|
box-sizing: border-box;
|
flex-grow: 1;
|
}
|
.divider{
|
width: 20rpx;
|
flex-shrink: 0;
|
}
|
}
|
.picker-list-view{
|
flex-grow: 1;
|
height: 1px;
|
background-color: $uni-bg-color;
|
overflow: auto;
|
.picker-list-group{
|
padding: 12rpx 16rpx;
|
.picker-item{
|
text-align: center;
|
background-image: linear-gradient(to right, $color-paimary-darken, $color-paimary-lighten);
|
border: 1px solid #e4e4e4;
|
border-radius: 10rpx;
|
padding: 20rpx;
|
margin-bottom: 16rpx;
|
&:last-child{
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
