jp-education-student/pages/parents/mine/addChildInformation.vue

<template>
	<view>
		<u-navbar title="添加子女信息" >

		</u-navbar>
		<view class="photo" @click="uploadPhoto">
			<u-avatar v-if="form.headPhoto != null" class="avatar"
				:src="form.headPhoto+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="160">
				<img src="" alt="">
			</u-avatar>
			<view class="edit-photo">
				<img src="../../../assets/img/md-camera_alt@1x(1).png" alt="">
			</view>
		</view>
		<view class="change">
			点击更换头像
		</view>
		
		<view class="gender">
			<view class="man" :class="activeClass ? 'checked' : ''" @click="genderClick">
				男
			</view>
			<view class="woman" :class="!activeClass ? 'checked' : ''" @click="genderClick">
				女
			</view>
			
		</view>
		
		<view class="infos">
			<view class="name">
				<input type="text" v-model="form.studentName" placeholder="请填写子女姓名">
				<view class="icon">
					<img src="../../../assets/img/riLine-user-5-line@1x.png" alt="">
				</view>
			</view>
			
			<view class="birthday">
				<input type="text" @click="show=true" v-model="form.birthday" placeholder="请选择子女生日" disabled>
				<view class="icon">
					<img src="../../../assets/img/riLine-calendar-line@1x.png" alt="">
				</view>
				<view class="icon-right">
					<u-icon name="arrow-down" color="#0DBAC7" size="36"></u-icon>
				</view>
			</view>
			<u-picker mode="time" v-model="show" :params="params"
				@confirm="confirmTime" @cancel="cancelTime"></u-picker>
			
		</view>
		
		<button class="submit" @click="submit"> 提交</button>
		<button class="delete" v-if="form.studentId" @click="deleteStudent"> 删除</button>
		
	</view>
</template>

