MrShi
2025-03-27 17ecbaae8d036bb1f59b1d74b153fa9dfe542f3f
h5/pages/driver/reserved.vue
@@ -5,9 +5,19 @@
         <view class="line">
            <view class="label">
               <text>*</text>
               <text>合同号</text>
               <text>入园原因</text>
            </view>
            <view class="value"><input type="text" placeholder="请输入您的合同号" v-model="param.receptMemberName" placeholder-style="color: #999999;" /></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">
@@ -16,19 +26,19 @@
               <text>到场时间</text>
            </view>
            <view class="value" @click="showDatetime = true">
               <text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</text>
               <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>
               <text>作业类型</text>
            </view>
            <view class="value">
               <view class="btns">
                  <view class="btn active">整托盘</view>
                  <view class="btn">件烟</view>
                  <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>
@@ -38,17 +48,18 @@
               <text>总运输量</text>
            </view>
            <view class="value">
               <input type="text" placeholder="请输入总运输量" v-model="param.receptMemberName" placeholder-style="color: #999999;" />
               <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>
               <text>准运证/运单照片</text>
            </view>
            <view class="value">
               <view class="upload_wrap"><u-icon name="plus" size="20" color="#999999"></u-icon></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>
@@ -58,14 +69,14 @@
               <text>*</text>
               <text>司机姓名</text>
            </view>
            <view class="value"><input type="text" placeholder="请输入您的真实姓名" v-model="param.receptMemberName" placeholder-style="color: #999999;" /></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="text" placeholder="请输入您的手机号" v-model="param.receptMemberName" placeholder-style="color: #999999;" /></view>
            <view class="value"><input type="number" placeholder="请输入您的手机号" v-model="param.driverPhone" placeholder-style="color: #999999;" /></view>
         </view>
         <!--  -->
         <view class="line">
@@ -74,7 +85,7 @@
               <text>车前牌照号</text>
            </view>
            <view class="value" @click="openInput(1)">
               <text :style="{ color: param.carNos ? '#000000' : '' }">{{ param.carNos ? param.carNos : '请输入车牌号码' }}</text>
               <text :style="{ color: param.carCodeFront ? '#000000' : '#999999' }">{{ param.carCodeFront ? param.carCodeFront : '请输入车牌号码' }}</text>
            </view>
         </view>
         <view class="line">
@@ -82,23 +93,27 @@
               <text>*</text>
               <text>车后牌照号</text>
            </view>
            <view class="value" @click="openInput(1)">
               <text :style="{ color: param.carNos ? '#000000' : '' }">{{ param.carNos ? param.carNos : '请输入车牌号码' }}</text>
            <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="perch"></view>
         <view class="handle_sub">
            提交
         <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"
@@ -109,77 +124,190 @@
<script>
import keyboardInput from '@/components/keyboard-input/keyboard-input.vue';
import { uploadUrl } from '@/api';
import { uploadUrl, driverCarApply,driverCarApplyEdit, driverReasonList, driverApplyDetail, checkSurplusNum } from '@/api';
import dayjs from 'dayjs'
export default {
   components: {
      keyboardInput
   },
   data() {
      return {
         param: {},
         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: {
      copy(){
         this.param.carNos = this.param.carNos
         uni.showToast({
            title: '复制成功',
            duration: 1000
         });
      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
      },
      handleUpload() {
         uni.chooseImage({
            success: chooseImageRes => {
               uni.showLoading({ title: '上传中', mask: true });
               for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
                  uni.uploadFile({
                     url: `${uploadUrl}visitsAdmin/cloudService/web/public/uploadFtp.do`,
                     filePath: chooseImageRes.tempFilePaths[i],
                     name: 'file',
                     formData: {
                        folderCode: 'MEMBER_IMG'
                     },
                     success: uploadFileRes => {
                        console.log('uploadFileRes', uploadFileRes);
                        let res = JSON.parse(uploadFileRes.data);
                        if (type === 'faceImg') {
                           this.param.faceImg = res.data.halfPath;
                           this.param.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath;
                        } else {
                           this.param.imgurl = res.data.halfPath;
                           this.param.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath;
                        }
                     },
                     complete() {
                        if (i === chooseImageRes.tempFilePaths.length - 1) {
                           uni.hideLoading();
                        }
                     }
                  });
               }
      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'
               })
            }
         });
         })
      },
      setinDate(e) {},
      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.param.carNos = e;
            this.$set(this.param, 'carCodeFront', e)
         } else if (this.inputType === 2) {
            this.param.carNos = e;
            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>
@@ -215,6 +343,9 @@
         display: flex;
         align-items: center;
         justify-content: flex-end;
         .gray{
            color: #999999 !important;
         }
         .btns {
            display: flex;
            align-items: center;
@@ -268,12 +399,14 @@
   }
}
.main_app {
   // padding-top: 10rpx;
   padding-top: 10rpx;
   .footer{
      background-color: #f7f7f7;
      padding: 20rpx 30rpx 30rpx;
      margin: 0 -30rpx;
   }
   .handle_sub{
      position: fixed;
      bottom: 64rpx;
      width: 690rpx;
      left: 30rpx;
      background-color: #4d99a8;
      height: 88rpx;
      line-height: 88rpx;
@@ -291,6 +424,7 @@
      background-color: #f7f7f7;
      display: flex;
      margin: 0 -30rpx;
      width: 750rpx;
      justify-content: flex-end;
      padding: 12rpx 30rpx;
      font-size: 26rpx;