v3-lab-xcx/pages_supplier/register/registerTow.vue

<!-- 注册2 -->
<template>
    <view class="register">
		<view class="register_li" v-for="(item,index) in qpSupplierCredentialsDtos">
			<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  src="@/pages_supplier/images/Version3.0/icon_zc_scbg.png">
				<img v-if="item.naturalName" :src="baseUrl+item.naturalUrl">
				<img src="@/pages_supplier/images/Version3.0/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 {supplierRegister,certificateList,supplierAmend} from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				baseUrl:config.base_url,
				qpSupplierDto:null,
				qpSupplierCredentialsDtos:[],
				license:null,
            }
        },
        onLoad(option) {
			let form=JSON.parse(decodeURIComponent(option.form));
			if(JSON.parse(decodeURIComponent(option.license))){
				this.license=JSON.parse(decodeURIComponent(option.license));
			}
			this.qpSupplierDto=form;
			this.getList()
        },
        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+'/base/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
				}
			},
			//获取列表数据
			async getList(){
			    let _this = this;
			    const {data} = await certificateList({type:1})
			    if(data.code==200){
					//重新渲染后台返回数据
					data.data.forEach(function(item){
						_this.qpSupplierCredentialsDtos.push({'required':item.required,'naturalName':item.name,'naturalUrl':'','startTime':'','endTime':'','remark':item.remark,'certificateId':item.id})
					})
					//循环对比把详情的值渲染到资料模板上
					if(_this.license){
						_this.qpSupplierCredentialsDtos.forEach(function(item){
							_this.license.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;
				//提交的时候过滤空数据
				let arr=[];
				for(let i=0;i<_this.qpSupplierCredentialsDtos.length;i++){

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

						if(!_this.qpSupplierCredentialsDtos[i].naturalUrl){
							isPass=false;
							uni.showToast({
							    title: '未上传'+_this.qpSupplierCredentialsDtos[i].naturalName+'，请上传'+_this.qpSupplierCredentialsDtos[i].naturalName,
							    icon:"none",
							    mask:true,
							    duration: 2000
							});
							return
						}
						if(!_this.qpSupplierCredentialsDtos[i].startTime || !_this.qpSupplierCredentialsDtos[i].endTime){
							isPass=false;
							uni.showToast({
							    title: '请选择'+_this.qpSupplierCredentialsDtos[i].naturalName+'有效期',
							    icon:"none",
							    mask:true,
							    duration: 2000
							});
							return
						}
						arr.push(_this.qpSupplierCredentialsDtos[i])
					}else{
						arr.push(_this.qpSupplierCredentialsDtos[i])
					}
				}

				if(isPass){
					_this.qpSupplierDto.qpSupplierCredentialsDtos=arr;
					//修改
					if(_this.qpSupplierDto.id){
						const {data} = await supplierAmend(_this.qpSupplierDto);
						if(data.code == 200){
						    uni.showToast({
						        title: '提交成功',
						        icon:"none",
						        mask:true,
						        duration: 2000
						    });
						    setTimeout(function(){
						       uni.redirectTo({
						       	url: '/pages/login',
						       });
						    },2000);
						}
					}else{//注册
						const {data} = await supplierRegister(_this.qpSupplierDto);
						if(data.code == 200){
						    uni.showToast({
						        title: '提交成功',
						        icon:"none",
						        mask:true,
						        duration: 2000
						    });
						    setTimeout(function(){
						        uni.redirectTo({
						            url: '/pages_supplier/register/registerSuccess?form='+encodeURIComponent(JSON.stringify(_this.qpSupplierDto)),//注册
						        });
						    },2000);
						}
					}
				}

			},

        }
    }
</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: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: 450rpx;
					height: 270rpx;
					position: absolute;
					left: 0;
					top: 0;
				}
				>img:nth-child(3){
					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: #333333;
					line-height: 100rpx;
					margin-right: 150rpx;
				}
				.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>