v3-lab-xcx/pages_supplier/views/transportPerson/transportPersonAdd.vue

<!-- 运输人员新增 -->
<template>
    <view id="register">
		<view class="register_li">
			<view class="register_li_min">
				<view>*</view>
				<view>姓名：</view>
				<input v-model="form.userName"  maxlength="10"  type="text" placeholder-style="color:#999;" placeholder="请输入姓名">
			</view>
			<view class="register_li_min" style="border: none;">
			    <view>*</view>
				<view>联系方式：</view>
				<input v-model="form.phone"   type="text" placeholder-style="color:#999;" placeholder="请输入联系方式">
			</view>
		</view>
		<view class="register_li2"  v-for="(item,index) in userCredentialsDtos" :key="index">
			<view class="register_li_t"><text v-if="item.required==1" style="color: #f00;margin-right: 10rpx;">*</text>{{item.naturalName}}</view>
			<view class="register_li_b">
				<img class="register_li_b_img1" src="@/pages_supplier/images/icon_zc_scbg.png">
				<img class="register_li_b_img2" v-if="item.naturalName" :src="baseUrl+item.naturalUrl">
				<img class="register_li_b_img3" src="@/pages_supplier/images/icon_zc_sc.png" @click="selectImage(item)">
			</view>
			<view class="register_li_b2">
				<view><text v-if="item.required==1" style="color: #f00;margin-right: 10rpx;">*</text>有效期</view>
				<picker mode="date" @change="startChange(item,$event)">
					<input class="picker-text"  disabled type="text" v-model="item.startTime" placeholder="开始时间">
				</picker>
				<view>-</view>
				<picker mode="date" @change="endChange(item,$event)">
					<input class="picker-text2"  disabled type="text" v-model="item.endTime"  placeholder="结束时间">
				</picker>
			</view>
			<view class="register_li_b3">{{item.remark}}</view>
		</view>

		<view class="sub_btn" @click="submitForm()">提交</view>
	</view>
</template>

<script>
    import {certificateList,transportUser,transportUserDetail,transportUserAmend} from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				baseUrl:config.base_url,
				form:{
					userName:'',
					phone:'',

				},
				userCredentialsDtos:[],
				status:null,//0添加1编辑
				id:null,
            }
        },
        onLoad(option) {
			this.status=option.status;
			this.id=option.id;
        },
        onShow(){

        },

       methods: {
       		// 图片上传
       		selectImage(item) {
       		    let self = this;
       		    wx.chooseImage({
       		        count: 1,
       		        sizeType: ["original", "compressed"],
       		        sourceType: ["album", "camera"],
       		        success: function(res) {
       		            let tempFilePaths = res.tempFilePaths[0];
       		            self.uploadImg(item,tempFilePaths);
       		        }
       		    });
       		},
       		async uploadImg(item,tempFilePaths){
       		    var self = this;
       		    uni.showLoading({
       		        title: '上传中',
       		        mask: true
       		    });
       		    uni.uploadFile({
       		        url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
       		        header:{'Authorization':uni.getStorageSync('token')},
       		        filePath: tempFilePaths,
       		        name: 'file',
       		        formData: {
       		            'user': 'test'
       		        },
       		        success: (uploadFileRes) => {
       		            let res = JSON.parse(uploadFileRes.data);
       					if(res.code == 200){
       						item.naturalUrl=res.data.url;
       					}else{
       						uni.showToast({
       							title: res.msg,
       							icon:"none",
       							mask:true,
       							duration: 2000
       						});
       					}
       		        },
       		        fail: err => {},
       		        complete: () => {
       		            uni.hideLoading()
       		        }
       		    });
       		},
       		//删除图片
       		delImg(index){
       		    this.newData.imgList.splice(index,1);
       		},
       		//开始时间选中事件
       		startChange(item,e){
       			if(new Date(e.target.value).getTime()>=new Date(item.endTime).getTime()){
       				 uni.showToast({
       					title: '结束时间不能小于开始时间',
       					icon:"none",
       					mask:true,
       					duration: 2000
       				});
       			}else{
       				item.startTime=e.target.value
       			}
       		},
       		//结束时间选中事件
       		endChange(item,e){
       			if(new Date(item.startTime).getTime()>=new Date(e.target.value).getTime()){
       				 uni.showToast({
       					title: '结束时间不能小于开始时间',
       					icon:"none",
       					mask:true,
       					duration: 2000
       				});
       			}else{
       				item.endTime=e.target.value
       			}
       		},

			//校验特殊字符
			verify(){
				if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){
				       uni.showToast({
				       	title: '请输入正确的手机号',
				       	icon:"none",
				       	mask:true,
				       	duration: 2000
				       });
				       this.form.phone='';
				    }

			},
			//获取列表数据
			async getList(){
			    let _this = this;
			    const {data} = await certificateList({type:2})
			    if(data.code==200){
					//重新渲染后台返回数据
					data.data.forEach(function(item){
						_this.userCredentialsDtos.push({'required':item.required,'naturalName':item.name,'naturalUrl':'','startTime':'','endTime':'','remark':item.remark,'certificateId':item.id})
					})
			    }
			},
			//获取详情
			async getInfo(){
			    let _this = this;
			    const {data} = await transportUserDetail(this.id)
			    if(data.code==200){
					let res=data.data
					this.isAudit=res.isAudit;
					this.form=res;

					_this.userCredentialsDtos.forEach(function(item){
						res.userCredentialsVos.forEach(function(item2){
							if(item.certificateId==item2.certificateId){
								item.naturalUrl=item2.naturalUrl
								item.startTime=item2.startTime
								item.endTime=item2.endTime
							}
						})
					})
			    }
			},

       		//注册提交
       		async submitForm(){
       			let _this = this;
				let isPass=true;
				if(!this.form.userName){
					uni.showToast({
						title: '请输入联系人姓名',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.form.phone){
					uni.showToast({
						title: '请输入手机号!',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){
				   uni.showToast({
					title: '请输入正确的手机号!',
					icon:"none",
					mask:true,
					duration: 2000
				   });
				   return
				}
       			//提交的时候过滤空数据
				let arr=[];
				for(let i=0;i<_this.userCredentialsDtos.length;i++){

					if(_this.userCredentialsDtos[i].required==1){

						if(!_this.userCredentialsDtos[i].naturalUrl){
							isPass=false;
							uni.showToast({
							    title: '未上传'+_this.userCredentialsDtos[i].naturalName+'，请上传'+_this.userCredentialsDtos[i].naturalName,
							    icon:"none",
							    mask:true,
							    duration: 2000
							});
							return
						}
						if(!_this.userCredentialsDtos[i].startTime || !_this.userCredentialsDtos[i].endTime){
							isPass=false;
							uni.showToast({
							    title: '请选择'+_this.userCredentialsDtos[i].naturalName+'有效期',
							    icon:"none",
							    mask:true,
							    duration: 2000
							});
							return
						}
						arr.push(_this.userCredentialsDtos[i])
					}else{
						arr.push(_this.userCredentialsDtos[i])
					}
				}
				// let arr=[];
				// _this.userCredentialsDtos.forEach(function(item){
				// 	if(item.required==1){
				// 		if(!item.naturalUrl){
				// 			isPass=false;
				// 			uni.showToast({
				// 			    title: '未上传'+item.naturalName+'，请上传'+item.naturalName,
				// 			    icon:"none",
				// 			    mask:true,
				// 			    duration: 2000
				// 			});
				// 			return
				// 		}
				// 		if(!item.startTime || !item.endTime){
				// 			isPass=false;
				// 			uni.showToast({
				// 			    title: '请选择'+item.naturalName+'有效期',
				// 			    icon:"none",
				// 			    mask:true,
				// 			    duration: 2000
				// 			});
				// 			return
				// 		}
				// 		arr.push(item)
				// 	}else{
				// 		arr.push(item)
				// 	}
				// })
				if(isPass){
					_this.form.userCredentialsDtos=arr;
					if(this.status==0){//新增
						const {data} = await transportUser(_this.form);
						if(data.code == 200){
						    uni.showToast({
						        title: '提交成功',
						        icon:"none",
						        mask:true,
						        duration: 2000
						    });
						    setTimeout(function(){
						       uni.redirectTo({
						       	url: '/pages/supplierWorkbench',
						       });
						    },2000);
						}
					}else if(this.status==1){//编辑
						_this.form.userCredentialsVos=null;
						const {data} = await transportUserAmend(_this.form);
						if(data.code == 200){
						    uni.showToast({
						        title: '提交成功',
						        icon:"none",
						        mask:true,
						        duration: 2000
						    });
						    setTimeout(function(){
						       uni.redirectTo({
						       	url: '/pages/supplierWorkbench',
						       });
						    },2000);
						}
					}
				}
       		},

           },
		mounted(){
			this.getList();
			if(this.status==1){
				this.getInfo();
			}

		},
	}
</script>

<style lang="stylus" scoped>
    #register{
        height:auto
        width:100%;
        display flex
        flex-direction column;
		padding-bottom: 220rpx;
       .register_li{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;
			.register_li_min{
				margin:0 26rpx;
				display flex;
				align-items center;
				border-bottom: 1px solid #F5F5F5;
				view{
					line-height:100rpx;
					font-size:28rpx;
				}
				view:nth-child(1){
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
				view:nth-child(2){
					width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				>input{
					width 490rpx;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		.register_li2{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:0 20rpx;
			box-sizing: border-box;
			.register_li_t{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 28rpx;
				margin: 36rpx 0;
			}
			.register_li_b{
				width: 450rpx;
				height: 270rpx;
				margin-left: 106rpx;
				position: relative;
				// >img:nth-child(1){
				// 	width: 450rpx;
				// 	height: 270rpx;
				// 	position: absolute;
				// 	left: 0;
				// 	top: 0;
				// }
				// >img:nth-child(2){
				// 	width: 100rpx;
				// 	height: 100rpx;
				// 	position: absolute;
				// 	left: 187rpx;
				// 	top: 86rpx;

				// }
				.register_li_b_img1{
					width: 450rpx;
					height: 270rpx;
					position: absolute;
					left: 0;
					top: 0;
				}
				.register_li_b_img2{
					width: 450rpx;
					height: 270rpx;
					position: absolute;
					left: 0;
					top: 0;
				}
				.register_li_b_img3{
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					left: 187rpx;
					top: 86rpx;
				}
			}
			.register_li_b2{
				border-bottom: 1px solid #f5f5f5;
				height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				>view:nth-child(1){
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 100rpx;
					margin-right: 120rpx;
				}
				.picker-text{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #CCCCCC;
					line-height: 100rpx;
					width: 188rpx;
				}
				>view:nth-child(2){
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #CCCCCC;
					line-height: 100rpx;
				}
				.picker-text2{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #CCCCCC;
					line-height: 100rpx;
					width: 188rpx;
					text-align: right;
				}
			}
			.register_li_b3{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 36rpx;
				margin: 34rpx 0;
			}
		}
		/* 按钮 */
		.sub_btn{
			width: 650rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-left: 50rpx;
			position: fixed;
			bottom:30rpx;
			z-index: 1000;
		}
	}
	/deep/.input-value-border{
		display :none !important;
	}
</style>