xiaoyou-h5/pages/mine/name_edit.vue

<template>
	<view class="real-name">
		<u-form :model="form" ref="uForm" label-width='130'>
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="学号">
					<u-input v-model="form.account" />
				</u-form-item>
			</view>
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="姓名">
					<u-input v-model="form.name" />
				</u-form-item>
			</view>
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="班级">
					<u-input v-model="form.class" />
				</u-form-item>
			</view>
			
			<!-- <view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="角色">
					<u-radio-group v-model="form.role">
						<u-radio v-for="(item, index) in role_list" :key="item.id" :name="item.id">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="状态">
					<u-radio-group v-model="form.status">
						<u-radio :name="1">
							正常
						</u-radio>
						<u-radio :name="0">
							禁用
						</u-radio>
			
					</u-radio-group>
				</u-form-item>
			</view> -->
			<u-form-item label="性别">
				<u-radio-group v-model="form.sex">
					<u-radio v-for="(item, index) in list_sex" :key="item.id" :name="item.label">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item label="上传头像">
				<u-upload :action="action" max-count="1" :file-list="fileList" :form-data='imageDate'
					@on-success='uploadSuccess'></u-upload>
			</u-form-item>
			<u-form-item label="联系电话">
				<u-input v-model="form.mobile" placeholder="请输入联系电话" />
			</u-form-item>
			<u-form-item label="电子邮箱">
				<u-input v-model="form.email" placeholder="请输入电子邮箱" />
			</u-form-item>
			<u-form-item label="籍贯">
				<u-input v-model="form.native_place" placeholder="请填写籍贯" />
			</u-form-item>
		</u-form>
		<button class="buttom" @click="save()">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					status: 1,
					sex: 0,
					role: 0,
					account: '',
					class: '',
					organization_id: '',
					headimg: ''
				},
				input_name: '',
				action: '', //封面图上传地址
				imageDate: {
					file_type: 'img',
					type: 'headimg'
				}, //上传图片携带参数
				fileList: [],
				uploadImage: '',
				role_list: [{
					id: 0,
					name: '成员'
				}, {
					id: 2,
					name: '负责人'
				}],
				list_sex: [
					{
						name: '男',
						label: 1
					},
					{
						name: '女',
						label: 2
					},
				],
				rules: {
					account: [{
						required: true,
						message: '请输入学号',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					class: [{
						required: true,
						message: '请输入班级',
						trigger: 'blur'
					}],
					role: [{
						required: true,
						message: '请选择角色',
						trigger: 'change'
					}],
					status: [{
						required: true,
						message: '请选择状态',
						trigger: 'change'
					}],
					organization_id: [{
						required: true,
						message: '请选择组织',
						trigger: 'change'
					}],
				},
				mode: 'date',
				organization_list:[],//组织列表
			}
		},
		onLoad(options) {
		
		},
		onShow() {

			this.action = '/api/common/upload'
			this.form=this.$store.state.vuex_user
		},
		methods: {
			
			//获取用户信息
			
			//保存
			save() {
				console.log(!this.form.role)
				if (!this.form.account) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.form.class) {
					uni.showToast({
						title: '请选择班级',
						icon: 'none'
					})
					return
				}
				if (this.form.role==null) {
					uni.showToast({
						title: '请选择角色',
						icon: 'none'
					})
					return
				}
				if (!this.form.organization_id) {
					uni.showToast({
						title: '请选择组织',
						icon: 'none'
					})
					return
				}
				this.$u.post('/page/update-people-info',this.form).then(res=>{
					console.log(res,'pppp')
					uni.showToast({
						title:res.message,
						icon:'none'
					})
					this.$u.vuex('vuex_user',this.form);
					setTimeout(function(){
						uni.navigateBack()
					},1000)
				})
			},
			//上传成功
			uploadSuccess(data) {
				console.log(data, '上传成功')
				this.form.headimg = data.data.url
				this.uploadImage = data.data.url

			},
		
			radioGroupChange(e) {
				console.log(e);
				this.form.sex = e
			},
		
			//保存修改
			// mentor() {

			// 	let id = this.$store.state.vuex_user.type_id
			// 	this.$u.put('/mentor/student/' + id, this.form).then(res => {
			// 		if (res.code == 200) {
			// 			console.log(res, 'pppp')
			// 			uni.showToast({
			// 				title: res.message,
			// 				icon: 'none'
			// 			})
			// 			setTimeout(function() {
			// 				uni.switchTab({
			// 					url: './tea_index'
			// 				})
			// 			}, 1500)
			// 		}
			// 	})
			// },

			//重新上传
			reload() {
				this.image_edit = 0
				console.log('---------')
				this.fileList = [],
					this.uploadImage = ''
			},
			//修改出生日期
			goDay() {
				this.calendar_show = true
			},
			change_date(e) {
				console.log(e, 11111)
				this.form.date = e.result
			},
			goEdit(name, item) {
				if (this.uploadImage) {
					this.fileList.push({
						url: this.uploadImage
					})
				}
				this.show = true
				this.item = item
				this.input_name = name
				this.textarea = ''
				this.value = ''
				switch (item) {
					case 1:
						this.value = this.form.truename
						break
					case 2:

						break
					case 3:
						this.value = this.form.class
						break
					case 4:
						this.value = this.form.email
						break
					case 5:
						this.value = this.form.account
						break

					case 6:
						this.value = this.form.mobile
						break
					case 9:
						this.textarea = this.form.demand
						break
					case 10:
						this.sex = this.form.sex
						break

				}

			},
			complate() {
				let item = this.item
				switch (item) {
					case 1:
						this.form.truename = this.value
						break
					case 2:

						break
					case 3:
						this.form.class = this.value
						break
					case 4:
						this.form.email = this.value
						break
					case 5:
						this.form.account = this.value
						break
					case 6:
						this.form.mobile = this.value
						break
					case 9:
						this.form.demand = this.textarea
						break
					case 10:
						this.form.sex = this.value
						break

				}
				this.show = !this.show
			},
			//保存编辑
			// save() {
			// 	this.$u.post('/mentor/student', this.form).then(res => {
			// 		console.log(res, 'oopp')
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.upload_image {
		width: 90%;
		margin: 0 auto;
	}

	.complate,
	.complate1 {
		width: 50%;
		margin: 0 auto;
		margin-top: 20%;
		line-height: 44px;
		text-align: center;
		height: 44px;
		background: #3B7653;
		opacity: 1;
		border-radius: 24px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}

	.complate1 {
		margin-top: 30px;
	}

	.real-name {
		padding: 0 16px;
		padding-bottom: 40px;

		.name_item {
			margin-top: 20px !important;
		}

		.posotion {
			position: relative;
			padding-left: 10px;

			.star {
				position: absolute;
				left: 0;
				top: 20px;
				color: red;
			}
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 46px;
			line-height: 46px;
			position: relative;
			padding-left: 10px;

			// margin-top: 10px;
			.star {
				position: absolute;
				top: 0px;
				left: 0;
				color: red;
			}

			.label {
				flex: 0 0 30%;
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #282828;
				opacity: 1;
			}

			.right {
				// flex: 1;
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: #282828;
				opacity: 0.42;
				text-align: right;
				height: 20px;
				// overflow: hidden;
				display: flex;
				align-items: center;

				text {
					display: inline-block;
					width: 200px;
					height: 20px;
					line-height: 20px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

			}
		}

		.form {
			position: relative;

			.back {
				position: absolute;
				left: 10px;
				top: 0px;
				width: 30px;
				height: 44px;
				line-height: 44px;
				text-align: center;
				z-index: 9999;
				// background: #18B566;
			}

			.title {
				padding: 0 20px;
				height: 40px;
				line-height: 40px;
			}

			.input {
				margin: 0 20px;
				height: 40px;
				line-height: 40px;
				border-bottom: solid 1px rgba(175, 175, 175, .2);
			}

		}

		.item1 {
			.dec {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: #AFAFAF;
				opacity: 1;
				padding-bottom: 10px;
				border-bottom: solid 1px rgba(175, 175, 175, .2);
			}
		}

		.buttom {
			width: 229px;
			height: 56px;
			line-height: 56px;
			background: #79573D;
			text-align: center;
			border-radius: 28px;
			margin: 0 auto;
			margin-top: 50px;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			opacity: 1;
		}

	}
</style>