school_ecology_h5/pages/back_school/back_school.vue

<template>
	<view class="container">
		<!-- 分段器区域 -->
		<common-controlTag :tagList="tagList" :currentIndex="currentIndex" @change="changeIndex"></common-controlTag>

		<!-- 发起提交区域 -->
		<view class="submit" v-if="currentIndex == 0">
			<!-- 校友姓名区域 -->
			<view class="box">
				<view class="box_title">
					<text class="text">*</text>
					校友姓名
				</view>
				<view class="box_input">
					<input class="input" placeholder-style="color:#A6A6A6" placeholder="请输入校友姓名" v-model="form.name" />
				</view>
			</view>

			<!-- 微卡区域 -->
			<view class="box">
				<view class="box_title">
					<text class="text">*</text>
					微校卡号
				</view>
				<view class="box_input">
					<input class="input" placeholder-style="color:#A6A6A6" placeholder="请输入微卡" v-model="form.cardNumber" />
				</view>
			</view>

			<!-- 手机区域 -->
			<view class="box">
				<view class="box_title">
					<text class="text">*</text>
					手机
				</view>
				<view class="box_input">
					<input class="input" placeholder-style="color:#A6A6A6" placeholder="请输入手机" v-model="form.phone" />
				</view>
			</view>

			<!-- 校区区域 -->
			<view class="box">
				<view class="box_title">
					<text class="text">*</text>
					校区
				</view>
				<picker :range="schoolRange" range-key="name" @change="changeSchool">
					<view class="box_input">
						<view class="picker" :class="{ pick: form.school }">{{ form.school ? form.school : '请选择校区' }}</view>
						<uni-icons type="down" size="24" color="#A6A6A6"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 返校日期区域 -->
			<view class="box">
				<view class="box_title">
					<text class="text">*</text>
					返校日期
				</view>
				<picker mode="date" :start="dayjs(Date.now()).format('YYYY-MM-DD')" @change="changeBackTime">
					<view class="box_input">
						<view class="picker" :class="{ pick: form.returnsTime }">{{ form.returnsTime ? form.returnsTime : '请选择返校日期' }}</view>
						<uni-icons type="down" size="24" color="#A6A6A6"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 离校日期区域 -->
			<view class="box">
				<view class="box_title">
					<text class="text">*</text>
					离校日期
				</view>
				<picker mode="date" :start="dayjs(Date.now()).format('YYYY-MM-DD')" @change="changeLeaveTime">
					<view class="box_input">
						<view class="picker" :class="{ pick: form.returneTime }">{{ form.returneTime ? form.returneTime : '请选择离校日期' }}</view>
						<uni-icons type="down" size="24" color="#A6A6A6"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 返校事由区域 -->
			<view class="box">
				<view class="box_title">
					<text class="text">*</text>
					返校事由
				</view>
				<view class="box_textarea">
					<textarea v-model="form.remark" class="textarea" :maxlength="-1" placeholder="请输入返校事由"></textarea>
				</view>
			</view>

			<view class="btn" @click="handleSubmit">提交</view>
		</view>

		<!-- 提交记录区域 -->
		<view class="record" v-if="currentIndex == 1">
			<!-- 选择时间区域 -->
			<view class="time">
				<view class="time_box" :class="{ active: currentIndex_time == index }" v-for="(item, index) in timeList" :key="item.id" @click="changeTimeIndex(index)">
					{{ item.name }}
				</view>
			</view>

			<!-- 列表区域 -->
			<view class="list">
				<!-- 每一个记录区域 -->
				<view class="list_box" v-for="item in dataList" :key="item.id">
					<!-- 状态区域 -->
					<view class="status pass">{{ item.passName }}</view>
					<view>姓名：{{ item.name }}</view>
					<view>微卡：{{ item.cardNumber }}</view>
					<view>手机：{{ item.phone }}</view>
					<view>校区：{{ item.schoolName }}</view>
					<view>返校日期：{{ item.returnTime }}</view>
					<view>创建时间：{{ item.createTime }}</view>
					<view>返校事由：</view>
					<view>
						{{ item.remark }}
					</view>
				</view>
			</view>

			<!-- 没有数据时展示的页面 -->
			<noData v-if="!dataList.length"></noData>
		</view>
	</view>
