linweidong
/
besure_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 上模/下模红外扫码输入框 & 历史按钮样式统一

Browse Source
master
zhongwenkai 7 days ago
parent 661d85b383
commit 5dad159c21
2 changed files with 166 additions and 107 deletions
Show Stats Download Patch File Download Diff File

137
src/pages_function/pages/moldoperate/dismount.vue
Unescape Escape View File

@ -4,24 +4,24 @@
<NavBar :title="t('moldOperate.tabDown')">
<template #right>
<view class="nav-right-btn" @click="goToHistory">
<uni-icons type="clock" size="22" color="#1f7cff"></uni-icons>
<text class="nav-right-text">{{ t('moldPressureNet.history') }}</text>
<uni-icons type="calendar" size="22" color="#22486e"></uni-icons>
</view>
</template>
</NavBar>
<!-- 操作按钮区 -->
<view class="action-row">
<view class="action-btn scan-btn" @click="handleScan">
<view class="btn-icon-wrap">
<text class="iconfont icon-scan btn-icon"></text>
</view>
<text class="btn-text">{{ t('moldOperate.scanDevice') }}</text>
<view class="scan-input-row">
<input
class="scan-input"
v-model="scanCodeInput"
placeholder="红外扫码或输入设备码"
confirm-type="done"
:focus="true"
@confirm="onScanInputConfirm"
/>
</view>
<view class="action-btn select-btn" @click="openDevicePicker">
<view class="btn-icon-wrap">
<text class="iconfont icon-device btn-icon"></text>
</view>
<text class="btn-text">{{ t('moldOperate.selectDevice') }}</text>
</view>
</view>
@ -254,6 +254,7 @@ const tempSelectedMoldId = ref(null)
// ---- 操作人与备注 ----
const remarkText = ref('')
const selectedOperator = ref(null)
const scanCodeInput = ref('')
// ---- 工具函数 ----
function textValue(v) {
@ -358,7 +359,30 @@ async function loadLowerMolds(deviceName) {
}
}
// ---- 扫描设备码 ----
// ---- 扫描/输入设备码 ----
function matchDeviceByCode(code) {
if (!code) return null
let matched = null
if (code.toUpperCase().startsWith('EQUIPMENT-')) {
const idFromQr = code.replace(/EQUIPMENT-/i, '')
matched = deviceOptions.value.find((d) => String(d.raw.id) === idFromQr)
}
if (!matched) {
matched = deviceOptions.value.find((d) =>
Object.values(d.raw).some((v) =>
typeof v === 'string' && v.trim().toUpperCase() === code.toUpperCase()
) || d.label.toUpperCase().includes(code.toUpperCase())
)
}
if (!matched) {
const idMatch = code.match(/(\d+)$/)
if (idMatch) {
matched = deviceOptions.value.find((d) => String(d.raw.id) === idMatch[1])
}
}
return matched
}
function handleScan() {
uni.scanCode({
onlyFromCamera: false,
@ -366,24 +390,8 @@ function handleScan() {
success(res) {
const code = (res.result || '').trim()
if (!code) return
let matched = null
if (code.toUpperCase().startsWith('EQUIPMENT-')) {
const idFromQr = code.replace(/EQUIPMENT-/i, '')
matched = deviceOptions.value.find((d) => String(d.raw.id) === idFromQr)
}
if (!matched) {
matched = deviceOptions.value.find((d) =>
Object.values(d.raw).some((v) =>
typeof v === 'string' && v.trim().toUpperCase() === code.toUpperCase()
) || d.label.toUpperCase().includes(code.toUpperCase())
)
}
if (!matched) {
const idMatch = code.match(/(\d+)$/)
if (idMatch) {
matched = deviceOptions.value.find((d) => String(d.raw.id) === idMatch[1])
}
}
scanCodeInput.value = code
const matched = matchDeviceByCode(code)
if (matched) {
selectDevice(matched.raw)
} else {
@ -398,6 +406,17 @@ function handleScan() {
})
}
function onScanInputConfirm() {
const code = scanCodeInput.value.trim()
if (!code) return
const matched = matchDeviceByCode(code)
if (matched) {
selectDevice(matched.raw)
} else {
uni.showToast({ title: t('moldOperate.deviceNotFound'), icon: 'none' })
}
}
// ---- 设备选择 ----
function selectDevice(device) {
selectedDevice.value = device || {}
@ -543,21 +562,16 @@ onShow(async () => {
<style lang="scss" scoped>
/* ====== 导航栏右侧按钮 ====== */
.nav-right-btn {
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
gap: 6rpx;
padding: 8rpx 18rpx;
justify-content: center;
background: #ffffff;
border-radius: 999rpx;
border-radius: 50%;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.nav-right-text {
font-size: 24rpx;
color: #374151;
font-weight: 500;
}
.page-container {
min-height: 100vh;
background: #f5f6f8;
@ -567,39 +581,48 @@ onShow(async () => {
/* ====== 操作按钮区 ====== */
.action-row {
display: flex;
gap: 20rpx;
align-items: center;
gap: 16rpx;
padding: 20rpx 24rpx;
}
.action-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
height: 96rpx;
border-radius: 12rpx;
height: 72rpx;
padding: 0 24rpx;
border-radius: 10rpx;
background: #1f4b79;
color: #fff;
font-size: 28rpx;
font-size: 26rpx;
font-weight: 600;
white-space: nowrap;
.btn-icon-wrap {
width: 44rpx;
height: 44rpx;
display: flex;
align-items: center;
justify-content: center;
.btn-text {
font-size: 26rpx;
line-height: 1;
}
}
.btn-icon {
font-size: 36rpx;
color: #fff;
}
.scan-input-row {
flex: 1;
display: flex;
align-items: center;
height: 72rpx;
border-radius: 10rpx;
overflow: hidden;
}
.btn-text {
font-size: 28rpx;
}
.scan-input {
flex: 1;
height: 72rpx;
padding: 0 20rpx;
font-size: 26rpx;
color: #333;
background: #fff;
border: 1rpx solid #d0d5dd;
border-radius: 10rpx;
}
/* ====== 卡片通用样式 ====== */

136
src/pages_function/pages/moldoperate/index.vue
Unescape Escape View File

@ -4,8 +4,7 @@
<NavBar :title="t('moldOperate.tabUp')">
<template #right>
<view class="nav-right-btn" @click="goToHistory">
<uni-icons type="clock" size="22" color="#1f7cff"></uni-icons>
<text class="nav-right-text">{{ t('moldPressureNet.history') }}</text>
<uni-icons type="calendar" size="22" color="#22486e"></uni-icons>
</view>
</template>
</NavBar>
@ -13,16 +12,17 @@
<!-- ========== 上模 ========== -->
<!-- 操作按钮区 -->
<view class="action-row">
<view class="action-btn scan-btn" @click="handleScan">
<view class="btn-icon-wrap">
<text class="iconfont icon-scan btn-icon"></text>
</view>
<text class="btn-text">{{ t('moldOperate.scanDevice') }}</text>
<view class="scan-input-row">
<input
class="scan-input"
v-model="scanCodeInput"
placeholder="红外扫码或输入设备码"
confirm-type="done"
:focus="true"
@confirm="onScanInputConfirm"
/>
</view>
<view class="action-btn select-btn" @click="openDevicePicker">
<view class="btn-icon-wrap">
<text class="iconfont icon-device btn-icon"></text>
</view>
<text class="btn-text">{{ t('moldOperate.selectDevice') }}</text>
</view>
</view>
@ -262,6 +262,7 @@ const selectedMountMolds = ref([])
const tempSelectedDeviceId = ref(null)
const remarkText = ref('')
const selectedOperator = ref(null)
const scanCodeInput = ref('') // 扫码/输入设备码
// 设备状态 - 上模
const deviceStatusClass = computed(() => {
@ -407,6 +408,29 @@ async function handleConfirmMount() {
}
// ==================== 共享: 扫码 / 取消 / 返回 ====================
function matchDeviceByCode(code) {
if (!code) return null
let matched = null
if (code.toUpperCase().startsWith('EQUIPMENT-')) {
const idFromQr = code.replace(/EQUIPMENT-/i, '')
matched = deviceOptions.value.find((d) => String(d.raw.id) === idFromQr)
}
if (!matched) {
matched = deviceOptions.value.find((d) =>
Object.values(d.raw).some((v) =>
typeof v === 'string' && v.trim().toUpperCase() === code.toUpperCase()
) || d.label.toUpperCase().includes(code.toUpperCase())
)
}
if (!matched) {
const idMatch = code.match(/(\d+)$/)
if (idMatch) {
matched = deviceOptions.value.find((d) => String(d.raw.id) === idMatch[1])
}
}
return matched
}
function handleScan() {
uni.scanCode({
onlyFromCamera: false,
@ -414,27 +438,8 @@ function handleScan() {
success(res) {
const code = (res.result || '').trim()
if (!code) return
let matched = null
// 格式1: EQUIPMENT-{设备ID}
if (code.toUpperCase().startsWith('EQUIPMENT-')) {
const idFromQr = code.replace(/EQUIPMENT-/i, '')
matched = deviceOptions.value.find((d) => String(d.raw.id) === idFromQr)
}
// 格式2: 匹配设备字段或 label
if (!matched) {
matched = deviceOptions.value.find((d) =>
Object.values(d.raw).some((v) =>
typeof v === 'string' && v.trim().toUpperCase() === code.toUpperCase()
) || d.label.toUpperCase().includes(code.toUpperCase())
)
}
// 格式3: 提取末尾数字匹配设备ID
if (!matched) {
const idMatch = code.match(/(\d+)$/)
if (idMatch) {
matched = deviceOptions.value.find((d) => String(d.raw.id) === idMatch[1])
}
}
scanCodeInput.value = code // 输入框显示扫码结果
const matched = matchDeviceByCode(code)
if (matched) {
setDeviceLineName(matched.raw)
selectDevice(matched.raw)
@ -450,6 +455,19 @@ function handleScan() {
})
}
// 手动输入设备码后确认
function onScanInputConfirm() {
const code = scanCodeInput.value.trim()
if (!code) return
const matched = matchDeviceByCode(code)
if (matched) {
setDeviceLineName(matched.raw)
selectDevice(matched.raw)
} else {
uni.showToast({ title: t('moldOperate.deviceNotFound'), icon: 'none' })
}
}
function handleCancel() {
selectedDevice.value = {}
selectedMountMolds.value = []
@ -491,59 +509,77 @@ onShow(async () => {
/* ====== 导航栏右侧按钮 ====== */
.nav-right-btn {
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
gap: 6rpx;
padding: 8rpx 18rpx;
justify-content: center;
background: #ffffff;
border-radius: 999rpx;
border-radius: 50%;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.nav-right-text {
font-size: 24rpx;
color: #374151;
font-weight: 500;
}
/* ====== 操作按钮区 ====== */
.action-row {
display: flex;
gap: 20rpx;
align-items: center;
gap: 16rpx;
padding: 20rpx 24rpx;
}
.action-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
height: 96rpx;
border-radius: 12rpx;
gap: 10rpx;
height: 72rpx;
padding: 0 24rpx;
border-radius: 10rpx;
background: #1f4b79;
color: #fff;
font-size: 28rpx;
font-size: 26rpx;
font-weight: 600;
white-space: nowrap;
.btn-icon-wrap {
width: 44rpx;
height: 44rpx;
width: 36rpx;
height: 36rpx;
display: flex;
align-items: center;
justify-content: center;
}
.btn-icon {
font-size: 36rpx;
font-size: 30rpx;
color: #fff;
}
.btn-text {
font-size: 28rpx;
font-size: 26rpx;
line-height: 1;
}
}
/* 扫码输入框行 */
.scan-input-row {
flex: 1;
display: flex;
align-items: center;
height: 72rpx;
border-radius: 10rpx;
overflow: hidden;
}
.scan-input {
flex: 1;
height: 72rpx;
padding: 0 20rpx;
font-size: 26rpx;
color: #333;
background: #fff;
border: 1rpx solid #d0d5dd;
border-radius: 10rpx;
}
/* ====== 卡片通用样式 ====== */
.section-card {
margin: 16rpx 24rpx;

Write Preview
Loading…
Cancel
Save