Skip to content

梁建民 / scm_app

Go to a project
Commit e3b7f6c3 by liangjianmin
Options

feat(logistics): 添加物流车辆申请表单功能 

- 增加申请类型、订单号、客户名称、车费金额等表单项
- 实现金额格式化和订单号输入校验
- 添加省市选择提示和表单验证功能
parent c66cc9f3
Inline Side-by-side
Showing with 265 additions and 5 deletions
assets/css/logistics/index.scss
.logistics-page { .logistics-page {
min-height: 100vh; min-height: 100vh;
background: #f4f6fb; background: #f5f7fa;
padding-bottom: 180rpx;
.form-section {
background: #ffffff;
margin-bottom: 20rpx;
padding: 0 32rpx;
.section-header {
font-size: 28rpx;
font-weight: 600;
color: #909399;
padding: 24rpx 0 0;
}
.currency-hint {
font-size: 24rpx;
color: #c0c4cc;
padding: 12rpx 0 24rpx;
line-height: 1;
}
.customer-value {
justify-content: flex-end;
}
.link-text {
font-size: 26rpx;
color: #3b82f6;
text-align: right;
}
.destination-row {
width: 100%;
justify-content: flex-end;
gap: 18rpx;
}
.destination-select {
width: 168rpx;
height: 64rpx;
padding: 0 16rpx;
border: 1rpx solid #dcdfe6;
border-radius: 4rpx;
background: #ffffff;
box-sizing: border-box;
}
.destination-placeholder {
font-size: 24rpx;
color: #c0c4cc;
}
}
.error-tip {
padding: 24rpx 32rpx;
.error-text {
font-size: 26rpx;
color: #f56c6c;
margin-left: 8rpx;
}
}
.bottom-btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 48rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
background: #ffffff;
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
z-index: 100;
}
} }
pages.json
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
{ {
"path": "pages/apply/index", "path": "pages/apply/index",
"style": { "style": {
"navigationBarTitleText": "发起申请" "navigationBarTitleText": "业务费用减免 - 发起申请"
} }
}, },
{ {
......
pages/logistics/index.vue
<template> <template>
<view class="logistics-page"> <view class="logistics-page">
<!-- 物流车辆申请表单：待开发 --> <u-form :model="form" ref="formRef" labelWidth="220" labelPosition="left">
<view class="form-section">
<u-form-item label="申请类型" prop="apply_type" required borderBottom @click="showTypePicker = true">
<u--input v-model="applyTypeName" disabled disabledColor="#ffffff" placeholder="请选择" border="none" inputAlign="right"></u--input>
<u-icon slot="right" name="arrow-down" color="#c0c4cc"></u-icon>
</u-form-item>
<u-form-item label="订单号" prop="order_sn" required borderBottom>
<u--input v-model="form.order_sn" placeholder="请输入" border="none" inputAlign="right" @input="handleOrderNoInput"></u--input>
</u-form-item>
<u-form-item label="客户名称" prop="customer_name" required>
<view class="row verCenter boxFlex customer-value">
<text class="link-text">{{ form.customer_name || '关联订单号显示' }}</text>
</view>
</u-form-item>
</view>
<view class="form-section">
<view class="section-header">费用明细</view>
<u-form-item label="车费金额" prop="freight_amount" required borderBottom>
<u--input v-model="form.freight_amount" placeholder="请输入" border="none" inputAlign="right" type="digit" :formatter="formatAmount"></u--input>
</u-form-item>
<view class="currency-hint">
<text>CNY-人民币元</text>
</view>
<u-form-item label="车辆类型(单选)" prop="vehicle_type" required borderBottom @click="showVehiclePicker = true">
<u--input v-model="form.vehicle_type" disabled disabledColor="#ffffff" placeholder="请选择" border="none" inputAlign="right"></u--input>
<u-icon slot="right" name="arrow-down" color="#c0c4cc"></u-icon>
</u-form-item>
<u-form-item label="车辆目的地" prop="destination" required>
<view class="destination-row row">
<view class="destination-select row verCenter bothSide" @click="showTodoToast">
<text class="destination-placeholder">请选择省</text>
<u-icon name="arrow-down" color="#c0c4cc" size="24"></u-icon>
</view>
<view class="destination-select row verCenter bothSide" @click="showTodoToast">
<text class="destination-placeholder">请选择市</text>
<u-icon name="arrow-down" color="#c0c4cc" size="24"></u-icon>
</view>
</view>
</u-form-item>
</view>
<view class="form-section">
<u-form-item label="详细原因" prop="reason" required labelPosition="top" customStyle="padding-top: 24rpx">
<u--textarea v-model="form.reason" placeholder="请输入" count maxlength="200" height="104" border="surround" customStyle="margin-top: 16rpx"></u--textarea>
</u-form-item>
</view>
</u-form>
<view class="error-tip row rowCenter verCenter" v-if="errorMsg">
<u-icon name="close-circle-fill" color="#f56c6c" size="32"></u-icon>
<text class="error-text">{{ errorMsg }}</text>
</view>
<view class="bottom-btn">
<u-button type="primary" shape="circle" text="提交" @click="handleSubmit" :customStyle="{ background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', height: '88rpx' }">
</u-button>
</view>
<u-action-sheet :show="showTypePicker" :actions="typeOptions" title="选择申请类型" @close="showTypePicker = false" @select="onTypeSelect"></u-action-sheet>
<u-action-sheet :show="showVehiclePicker" :actions="vehicleOptions" title="选择车辆类型" @close="showVehiclePicker = false" @select="onVehicleSelect"></u-action-sheet>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return {}; return {
form: {
apply_type: '',
order_sn: '',
customer_name: '',
freight_amount: '',
vehicle_type: '',
province: '',
city: '',
reason: ''
}, },
methods: {} applyTypeName: '',
errorMsg: '',
showTypePicker: false,
showVehiclePicker: false,
typeOptions: [
{ name: '物流车辆申请', value: 13 }
],
vehicleOptions: [
{ name: '货拉拉', value: 'huolala' },
{ name: '公司车辆', value: 'company' },
{ name: '其它', value: 'other' }
],
orderCustomerMap: {
SO20260529001: '广州宜春供应链有限公司',
SO20260529002: '深圳华南电子商务有限公司'
}
};
},
methods: {
/**
* 选择申请类型
* @param {Object} item - 选中的申请类型
* @return {void}
*/
onTypeSelect(item) {
this.form.apply_type = item.value;
this.applyTypeName = item.name;
this.showTypePicker = false;
},
/**
* 选择车辆类型
* @param {Object} item - 选中的车辆类型
* @return {void}
*/
onVehicleSelect(item) {
this.form.vehicle_type = item.name;
this.showVehiclePicker = false;
},
/**
* 金额格式化，限制最多两位小数
* @param {string} value - 输入金额
* @return {string} 格式化后的金额
*/
formatAmount(value) {
if (!value) return '';
var cleanValue = value.replace(/[^\d.]/g, '');
var parts = cleanValue.split('.');
if (parts.length > 2) {
cleanValue = `${parts[0]}.${parts.slice(1).join('')}`;
}
if (parts.length === 2 && parts[1].length > 2) {
cleanValue = `${parts[0]}.${parts[1].substring(0, 2)}`;
}
return cleanValue;
},
/**
* 根据写死订单号展示客户名称
* @return {void}
*/
handleOrderNoInput() {
var orderSn = this.form.order_sn.trim();
this.form.customer_name = this.orderCustomerMap[orderSn] || '';
},
/**
* 展示省市暂未接入提示
* @return {void}
*/
showTodoToast() {
uni.showToast({
title: '省市选择暂未接入',
icon: 'none'
});
},
/**
* 校验表单
* @return {boolean} 是否校验通过
*/
validateForm() {
var { apply_type, order_sn, customer_name, freight_amount, vehicle_type, reason } = this.form;
var rules = [
{ invalid: !apply_type, msg: '请选择申请类型' },
{ invalid: !order_sn, msg: '请输入订单号' },
{ invalid: !customer_name, msg: '订单号不存在，无法提交！' },
{ invalid: !freight_amount, msg: '请输入车费金额' },
{ invalid: isNaN(freight_amount) || Number(freight_amount) <= 0, msg: '请输入有效的车费金额' },
{ invalid: !vehicle_type, msg: '请选择车辆类型' },
{ invalid: !reason, msg: '请输入详细原因' }
];
var failedRule = rules.find(rule => rule.invalid);
if (failedRule) {
this.errorMsg = failedRule.msg;
return false;
}
this.errorMsg = '';
return true;
},
/**
* 提交物流车辆申请
* @return {void}
*/
handleSubmit() {
if (!this.validateForm()) {
return;
}
uni.showToast({
title: '前端校验通过',
icon: 'success'
});
}
}
}; };
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment