VUE的picker时间日期选择

<template>
    <view class="container">
        <view class="uni-padding-wrap uni-common-mt">
            <form @submit="formSubmit">
                <!-- 车辆信息 -->
                <view v-for="(item, indexItem) in truckIdArray" :key=‘indexItem‘>
                    <view class="uni-list">
                        <view class="uni-list-cell">
                            <view class="uni-list-cell-left">
                                车辆信息
                            </view>
                            <view class="uni-list-cell-db">
                                <view class="uni-input">
                                    <view v-if="truckIdArray.length > 1">
                                        <button style="float: right;" type="default" size="mini" @click="removeTruck(indexItem)">删除</button>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="uni-list-cell">
                            <view class="uni-list-cell-left">
                                车牌号码：
                            </view>
                            <view class="uni-list-cell-db">
                                <picker @change="bindPickerChange(indexItem, $event)" :value="indexArray[indexItem]" :range="truckList"
                                 range-key="licensePlateNumber" @click="getTruckList(1)">
                                    <view class="uni-input">{{truckList[indexArray[indexItem]].licensePlateNumber}}</view>
                                </picker>
                            </view>
                        </view>
                        <view class="uni-list-cell">
                            <view class="uni-list-cell-left">
                                车辆类型：
                            </view>
                            <view class="uni-list-cell-db">
                                <view class="uni-input">{{truckList[indexArray[indexItem]].truckType}}</view>
                            </view>
                        </view>
                        <view class="uni-list-cell">
                            <view class="uni-list-cell-left">
                                车主姓名：
                            </view>
                            <view class="uni-list-cell-db">
                                <view class="uni-input">{{truckList[indexArray[indexItem]].truckOwner}}</view>
                            </view>
                        </view>
                        <view class="uni-list-cell">
                            <view class="uni-list-cell-left">
                                车主电话：
                            </view>
                            <view class="uni-list-cell-db">
                                <view class="uni-input">{{truckList[indexArray[indexItem]].telephone}}</view>
                            </view>
                        </view>
                        <view class="uni-list-cell">
                            <view class="uni-list-cell-left">
                                行驶证照片：
                            </view>
                            <view class="uni-center" style="background:#FFFFFF; font-size:0;">
                                <image class="image" mode="widthFix" :src="truckList[indexArray[indexItem]].vehicleLicenseImage" :data-src="truckList[indexArray[indexItem]].vehicleLicenseImage"
                                 @tap="previewImage" />
                                </image>
                            </view>
                        </view>
                    </view>
                </view>
                <view style="margin-top: 10rpx; margin-bottom: 10rpx;">
                    <button type="primary"  plain="true" @click="addTruck()">添加车辆</button>
                </view>

                <!-- 申请信息 -->
                <view class="uni-list">
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            项目建设单位：
                        </view>
                        <view class="uni-list-cell-db">
                            <input class="uni-input" name="projectConstructionUnit" placeholder="请输入项目建设单位" />
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            负责人：
                        </view>
                        <view class="uni-list-cell-db">
                            <input class="uni-input" name="personInCharge" placeholder="请输入负责人" />
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            负责人电话：
                        </view>
                        <view class="uni-list-cell-db">
                            <input class="uni-input" name="phone" placeholder="请输入负责人电话" />
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            运载物料类型：
                        </view>
                        <view class="uni-list-cell-db">
                            <picker @change="bindPickerChangeType" :value="indexType" :range="materialsTypeList" range-key="itemText" name="materialsType"
                             @click="getMaterialsTypeList">
                                <view class="uni-input">{{materialsTypeList[indexType].itemText}}</view>
                            </picker>
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            申请人：
                        </view>
                        <view class="uni-list-cell-db">
                            <input class="uni-input" name="applicant" placeholder="请输入申请人" />
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            申请人电话：
                        </view>
                        <view class="uni-list-cell-db">
                            <input class="uni-input" name="telephone" placeholder="请输入申请人电话" />
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            开始时间：
                        </view>
                        
                        <picker class="uni-list-cell-db"  mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
                            <input class="uni-input"  :value="startTime" placeholder=‘请选择开始时间‘/>
                        </picker>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            结束时间：
                        </view>
                        
                        <picker class="uni-list-cell-db"  mode="multiSelector" @change="bindMultiPickerChange1" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
                            <input class="uni-input"  :value="endTime" placeholder=‘请选择结束时间‘/>
                        </picker>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            起点路线：
                        </view>
                        <view class="uni-list-cell-db">
                            <input class="uni-input" name="startPoint" disabled="true" placeholder="请输入起点路线" @tap="chooseStartPoint" v-model="startPoint" />
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            终点路线：
                        </view>
                        <view class="uni-list-cell-db">
                            <input class="uni-input" name="endPoint" disabled="true" placeholder="请输入终点路线" @tap="chooseEndPoint" v-model="endPoint" />
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left" >
                            申请理由：
                        </view>
                        <view class="uni-list-cell-db">
                            <textarea class="textarea-content" name="applicationReason" placeholder="请输入申请理由及上传证明材料"></textarea>
                        </view>
                    </view>
                </view>
                <view class="uni-btn-v" v-if="buttonFlag == false">
                    <button form-type="submit" type="primary">保存</button>
                </view>
            </form>
        </view>

        
    </view>
