wanzai_school_app/pages/register/register.vue

<template>
	<view class="container">
		<!-- 提示信息区域 -->
		<view class="header">
			<view class="header_top">欢迎加入{{ currentClass }}！！</view>
			<view>为确保您的信息顺利通过，请上传有效信息</view>
		</view>

		<!-- 姓名区域 -->
		<view class="box">
			<view class="box_key">
				<text class="text">*</text>
				孩子姓名
			</view>
			<view class="box_value">
				<input class="input" type="text" placeholder="请输入孩子姓名" v-model="name" />
			</view>
		</view>

		<!-- 性别区域 -->
		<view class="box">
			<view class="box_key">
				<text class="text">*</text>
				性别
			</view>
			<view class="box_value">
				<view class="men" @click="handlegender(1)">
					<radio color="#0061FF" style="transform: scale(0.7)" :checked="gender == 1" />
					男
				</view>

				<view class="women" @click="handlegender(2)">
					<radio color="#0061FF" style="transform: scale(0.7)" :checked="gender == 2" />
					女
				</view>
			</view>
		</view>

		<!-- 人脸图片区域 -->
		<view class="box2">
			<view class="box_key">
				<text class="text">*</text>
				人脸图片
			</view>
			<view v-if="!headImage" class="box_upload" @click="handleUpload">
				<uni-icons type="plusempty" size="30" color="#666666"></uni-icons>
				上传照片
			</view>
			<view v-else class="box_upload">
				<image :src="headImage" mode="aspectFill" style="width: 160rpx; height: 160rpx" @click="clickImg(headImage)"></image>
				<!-- 图片删除图标 -->
				<view class="delete" @click="deleteImg">
					<uni-icons type="close" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<view class="tips">注：支持.jpg .png，五官清晰无遮挡，大小不超过2M</view>

		<!-- 时间组区域 -->
		<!-- <view class="box">
			<view class="box_key">
				<text class="text">*</text>
				时间组
			</view>

			<picker @change="bindPickerChange" :value="currentIndex" :range="array">
				<view class="box_value" :class="{ unactive: !currentIndex }">
					{{ currentIndex ? array[currentIndex] : '请选择' }}
					<image class="value_img" src="/static/images/bottom2.png" mode="aspectFill"></image>
				</view>
			</picker>
		</view> -->

		<view v-for="(item, index) in list" :key="index">
			<!-- 家属区域 -->
			<view class="box">
				<view class="box_key">
					<text class="text">*</text>
					家属{{ index + 1 }}
				</view>
				<view class="box_value">
					<input v-model="item.name" class="input" type="text" placeholder="请输入称呼或职业" />
					<view class="value_icon">
						<uni-icons v-if="index == 0" type="plus" size="25" color="#0061FF" @click="handleAdd"></uni-icons>
						<uni-icons v-else type="close" size="25" color="#0061FF" @click="handleDelete(index)"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 手机号码区域 -->
			<view class="box">
				<view class="box_key">
					<text class="text">*</text>
					手机号码
				</view>
				<view class="box_value">
					<input v-model="item.phone" class="input" type="text" placeholder="请输入手机号码" />
				</view>
			</view>

			<!-- 家属与本人的关系区域 -->
			<view class="box">
				<view class="box_key">
					<text class="text">*</text>
					家属与本人的关系
				</view>
				<view class="box_value">
					<input v-model="item.ship" class="input" type="text" placeholder="请输入家属与本人的关系" />
				</view>
			</view>
		</view>

		<view class="btn" @click="handleConfirm">确认</view>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getQueryString } from '@/utils/getParams.js'
import { myRequest } from '@/utils/api.js'
import { decryptDes } from '@/utils/des.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'

// 姓名
const name = ref('')
// 性别
const gender = ref(1)
// 照片
const headImage = ref('')
// 时间组当前激活索引
// const currentIndex = ref()
// 时间组数据
// const array = ref(['上午', '下午'])