</template>

<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref } from 'vue'
import dayjs from 'dayjs'
import { getSchoolData, getInsertReturnData, getWeekTypes, getApplicationReturn } from '@/api/index.js'

// 分段器数组
const tagList = ['发起提交', '提交记录']
// 分段器当前索引
const currentIndex = ref(0)

// 时间分段器数组
const timeList = ref([])
// 时间分段器当前索引
const currentIndex_time = ref(0)

// 校区数组
const schoolRange = ref([])

// 提交数据
const form = ref({
	// 姓名
	name: '',
	// 微校卡号
	cardNumber: '',
	// 手机
	phone: '',
	// 校区(显示)
	school: '',
	// 校区(参数)
	schoolId: '',
	// 返校日期
	returnsTime: '',
	// 离校日期
	returneTime: '',
	// 返校事由
	remark: ''
})

// 当前页
const currentPage = ref(1)
// 每页多少条
const pageCount = ref(6)
// 总条数
const total = ref(0)
// 列表数据
const dataList = ref([])

onLoad(() => {
	// 获取校区下拉列表数据
	getSchoolRange()
})

// 页面触底触发的回调
onReachBottom(() => {
	if (currentIndex.value == 1) {
		if (total.value > dataList.value.length) {
			currentPage.value++
			getData()
		} else {
			uni.showToast({
				title: '没有更多数据了~~',
				icon: 'none'
			})
		}
	}
})

// 获取校区下拉列表数据
const getSchoolRange = async () => {
	const res = await getSchoolData()
	// console.log(res)
	schoolRange.value = res.data
}

// 获取时间数组
const getTimeData = async () => {
	const res = await getWeekTypes()
	// console.log(res)
	timeList.value = res.data

	// 获取提交记录数据
	getData()
}

// 获取提交记录数据
const getData = async () => {
	let data = {
		currentPage: currentPage.value,
		pageCount: pageCount.value,
		weekType: timeList.value[currentIndex_time.value].id
	}
	const res = await getApplicationReturn(data)
	// console.log(res)
	dataList.value = [...dataList.value, ...res.data.list]
	total.value = res.data.totalCount
}

// 提交按钮回调
const handleSubmit = () => {
	// 校验提交值是否合法
	let flag = checkValue()
	if (!flag) {
		uni.showModal({
			title: '提示',
			content: '确定提交吗？',
			success: (res) => {
				if (res.confirm) {
					submitReq()
				}
			}
		})
	}
}

// 校验提交值是否为空
const checkValue = () => {
	let keyList = Object.keys(form.value)

	// 提示信息
	keyList.forEach((ele) => {
		// console.log(ele)

		if (ele == 'phone') {
			let regPhone = /^1[3-9]\d{9}$/

			if (!regPhone.test(form.value[ele])) {
				uni.showToast({
					title: `手机号码格式有误`,
					icon: 'none'
				})

				// 符合条件时强制打断循环
				keyList.length = 0
			}
		}
		if (form.value[ele] === '') {
			uni.showToast({
				title: `${mapValue(ele)}不能为空`,
				icon: 'none'
			})

			// 符合条件时强制打断循环
			keyList.length = 0
		}
	})

	// 判断是否是空值 true 为有空值
	let t = keyList.every((ele) => form.value[ele] === '')

	return t
}