</template>

<script>
    import { postAction } from ‘../../common/request.js‘;
    import wPicker from "@/components/w-picker/w-picker.vue";
    var util = require(‘../../common/util.js‘);
    var graceChecker = require("../../common/graceChecker.js");
    
    const date = new Date();
    const years = [];
    const months = [];
    const days = [];
    const hours = [];
    const minutes = [];
    //获取年
    for (let i = 2020; i <= date.getFullYear() + 5; i++) {
      years.push("" + i);
    }
    //获取月份
    for (let i = 1; i <= 12; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      months.push("" + i);
    }
    //获取日期
    for (let i = 1; i <= 31; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      days.push("" + i);
    }
    //获取小时
    for (let i = 0; i < 24; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      hours.push("" + i);
    }
    //获取分钟
    for (let i = 0; i < 60; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      minutes.push("" + i);
    }
    export default {
        components: {
            wPicker
        },
        data() {
            return {
                truckList: [{
                    licensePlateNumber: ‘请选择车辆‘
                }],
                url: {
                    getDictTypeList: "truck/wxApp/getDictTypeList",
                    add: ‘truck/wxApp/truckApplication/addOrEdit‘,
                    getTruckList: ‘truck/wxApp/truck/getTruckList‘,
                },
                truckIdArray: [],
                truckNumberArray: [],
                indexArray: [],
                materialsTypeList: [{
                    itemText: ‘请选择运载物料类型‘
                }],
                indexType: 0,
                startTime: ‘‘,
                endTime: ‘‘,
                startPoint: ‘‘,
                endPoint: ‘‘,
                startPointLongitude: ‘‘,
                endPointLongitude: ‘‘,
                startPointLatitude: ‘‘,
                endPointLatitude: ‘‘,
                buttonFlag: false,
                
                multiArray: [years, months, days, hours, minutes],
                multiIndex: [0, 0, 0, 10, 0],
                choose_year: ‘‘,
            }
        },
        
        onLoad() {
            this.getTruckList(0);
            this.getMaterialsTypeList();
            //this.choose_year = this.data.multiArray[0][0]
            var date = new Date();
            this.multiIndex = [date.getFullYear() - 2020,date.getMonth(),date.getDate() - 1,0,0]
        },
        methods: {
            bindMultiPickerChange(e) {
                 /* console.log(‘picker发送选择改变，携带值为‘, e.detail.value) */
                
                this.multiIndex = e.detail.value
                
                const index = this.multiIndex;
                const year = this.multiArray[0][index[0]];
                const month = this.multiArray[1][index[1]];
                const day = this.multiArray[2][index[2]];
                const hour = this.multiArray[3][index[3]];
                const minute = this.multiArray[4][index[4]];
                // console.log(`${year}-${month}-${day}-${hour}-${minute}`);
                
                this.startTime = year + ‘-‘ + month + ‘-‘ + day + ‘ ‘ + hour + ‘:‘ + minute
                
                // console.log(this.data.time);
              },
                  
              bindMultiPickerChange1(e){
                  this.multiIndex = e.detail.value
                  
                  const index = this.multiIndex;
                  const year = this.multiArray[0][index[0]];
                  const month = this.multiArray[1][index[1]];
                  const day = this.multiArray[2][index[2]];
                  const hour = this.multiArray[3][index[3]];
                  const minute = this.multiArray[4][index[4]];
                  // console.log(`${year}-${month}-${day}-${hour}-${minute}`);
                  
                  this.endTime = year + ‘-‘ + month + ‘-‘ + day + ‘ ‘ + hour + ‘:‘ + minute
              },
              //监听picker的滚动事件
              bindMultiPickerColumnChange(e) {
                  
                /* console.log(‘修改的列为‘, e.detail.column, ‘，值为‘, e.detail.value); */
                if (e.detail.column == 0) {
                  let choose_year = this.multiArray[e.detail.column][e.detail.value];
                  
                  /* this.setData({
                    
                  }) */
                  this.choose_year = choose_year;
                }
                
                if (e.detail.column == 1) {
                  let num = parseInt(this.multiArray[e.detail.column][e.detail.value]);
                  let temp = [];
                  if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
                    for (let i = 1; i <= 31; i++) {
                      if (i < 10) {
                        i = "0" + i;
                      }
                      temp.push("" + i);
                    }
                    
                      this.multiArray[2] = temp
                   ;
                  } else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
                    for (let i = 1; i <= 30; i++) {
                      if (i < 10) {
                        i = "0" + i;
                      }
                      temp.push("" + i);
                    }
                    
                      this.multiArray[2] = temp
                    ;
                  } else if (num == 2) { //判断2月份天数
                    let year = parseInt(this.choose_year);
                    if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
                      for (let i = 1; i <= 29; i++) {
                        if (i < 10) {
                          i = "0" + i;
                        }
                        temp.push("" + i);
                      }
                      
                        this.multiArray[2] = temp
                      
                    } else {
                      for (let i = 1; i <= 28; i++) {
                        if (i < 10) {
                          i = "0" + i;
                        }
                        temp.push("" + i);
                      }
                      
                        this.multiArray[2] = temp
                      ;
                    }
                  }
                }
                var data = {
                  multiArray: this.multiArray,
                  multiIndex: this.multiIndex
                };
                data.multiIndex[e.detail.column] = e.detail.value;
                
              },
            
            //查询车辆列表
            getTruckList(value) {
                let _this = this;
                let parms = {
                    wxUserId: ‘123‘,
                };
                postAction(this.url.getTruckList, parms).then(function(res) {
                    if (value == 0) {
                        if (res.records.length > 0) {
                            _this.truckList = res.records;
                            for (let i = 0; i < _this.truckList.length; i++) {
                                _this.truckList[i].vehicleLicenseImage = util.getImgFullUrl(_this.truckList[i].vehicleLicenseImage);
                            }
                            _this.truckIdArray.push(_this.truckList[0].id);
                            _this.truckNumberArray.push(_this.truckList[0].licensePlateNumber);
                            _this.indexArray.push(0);
                        } else {
                            uni.showModal({
                                content: ‘当前用户暂无车辆，请前往添加‘,
                                showCancel: false,
                                success: (res) => {
                                    if (res.confirm) {
                                        uni.navigateTo({
                                            url: ‘/pages/userInfo/myTruck‘
                                        })
                                    }
                                }
                            })
                        }
                    } else if (value == 1) {
                        _this.truckList = res.records;
                        for (let i = 0; i < _this.truckList.length; i++) {
                            _this.truckList[i].vehicleLicenseImage = util.getImgFullUrl(_this.truckList[i].vehicleLicenseImage);
                        }
                    }
                })
            },
            //点击切换选择车辆
            bindPickerChange: function(index, e) {
                if (this.truckIdArray.length > 1 && this.truckIdArray.indexOf(this.truckList[e.detail.value].id) != -1) {
                    uni.showToast({
                        title: "车辆已选，请重新选择",
                        icon: "none"
                    })
                } else {
                    this.truckIdArray.splice(index, 1, this.truckList[e.detail.value].id);
                    this.truckNumberArray.splice(index, 1, this.truckList[e.detail.value].licensePlateNumber);
                    this.indexArray.splice(index, 1, e.detail.value);
                }
            },
            //预览行驶证照片
            previewImage: function(e) {
                var current = e.target.dataset.src
                uni.previewImage({
                    current: current,
                    urls: [current]
                })
            },
            //继续添加车辆信息
            addTruck: function() {
                if (this.truckIdArray.length >= this.truckList.length) {
                    return false;
                }
                this.truckIdArray.push(this.truckList[this.indexArray.length].id);
                this.truckNumberArray.push(this.truckList[this.indexArray.length].licensePlateNumber);
                this.indexArray.push(this.indexArray[this.indexArray.length - 1] + 1);
            },
            //移除车辆信息
            removeTruck: function(indexItem) {
                this.truckIdArray.splice(indexItem, 1);
                this.truckNumberArray.splice(indexItem, 1);
                this.indexArray.splice(indexItem, 1);
            },
            //条件查询运载物料类型
            getMaterialsTypeList() {
                var params = {
                    dictCode: ‘materials_type‘
                }
                postAction(this.url.getDictTypeList, params).then((res) => {
                    this.materialsTypeList = res;
                })
            },
            //点击切换运载物料类型
            bindPickerChangeType: function(e) {
                this.indexType = e.detail.value
            },
            
            onCancel() {

            },
            //比较开始时间、结束时间
            comparedTime: function(startTime, endTime){
                if (startTime != "" && endTime != ""){
                    let startDate = this.transferDate(this.transferDate(startTime)).getTime();
                    let endDate = this.transferDate(this.transferDate(endTime)).getTime();
                    return startDate < endDate ? true : false;
                }
            },
            transferDate: function(date) {
                if(typeof date == "string") {
                      return new Date(date.replace(/-/ig, "/"));
                } else {
                      return date;
                }
            },
            
            //选择起点地图
            chooseStartPoint: function() {
                uni.chooseLocation({
                    success: (res) => {
                        this.startPointLongitude = res.longitude,
                        this.startPointLatitude = res.latitude,
                        this.startPoint = res.address + res.name
                    }
                })
            },
            //选择终点地图
            chooseEndPoint: function() {
                uni.chooseLocation({
                    success: (res) => {
                        this.endPointLongitude = res.longitude,
                        this.endPointLatitude = res.latitude,
                        this.endPoint = res.address + res.name
                    }
                })
            },
            //表单提交
            formSubmit: function(e) {
                //定义表单规则
                var rule = [
                    { name: "projectConstructionUnit", checkType: "string", checkRule: "2,20", errorMsg: "项目建设单位应为2-20字符" },
                    { name: "personInCharge", checkType: "string", checkRule: "2,4", errorMsg: "负责人姓名应为2-4字符" },
                    { name: "phone", checkType: "phoneno", checkRule: "11", errorMsg: "负责人电话应为11位数字" },
                    { name: "applicant", checkType: "string", checkRule: "2,4", errorMsg: "申请人姓名应为2-4字符" },
                    { name: "telephone", checkType: "phoneno", checkRule: "11", errorMsg: "申请人电话应为11位数字" },
                ];

                //进行表单检查
                var formData = e.detail.value;
                formData.createdBy = ‘123‘;//从本地缓存中获取关注用户微信openId
                formData.truckId = this.truckIdArray.join(‘,‘); //车辆id
                formData.licensePlateNumber = this.truckNumberArray.join(‘,‘); //车牌号码
                formData.materialsType = this.materialsTypeList[formData.materialsType].itemValue; //字典值
                formData.startPointLongitude = this.startPointLongitude;
                formData.startPointLatitude = this.startPointLatitude;
                formData.endPointLongitude = this.endPointLongitude;
                formData.endPointLatitude = this.endPointLatitude;
                formData.passRoute = this.startPoint + ‘ → ‘ + this.endPoint;
                formData.correctPassRoute = this.startPoint + ‘ → ‘ + this.endPoint;
                formData.correctStartTime = this.startTime;
                formData.correctEndTime = this.endTime;
                var checkRes = graceChecker.check(formData, rule);
                if (checkRes) {
                    if (this.startTime == "") {
                        uni.showToast({
                            title: "请选择开始时间!",
                            icon: "none"
                        });
                        return false;
                    }
                    if (this.endTime == "") {
                        uni.showToast({
                            title: "请选择结束时间!",
                            icon: "none"
                        });
                        return false;
                    }
                    if(!this.comparedTime(this.startTime, this.endTime)){
                        uni.showToast({
                            title: "开始时间不大于结束时间!",
                            icon: "none"
                        });
                        return false;
                    }
                    if (this.startPoint == "") {
                        uni.showToast({
                            title: "请选择起点路线!",
                            icon: "none"
                        });
                        return false;
                    }
                    if (this.endPoint == "") {
                        uni.showToast({
                            title: "请选择路线!",
                            icon: "none"
                        });
                        return false;
                    }

                    this.buttonFlag = true;
                    postAction(this.url.add, formData).then((res) => {
                        uni.showToast({
                            title: "提交成功!"
                        })
                        setTimeout(function() {
                            uni.navigateTo({
                                url: ‘/pages/application/myApplication?status=0‘
                            })
                        }, 2000)
                    })
                } else {
                    uni.showToast({
                        title: graceChecker.error,
                        icon: "none"
                    });
                }
            },
        }
    }
</script>

<style>
    .image {
        margin-right: 200rpx;
        margin-bottom: 40rpx;
        width: 200rpx;
        height: 200rpx;
        margin-top: 20px;
    }

    .textarea-content {
        height: 180rpx;
        width: 490rpx;
        margin-top: 130rpx;
    }
</style>