dl_uniapp/pages/notice/report-list.vue

<template>
	<view class="container-box">
		<navigation-bar-vue title="查看报名" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="content">
			<!-- 操作按钮 -->
			<view class="dl-opt-box">
				<view class="dl-menu-box" v-for="(item,index) in menus">
					<view @click="itemClick(index,item)" class="dl-menu"
						:class="index==menuIndex?'dl-menu click':'dl-menu'">
						{{item}}({{0==index?waitingTotal:checkedTotal}})
					</view>
				</view>
			</view>
			<!-- 待定的列表 -->
			<view class="data-list-box" v-if="0==menuIndex">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
					@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
					<card-item status="0" :dataList="waitingList" ifChoose="true" @goIndex="goIndex()"
						@chooseCardVal="chooseCardVal" @updateList="updateListWaiting"></card-item>
					<view style="text-align: center" v-if="waitingList.length==0">
						<image class="" src="@/static/images/nothing.png"></image>
					</view>
				</scroll-view>
			</view>
			<!-- 合适的列表 -->
			<view class="data-list-box" v-if="1==menuIndex">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
					@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
					<card-item status="1" :dataList="checkedList" ifChoose="true" @goIndex="goIndex()"
						@chooseCardVal="chooseCardVal" @updateList="updateListChecked"></card-item>
					<view style="text-align: center" v-if="checkedList.length==0">
						<image class="" src="@/static/images/nothing.png"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="footer-box">
			<view class="left-radio">
				<uni-data-checkbox v-if="0==menuIndex" @change="chooseAllFun()" multiple :localdata="chooseAll" />

			</view>
			<view class="right-button">
				<text v-if="0==menuIndex" style="color: #929292;">可在“合适”列表导出名单</text>
				<view v-if="0==menuIndex" class="button-dom" @click="chooseOk">划为合适</view>
				<view v-if="1==menuIndex" class="button-dom" @click="exportList">导出名单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import cardItem from '@/pages/notice/card-item.vue';
	import {
		toast,
		hasRights
	} from '@/utils/common.js'
	import {
		reportList,
		chooseSign,
		getSignNum
	} from '@/api/business/notice';
	import config from '@/config';
	export default {
		components: {
			navigationBarVue,
			cardItem
		},
		data() {
			return {
				baseUrl: config.baseUrl,
				chooseAll: [{
					text: '全选',
					value: true
				}],
				globalConfig: getApp().globalData.config,
				menus: ['待定', '合适'],
				menuIndex: 0,
				waitingParams: {
					pageNum: 1,
					pageSize: 10
				},
				checkedParams: {
					pageNum: 1,
					pageSize: 10
				},
				//待定的数组
				waitingList: [],
				// 合适的数组
				checkedList: [],
				//待定的总数
				waitingTotal: 0,
				//合适的总数
				checkedTotal: 0,
				//下来刷新状态
				isTriggered: false,
				noticeId: null
			}
		},
		computed: {
			getChooseNum() {
				return this.checkedList.filter((item) => item.choosed && item.choosed.length > 0).length
			}
		},
		onLoad(param) {
			this.noticeId = param.noticeId
		},
		onShow() {
			this.waitingList = []
			this.checkedList = []
			this.menuIndex = 0
			this.waitingParams.pageNum = 1
			this.checkedParams.pageNum = 1
			this.selectDataList()
		},
		methods: {
			updateListWaiting(list) {
				this.waitingList = list
				console.log(this.waitingList, "waitingList")
			},
			updateListChecked(list) {
				this.checkedList = list
				console.log(this.checkedList, "checkedList")
			},
			chooseOk() {
				console.log(this.waitingList, 119);
				let tempList = this.waitingList.filter((item) => item.choosed.length > 0)
				if (tempList.length == 0) {
					uni.showToast({
						title: '请勾选合适的卡片',
						icon: 'none',
						duration: 800
					})
					return
				}
				let ids = []
				tempList.forEach(it => {
					ids.push(it.id)
				})
				chooseSign({
					signIds: ids.join(",")
				}).then(res => {
					uni.showToast({
						title: '成功',
						icon: 'none',
						duration: 800
					})
					this.selectDataList()
				})
			},
			getNum() {
				let queryData = {}
				queryData.noticeId = this.noticeId
				getSignNum(queryData).then(res => {
					if (res.code == 200) {

						this.waitingTotal = res.data.waitNum
						this.checkedTotal = res.data.checkedNum

					}
				})
			},
			selectDataList() {
				let queryData = {}
				if (this.menuIndex == 0) {
					queryData.status = '01'
					queryData.pageNum = this.waitingParams.pageNum
					queryData.pageSize = this.waitingParams.pageSize
				} else if (this.menuIndex == 1) {
					queryData.status = '02'
					queryData.pageNum = this.checkedParams.pageNum
					queryData.pageSize = this.checkedParams.pageSize
				}
				queryData.noticeId = this.noticeId
				reportList(queryData).then(res => {
					if (res.code == 200) {
						this.isTriggered = false
						res.data.records.map((item) => {
							item.choosed = []
						})
						if (this.menuIndex == 0) {
							if (queryData.pageNum == 1) {
								this.waitingList = res.data.records
							} else {
								this.waitingList = this.waitingList.concat(res.data.records)
							}
							this.waitingTotal = res.data.total
						} else if (this.menuIndex == 1) {
							if (queryData.pageNum == 1) {
								this.checkedList = res.data.records
							} else {
								this.checkedList = this.checkedList.concat(res.data.records)
							}
							this.checkedTotal = res.data.total

						}
						console.log(this.checkedTotal, this.waitingTotal, this.waitingList);
					}
				})
				this.getNum()
			},
			/**
			 * 菜单点击
			 * @param {Object} index
			 * @param {Object} item
			 */
			itemClick(index, item) {
				this.menuIndex = index
				this.selectDataList()

			},
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				let quertData = {}
				if (this.menuIndex == 0) {
					queryData = this.waitingParams
				} else if (this.menuIndex == 1) {
					queryData = this.checkedParams
				}
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				let total = (0 == this.menuIndex ? this.waitingTotal : this.checkedTotal)
				if (queryData.pageNum * queryData.pageSize >= total) {
					toast("没有更多数据了")
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				queryData.pageNum++
				this.selectDataList()
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				let quertData = {}
				if (this.menuIndex == 0) {
					queryData = this.waitingParams
				} else if (this.menuIndex == 1) {
					queryData = this.checkedParams
				}
				this.isTriggered = true
				quertData.pageNum = 1
				if (0 == this.menuIndex) {
					this.waitingTotal = 0
				} else {
					this.checkedTotal = 0
				}
				this.selectDataList()
			},
			/**
			 * 全选
			 * @param {Object} e
			 */
			chooseAllFun(e) {
				if (e.detail.value.length > 0) {
					if (0 == this.menuIndex) {
						this.waitingList.map((item) => {
							item.choosed = [true]
						})
					} else {
						this.checkedList.map((item) => {
							item.choosed = [true]
						})
					}

				} else {
					if (0 == this.menuIndex) {
						this.waitingList.map((item) => {
							item.choosed = []
						})
					} else {
						this.checkedList.map((item) => {
							item.choosed = []
						})
					}
				}
			},
			/**
			 * 导出名单
			 */
			exportList() {
				let exportUrl = this.baseUrl + "/busi/sign/export?noticeId=" + this.noticeId
				uni.setClipboardData({
					data: exportUrl,
					success: function() {
						uni.showToast({
							title: '名单复制成功，请到浏览器下载',
							icon: 'icon',
							duration: 2000
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			/**
			 * 去名片所有者主页
			 */
			goIndex(item) {
				console.log(item);

			},
			/**
			 * 将名片置为合适或不合适
			 */
			chooseCardVal(value) {
				chooseSign({
					signIds: value
				}).then(res => {
					uni.showToast({
						title: '成功',
						icon: 'none',
						duration: 800
					})
					this.selectDataList()
				})
			}
		}
	}
</script>

<style lang="scss">
	.container-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		border-top: 1rpx solid #F4F4F4;
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.content {
			border-top: 1rpx solid #F4F4F4;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 195rpx);
			overflow-y: scroll;
			width: 100%;
			background-color: #F2F2F2;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: start;
			position: relative;

			.dl-opt-box {
				background-color: white;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.dl-menu-box {
					color: #929292;
					display: flex;
					flex: 1;
					align-items: center;
					justify-content: center;
					width: 100%;
					padding-top: 20rpx;

					.dl-menu {
						width: auto;
						font-size: 30rpx;
						margin: 0 20rpx;
						padding-bottom: 15rpx;
						text-align: center;
					}

					.click {
						color: #FF434E;
						font-weight: bold;
						border-bottom: 2px solid #FF434E;
					}
				}

			}

			.data-list-box {
				flex: 1;
				padding: 20rpx 30rpx;
				display: flex;
				flex-direction: column;
				align-items: self-start;
				justify-content: start;
				width: 100%;
			}
		}

		.footer-box {
			z-index: 999;
			padding: 20rpx 30rpx;
			background-color: white;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: start;
			position: fixed;
			bottom: var(--window-bottom);

			.left-radio {
				text-align: left;

			}

			.right-button {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				text {
					margin-right: 15rpx;
					font-size: 24rpx;
				}

				.button-dom {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 10rpx 40rpx;
					background-color: #FC1F3E;
					border-radius: 15rpx;
					color: white;
				}

			}
		}
	}

	.checklist-box {
		margin-right: 5rpx !important;
	}
</style>