<template>
|
<view class="main_app">
|
<view class="main_wrap">
|
<view class="main_title">运输信息</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>入园原因</text>
|
</view>
|
<view class="value" @click="reasonClick">
|
<text class="mr6" :class="{gray: param.id}" :style="{ color: param.inReason ? '#000000' : '#999999' }">{{ param.inReason ? param.inReason : '请选择' }}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>合同/单据编号</text>
|
</view>
|
<view class="value"><input type="text" placeholder="请输入您的合同/单据编号" v-model="param.contractNum" placeholder-style="color: #999999;" /></view>
|
</view>
|
<!-- -->
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>到场时间</text>
|
</view>
|
<view class="value" @click="showDatetime = true">
|
<text class="mr6" :style="{ color: param.arriveDate ? '#000000' : '#999999' }">{{ param.arriveDate ? param.arriveDate : '请选择' }}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>作业类型</text>
|
</view>
|
<view class="value">
|
<view class="btns">
|
<view @click="inTypeClick(0)" :class="{ active: param.inType == 0 }" class="btn">整托盘</view>
|
<view @click="inTypeClick(1)" :class="{ active: param.inType == 1 }" class="btn">件烟</view>
|
</view>
|
</view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>总运输量</text>
|
</view>
|
<view class="value">
|
<input type="number" @blur="checkSurplus" placeholder="请输入总运输量" v-model="param.totalNum" placeholder-style="color: #999999;" />
|
<text class="unit">万支</text>
|
</view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>准运证/运单照片</text>
|
</view>
|
<view class="value" @click="handleUpload">
|
<image v-if="param.transportImgFull" class="upload_wrap" :src="param.transportImgFull" alt="">
|
<view v-else class="upload_wrap"><u-icon name="plus" size="20" color="#999999"></u-icon></view>
|
</view>
|
</view>
|
<view class="empty"></view>
|
<view class="main_title">司机/车辆信息</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>司机姓名</text>
|
</view>
|
<view class="value"><input type="text" placeholder="请输入您的真实姓名" v-model="param.driverName" placeholder-style="color: #999999;" /></view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>手机号</text>
|
</view>
|
<view class="value"><input type="number" placeholder="请输入您的手机号" v-model="param.driverPhone" placeholder-style="color: #999999;" /></view>
|
</view>
|
<!-- -->
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>车前牌照号</text>
|
</view>
|
<view class="value" @click="openInput(1)">
|
<text :style="{ color: param.carCodeFront ? '#000000' : '#999999' }">{{ param.carCodeFront ? param.carCodeFront : '请输入车牌号码' }}</text>
|
</view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>车后牌照号</text>
|
</view>
|
<view class="value" @click="openInput(2)">
|
<text :style="{ color: param.carCodeBack ? '#000000' : '#999999' }">{{ param.carCodeBack ? param.carCodeBack : '请输入车牌号码' }}</text>
|
</view>
|
</view>
|
<view class="copy" @click="copy">复制车前牌照号</view>
|
<view class="footer">
|
<view class="handle_sub" @click="onSubmit">
|
提交
|
</view>
|
</view>
|
</view>
|
|
<!-- -->
|
<u-picker :show="showReason" keyName="reason" closeOnClickOverlay @close="showReason = false"
|
@cancel="showReason = false" :columns="reasonList" @confirm="reasonConfirm"></u-picker>
|
<u-datetime-picker
|
:show="showDatetime"
|
closeOnClickOverlay
|
:minDate="new Date().getTime()"
|
mode="datetime"
|
:formatter="formatter"
|
@close="showDatetime = false"
|
@cancel="showDatetime = false"
|
@confirm="setinDate"
|
></u-datetime-picker>
|
<keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
|
</view>
|
</template>
|
|
<script>
|
import keyboardInput from '@/components/keyboard-input/keyboard-input.vue';
|
import { uploadUrl, driverCarApply,driverCarApplyEdit, driverReasonList, driverApplyDetail, checkSurplusNum } from '@/api';
|
import dayjs from 'dayjs'
|
export default {
|
components: {
|
keyboardInput
|
},
|
data() {
|
return {
|
param: {
|
inType: 0,
|
driverName: uni.getStorageSync('driverInfo').realname,
|
driverPhone: uni.getStorageSync('driverInfo').username,
|
},
|
reasonIndex: -1,
|
reasonList: [],
|
showDatetime: false,
|
showReason: false,
|
|
inputType: ''
|
};
|
},
|
onLoad(option) {
|
if(option && option.id){
|
this.getDetail(option.id, option.type)
|
}
|
this.initData()
|
},
|
methods: {
|
formatter(type, value) {
|
if (type === 'year') {
|
return `${value}年`
|
}
|
if (type === 'month') {
|
return `${value}月`
|
}
|
if (type === 'day') {
|
return `${value}日`
|
}
|
if (type === 'hour') {
|
return `${value}时`
|
}
|
if (type === 'minute') {
|
return `${value}分`
|
}
|
return value
|
},
|
checkSurplus() {
|
const { arriveDate, reasonId, totalNum } = this.param
|
if(!arriveDate || !reasonId || !totalNum) return
|
checkSurplusNum({
|
arriveDate: arriveDate + ':00',
|
reasonId,
|
totalNum
|
}).then(res => {
|
console.log('res', res);
|
|
if( res.data == 0 || res.data < Number(totalNum)){
|
this.showToast(`当日剩余可预约作业量不足请选择其他到场日期`)
|
}
|
})
|
},
|
reasonClick() {
|
if(this.param.id){
|
return
|
}
|
this.showReason = true
|
},
|
onSubmit() {
|
const param = { ...this.param }
|
if (!param.arriveDate) return this.showToast('请选择到场时间')
|
if (!param.inType && param.inType != 0) return this.showToast('请选择作业类型')
|
if (!param.contractNum) return this.showToast('请输入合同/单据编号')
|
if (!param.totalNum) return this.showToast('请输入总运输量')
|
if (!param.driverName) return this.showToast('请输入司机姓名')
|
if (!param.driverPhone) return this.showToast('请输入手机号')
|
if (!param.carCodeFront) return this.showToast('请输入车前牌号')
|
if (!param.carCodeBack) return this.showToast('请输入车后牌号')
|
if (!param.transportImgFull) return this.showToast('请上传准运证/运单照片')
|
param.arriveDate = param.arriveDate + ':00'
|
let fn = param.id ? driverCarApplyEdit : driverCarApply
|
fn({...param}).then(res => {
|
if(res && res.code === 200){
|
setTimeout(() => {
|
this.showToast('预约申请成功')
|
})
|
uni.redirectTo({
|
url: '/pages/driver/index'
|
})
|
}
|
})
|
},
|
getDetail(id, type) {
|
driverApplyDetail({id}).then(res => {
|
this.param = { ...res.data, transportImgFull: res.data.prefixUrl + res.data.transportImg }
|
if(type && type == 'reject'){
|
this.$set(this.param, 'id', null)
|
}
|
})
|
},
|
initData(){
|
driverReasonList().then(res => {
|
this.reasonList = [res.data]
|
})
|
},
|
reasonConfirm(e) {
|
const reasonList = this.reasonList[0]
|
const index = e.indexs[0]
|
this.$set(this.param, 'inReason', reasonList[index].reason)
|
this.$set(this.param, 'reasonId', reasonList[index].id)
|
this.checkSurplus()
|
this.showReason = false
|
},
|
setinDate(e) {
|
this.$set(this.param, 'arriveDate', dayjs(e.value).format('YYYY-MM-DD HH:mm'))
|
this.checkSurplus()
|
this.showDatetime = false
|
},
|
inTypeClick(e) {
|
this.param.inType = e
|
},
|
openInput(type) {
|
this.inputType = type;
|
this.$refs.keyboard.open();
|
},
|
setPlate(e) {
|
if (this.inputType === 1) {
|
this.$set(this.param, 'carCodeFront', e)
|
} else if (this.inputType === 2) {
|
this.$set(this.param, 'carCodeBack', e)
|
}
|
this.$forceUpdate();
|
this.closeInput();
|
},
|
closeInput() {
|
this.$refs.keyboard.close();
|
},
|
copy(){
|
if(this.param.carCodeFront){
|
this.$set(this.param, 'carCodeBack', this.param.carCodeFront)
|
this.showToast('复制成功');
|
}
|
},
|
handleUpload() {
|
let token = uni.getStorageSync('token') || ''
|
uni.chooseImage({
|
count: 1,
|
success: (chooseImageRes) => {
|
uni.showLoading({ title: '上传中', mask: true })
|
const tempFilePaths = chooseImageRes.tempFilePaths
|
let imgs = tempFilePaths.map((value, index) => {
|
return {
|
name: 'file',
|
uri: value
|
}
|
})
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
files: imgs,
|
name: 'file',
|
formData: {
|
folder: 'PLATFORM'
|
},
|
header: {
|
Dm_user_token: token
|
},
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
console.log('res', res.data)
|
if (res.data && res.data.length > 0) {
|
this.$set(this.param, 'transportImg', res.data[0].imgaddr)
|
this.$set(this.param, 'transportImgFull', res.data[0].url)
|
}
|
},
|
fail(err) {
|
console.log('err', err)
|
},
|
complete() {
|
uni.hideLoading()
|
}
|
})
|
// }
|
}
|
})
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #f7f7f7;
|
}
|
.main_wrap {
|
background-color: #fff;
|
margin: 0 -30rpx;
|
padding: 0 30rpx;
|
.line {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1rpx solid #e5e5e5;
|
padding: 30rpx 0;
|
.label {
|
font-size: 30rpx;
|
font-weight: 400;
|
text {
|
&:nth-child(1) {
|
color: #e42d2d;
|
margin-right: 4rpx;
|
}
|
}
|
}
|
.value {
|
flex: 1;
|
height: 100%;
|
margin-left: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
.gray{
|
color: #999999 !important;
|
}
|
.btns {
|
display: flex;
|
align-items: center;
|
.btn {
|
height: 60rpx;
|
line-height: 60rpx;
|
padding: 0 16rpx;
|
font-size: 26rpx;
|
margin-left: 12rpx;
|
border-radius: 12rpx;
|
border: 1rpx solid #777777;
|
color: #777777;
|
}
|
.active {
|
background-color: #4d99a8;
|
color: #fff;
|
border: 1rpx solid #4d99a8;
|
}
|
}
|
.unit {
|
width: 64rpx;
|
text-align: right;
|
font-size: 26rpx;
|
margin-bottom: 2rpx;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
text-align: right;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
.upload_wrap {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 12rpx;
|
border: 2rpx solid #e5e5e5;
|
background: #f7f7f7;
|
color: #666666;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
.main_app {
|
padding-top: 10rpx;
|
.footer{
|
background-color: #f7f7f7;
|
padding: 20rpx 30rpx 30rpx;
|
margin: 0 -30rpx;
|
}
|
.handle_sub{
|
width: 690rpx;
|
background-color: #4d99a8;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
color: #fff;
|
border-radius: 50rpx;
|
}
|
.perch{
|
width: 750rpx;
|
margin: 0 -30rpx;
|
height: 200rpx;
|
background-color: #f7f7f7;
|
}
|
.copy{
|
background-color: #f7f7f7;
|
display: flex;
|
margin: 0 -30rpx;
|
width: 750rpx;
|
justify-content: flex-end;
|
padding: 12rpx 30rpx;
|
font-size: 26rpx;
|
color: #4d99a8;
|
}
|
}
|
.main_title {
|
width: 750rpx;
|
padding: 16rpx 30rpx;
|
background-color: #f7f7f7;
|
margin: 0 -30rpx;
|
color: #666666;
|
font-size: 26rpx;
|
}
|
.empty {
|
width: 750rpx;
|
height: 20rpx;
|
background-color: #f7f7f7;
|
margin: 0 -30rpx;
|
}
|
</style>
|
