WenWuGuanJia/user_fenbao/houTai/zhiYuanZhe.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="志愿者管理" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="filter-box">
			<view class="b-item" v-for="(item, index) in tabList" :key="index" :class="{ active: index == tab }" @click="tabBtn(index)">
				<view class="">{{ item.name }}</view>
			</view>
		</view>

		<!-- 名单 -->
		<view class="" v-if="tab === 0">
			<view class="top_box">
				<view class="" style="width: 100%; display: flex; justify-content: space-between; align-items: center">
					<view class="top_item">
						<view class="">区域:</view>
						<view class="xz2" @click="selectArea">
							<view class="">{{ Areatit ? Areatit : '请选择' }}</view>
							<view class="">
								<uni-icons type="down" size="22" color=""></uni-icons>
							</view>
						</view>
					</view>
					<view class="top_item" @click="show = true">
						<view class="">状态:</view>
						<view class="xz">
							<view class="">{{ statetit ? statetit : '请选择' }}</view>
							<view class="">
								<uni-icons type="down" size="22" color=""></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="scarch_box">
					<u-search
						@custom="search"
						:actionStyle="{ color: '#985741', fontSize: '28rpx', fontWeight: 'bold' }"
						height="25"
						shape="square"
						placeholder="输入关键字搜索"
						v-model.trim="value"
					></u-search>
				</view>
			</view>
			<view class="jl_box">
				<view class="tit_box">
					<view style="width: 130rpx" class="">姓名</view>

					<view style="width: 130rpx">电话</view>
					<view style="width: 130rpx">地址</view>
					<view style="width: 130rpx">操作</view>
				</view>
				<scroll-view v-if="recordList.length > 0" style="height: 800rpx" scroll-y="true" @scrolltolower="LoadMore">
					<view @click="mingDandetailsBtn(item.id)" class="jl_item" v-for="item in recordList" :key="item.id">
						<view class="bk">
							{{ item.name }}
						</view>

						<view class="bk sl">
							{{ item.mobile }}
						</view>
						<view class="bk">
							{{ item.address }}
						</view>
						<view class="bk">
							<view class="ck">详情</view>
						</view>
					</view>
				</scroll-view>
				<u-empty v-else text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</view>
		<u-picker keyName="label" :show="show" @cancel="show = false" :columns="columnsList" @close="close" :closeOnClickOverlay="true" @confirm="qyBtn"></u-picker>
		<!-- 审核 -->
		<view class="" v-if="tab === 1">
			<view class="jl_box">
				<view class="tit_box">
					<view style="width: 130rpx" class="">姓名</view>
					<view style="width: 130rpx">电话</view>
					<view style="width: 130rpx">地址</view>
					<view style="width: 130rpx">状态</view>
					<view style="width: 130rpx">操作</view>
				</view>
				<scroll-view v-if="toExamine.length > 0" style="height: 800rpx" scroll-y="true" @scrolltolower="LoadMoress">
					<view class="jl_item" v-for="item in toExamine" :key="item.id">
						<view class="bk">
							{{ item.name }}
						</view>

						<view class="bk">
							{{ item.mobile }}
						</view>
						<view class="bk">
							{{ item.address }}
						</view>
						<view class="bk" :class="{ zhuxiao: item.status_text == '注销' }">
							{{ item.status_text }}
						</view>
						<view class="bk" @click="detailsBtn(item.id)">
							<view class="ck">详情</view>
							<!-- <view style="width: 170rpx; margin-left: 20rpx" class="ck">
								<view class="" @click.stop="agreeBtn(item.id)">同意</view>
								<view class="">/</view>
								<view @click.stop="returnBtn(item.id)" style="margin-left: 10rpx">驳回</view>
							</view> -->
						</view>
					</view>
				</scroll-view>
				<u-empty v-else text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</view>
		<!-- 信息弹层 -->
		<u-popup bgColor="#f2c8a2" :show="detailsShow" @close="close" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
			<view class="ban_box">
				<view>
					<view class="">姓名：{{ detailsList.name }}</view>
					<view class="">联系方式：{{ detailsList.mobile }}</view>
					<view class="">住址：{{ detailsList.address }}</view>
					<view class="">单位：{{ detailsList.unit_name }}</view>
				</view>
				<view class="">身份证：{{ detailsList.id_card }}</view>
				<view style="height: 300rpx; overflow: scroll">个人简介：{{ detailsList.intro || '暂无介绍' }}</view>
				<view class="bt_box">
					<view class="bt1" @click="(detailsShow = false), (returnShow = true)">驳回</view>
					<view @click="agreeBtn" class="bt2">同意</view>
				</view>
			</view>
		</u-popup>
		<!-- 驳回描述弹层 -->
		<u-popup bgColor="#f2c8a2" :show="returnShow" @close="close" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
			<view style="text-align: center; font-size: 30rpx">确认驳回该申请吗?</view>
			<view style="margin-top: 20rpx">
				<u--textarea height="80" v-model.trim="returnVal" placeholder="请填写驳回原因:"></u--textarea>
			</view>
			<view class="bt_box">
				<view
					class="bt1"
					@click.stop="
						returnShow = false;
						returnVal = '';
					"
				>
					取消
				</view>
				<view @click.stop="isOk" class="bt2">确认</view>
			</view>
		</u-popup>
		<tki-tree ref="tkitree" idKey="id" @confirm="onnodeclick" :range="regionList" rangeKey="title" selectParent confirmColor="#4e8af7" />
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			Areatit: '',
			statetit: '',
			id: '' /* 区域管理id */,
			id2: '' /* 记录区域管理id */,
			regionList: [] /* 区域列表 */,
			value: '',
			page: 1,
			tab: 0,
			statusId: '',
			AreaId: '',
			volunteer_id: '' /*志愿者id */,
			isLoading: false,
			show: false,
			returnId: '',
			detailsShow: false /* 详情弹层 */,
			detailsList: {} /* 详情 */,
			returnShow: false /* 弹层 */,
			returnVal: '' /* 驳回原因 */,
			tabList: [
				{
					name: '名单'
				},
				{
					name: '审核'
				}
			],

			columnsList: [
				[
					{ label: '培训中', id: 1 },
					{ label: '待审核', id: 0 },
					{ label: '驳回', id: -1 },
					{ label: '申请注销', id: -2 },
					{ label: '已注销', id: -3 }
				]
			],
			optionIndex: 0,
			optionList: [],
			// 名单
			recordList: [],
			/* 审核数据列表 */
			toExamine: []
		};
	},
	onLoad(o) {
		that = this;
		this.id = o.id;
		this.id2 = o.id;
		this.lists();
		this.getCulturalRelicCategory();
	},
	methods: {
		// 名单
		lists(id) {
			this.isLoading = true;
			this.$api.lists({ region_id: id || this.id, status: this.statusId, keywords: this.value, page: this.page, pageSize: 30, main_body_id: 1 }, function (res) {
				console.log(res, '名单');
				if (res.code == 1) {
					that.isLoading = false;
					that.recordList = [...that.recordList, ...res.data];
				} else {
					that.$common.errorToShow(res.msg);
				}
			});
		},
		auditingLists() {
			this.isLoading = true;
			this.$api.lists({ status: '0,-2', page: this.page, pageSize: 10, main_body_id: 1 }, function (res) {
				console.log(res, '审核列表');
				if (res.code == 1) {
					that.isLoading = false;
					that.toExamine = [...that.toExamine, ...res.data];
				}
			});
		},
		LoadMore() {
			if (this.isLoading) {
				return;
			} else {
				// this.value = '';
				this.page++;
				this.lists();
			}
		},
		LoadMoress() {
			if (this.isLoading) {
				return;
			} else {
				this.page++;
				this.auditingLists();
			}
		},
		// 详情
		detailsBtn(id) {
			// console.log(id, 'idid');
			this.volunteer_id = id;
			this.detailsShow = true;
			this.$api.details({ main_body_id: 1, volunteer_id: id }, function (res) {
				// console.log(res, 666666666);
				if (res.code === 1) {
					that.detailsList = res.data;
				} else {
					that.$common.errorToShow('请稍后再试');
				}
			});
		},
		mingDandetailsBtn(id) {
			uni.navigateTo({
				url: '/index_fenbao/fuWu/paiMing/xiangQing?id=' + id
			});
		},
		tabBtn(i) {
			this.tab = i;
			this.page = 1;
			this.statusId = '';
			// this.id = this.id;
			if (i == 0) {
				that.toExamine = [];
				this.lists();
			} else {
				that.recordList = [];
				this.auditingLists();
			}
		},

		qyBtn(e) {
			// console.log(e);
			this.statetit = e.value[0].label;
			this.statusId = e.value[0].id;
			this.page = 1;
			that.recordList = [];
			this.value = '';
			this.lists();
			this.show = false;
		},
		search(e) {
			this.page = 1;
			that.recordList = [];
			this.statusId = '';
			this.statetit = '';
			this.AreaId = '';
			this.Areatit = '';
			this.id = this.id2;
			this.lists();
		},
		// 审核
		examineVolunteer(id, status) {
			// console.log(id, status, 454);
			this.$api.examineVolunteer({ volunteer_id: id, status: status, main_body_id: 1, feedback: this.returnVal || '' }, function (res) {
				console.log(res);
				if (res.code == 1) {
					// 同意后从列表删除该项
					const index = that.toExamine.findIndex((item) => item.id === id);
					if (index !== -1) {
						that.toExamine.splice(index, 1);
					}
					that.$common.errorToShow(res.msg);
				} else {
					that.$common.errorToShow('请稍后再试');
				}
			});
		},
		// 通过申请
		agreeBtn() {
			this.detailsShow = false;
			this.examineVolunteer(this.volunteer_id, 2);
			// console.log('通过申请', this.volunteer_id);
		},

		// 确认驳回
		isOk() {
			if (this.returnVal != '' && this.returnVal.length > 0) {
				this.examineVolunteer(this.volunteer_id, -1);
				// console.log('驳回', this.volunteer_id);
				this.returnShow = false;
				this.detailsShow = false;
			} else {
				that.$common.errorToShow('请填写驳回原因');
			}
		},
		selectArea() {
			//打开选择器
			this.$refs.tkitree._show();
		},
		// 区域
		getCulturalRelicCategory() {
			this.$api.getCulturalRelicCategory({ main_body_id: 1, type: this.id, withself: true }, function (res) {
				if (res.code == 1) {
					// 创建一个字典，键为id，值为对象，便于快速查找
					const itemsById = res.data.reduce((acc, item) => {
						acc[item.id] = {
							...item,
							children: []
						};
						return acc;
					}, {});
					console.log(itemsById, 1212);
					// 构建树结构
					const tree = res.data
						.filter((item) => {
							const parent = itemsById[item.pid];
							if (parent) {
								// 找到字节点
								parent.children.push(itemsById[item.id]);
								return false;
							}
							// 未找到字节点，则是根节点
							return true; // 没有父节点，所以这是一个根节点
						})
						.map((id) => itemsById[id.id]);

					that.regionList = tree;
				}
			});
		},
		onnodeclick(e) {
			this.id = e[0].id;
			this.AreaId = e[0].id;
			this.Areatit = e[0].title;
			this.page = 1;
			that.recordList = [];
			this.value = '';
			this.lists(this.AreaId);
		},
		close() {
			this.show = false;
			this.returnShow = false;
			this.detailsShow = false;
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: 100%;
}
.zhuxiao {
	color: #f73131;
}
.filter-box {
	padding: 30upx 50upx 0 50upx;
	margin-bottom: 30upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.filter-box .b-item {
	width: 278rpx;
	height: 80rpx;
	font-size: 30rpx;
	color: #ffefc4;
	font-weight: 600;
	text-align: center;
	line-height: 80rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/cy_tit2.png');
	background-size: 100% 100%;
}
.scarch_box {
	width: 670rpx;
	height: 82rpx;
	margin: auto;
	margin-top: 40rpx;
	padding: 15rpx 0 0 30rpx;
	background-image: url('/static/img/search_bg1.png');
	background-size: 100% 100%;
}
/deep/.u-search__content.data-v-0a306a29 {
	border-radius: 0 !important;
}
.active {
	color: #fae5bb !important;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/cy_tit1.png') !important;
}
.top_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 90%;
	margin: auto;
}
.top_item {
	display: flex;
	align-items: center;
	/* margin-top: 30rpx; */
}
.xz {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 240rpx;
	height: 60rpx;
	background-image: url('/static/img/search_bg1.png');
	background-size: 100% 100%;
}
.xz2 {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 240rpx;
	height: 60rpx;
	background-image: url('/static/img/search_bg1.png');
	background-size: 100% 100%;
}
.jl_box {
	margin: auto;
	margin-top: 40rpx;
	text-align: center;
}
.tit_box {
	display: flex;
	height: 60rpx;
	line-height: 60rpx;
	font-weight: 700;
	font-size: 28rpx;
	justify-content: space-around;
	background-color: #e4c3a6;
}
.jl_item {
	display: flex;
	justify-content: space-around;
	height: 100rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	/* background-color: #e7cbad; */
}
.bk {
	width: 100%;
	overflow-x: auto;
	white-space: nowrap;
}

.sl {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ck {
	display: flex;
	justify-content: space-around;
	width: 145rpx;
	height: 50rpx;
	font-size: 30rpx;
	line-height: 50rpx;
	margin-top: 15rpx;
	margin-left: 20rpx;
	background-color: #b75830;
}
.bt_box {
	display: flex;
	margin-top: 100rpx;
	justify-content: space-around;
}
.bt1 {
	width: 220rpx;
	height: 78rpx;
	border: 1px solid #312520;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: black;
}
.bt2 {
	width: 220rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
.ban_box {
	width: 92%;
	margin: auto;
	color: #90523c;
	font-size: 30rpx;
	line-height: 50rpx;
	font-weight: 600;
}
.input-value-border {
	border: none !important;
}
.placeholder {
	color: #333333 !important
;
}
.input-arrow {
	width: 22rpx !important;
	height: 22rpx !important;
	border-left: 1px solid #000 !important;
	border-bottom: 1px solid #000 !important;
}
.uni-data-tree {
	width: 310rpx !important;
}
</style>