ParkApp/party/pages/certification/certification.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">
						
					</u-form-item>
					<view class="upload-img">
						<view class="" @click="chooseImage">
							<upload-img
							   :width="width"
							   :height="height"
							  :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>
			</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 {
				width:480,
				height:320,
				
				model:{
					personId:'',
					personType:'2',
					address:'',
					memberPic:'',
					idCard:'',
					enterTime:''
				},
				//党支部
				branchShow:false,
				branchLabel:'',
				branchList:[],
				
				//入党时间
				enterTimeShow:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		onLoad() {
			this.model.personId=this.$cache.get('userId')
			if (this.$isEmpty(this.model.personId)) {
				this.$dialog.showModal('系统异常',false).then(res=>{
					this.$navigateBack()
				})
			}
			this.fetchBranchList()
		},
		methods: {
			//加载党支部列表
			fetchBranchList(){
				this.branchList=[]
				this.$api.party.page().then(res=>{
					res.data.forEach(item=>{
						let obj={
							label:item.branchName,
							value:item.id
						}
						this.branchList.push(obj)
					})
				})
			},
			//党支部
			branchConfirm(e){
				this.model.branchId=e[0].value
				this.branchLabel=e[0].label
			},
			//入党时间
			enterTimeConfirm(e){
				this.model.enterTime=e.year+'-'+e.month+'-'+e.day
			},
			//党员证件照
			chooseImage() {
			  let that=this
			  that.$mpi.chooseImage().then(res=>{
				  that.$api.uploadFile.submit(res[0]).then(res=>{
				  	that.model.memberPic=res.data.link
				  })
			  })
			},
			//提交
			submit(){
				if (this.$isEmpty(this.model.idCard)) {
					this.$u.toast('请填写身份证号')
					return
				}
				if (!this.$verify.isIdCard(this.model.idCard)) {
					this.$u.toast('请填写正确的身份证号')
					return
				}
				if (this.$isEmpty(this.model.branchId)) {
					this.$u.toast('请选择所属党支部')
					return
				}
				if (this.$isEmpty(this.model.enterTime)) {
					this.$u.toast('请选择入党时间')
					return
				}
				if (this.$isEmpty(this.model.memberPic)) {
					this.$u.toast('请上传党员证件')
					return
				}
				this.$api.party.apply(this.model).then(res=>{
					if (res.success==true) {
						this.$dialog.showModal('操作成功，请耐心等待管理员审核',false).then(res=>{
							this.$navigateBack()
						})
					}else{
						this.$dialog.showModal(res.msg,false)
					}
				})
			}
		}
	}
</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>