ParkApp/pages/test/test.vue

<template>
	<view>
		<view class="form">
			<view class="card">
				<u-form :model="model" labelWidth="200"  ref="uForm" >
					<u-form-item    label="所在地址" >
						<u-input  type="text"  v-model="model.address"  placeholder="请填写所在地址" ></u-input>
					</u-form-item>
					<u-form-item :required="true" label="身份证号" >
						<u-input  type="idcard"  v-model="model.idCard"   placeholder="请填写身份证号" ></u-input>
					</u-form-item>
					<u-form-item :required="true" label="所属党支部" >
						<u-input  type="select" :select-open="branchShow" v-model="branchLabel" placeholder="请选择所属党支部" @click="branchShow=true"></u-input>
					</u-form-item>
					<u-form-item :required="true" label="入党时间" >
						<u-input  type="select" :select-open="enterTimeShow" v-model="model.enterTime" placeholder="请选择入党时间" @click="enterTimeShow=true"></u-input>
					</u-form-item>
					<u-form-item class="" :required="true" label="请上传党员证件图像" label-position="top">
						<view class="upload-img">
							<view class="">
								<upload-img
								   width="480"
								   height="320"
								  :currentImage="model.memberPic"
								  bgsrc="http://139.9.103.171:1888/miniofile/xlyq/upload.png"
								  >
								</upload-img>
								<view class="text-center  padding-top-20 base-color" >
								 <text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
								 <text v-if="$isEmpty(model.memberPic)">点击上传党员证件图像</text>
								 <text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
								</view>
							</view>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view >
			<view class="bg-white" style="height: 80rpx;"></view>
			<view class="" @click="submit" style="width: 90%;margin: 0 auto ;margin-bottom: 10%;">
				<view  class="cu-btn round base-bg-color" style="padding: 40rpx;width: 100%;" >
					<text class="cuIcon-add"></text>
					<text >确认提交</text>
				</view>
			</view>
		</view>
		
		
		
		<u-select @confirm="branchConfirm" v-model="branchShow" :list="branchList"></u-select>
		<u-picker v-model="enterTimeShow" mode="time" :params="params" @confirm="enterTimeConfirm"></u-picker>
	</view>
</template>

<script>
	import uploadImg from '@/components/uploadimg/uploadImg.vue'
	export default {
		components:{
			uploadImg
		},
		data() {
			return {
				model:{},
				
				//党支部
				branchShow:false,
				branchLabel:'',
				branchList:[],
				
				//入党时间
				enterTimeShow:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		methods: {
			//党支部
			branchConfirm(){
				this.model.branchId=e[0].value
				this.branchLabel=e[0].label
			},
			//入党时间
			enterTimeConfirm(e){
				this.model.enterTime=e.year+''+e.month+''+e.day
			},
			//党员证件照
			chooseImage(type) {
			  this.$mpi.chooseImage().then(res=>{
				  this.$api.uploadFile.submit(res[0]).then(res=>{
				  	this.model.memberPic=res.data.link
				  })
			  })
			},
			//提交
			submit(){
				if (this.$isEmpty(this.model.idCard)) {
					this.$u.toast('请填写身份证号')
					return
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	
	.form{
		padding: 40rpx 30rpx;
		
		.tag{
			width: 35rpx;
			height: 35rpx;
			display: block;
			padding-top: 6rpx;
			padding-right: 10rpx;
		}
		
		.card{
			margin-top: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			box-shadow: 0 -10rpx rgba(248, 248, 248,.9) ,0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
			.item{
				padding:30rpx 0;
				display: flex;
				justify-content: space-between;
			}
			.upload-img{
				padding:50rpx 0 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>