<script>
	import * as mineApi from '@/apis/parents/mine.js'
	
	export default {
		data() {
			return {
				form: {
					studentId: '',
					studentName: '',
					gender: 1,
					birthday: '',
					headPhoto: ''
				},
				activeClass: true,
				show: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
			}
		},
		onLoad(op) {
			if(op) {
				this.form.studentId = op.id;
				this.getStudentDetail();
			}
		},
		methods: {
			getStudentDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.getStudentDtl({
					studentId: this.form.studentId
				}).then((response) => {
					uni.hideLoading();
					this.form.studentName = response.data.studentName;
					this.form.gender = response.data.gender;
					this.form.birthday = response.data.birthday;
					this.form.headPhoto = response.data.headPhoto;
					
					if(this.form.gender == '1') {
						this.activeClass = true;
					}else {
						this.activeClass = false;
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			confirmTime(params) {
				this.form.birthday = params.year + '-' + params.month + '-' + params.day;
				this.show = false;
			},
			cancelTime() {
				this.show = false;
			},
			submit() {
				if(this.form.studentId) {
					this.getUpdateStudent();
				}else {
					this.getAddStudent();
				}
			},
			deleteStudent() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.deleteStudent({
					studentId: this.form.studentId
				}).then((response) => {
					uni.hideLoading();
					uni.navigateBack({
						
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			genderClick() {
				this.activeClass = !this.activeClass;
				if(this.activeClass) {
					this.form.gender = 1;
				}else {
					this.form.gender = 0;
				}
			},
			getAddStudent() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.addStudent({
					studentName: this.form.studentName,
					gender: this.form.gender,
					birthday: this.form.birthday,
					headPhoto: this.form.headPhoto
				}).then((response) => {
					uni.hideLoading();
					uni.navigateBack({
						
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getUpdateStudent() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.updateStudent(this.form).then((response) => {
					uni.hideLoading();
					uni.navigateBack({
						
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			uploadPhoto() {
				let _self = this;
				
				const crop = {
					quality: 100,
					width: 600,
					height: 600,
					resize: true
				};
				
				// 上传图片
				uni.chooseImage({
					count: 1,
					crop,
					success: async (res) => {
						//(res);
						let tempFile = res.tempFiles[0],
							avatar_file = {
								// #ifdef H5
								extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
								// #endif
								// #ifndef H5
								extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
								// #endif
							},
							filePath = res.tempFilePaths[0]
							
						// #ifndef APP-PLUS
						//(`filePath=${filePath}`)
						
						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
						let fileData = await new Promise((callback) => {
							uni.navigateTo({
								url: '/pages/components/cropImage?path=' + filePath +
									`&options=${JSON.stringify(crop)}`,
								animationType: "fade-in",
								events: {
									success: url => {
										callback(url)
									}
								}
							});
						})
						// #endif
						
						//返回 base64 图片
						//(fileData);
						
						var token = _self.carhelp.getToken()
						
						uni.showLoading({
							title: '上传中'
						});
						
						uni.request({
						    url: process.car.BASE_URL + "/mobile/student/uploadBase64",
							method: 'POST',
						    data: {
						        photoBase64Data: fileData
						    },
						    header: {
						        'Authorization': token,
								'content-type': 'application/x-www-form-urlencoded'
						    },
						    success: (res) => {
								let jsonData = res.data;
						        _self.form.headPhoto = jsonData.data;
										// _self.save();
								uni.hideLoading();
						    }
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	
	.photo{
		margin: 20px auto 8px;
		width: 160rpx;
		height: 160rpx;
		position: relative;
		
		img{
			width: 100%;
			height: 100%;
			border-radius: 999px;
		}
		
	}
	.edit-photo{
		width: 56rpx;
		height: 56rpx;
		background-color: rgba(78, 141, 246, 1);
		border: 4rpx solid rgba(255, 255, 255, 1);
		text-align: center;
		border-radius: 999px;
		z-index: 999;
		position: absolute;
		right: 0;
		bottom: 0;
		
		img{
			
			width: 32rpx;
			height: 32rpx;
			margin-top: 8rpx;
		}
	}
   .change{
	   color: rgba(13, 186, 199, 1);
	   text-align: center;
   }
   .gender{
	   width: 50%;
	   margin: 20px auto 40px;
	   display: flex;
	   justify-content: space-between;
	   .man,.woman{
		   width: 160rpx;
		   line-height: 64rpx;
		   border-radius: 100rpx;
		   background-color: rgba(242, 242, 242, 1);
		   color: rgba(16, 16, 16, 1);
		   font-size: 28rpx;
		   text-align: center;
	   }
	   .checked{
		   background-color: #fff;
		   color: #43C9D3;
		   border: 1px solid #43C9D3;
	   }
   }

uni-input{
	
	width: 74.4%;
	margin: 0 auto;
	border: 1px solid rgba(13, 186, 199, 1);
	border-radius: 50px;
	height: 88rpx;
	line-height: 88rpx;
	
}
.name,.birthday{
	position: relative;
	margin-bottom: 20px;
}
/deep/.uni-input-placeholder{
	text-indent: 72rpx;
	color: rgba(204, 204, 204, 1);
	font-size:32rpx;
}
/deep/.uni-input-input{
	text-indent: 72rpx;
}
.icon{
	position: absolute;
	top: 26rpx;
	left: 120rpx;
	img{
		width: 40rpx;
		height: 40rpx;
	}
}
.icon-right{
	position: absolute;
	top: 26rpx;
	right: 120rpx;
}


.submit{
	margin: 64px 48px 16px 48px;
	background-color: rgba(13, 186, 199, 1);
	color: rgba(255, 255, 255, 1);
	font-size: 16px;
	line-height: 44px;
	border-radius: 50px;
}
.delete{
	margin: 0 48px;
	font-size: 16px;
	line-height: 44px;
	border-radius: 50px;
	background-color: rgba(220, 223, 224, 1);
	color: rgba(51, 51, 51, 1);
}
</style>