ybxf-security-uniapp/pagesA/fire/meeting_sign_in/index.vue

<template>
	<view class="container uni-container uni-container-bg">
		<view class="  ">
			<uni-row class="demo-uni-row" :gutter="20" width="100%">
				<uni-col :span="24">
					<!-- 搜索界面 -->
					<view class="u-page__tag-item">
						<u-search :showAction="true" actionText="搜索" ref="uToast" bgColor="#edf6f9"
							borderColor="#4cb2b6" shape="square" v-model="keyword" placeholder="请输入会议名称"
							@custom="search(keyword)"></u-search>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="padding-tb-sm">
			<uni-row class="demo-uni-row align-center flex " :gutter="20" width="100%">
				<!-- <uni-col :span="12">
					<view class="flex flex-direction-row">
						<text class="text-Width ">开始时间：</text>
						<u-button customStyle="background-color: #4cb2b6;" plain shape="circle" size="small"
							color="#fff" @click="showtimeStart = true" :text="formData.start"></u-button>
						<uni-datetime-picker :show="showtimeStart" :value="formData.start" mode="date" closeOnClickOverlay
							@confirm="confirmStarttime" @cancel="showtimeStart = false" @change="changetime"
							@close="showtimeStart = false"></uni-datetime-picker>
					</view>
				</uni-col> -->
				<uni-col :span="23">
					<view class="flex flex-direction-row">
						<!-- <text class="text-Width">结束时间：</text>
						<u-button customStyle="background-color: #4cb2b6;" plain shape="circle" size="small"
							color="#fff" @click="showtimeEnd = true" :text="formData.end"></u-button> -->
						<uni-datetime-picker :show="showtimeEnd" v-model="formData.choicotime" type="daterange"
							closeOnClickOverlay @confirm="confirmEndtime" @cancel="showtimeEnd = false"
							@change="changetime" @close="showtimeEnd = false"></uni-datetime-picker>
						<view class="search-icon">
							<u-icon name="search" color="#4CB2B6" size="40" @click="handleQuery"></u-icon>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in tableData" :key="index" link>
					<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
						<!-- 会议名称 -->
						<uni-col :span="18" class="text-xl font-weight-700">{{ item.meetingName }}</uni-col>
						<uni-col :span="6" class="justify-end flex">
							<u-button shape="circle"
								:color="item.timeStuta == 0 ? '#4cb2b6' : item.timeStuta == 1 ? '#bbbbbb' : '#bbbbbb'"
								size="small" style="width: 160rpx;">
								{{ statusListTran(item.timeStuta) }}
							</u-button>
						</uni-col>
					</uni-row>

					<uni-row class="demo-uni-row padding-bottom-sm text-sm" :gutter="20" width="100%">
						<uni-col style="color: #728F90;" :span="24">
							会议时间：{{ item.meetingStartTime }} -- {{ item.meetingEndTime }}
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row padding-tb-sm text-sm" :gutter="20" width="100%">
						<uni-col :span="8">
							<view class="flex direction-column">
								<text class="padding-bottom"> 会议类型</text>
								<text style="font-weight: bold;"
									class="text-1cut">{{ item.meetingType=='1'?"工作会议":"培训会议" }}</text>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view class="flex direction-column" v-if="item.meetingAtt">
								<text class="padding-bottom"> 会议附件:</text>
								<!-- #ifdef MP-WEIXIN -->
								<text style="color:#00a3f4;cursor: pointer;margin-left: 50rpx !important;"
									@click.native="viewSee(item.meetingAtt)">下载附件</text>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<a style="color:#00a3f4;cursor: pointer;margin-left: 50rpx !important;"
									@click="viewSee(item.meetingAtt)">下载附件</a>
								<!-- #endif -->
							</view>
						</uni-col>
						<uni-col :span="10">
							<view class="flex direction-column align-end ">
								<text class="padding-bottom">会议主题</text>
								<text style="font-weight: bold;" class="text-1cut">{{ item.meetingSubject }}</text>
							</view>
						</uni-col>
					</uni-row>
					<view>
						<view>
							<button class="regsiterBtn" @click="peopleReg(item)"
								v-if="statusListTran(item.timeStuta)=='进行中'||statusListTran(item.timeStuta)=='未开始'?true:false">报名</button>
							<!-- <button class="regsiterBtn" @click="onClick(item)">签到</button> -->
							<button class="regsiterBtn" v-if="statusListTran(item.timeStuta)=='已结束'?true:false"
								@click="searchMeet(item)">查看</button>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>