const gradeId = ref('')
const classId = ref('')
const departmentId = ref('')
const departmentId_list = ref('')
const currentClass = ref('')

const list = ref([
	{
		name: '',
		phone: '',
		ship: '',
		departmentId: departmentId_list.value
	}
])

//画板边长默认是屏幕宽度，正方形画布
const cw = uni.getSystemInfoSync().windowWidth

onLoad((options) => {
	// console.log(options)
	if (options.q) {
		const data = decodeURIComponent(options.q)
		gradeId.value = getQueryString(data, 'gradeId')
		classId.value = getQueryString(data, 'classId')
		departmentId.value = getQueryString(data, 'departmentId')
		departmentId_list.value = getQueryString(data, 'departmentId_list')
		currentClass.value = getQueryString(data, 'currentClass')
	} else {
		gradeId.value = options.gradeId
		classId.value = options.classId
		departmentId.value = options.departmentId
		departmentId_list.value = options.departmentId_list
		currentClass.value = options.currentClass
	}
})

// 切换性别回调
const handlegender = (v) => {
	gender.value = v
}
// 切换时间组回调
// const bindPickerChange = (e) => {
// 	currentIndex.value = e.detail.value
// }

// 上传照片回调
const handleUpload = () => {
	uni.chooseMedia({
		count: 1,
		mediaType: ['image'],
		sourceType: ['album'],
		sizeType: ['compressed'],
		success: (res) => {
			// console.log(res.tempFiles)

			res.tempFiles.forEach((ele) => {
				if (ele.fileType === 'image' && ele.size > 1024 * 1024 * 2) {
					//这里的id和页面中写的html代码的canvas的id要一致
					let canvasId = 'zipCanvas'
					//原图的路径
					let imagePath = ele.tempFilePath
					//大小限制1024kb
					let limitSize = 1024 * 2
					//初始绘画区域是画布自身的宽度也就是屏幕宽度
					let drawWidth = uni.getSystemInfoSync().windowWidth
					// 图片过大压缩
					getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, (resPath) => {
						handleUploadMini({ tempFilePath: resPath, fileType: ele.fileType })
					})
				} else {
					handleUploadMini(ele)
				}
			})
		}
	})
}

const handleUploadMini = (ele) => {
	uni.showLoading({
		title: '上传中，请稍后',
		mask: true
	})
	uni.uploadFile({
		url: `https://www.campussmartlife.com/smartApi/wanzai/api/upload/toCos`,
		filePath: ele.tempFilePath,
		name: 'files',
		header: {
			token: uni.getStorageSync('token') || '',
			user_head: uni.getStorageSync('userhead') || ''
		},
		success: (uploadFileRes) => {
			// console.log(uploadFileRes)
			let imgUrl = JSON.parse(uploadFileRes.data).data

			const result = JSON.parse(decryptDes(imgUrl))
			// console.log(result)
			headImage.value = result
		},
		fail: () => {
			uni.showToast({
				title: '上传失败',
				icon: 'error'
			})
		},
		complete: () => {
			uni.hideLoading()
		}
	})
}

// 点击图片回调
const clickImg = (url) => {
	uni.previewImage({
		urls: [url],
		current: 1
	})
}

// 删除图片回调
const deleteImg = () => {
	uni.showModal({
		title: '提示',
		content: '确定删除该图片吗？',
		success: (res) => {
			if (res.confirm) {
				headImage.value = ''
			}
		}
	})
}

// 家属添加图标回调
const handleAdd = () => {
	list.value.push({
		name: '',
		phone: '',
		ship: '',
		departmentId: departmentId_list.value
	})
}

// 家属删除图标回调
const handleDelete = (index) => {
	// console.log(index)
	uni.showModal({
		title: '提示',
		content: '确定删除该家属吗？',
		success: (res) => {
			if (res.confirm) {
				list.value.splice(index, 1)
			}
		}
	})
}

