202 lines
3.9 KiB
Vue
202 lines
3.9 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="header">
|
|
<button class="back" @click="back"><i class="icon icon-arrow_back"
|
|
style="color:#05DCEF;font-size:36rpx"></i></button>
|
|
<text class="title">空载具入库</text>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<view class="tip">
|
|
<view class="tip-icon"><i class="icon icon-info" style="color:#05DCEF"></i></view>
|
|
<text class="tip-text">请扫描或输入载具号进行空载具入库操作</text>
|
|
</view>
|
|
|
|
<view class="field">
|
|
<text class="label">载具号 <text class="required">*</text></text>
|
|
<view class="input-wrap">
|
|
<i class="left-icon icon icon-qr_code_2" style="font-size:36rpx"></i>
|
|
<input class="input" placeholder="请扫描或输入载具号" v-model="vehicleNo" />
|
|
</view>
|
|
</view>
|
|
|
|
<button class="submit" :disabled="loading || !vehicleNo.trim()" @click="submit">
|
|
<i class="icon icon-save" style="margin-right:12rpx"></i> 确认入库
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
WmsApiClient
|
|
} from '@/common/wmsApi.js';
|
|
import {
|
|
DialogUtils
|
|
} from '@/utils/dialog.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
vehicleNo: '',
|
|
loading: false
|
|
}
|
|
},
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
async submit() {
|
|
const plate = (this.vehicleNo || '').trim();
|
|
if (!plate) {
|
|
return
|
|
}
|
|
this.loading = true
|
|
try {
|
|
const res = await WmsApiClient.emptyVehicleIn(plate)
|
|
if (res.code === 200) {
|
|
DialogUtils.showSuccessMessage('成功', '空载具入库成功')
|
|
this.vehicleNo = ''
|
|
} else {
|
|
DialogUtils.showWarningMessage('提示', res.message || '提交失败')
|
|
}
|
|
} catch (e) {
|
|
DialogUtils.showErrorMessage('错误', typeof e === 'string' ? e : (e.message || '网络错误'))
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.header {
|
|
position: relative;
|
|
height: 120rpx;
|
|
padding: 0;
|
|
background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.container {
|
|
min-height: 100vh;
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
|
|
.title {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.tip {
|
|
flex-direction: row;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f2fdff;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
color: #333;
|
|
margin-bottom: 28rpx;
|
|
}
|
|
|
|
.tip-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 20rpx;
|
|
background: #e6f7ff;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
margin-right: 12rpx;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tip-text {
|
|
color: #333;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.label {
|
|
color: #333;
|
|
font-size: 30rpx;
|
|
margin-bottom: 12rpx;
|
|
display: block;
|
|
}
|
|
|
|
.required {
|
|
color: #ff4d4f
|
|
}
|
|
|
|
.input-wrap {
|
|
height: 96rpx;
|
|
border-radius: 12rpx;
|
|
border: 1px solid #e6e6e6;
|
|
background: #fff;
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.left-icon {
|
|
color: #05DCEF;
|
|
font-size: 36rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
height: 100%;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.submit {
|
|
width: 100%;
|
|
height: 92rpx;
|
|
border: none;
|
|
color: #fff;
|
|
border-radius: 46rpx;
|
|
background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
|
|
font-size: 32rpx;
|
|
box-shadow: 0 8rpx 22rpx rgba(5, 220, 239, .25);
|
|
text-align: center;
|
|
margin-top: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.submit[disabled] {
|
|
opacity: .6
|
|
}
|
|
|
|
.back {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 80rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
border: none;
|
|
color: #05DCEF;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style> |