<script>
	import {
		getMeeting // 查询会议列表
	} from '@/api/meeting';
	import {
		downSee
	} from '@/utils/common'
	import {
		parseTime // 时间戳转换
	} from '@/utils/ruoyi';
	export default {
		data() {
			return {
				statusList: {
					0: '进行中',
					1: '已结束',
					2: '未开始'
				},
				// 人员数据
				tableData: [],
				Control: '',
				// 每页数据量
				pageSize: 20,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				// 初始化时搜索框的值
				keyword: '',
				// 开始时间与结束时间
				startTime: '',
				endTime: '',
				formData: {
					start: '请选择开始时间',
					end: '请选择结束时间',
					choicotime: []
				},
				showtimeStart: false,
				showtimeEnd: false,
				meetingStartTime: '',
				meetingEndTime: '',
				logReg: true,
			};
		},
		onLoad() {
			this.getData(1);
		},
		methods: {
			/** 搜索按钮操作 */
			handleQuery() {
				if (this.formData.choicotime.length && this.formData.choicotime[0].indexOf(":") === -1) {
					this.meetingStartTime = this.formData.choicotime[0] + ' 00:00:00'
					this.meetingEndTime = this.formData.choicotime[1] + ' 23:59:59'
				}
				this.pageNo = 1;
				this.tableData = []
				this.getData(1);
			},
			// =================数据转换==================
			statusListTran(val) {
				//status状态转换
				return this.statusList[val];
			},

			search(val) {
				this.tableData = []
				this.getData(1)
			},
	//查看已上传附件
			viewSee(val) {
				downSee(val)
			},
			// =============获取数据===================s
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true;
				this.pageNo = pageNo;
				// 向 getMeeting 接口请求数据所传递的参数
				getMeeting({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					userId: this.$store.state.user.id,
					meetingName: this.keyword,
					meetingStartTime: this.meetingStartTime,
					meetingEndTime: this.meetingEndTime
				}).then(response => {
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
					this.tableData = [...this.tableData, ...response.data.list];
					// 签到流程判断
					// 数组时间戳转换
					this.tableData.map(i => {
						var meetingEndTime = new Date(i.meetingEndTime).getTime();
						var meetingStartTime = new Date(i.meetingStartTime).getTime();

						var currentTime = new Date().getTime();
						i.meetingStartTime = parseTime(i.meetingStartTime);
						i.meetingEndTime = parseTime(i.meetingEndTime);
						// 如果结束时间大于
						if (meetingStartTime < currentTime && meetingEndTime > currentTime) {
							i.timeStuta = 0;
						} else if (meetingEndTime < currentTime) {
							i.timeStuta = 1;
						} else {
							i.timeStuta = 2;
						}
					});
					this.total = response.data.total;
					this.meetingStartTime = '';
					this.meetingEndTime = '';
					this.loading = false;
				});
			},
			onClick(val) {
				uni.navigateTo({
					url: '/pagesA/fire/meeting_sign_in/meeting_details/meeting_details?id=' + val.id,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(val) {
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					}
				});
			},
			// 触底的事件
			scrolltolower() {
				// 判断是否还有下一页数据
				if (this.pageNo * this.pageSize >= this.total)
					return uni.showToast({
						title: `数据加载完毕`
					});
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return;
				this.pageNo += 1;
				this.getData(this.pageNo);
			},
			// onReachBottom() {
			// 	// 判断是否还有下一页数据
			// 	if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
			// 		title: `数据加载完毕`
			// 	})
			// 	// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			// 	if (this.loading) return
			// 	this.pageNo += 1
			// 	this.getData(this.pageNo)
			// },
			//日期范围
			// 开始日期
			confirmStarttime(e) {
				this.showtimeStart = false;
				let startTime = this.startTime = e.value;
				if (startTime <= 0) {

				}
				let value = new Date(e.value);
				this.formData.start = e.value ? uni.$u.timeFormat(e.value, 'yyyy/mm/dd') : '';
			},
			changetime(e) {

			},
			confirmEndtime(e) {
				const times = this.formData.start
				const timestamp = new Date(times).getTime();
				if (e.value < timestamp) {
					return this.$modal.msg('结束时间不能小于开始时间,请重新选择')

				} else {
					this.showtimeEnd = false;
					let value = new Date(e.value);
					this.formData.end = e.value ? uni.$u.timeFormat(e.value, 'yyyy/mm/dd') : '';
				}
				// this.meetingStartTime.push(this.formData.start,this.formData.end)
				this.meetingStartTime = this.formData.start
				this.meetingEndTime = this.formData.end
				this.tableData = []
				this.getData(1)

			},
			peopleReg(row) {
				// console.log(row, 'row');
				uni.navigateTo({
					url: `/pagesA/fire/metting_regsiter/metting_sigin?metId=${row.id}&metName=${row.meetingName}`
				})
			},
			searchMeet(row) {
				uni.navigateTo({
					url: `/pagesA/fire/metting_regsiter/metting_sigin?meetSearch=${row.id}`
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.text-Width {
		width: 340rpx;
		text-align: center;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.regsiterBtn {
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: #4DB1B5;
		font-size: 20rpx;
		color: white;
		float: right;
		border-radius: 30rpx;
		margin-left: 20rpx;
	}
</style>