// 映射
const mapValue = (v) => {
	let msg = ''
	switch (v) {
		case 'name':
			msg = '校友姓名'

			break

		case 'cardNumber':
			msg = '微校卡号'

			break

		case 'phone':
			msg = '手机号'

			break

		case 'school':
		case 'schoolId':
			msg = '校区'

			break

		case 'returnsTime':
			msg = '返校日期'

			break

		case 'returneTime':
			msg = '离校日期'

			break

		case 'remark':
			msg = '返校事由'

			break

		default:
			msg = '内容'
			break
	}

	return msg
}

// 提交请求
const submitReq = async () => {
	const res = await getInsertReturnData(form.value)
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})

		setTimeout(() => {
			currentIndex.value = 1
			currentIndex_time.value = 0
			currentPage.value = 1
			dataList.value = []
			getTimeData()
		}, 1500)
	}
}

// 分段器切换回调
const changeIndex = (e) => {
	// console.log(e)
	currentIndex.value = e
	uni.setNavigationBarTitle({
		title: currentIndex.value == 0 ? '返校申请' : '提交记录'
	})
	if (currentIndex.value == 1) {
		currentIndex_time.value = 0
		currentPage.value = 1
		dataList.value = []
		getTimeData()
	}
}

// 时间分段器切换回调
const changeTimeIndex = (e) => {
	currentIndex_time.value = e
	currentPage.value = 1
	dataList.value = []
	getData()
}

// 选择校区时的回调
const changeSchool = (e) => {
	let index = e.detail.value
	form.value.school = schoolRange.value[index].name
	form.value.schoolId = schoolRange.value[index].id
}

// 选择返校日期时的回调
const changeBackTime = (e) => {
	form.value.returnsTime = e.detail.value
}

// 选择离校日期时的回调
const changeLeaveTime = (e) => {
	form.value.returneTime = e.detail.value
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx 18rpx;
	min-height: 100vh;

	.submit {
		margin-top: 15rpx;

		.box {
			margin-bottom: 15rpx;
			font-size: 28rpx;

			.box_title {
				display: flex;
				margin-bottom: 15rpx;

				.text {
					color: #d43030;
				}
			}

			.box_input {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 22rpx;
				width: 710rpx;
				height: 80rpx;
				border-radius: 6rpx;
				background-color: #f5f5f5;

				.input {
					width: 100%;
					height: 100%;
					font-size: 28rpx;
				}

				.picker {
					color: #a6a6a6;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.pick {
					color: #000;
				}
			}

			.box_textarea {
				width: 710rpx;
				height: 308rpx;
				border-radius: 6rpx;
				background-color: #f5f5f5;

				.textarea {
					box-sizing: border-box;
					padding: 10rpx;
					width: 100%;
					height: 100%;
					font-size: 28rpx;
				}
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 80rpx 0;
			width: 710rpx;
			height: 80rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 8rpx;
			background-color: #007aff;
		}
	}

	.record {
		.time {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20rpx;
			width: 712rpx;
			height: 90rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
			background-color: #f2f7ff;

			.time_box {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 211rpx;
				height: 71rpx;
				border-radius: 8rpx;
			}

			.active {
				font-size: 30rpx;
				color: #0061ff;
				border: 2rpx solid #0061ff;
				background-color: rgba(0, 97, 255, 0.1);
			}
		}

		.list {
			margin-top: 30rpx;

			.list_box {
				position: relative;
				padding: 28rpx;
				margin-bottom: 20rpx;
				width: 714rpx;
				font-size: 28rpx;
				line-height: 50rpx;
				border-radius: 28rpx;
				box-shadow: 0 4rpx 35rpx #d3d3d3;

				.status {
					position: absolute;
					top: 38rpx;
					right: 30rpx;
					padding: 0 22rpx;
					line-height: 55rpx;
					color: #fff;
					border-radius: 70rpx 40rpx 0 70rpx;
				}

				.pass {
					background-image: linear-gradient(90deg, #366fff 0%, #5da0fc 100%);
				}

				.nopass {
					background: linear-gradient(90deg, #ff7045 0%, #f7a172 100%);
				}
			}
		}
	}
}
</style>