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> |