zhangdi
20 hours ago
parent
d35be57ebb
commit
344a5baf47
5 changed files with 649 additions and 3 deletions
@ -0,0 +1,603 @@ |
||||
<template> |
||||
<ifrm> |
||||
<uni-forms ref="wrForm" class="formBox" label-position="top"> |
||||
<uni-forms-item label="起点站点：" label-width="100px"> |
||||
<input |
||||
type="text" |
||||
v-model="startCode" |
||||
@confirm="handleStartConfirm" |
||||
placeholder="站点码" |
||||
class="uni-input-border" |
||||
confirm-type="done" |
||||
:focus="startInputFocus" |
||||
/> |
||||
<view v-if="startData" class="start-confirm"> |
||||
<text class="check-icon">✓</text> |
||||
<text class="confirm-text">已确认: {{ startData.stationName }}</text> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="终点区域：" label-width="150px"> |
||||
<picker |
||||
mode="selector" |
||||
:range="workCenters" |
||||
range-key="name" |
||||
:value="endCenterIndex" |
||||
@change="handleEndChange" |
||||
class="uni-input-border" |
||||
disabled |
||||
> |
||||
<view class="picker-input"> |
||||
<text :class="endCenter ? 'picker-value' : 'picker-placeholder'"> |
||||
{{ endCenter || "请选择终点" }} |
||||
</text> |
||||
</view> |
||||
</picker> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
|
||||
<view class="footer-action"> |
||||
<button @click="handleSubmit" class="submit-btn">回库</button> |
||||
</view> |
||||
</ifrm> |
||||
</template> |
||||
<script> |
||||
import ifrm from "@/pages/index/ifrm"; |
||||
export default { |
||||
components: { |
||||
ifrm, |
||||
}, |
||||
data() { |
||||
return { |
||||
startCode: "", //起点站点 |
||||
startInputFocus: true, //起点站点输入框聚焦 |
||||
startData: null, |
||||
workCenters: [], //作业中心 |
||||
endCenterIndex: null, |
||||
endCenter: "", // |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getWorkCenterList(); |
||||
}, |
||||
methods: { |
||||
// 获取作业中心列表 |
||||
getWorkCenterList() { |
||||
this.$u.api.getWorkCenter().then((res) => { |
||||
this.workCenters = res.data.map((c) => ({ |
||||
id: c.id, |
||||
name: c.wcName, |
||||
stationRegionList: c.stationRegionList, |
||||
})); |
||||
|
||||
// 默认选择逻辑 |
||||
const defaultItemIndex = this.workCenters.findIndex( |
||||
(item) => item.name && item.name.includes("输送线终点") |
||||
); |
||||
if (defaultItemIndex !== -1) { |
||||
this.endCenterIndex = this.workCenters[defaultItemIndex].id; // 设置 Picker 索引 |
||||
this.endCenter = this.workCenters[defaultItemIndex].name; |
||||
} |
||||
}); |
||||
}, |
||||
handleEndChange(e) { |
||||
const index = e.detail.value; |
||||
const selectedWorkCenter = this.workCenters[index]; |
||||
|
||||
this.endCenter = selectedWorkCenter.name; |
||||
this.endCenterIndex = selectedWorkCenter.id; |
||||
|
||||
// 清空终点区域 |
||||
this.endArea = ""; |
||||
this.endAreaIndex = 0; |
||||
}, |
||||
handleStartConfirm() { |
||||
const code = this.startCode.trim(); |
||||
if (!code) return; |
||||
this.$u.api |
||||
.getStationName({ stationCode: this.startCode }) |
||||
.then((res) => { |
||||
console.log("起点站点", res.data); |
||||
this.startData = res.data; |
||||
this.startInputFocus = false; |
||||
}); |
||||
}, |
||||
handleSubmit() { |
||||
if (this.startCode == "") { |
||||
uni.showToast({ |
||||
title: `请扫描起点区域!`, |
||||
icon: "none", |
||||
}); |
||||
return; |
||||
} |
||||
if (this.endCenterIndex == null) { |
||||
uni.showToast({ |
||||
title: `无输送线终点站点!`, |
||||
icon: "none", |
||||
}); |
||||
return; |
||||
} |
||||
uni.showLoading({ |
||||
title: "提交中...", |
||||
}); |
||||
let query = { |
||||
endWcId: this.endCenterIndex, |
||||
startStationCode: this.startCode, |
||||
}; |
||||
this.$u.api |
||||
.boxBindingTesk(query) |
||||
.then((res) => { |
||||
uni.showToast({ |
||||
title: `成功配送至 ${this.endCenter}!`, |
||||
icon: "none", |
||||
}); |
||||
uni.hideLoading(); |
||||
|
||||
this.startCode = ""; |
||||
this.startData = null; |
||||
this.startInputFocus = true; |
||||
}) |
||||
.catch((err) => { |
||||
uni.hideLoading(); |
||||
this.startCode = ""; |
||||
this.startData = null; |
||||
this.startInputFocus = true; |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.page-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100vh; |
||||
background-color: #ffffff; |
||||
user-select: none; |
||||
font-size: 26rpx; |
||||
position: relative; |
||||
} |
||||
|
||||
.header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 6rpx 16rpx; |
||||
background-color: #1d4ed8; |
||||
color: #ffffff; |
||||
flex-shrink: 0; |
||||
z-index: 20; |
||||
} |
||||
|
||||
.header-title { |
||||
font-weight: bold; |
||||
font-size: 28rpx; |
||||
letter-spacing: 1rpx; |
||||
} |
||||
|
||||
.content-scroll { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-color: #ffffff; |
||||
} |
||||
|
||||
.module { |
||||
padding: 16rpx; |
||||
border-bottom: 4rpx solid #e2e8f0; |
||||
} |
||||
|
||||
.module-header { |
||||
display: flex; |
||||
align-items: center; |
||||
color: #1e293b; |
||||
font-weight: bold; |
||||
margin-bottom: 8rpx; |
||||
} |
||||
|
||||
.module-icon { |
||||
font-size: 32rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
|
||||
.module-title { |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.scan-input { |
||||
width: 100%; |
||||
padding: 16rpx; |
||||
background-color: #ffffff; |
||||
border: 4rpx solid #94a3b8; |
||||
border-radius: 4rpx; |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
} |
||||
|
||||
.scan-input::placeholder { |
||||
color: #94a3b8; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
.box-info { |
||||
margin-top: 12rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
background-color: #f8fafc; |
||||
padding: 12rpx; |
||||
border-radius: 4rpx; |
||||
border: 2rpx solid #e2e8f0; |
||||
} |
||||
|
||||
.info-section { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 4rpx; |
||||
flex: 1; |
||||
} |
||||
|
||||
.info-text { |
||||
color: #475569; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.info-value { |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
margin-left: 4rpx; |
||||
} |
||||
|
||||
.info-value-center { |
||||
font-weight: bold; |
||||
color: #1d4ed8; |
||||
margin-left: 4rpx; |
||||
} |
||||
|
||||
.details-btn { |
||||
color: #1d4ed8; |
||||
background-color: #dbeafe; |
||||
font-weight: bold; |
||||
border: 2rpx solid #bfdbfe; |
||||
font-size: 26rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.details-btn:active { |
||||
background-color: #bfdbfe; |
||||
} |
||||
|
||||
.arrow { |
||||
margin-left: 4rpx; |
||||
font-size: 24rpx; |
||||
} |
||||
|
||||
.start-confirm { |
||||
margin-top: 8rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: bold; |
||||
color: #059669; |
||||
} |
||||
|
||||
.check-icon { |
||||
font-size: 28rpx; |
||||
margin-right: 8rpx; |
||||
} |
||||
|
||||
.confirm-text { |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.picker-input { |
||||
width: 100%; |
||||
padding: 16rpx; |
||||
} |
||||
|
||||
.picker-disabled { |
||||
opacity: 0.5; |
||||
} |
||||
|
||||
.picker-value { |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
} |
||||
|
||||
.picker-placeholder { |
||||
font-size: 28rpx; |
||||
color: #94a3b8; |
||||
} |
||||
|
||||
.footer { |
||||
padding: 16rpx; |
||||
background-color: #f1f5f9; |
||||
border-top: 2rpx solid #cbd5e1; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.submit-btn { |
||||
width: 100%; |
||||
background-color: #1d4ed8; |
||||
color: #ffffff; |
||||
padding: 20rpx; |
||||
border-radius: 4rpx; |
||||
font-weight: bold; |
||||
font-size: 30rpx; |
||||
border: none; |
||||
} |
||||
|
||||
.submit-btn:active { |
||||
background-color: #1e40af; |
||||
} |
||||
|
||||
.btn-disabled { |
||||
opacity: 0.5; |
||||
background-color: rgba(29, 78, 216, 0.5); |
||||
} |
||||
|
||||
/* Popup Styles */ |
||||
.popup-overlay { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
z-index: 100; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
} |
||||
|
||||
.popup-content { |
||||
background-color: #ffffff; |
||||
border-radius: 16rpx 16rpx 0 0; |
||||
max-height: 70vh; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
border-top: 4rpx solid #94a3b8; |
||||
} |
||||
|
||||
.popup-header { |
||||
padding: 24rpx; |
||||
background-color: #ffffff; |
||||
border-bottom: 4rpx solid #e2e8f0; |
||||
flex-shrink: 0; |
||||
text-align: center; |
||||
} |
||||
|
||||
.popup-title { |
||||
font-weight: bold; |
||||
font-size: 30rpx; |
||||
color: #0f172a; |
||||
text-align: center; |
||||
} |
||||
|
||||
.popup-scroll { |
||||
flex: 1; |
||||
padding: 24rpx; |
||||
overflow-y: auto; |
||||
width: auto; |
||||
} |
||||
|
||||
.popup-orders { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 16rpx; |
||||
} |
||||
|
||||
.popup-order-item { |
||||
background-color: #f8fafc; |
||||
padding: 16rpx; |
||||
border: 2rpx solid #cbd5e1; |
||||
border-radius: 4rpx; |
||||
} |
||||
|
||||
.popup-order-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 8rpx; |
||||
} |
||||
|
||||
.popup-order-no { |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.popup-order-qty { |
||||
color: #1d4ed8; |
||||
font-weight: bold; |
||||
font-size: 26rpx; |
||||
} |
||||
|
||||
.popup-order-name { |
||||
color: #475569; |
||||
font-size: 24rpx; |
||||
} |
||||
|
||||
.popup-footer { |
||||
padding: 16rpx; |
||||
background-color: #f1f5f9; |
||||
border-top: 2rpx solid #cbd5e1; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.popup-close-btn { |
||||
width: 100%; |
||||
background-color: #ffffff; |
||||
border: 4rpx solid #94a3b8; |
||||
color: #1e293b; |
||||
padding: 16rpx; |
||||
border-radius: 4rpx; |
||||
font-weight: bold; |
||||
font-size: 28rpx; |
||||
} |
||||
|
||||
.popup-close-btn:active { |
||||
background-color: #e2e8f0; |
||||
} |
||||
|
||||
.help-tip { |
||||
position: absolute; |
||||
top: 45%; |
||||
left: 0; |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
pointer-events: none; |
||||
opacity: 0.5; |
||||
z-index: 10; |
||||
} |
||||
|
||||
.tip-content { |
||||
background-color: #1e293b; |
||||
color: #ffffff; |
||||
font-size: 20rpx; |
||||
padding: 8rpx 16rpx; |
||||
border-radius: 4rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.tip-icon { |
||||
margin-right: 8rpx; |
||||
font-size: 24rpx; |
||||
} |
||||
|
||||
.tip-text { |
||||
font-size: 20rpx; |
||||
} |
||||
|
||||
.bottom-input-row { |
||||
display: flex; |
||||
gap: 10px; |
||||
margin-bottom: 12px; |
||||
} |
||||
|
||||
.weight-input-wrapper { |
||||
flex: 1; |
||||
} |
||||
|
||||
.submit-btn { |
||||
width: 88px; |
||||
height: 50px; |
||||
background-color: #155dfc; |
||||
border-radius: 10px; |
||||
color: #ffffff; |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
||||
0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
border: none; |
||||
padding: 0; |
||||
line-height: 50px; |
||||
} |
||||
|
||||
.submit-btn.disabled { |
||||
opacity: 0.5; |
||||
} |
||||
.mode-switch { |
||||
display: flex; |
||||
width: 140px; |
||||
height: 34px; |
||||
border-radius: 4px; |
||||
border: 1px solid rgba(21, 93, 252, 1); |
||||
overflow: hidden; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
.switch-btn { |
||||
flex: 1; |
||||
text-align: center; |
||||
line-height: 32px; |
||||
font-size: 14px; |
||||
color: rgba(21, 93, 252, 1); |
||||
background-color: #fff; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.switch-btn.active { |
||||
background-color: rgba(21, 93, 252, 1); |
||||
color: #fff; |
||||
} |
||||
.label-left { |
||||
flex-direction: row !important; |
||||
margin-top: 20rpx; |
||||
} |
||||
/* 底部固定按钮区域 */ |
||||
.footer-action { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
padding: 20rpx 32rpx; |
||||
background-color: #ffffff; |
||||
border-top: 2rpx solid #e2e8f0; |
||||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05); |
||||
z-index: 50; |
||||
} |
||||
.picker-input { |
||||
width: 100%; |
||||
padding: 16rpx; |
||||
} |
||||
|
||||
.picker-value { |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
color: #0f172a; |
||||
} |
||||
|
||||
.picker-placeholder { |
||||
font-size: 28rpx; |
||||
color: #94a3b8; |
||||
} |
||||
|
||||
/* 禁用状态 */ |
||||
.picker-input.disabled { |
||||
opacity: 0.5; |
||||
background-color: #f1f5f9; |
||||
} |
||||
.uni-input-border { |
||||
margin-bottom: 20rpx; |
||||
} |
||||
.required-label { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.required-mark { |
||||
color: #ff0000; |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
margin-right: 4rpx; |
||||
} |
||||
/* 空数据提示样式 */ |
||||
.empty-tip-picker { |
||||
width: 100%; |
||||
padding: 16rpx; |
||||
background-color: #f8fafc; |
||||
border: 2rpx solid #e2e8f0; |
||||
border-radius: 4rpx; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
|
||||
.empty-text { |
||||
color: #94a3b8; |
||||
font-size: 28rpx; |
||||
text-align: center; |
||||
display: block; |
||||
} |
||||
|
||||
.uni-input-border { |
||||
margin-bottom: 20rpx; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 29 KiB |
Loading…
Reference in new issue