// 确认按钮回调
const handleConfirm = () => {
	const flag = verify()

	if (flag) {
		uni.showModal({
			title: '提示',
			content: '确定提交吗？',
			success: (res) => {
				if (res.confirm) {
					handleConfirmReq()
				}
			}
		})
	}
}

// 验证提交数据是否合法
const verify = () => {
	if (!name.value) {
		uni.showToast({
			title: '请输入姓名',
			icon: 'none'
		})
		return false
	}

	let reg_name = /^[\u4e00-\u9fa5]{2,4}$/
	if (!reg_name.test(name.value)) {
		uni.showToast({
			title: '姓名格式错误',
			icon: 'none'
		})
		return false
	}

	if (!headImage.value) {
		uni.showToast({
			title: '请上传图片',
			icon: 'none'
		})
		return false
	}

	// if (!currentIndex.value) {
	// 	uni.showToast({
	// 		title: '请选择时间组',
	// 		icon: 'none'
	// 	})
	// 	return false
	// }

	let res = list.value.some((ele) => !ele.name || !ele.phone || !ele.ship)

	if (res) {
		uni.showToast({
			title: '家属数据不能为空',
			icon: 'none'
		})
		return false
	}

	let res2 = list.value.some((ele) => !reg_name.test(ele.name))

	if (res2) {
		uni.showToast({
			title: '家属姓名格式错误',
			icon: 'none'
		})
		return false
	}

	let reg_phone = /^1[3-9]\d{9}$/
	let res3 = list.value.some((ele) => !reg_phone.test(ele.phone))

	if (res3) {
		uni.showToast({
			title: '家属手机号码格式错误',
			icon: 'none'
		})
		return false
	}

	return true
}

// 确认请求
const handleConfirmReq = async () => {
	let data = {
		name: name.value,
		sexId: gender.value,
		headImage: headImage.value,
		departmentId: departmentId.value,
		gradeId: gradeId.value,
		classId: classId.value,
		list: list.value
	}
	// console.log(data)
	const res = await myRequest({
		url: '/wanzai/api/smartEnrollmentUser/insertSmartEnrollmentUser',
		method: 'post',
		data
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '添加成功,请等待审核',
			icon: 'none'
		})
		// setTimeout(() => {
		// 	uni.reLaunch({
		// 		url: '/pages/studentManage/studentManage'
		// 	})
		// }, 1500)
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 10rpx 0 30rpx 15rpx;
	min-height: 100vh;
	font-size: 28rpx;

	.header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 20rpx;
		height: 137rpx;
		font-size: 24rpx;
		font-weight: bold;
		background-color: #f2f7ff;

		.header_top {
			margin-bottom: 5rpx;
			font-size: 32rpx;
		}
	}

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		border-bottom: 2rpx solid #e6e6e6;

		.box_key {
			display: flex;
			align-items: center;
			font-weight: bold;

			.text {
				color: #d43030;
			}
		}

		.box_value {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 20rpx;
			width: 320rpx;
			height: 96rpx;

			.input {
				height: 100%;
				text-align: right;
			}

			.men,
			.women {
				display: flex;
				align-items: center;
			}

			.women {
				margin-left: 20rpx;
			}

			.value_icon {
				margin-left: 15rpx;
			}

			.value_img {
				margin-left: 20rpx;
				width: 27rpx;
				height: 16rpx;
			}
		}

		.unactive {
			color: #6a6a6a;
		}
	}

	.box2 {
		display: flex;
		margin-top: 40rpx;

		.box_key {
			display: flex;
			font-weight: bold;

			.text {
				color: #d43030;
			}
		}

		.box_upload {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-left: 30rpx;
			width: 160rpx;
			height: 160rpx;
			font-size: 24rpx;
			color: #666666;
			border-radius: 6rpx;
			background-color: #f2f2f2;

			.delete {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}
		}
	}

	.tips {
		margin-top: 20rpx;
		margin-bottom: 5rpx;
		font-size: 24rpx;
		color: #a6a6a6;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 80rpx auto 0;
		width: 710rpx;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8rpx;
		background-color: #0061ff;
	}
}
</style>