140 lines
2.9 KiB
Vue
140 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="input-box">
|
|||
|
|
<view class="input-item" v-if="state.show">
|
|||
|
|
<up-input :placeholder="props.placeholder" border="none" clearable inputAlign="left" v-model="state.inputText"
|
|||
|
|
@confirm="confirmfun">
|
|||
|
|
<template #prefix>
|
|||
|
|
<up-icon :name="props.icon" color="#2979ff" size="24"></up-icon>
|
|||
|
|
</template>
|
|||
|
|
</up-input>
|
|||
|
|
</view>
|
|||
|
|
<view class="codeBox" v-else>
|
|||
|
|
<tki-qrcode cid="qrcode" ref="qrcode" :val="state.inputText" :size="170" unit="upx" :loadMake="true"
|
|||
|
|
:usingComponents="true" />
|
|||
|
|
<view class="codeBoxText">
|
|||
|
|
<view>单据：{{ props.dataType }}</view>
|
|||
|
|
<view>编码：</view>
|
|||
|
|
<view class="container chinese-text">{{ state.inputText }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef APP-PLUS -->
|
|||
|
|
<qs-scanlistener @scan="scanFun" />
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { reactive, nextTick, defineProps, defineEmits, defineExpose,watch } from 'vue';
|
|||
|
|
import { useI18n } from 'vue-i18n'
|
|||
|
|
const getI18n = useI18n()
|
|||
|
|
const { t, locale } = getI18n
|
|||
|
|
const emits = defineEmits(['inputConfirm', 'scanConfirm'])
|
|||
|
|
const props = defineProps({
|
|||
|
|
icon: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => 'search'
|
|||
|
|
},
|
|||
|
|
placeholder: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '请输入内容'
|
|||
|
|
},
|
|||
|
|
dataType: {
|
|||
|
|
type: String,
|
|||
|
|
default: () => '来料验证'
|
|||
|
|
},
|
|||
|
|
fence: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => {
|
|||
|
|
return [false]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
watch(()=> props.fence,(val1,val2) => {
|
|||
|
|
console.log(val1,val2);
|
|||
|
|
})
|
|||
|
|
const state = reactive({
|
|||
|
|
inputText: '',
|
|||
|
|
show: true
|
|||
|
|
})
|
|||
|
|
const scanFun = (res : any) => {
|
|||
|
|
console.log(props.fence.filter((item : any) => item));
|
|||
|
|
if (props.fence.filter((item : any) => item).length === 0) {
|
|||
|
|
state.inputText = res
|
|||
|
|
state.show = false
|
|||
|
|
console.log(res);
|
|||
|
|
emits('scanConfirm', res)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const confirmfun = (e : any) => {
|
|||
|
|
emits('inputConfirm', e)
|
|||
|
|
}
|
|||
|
|
const closeFun = (time : number = 2000) => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
state.inputText = ''
|
|||
|
|
state.show = true
|
|||
|
|
emits('inputConfirm', '')
|
|||
|
|
},time)
|
|||
|
|
}
|
|||
|
|
defineExpose({
|
|||
|
|
closeFun
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.container {
|
|||
|
|
overflow-wrap: break-word;
|
|||
|
|
word-break: normal;
|
|||
|
|
hyphens: auto;
|
|||
|
|
/* 支持连字符换行 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 中文强制换行 */
|
|||
|
|
.chinese-text {
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-box {
|
|||
|
|
background-color: white;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 16rpx;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
margin: 0 0 32rpx 0;
|
|||
|
|
|
|||
|
|
.u-textarea {
|
|||
|
|
padding: 0 !important;
|
|||
|
|
font-size: 24rpx !important;
|
|||
|
|
color: #999999 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-item {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 16rpx 0;
|
|||
|
|
color: #222222;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
|
|||
|
|
.item-title {
|
|||
|
|
//font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-text {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 27rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.codeBox {
|
|||
|
|
padding: 36rpx 24rpx 24rpx 18rpx;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.codeBoxText {
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|