<template>
|
<!-- 点击输入框 可输入；也可点击搜索按钮 弹出选择框 -->
|
<view class="forma-item">
|
<view class="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" v-if="content">
|
<view class="mask" @tap.stop="" v-if="disabled"></view>
|
<view class="input-view">
|
<input
|
:clearable="clearable"
|
border="none"
|
:type="type"
|
:placeholder="placeholder"
|
v-model.trim="innerValue"
|
@clear="onClear"
|
@blur="onBlur"
|
@focus="innerValue = ''"
|
@confirm="onConfirm(innerValue)"
|
/>
|
</view>
|
<view class="scan-view" v-if="hasScan">
|
<view @tap.stop="onScan">
|
<u-icon name="scan" color="#F18201" :size="32"></u-icon>
|
</view>
|
</view>
|
<view class="btn-view" v-if="hasSearch">
|
<view class="search-btn" @tap.stop="searchShowBox">搜</view>
|
</view>
|
</view>
|
<!-- :class="msgType === 'info' ? 'info-type' : ''" -->
|
<view class="msg-row info-type" v-if="innerValue">
|
{{ msg }}
|
</view>
|
</view>
|
<EasyPicker
|
:visible.sync="visible"
|
:list="selectData"
|
:labelField="labelField"
|
:valueField="valueField"
|
@select="getSelectData"
|
:isShowSearch="true"
|
@getCurrentData="getCurrentData"
|
/>
|
</view>
|
</template>
|
|
<script>
|
import { parseDic } from "@/static/js/utils/index.js";
|
import EasyPicker from "@/components/EasyPickerWithSearch.vue";
|
|
export default {
|
emits: ["getPropData", "confirmHc"],
|
props: {
|
type: { type: String, default: "text" },
|
label: { type: String, default: "" },
|
placeholder: { type: String, default: "请输入..." },
|
msg: { type: String, default: "" },
|
msgType: { type: String, default: "error" },
|
hasScan: { type: Boolean, default: true },
|
hasSearch: { type: Boolean, default: true },
|
disabled: { type: Boolean, default: false },
|
clearable: { type: Boolean, default: true },
|
required: { type: Boolean, default: false },
|
content: { type: Boolean, default: true },
|
selectData: { type: Array, default: () => [] },
|
labelField: { type: String, default: "" },
|
valueField: { type: String, default: "" },
|
value: {
|
type: String,
|
default: "",
|
},
|
},
|
components: {
|
EasyPicker,
|
},
|
watch: {
|
value(newVal) {
|
this.innerValue = newVal; // 避免父组件更新后 localValue 不同步
|
}
|
},
|
data() {
|
return {
|
visible: false,
|
innerValue: this.value,
|
};
|
},
|
methods: {
|
// 弹框数据 点击某一项确认
|
getSelectData(val) {
|
this.$emit("update:value", val);
|
this.$emit("confirmHc",val); // 搜索后调用的接口
|
},
|
//弹框中的数据
|
getCurrentData(val) {
|
this.$emit("getPropData", val);
|
},
|
onScan() {
|
uni.scanCode({
|
success: (res) => {
|
this.innerValue = res.result;
|
},
|
fail: () => {
|
console.log("scanCode fail");
|
},
|
});
|
},
|
searchShowBox() {
|
this.visible = true; // 显示弹框
|
this.$emit("searchShowBox", this.innerValue);
|
},
|
onClear() {
|
this.innerValue = null;
|
this.$emit("clear");
|
},
|
onBlur() {
|
this.$emit("blur", this.innerValue);
|
},
|
onConfirm(val) {
|
if (this.innerValue) {
|
this.$emit("update:value", val);
|
this.$emit("confirmHc",val);
|
}
|
},
|
},
|
|
};
|
</script>
|
<style scoped lang="scss">
|
.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;
|
}
|
}
|
.input-row {
|
width: 100%;
|
height: 75rpx;
|
overflow: hidden;
|
background-color: $uni-bg-color;
|
display: flex;
|
align-items: center;
|
position: relative;
|
.scan-view,
|
.btn-view {
|
flex-shrink: 0;
|
}
|
.scan-view {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding-right: 10rpx;
|
}
|
.input-view {
|
flex-grow: 1;
|
padding-left: 20rpx;
|
}
|
.btn-view {
|
width: 70rpx;
|
height: 100%;
|
padding: 20rpx;
|
padding-left: 0rpx;
|
box-sizing: border-box;
|
.search-btn {
|
height: 100%;
|
width: 100%;
|
border-radius: 8rpx;
|
background: linear-gradient(
|
157.342820970935deg,
|
rgba(194, 128, 255, 1) -20%,
|
rgba(194, 128, 255, 1) -19%,
|
rgba(132, 0, 255, 1) 119%
|
);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: $uni-bg-color;
|
font-size: 26rpx;
|
}
|
}
|
& > .mask {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 100;
|
background-color: #fff;
|
opacity: 0.25;
|
}
|
}
|
.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;
|
}
|
}
|
}
|
</style>
|
