party-h5/pages/mine/changeMessage.vue

<template>
	<view class="">
		<view class="navbar">
			<view class="back">
				<text class="iconfont icon-fanhui " @click="backLast()"></text>
			</view>
			<text>修改个人信息</text>
		</view>
		<view class="change-home">
			<uni-forms :value="formData" ref="form">
				<view class="form-list">
					<view class="form-table">
						<view class="form-left">
							姓名:
						</view>
						<input type="text" v-model="formData.true_name" placeholder="请输入姓名" class="input" />
					</view>
					<view class="form-table">
						<view class="form-left">
							学号:
						</view>
						<input type="number" v-model="formData.no" placeholder="请输入学号" class="input"
							@blur="rulesNo()" />
					</view>
				</view>
				<view class="form-list">
					<view class="form-table">
						<view class="form-left">
							入学日期:
						</view>
						<picker mode="date" :value="formData.enrol_date" @change="enterDateChange" class="input1">
							<view class="uni-input">{{formData.enrol_date}} </view>
						</picker>
					</view>
					<view class="form-table">
						<view class="form-left">
							出生日期:
						</view>
						<picker mode="date" :value="formData.birthday" @change="birthDateChange" class="input1">
							<view class="uni-input">{{formData.birthday}}</view>
						</picker>
					</view>
					<view class="form-table">
						<view class="form-left">
							性别:
						</view>
						<picker mode="selector" :range="sex" :range-key="'label'" @change="sexChange" class="input1"
							:value="formData.sex">
							<view class="uni-input">{{sex[formData.sex].label}}</view>
						</picker>
					</view>
					<view class="form-table">
						<view class="form-left">
							民族:
						</view>
						<picker mode="selector" :range="nation" :range-key="'label'" @change="nationChange"
							class="input1" :value="formData.nation">
							<view class="uni-input">{{nation[formData.nation].label}}</view>
						</picker>
					</view>
				</view>

				<view class="form-list">
					<view class="form-table">
						<view class="form-left">
							身份证号:
						</view>
						<input type="idcard" v-model="formData.id_card" placeholder="请输身份证号" class="input"
							@blur='idcardRule()' />
					</view>
					<view class="form-table">
						<view class="form-left">
							手机号:
						</view>
						<input type="number" v-model="formData.mobile" placeholder="请输入手机号" class="input"
							@blur='mobileRule()' />
					</view>
					<view class="form-table">
						<view class="form-left">
							电子邮箱:
						</view>
						<input type="text" v-model="formData.email" placeholder="请输入电子邮箱" class="input"
							@blur='emailRule()' />
					</view>
					<view class="form-table">
						<view class="form-left">
							邮政编码:
						</view>
						<input type="text" v-model="formData.code" placeholder="请输入邮政编码" class="input" />
					</view>
				</view>
				<view class="form-list">
					<!-- <view class="title">
					其他信息
				</view> -->
					<view class="address-border">
						<view class="name">
							籍贯(X省X县)
						</view>
						<view class="address">
							<input type="text" v-model="formData.native_place" placeholder="请输入籍贯" class="input" />
						</view>
					</view>
					<view class="address-border">
						<view class="name">
							家庭地址
						</view>
						<view class="address">
							<input type="text" class="input" v-model="formData.address"
								placeholder="请输入家庭住址"></textarea>
						</view>
					</view>
					<view class="address-border">
						<view class="name">
							户口所在地派出所
						</view>
						<view class="address">
							<input type="text" class="input" v-model="formData.local_police_station"
								placeholder="请输入户口所在地派出所"></textarea>
						</view>
					</view>
				</view>
				<!-- 各个阶段日期 -->
				<!-- 	<view class="title">
				阶段日期
				</view> -->
				<view class="form-list">
					<view class="form-table">
						<view class="form-left">
							申请入党日期:
						</view>
						<picker mode="date" :value="formData.join_party_date" @change="joinPartyChange" class="input1">
							<view class="uni-input">{{formData.join_party_date ? formData.join_party_date:'请选择'}}
							</view>
						</picker>
					</view>
					<view class="form-table">
						<view class="form-left1">
							积极分子党课结业日期:
						</view>
						<picker mode="date" :value="formData.complete_party_date" @change="completePartyChange"
							class="input1">
							<view class="uni-input">
								{{formData.complete_party_date ? formData.complete_party_date:'请选择'}}</view>
						</picker>
					</view>
					<view class="form-table">
						<view class="form-left">
							积极分子日期:
						</view>
						<picker mode="date" :value="formData.join_activist_date" @change="activistChange"
							class="input1">
							<view class="uni-input">{{formData.join_activist_date ? formData.join_activist_date:'请选择'}}
							</view>
						</picker>
					</view>
					<view class="form-table">
						<view class="form-left">
							发展对象日期:
						</view>
						<picker mode="date" :value="formData.join_fzdx_date" @change="fzdxChange" class="input1">
							<view class="uni-input">{{formData.join_fzdx_date ? formData.join_fzdx_date:'请选择'}}</view>
						</picker>
					</view>
					<view class="form-table">
						<view class="form-left1">
							发展对象党课结业日期:
						</view>
						<picker mode="date" :value="formData.complete_fzdx_party_date" @change="completefzdxChange"
							class="input1">
							<view class="uni-input">
								{{formData.complete_fzdx_party_date ? formData.complete_fzdx_party_date:'请选择'}}</view>
						</picker>
					</view>
					<view class="form-table">
						<view class="form-left">
							预备党员日期:
						</view>
						<picker mode="date" :value="formData.join_ybdy_date" @change="ybdyChange" class="input1">
							<view class="uni-input">{{formData.join_ybdy_date ? formData.join_ybdy_date:'请选择'}}</view>
						</picker>
					</view>
					<view class="form-table">
						<view class="form-left">
							党员转正日期:
						</view>
						<picker mode="date" :value="formData.join_zsdy_date" @change="zsdyChange" class="input1">
							<view class="uni-input">{{formData.join_zsdy_date ? formData.join_zsdy_date:'请选择' }}</view>
						</picker>
					</view>
				</view>
				<!-- ？ -->

				<button @click="submitForm" class="submit">保存修改</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import navBar from '../../components/navBar/navbar.vue';
	var app = getApp()
	export default {
		components: {
			navBar
		},
		data() {
			return {
				sex: [{
						value: 0,
						label: "请选择性别"
					},
					{
						value: 1,
						label: "男"
					},
					{
						value: 2,
						label: "女"
					}
				],
				sexIndex: "",
				nationIndex: "",
				nation: [{
					value: '',
					label: ''
				}],
				formData: {
					true_name: "",
					no: "",
					politics_status: "",
					nation: 0,
					sex: 0,

				},
				join_zsdy_date: "请选择转正日期",
				enterDate: "请选择入学日期",
				birthDate: "请选择出生日期",
				name: "",
			}
		},
		created() {
			uni.showLoading()
			this.getUserInfo()
			let userInfo = uni.getStorageSync('userInfo')
			let that = this
			setTimeout(function() {
				app.request('/develop/http-status', '', 'get').then(res => {
					let allStatus = res.data.data
					let nation = allStatus["App\\Repositories\\Enums\\NationEnum"];
					let arr = []
					for (let i in nation) {
						arr.push({
							value: Number(i),
							label: nation[i]
						});
					}
					that.nation =arr
					that.formData.nation = uni.getStorageSync('userInfo').nation
					uni.hideLoading()
				})
			}, 500)


		},
		
		methods: {
			getUserInfo() {
				app.request('/staff-me', '', 'get').then(res => {
					console.log(res.data.data, '---------------------个人信息')
					this.formData= res.data.data
					uni.setStorageSync('userInfo', res.data.data)
				})
				
			},
			backLast: function() {
				console.log(this.url)
				uni.reLaunch({
					url: './index'
				})
			},
			idcardRule: function() {
				var rule = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (!rule.test(this.formData.id_card)) {
					uni.showToast({
						title: '身份证号格式错误~',
						icon: 'none'
					})
				}
			},
			mobileRule: function() {
				var rule = /^1[0-9]{10}$/;
				if (!rule.test(this.formData.mobile)) {
					uni.showToast({
						title: '手机号格式错误~',
						icon: 'none'
					})
				}
			},
			emailRule: function() {
				var rule = /^([A-z0-9]{6,18})(\w|\-)+@[A-z0-9]+\.([A-z]{2,3})$/;
				if (!rule.test(this.formData.email)) {
					uni.showToast({
						title: '邮箱格式错误~',
						icon: 'none'
					})
				}

			},
			submitForm(form) {
				// 手动提交表单
				// this.$refs.form.submit().then((res) => {
				// 	console.log('表单返回得值：', res)
				// })
				if (!this.formData.birthday) {
					uni.showToast({
						title: '请选择出生日期~',
						icon: 'none'
					})
				} else if (!this.formData.class) {
					uni.showToast({
						title: '请选择班级~',
						icon: 'none'
					})
				} else if (!this.formData.enrol_date) {
					uni.showToast({
						title: '请选择入学日期级~',
						icon: 'none'
					})
				} else if (!this.formData.mobile) {
					uni.showToast({
						title: '请输入手机号~',
						icon: 'none'
					})
				} else if (!this.formData.id_card) {
					uni.showToast({
						title: '请输入身份证号~',
						icon: 'none'
					})
				} else if (!this.formData.nation) {
					uni.showToast({
						title: '请选择民族~',
						icon: 'none'
					})
				} else if (!this.formData.native_place) {
					uni.showToast({
						title: '请输入籍贯~',
						icon: 'none'
					})
				} else if (!this.formData.address) {
					uni.showToast({
						title: '请输入家庭地址~',
						icon: 'none'
					})
				} else if (!this.formData.id_card) {
					uni.showToast({
						title: '请输入户口所在地派出所~',
						icon: 'none'
					})
				} else {

					app.request('/staffs/' + this.formData.id, this.formData, 'put').then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "修改成功",
								icon: 'none',
								success: () => {
									app.request('/staff-me', '', 'get').then(res => {
										uni.setStorageSync('userInfo', res.data.data)
									})
								}
							})
							setTimeout(function() {
								uni.switchTab({
									url: '../index/index'
								})
							}, 500)

						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					})
				}
			},
			enterDateChange: function(e) {
				this.formData.enrol_date = e.detail.value
			},
			birthDateChange: function(e) {
				this.formData.birthday = e.detail.value
			},
			joinPartyChange: function(e) {
				this.formData.join_party_date = e.detail.value
			},
			completePartyChange: function(e) {
				this.formData.complete_party_date = e.detail.value
			},
			activistChange: function(e) {
				this.formData.join_activist_date = e.detail.value
			},
			fzdxChange: function(e) {
				this.formData.join_fzdx_date = e.detail.value
			},
			completefzdxChange(e) {
				this.formData.complete_fzdx_party_date = e.detail.value
			},
			ybdyChange: function(e) {
				console.log(e, '--------------------')
				this.formData.join_ybdy_date = e.detail.value
			},
			zsdyChange: function(e) {
				this.formData.join_zsdy_date = e.detail.value
				this.join_zsdy_date = e.detail.value
			},
			sexChange: function(e) {
				let index = e.detail.value
				this.sexIndex = e.detail.value
				this.formData.sex = e.detail.value
				console.log(e.detail.value)
				console.log(this.sex)
			},
			nationChange: function(e) {
				let index = e.detail.value
				this.nationIndex = index
				this.formData.nation = e.detail.value
				console.log(this.nation[e.detail.value].value)
				console.log(this.formData.nation)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.title {
		padding-left: 30upx;
		font-size: 30upx;
		margin-top: 30upx;
		color: #424242;
		// line-height: 70upx;
	}

	.navbar {
		font-size: 32upx;
		height: 100upx;
		line-height: 100upx;
		color: #888888;
		position: relative;
		position: fixed;
		top: 0;
		z-index: 9999999;
		width: 100%;
		background-color: #FFFFFF;
		text-align: center;
		border-bottom: solid 2upx #EFF1F6;

		.back {
			height: 100upx;
			width: 100upx;
			text-align: center;
			// background-color: #007AFF;
			position: absolute;
			float: left;
			left: 0upx;
			font-size: 32upx;
		}
	}

	.change-home {

		// height: 100vh;
		padding-bottom: 50upx;
		padding-top: 100upx;

		.xing {
			color: #e61916;
			font-size: 30upx;
			margin-right: 5upx;
		}

		.form-list {
			background-color: #FFFFFF;
			padding: 10upx 30upx 30upx;
			width: 85%;
			margin: 0 auto;
			margin-top: 30upx;
			box-shadow: 2px 2px 5px #d5d5d5;
			border-radius: 12upx;

			.form-table {
				display: flex;
				height: 90upx;
				font-size: 30upx;

				border-bottom: solid 2upx #f0f0f0;

				.form-left {
					font-size: 28upx;
					flex: 0 0 180upx;
					height: 90upx;
					color: #afafaf;
					line-height: 90upx;

				}

				.form-left1 {
					font-size: 28upx;
					// flex: 0 0 180upx;
					height: 90upx;
					color: #afafaf;
					line-height: 90upx;

				}

				.input,
				.input1 {
					flex: 1;
					padding: 0 10upx;
					height: 90upx;
					line-height: 90upx;
					font-size: 28upx;
					color: #232323;
				}

				.input1 {
					background-image: url(../../static/images/down.png);
					background-size: 30upx;
					background-position: 98%;
					background-repeat: no-repeat;

				}
			}

			.title {
				font-size: 24upx;
				color: #e61916;
			}

			.left-icon {
				color: #e61916;
				margin-right: 10upx;
			}

			// .input {
			// 	// background-color: #007AFF;
			// 	padding: 10upx;
			// 	height: 26px;
			// 	line-height: 30px;
			// 	font-size: 28upx;
			// 	color: #888888;
			// }
		}

		.address-border {
			padding: 30upx 0;
			border-bottom: solid 2upx #f0f0f0;
		}

		.name {
			font-size: 24upx;
			height: 50upx;
			color: #afafaf;
			line-height: 50upx;
			background-color: #FFFFFF;

			// border-bottom: solid 2upx #f0f0f0;
		}

		.address {
			.input {
				flex: 1;
				height: 50upx;
				line-height: 50upx;
				font-size: 28upx;
				color: #232323;
			}
		}

		.submit {
			margin-top: 60upx;
			width: 60%;
			color: #FFFFFF;
			background-color: #e61916;
			font-size: 30upx;
			margin-bottom: 100upx;
		}
	}
</style>