school_ecology_h5/pages/check/check.vue

<template>
	<view class="container">
		<!-- 搜索框区域 -->
		<common-search placeholder="请输入关键词" @change="handleChange"></common-search>

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

		<!-- 模块选择区域 -->
		<view class="setion">
			<view class="setion_box" :class="{ active: currentIndex_mode == index }" v-for="(item, index) in modeList" :key="item.id" @click="changeModeIndex(index)">
				{{ item.name }}
			</view>
		</view>

		<!-- 列表区域 -->
		<view class="list">
			<!-- 每一个申请区域 -->
			<view class="list_box" v-for="item in dataList" :key="item.id">
				<!-- 状态区域 -->
				<view class="box_status ing" v-if="item.passName == '待审核'">{{ item.passName }}</view>
				<view class="box_status pass" v-if="item.passName == '已通过'">{{ item.passName }}</view>
				<view class="box_status nopass" v-if="item.passName == '已拒绝'">{{ item.passName }}</view>
				<view class="box_title">{{ item.modelName }}</view>
				<view class="box_msg" v-if="item.orgName">
					<view class="msg_key">组织名称：</view>
					<view class="msg_value">{{ item.orgName }}</view>
				</view>
				<view class="box_msg">
					<view class="msg_key">联系人方式：</view>
					<view class="msg_value">{{ item.phone }}</view>
				</view>
				<view class="box_msg">
					<view class="msg_key">联系人：</view>
					<view class="msg_value">{{ item.userName }}</view>
				</view>
				<view class="box_msg">
					<view class="msg_key">发起时间：</view>
					<view class="msg_value">{{ item.createTime }}</view>
				</view>

				<!-- 按钮区域 -->
				<view class="btns" v-if="currentIndex == 1 && item.passName == '待审核'">
					<view class="btn reject" @click="clickReject(item.id)">拒绝</view>
					<view class="btn agree" @click="clickAgree(item.id)">同意</view>
				</view>
			</view>
		</view>

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

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getApplyTypes, getIinitiatedApply, getIapproveApply, getExamineData } from '@/api/index.js'

// 输入框绑定数据
const inputValue = ref('')

// 状态分段器数组
const tagList = ['我发起的', '待我审核']
// 状态分段器当前索引
const currentIndex = ref(0)

// 审批模块列表数据
const modeList = ref([])
// 模块分段器当前索引
const currentIndex_mode = ref(0)

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

onLoad(() => {
	// 获取审批模块列表数据
	getModeData()
})

// 获取审批模块列表数据
const getModeData = async () => {
	const res = await getApplyTypes()
	// console.log(res)
	modeList.value = res.data
	if (currentIndex.value == 0) {
		// 获取我发起的数据
		getData_launch()
	} else {
		// 获取待我审核的数据
		getData_check()
	}
}

// 获取我发起的审核分页数据
const getData_launch = async () => {
	let data = {
		currentPage: currentPage.value,
		pageCount: pageCount.value,
		typeId: modeList.value[currentIndex_mode.value].id,
		keyword: inputValue.value
	}
	const res = await getIinitiatedApply(data)
	// console.log(res)
	dataList.value = [...dataList.value, ...res.data.list]
	total.value = res.data.totalCount
}

// 获取待我审核的审核分页数据
const getData_check = async () => {
	let data = {
		currentPage: currentPage.value,
		pageCount: pageCount.value,
		typeId: modeList.value[currentIndex_mode.value].id,
		keyword: inputValue.value
	}
	const res = await getIapproveApply(data)
	// console.log(res)
	dataList.value = [...dataList.value, ...res.data.list]
	total.value = res.data.totalCount
}

// 搜索框搜索回调
const handleChange = (e) => {
	// console.log(e)
	inputValue.value = e
	currentPage.value = 1
	dataList.value = []
	if (currentIndex.value == 0) {
		// 获取我发起的数据
		getData_launch()
	} else {
		// 获取待我审核的数据
		getData_check()
	}
}

// 状态分段器切换时的回调
const changeIndex = (e) => {
	if (currentIndex.value != e) {
		currentIndex.value = e
		currentIndex_mode.value = 0
		currentPage.value = 1
		dataList.value = []
		if (currentIndex.value == 0) {
			// 获取我发起的数据
			getData_launch()
		} else {
			// 获取待我审核的数据
			getData_check()
		}
	}
}

// 模块分段器切换时的回调
const changeModeIndex = (e) => {
	if (currentIndex_mode.value != e) {
		currentIndex_mode.value = e
		currentPage.value = 1
		dataList.value = []
		if (currentIndex.value == 0) {
			// 获取我发起的数据
			getData_launch()
		} else {
			// 获取待我审核的数据
			getData_check()
		}
	}
}

// 拒绝按钮回调
const clickReject = (id) => {
	uni.showModal({
		title: '提示',
		placeholderText: `请输入拒绝的原因`,
		editable: true,
		success: (res) => {
			if (res.confirm) {
				// console.log(res)
				if (!res.content) {
					uni.showToast({
						title: '拒绝原因为必填',
						icon: 'none'
					})
					setTimeout(() => {
						clickReject(id)
					}, 1500)
				} else {
					auditReq(id, 3, res.content)
				}
			}
		}
	})
}

// 同意按钮回调
const clickAgree = (id) => {
	uni.showModal({
		title: '提示',
		content: `确定同意该申请吗？`,
		success: (res) => {
			if (res.confirm) {
				auditReq(id, 2)
			}
		}
	})
}

// 审核请求 2 通过 3 拒绝
const auditReq = async (id, isPass, passValue = '') => {
	let data = {
		id,
		isPass,
		typeId: modeList.value[currentIndex_mode.value].id,
		passValue
	}
	const res = await getExamineData(data)
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '操作成功',
			icon: 'none'
		})
		setTimeout(() => {
			currentPage.value = 1
			dataList.value = []
			getData_check()
		}, 1500)
	}
}
</script>

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

	.control {
		margin-top: 20rpx;
	}

	.setion {
		margin-top: 20rpx;
		height: 90rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		background-color: #f2f7ff;
		white-space: nowrap;
		overflow-x: auto;

		.setion_box {
			display: inline-block;
			width: 211rpx;
			line-height: 71rpx;
			text-align: center;
			border-radius: 8rpx;
		}

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

	.list {
		margin-top: 20rpx;

		.list_box {
			position: relative;
			padding: 30rpx;
			margin-bottom: 20rpx;
			width: 714rpx;
			font-size: 28rpx;
			border-radius: 28rpx;
			box-shadow: 0 4rpx 34rpx rgba(211, 211, 211, 0.32);

			.box_status {
				position: absolute;
				top: 32rpx;
				right: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 128rpx;
				height: 55rpx;
				color: #fff;
				border-radius: 70rpx 40rpx 0 70rpx;
			}

			.ing {
				background: linear-gradient(90deg, rgba(255, 112, 69, 1) 0%, rgba(247, 161, 114, 1) 100%);
			}

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

			.nopass {
				background: linear-gradient(90deg, rgba(212, 48, 48, 1) 0%, rgba(245, 108, 108, 1) 100%);
			}

			.box_title {
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.box_msg {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.msg_key {
					font-weight: bold;
				}

				.msg_value {
					color: #666666;
				}
			}

			.btns {
				display: flex;
				justify-content: flex-end;
				margin-top: 30rpx;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 15rpx;
					width: 151rpx;
					height: 70rpx;
					border-radius: 8rpx;
				}

				.reject {
					color: #007aff;
					border: 2rpx solid #007aff;
				}

				.agree {
					color: #fff;
					background-color: #007aff;
				}
			}
		}
	}
}
</style>