GSExamProj/pages/meeting/meeting.vue

<template>
	<view class="hole-page">
		<view class="select-area">
			例会类型：
			<uni-data-select
			    v-model="meetVal"
			    :localdata="meetRange"
			    @change="meetChange"
				:clear="false"
			></uni-data-select>
		</view>
		<view class="select-area">
			选择日期范围：
			<uni-datetime-picker 
				v-model="timeRange" 
				type="daterange" 
				@change="timeChange"
				:clear-icon="false"
			/>
		</view>
		<!-- <view class="meeting-upper">
			<view>例会类型</view>
			<view>例会主题</view>
			<view>例会时间</view>
		</view> -->
		<view 
			class="single-meeting"
			v-for="(meeting, index) in meetingList"
			:key="index"
			@click="jumpDetail(meeting.id)"
		>
			<view>
				<h4>例会类型</h4>
				<span>{{ meeting.meetingType }}</span>
			</view>
			<view>
				<h4>例会主题</h4>
				<span>{{ meeting.meetingTheme }}</span>
			</view>
			<view>
				<h4>例会时间</h4>
				<span>{{ meeting.updateTime }}</span>
			</view>
		</view>
		<view class="no-data" v-show="showNoData">
			<view class="cen-pic">
				<image src="/static/noMeeting.png" mode=""></image>
				<span>当前时间段无会议</span>
			</view>
		</view>
	</view>
</template>

<script>
import { publicPath } from '../../public';
	export default {
		data() {
			return {
				meetVal: 1,
				meetRange: [
					{ value: 1, text: '月例会' },
					{ value: 2, text: '周例会' },
					{ value: 3, text: '安全例会' }
				],
				timeRange: [],
				meetingList: [],
				yr: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				day: new Date().getDate(),
				showNoData: false
			}
		},
		methods: {
			meetChange (e) {
				console.log(this.meetVal, this.timeRange);
				this.fetchMeetings(this.meetVal, this.timeRange[0], this.timeRange[1])
			},
			timeChange (e) {
				console.log(this.meetVal, this.timeRange);
				this.fetchMeetings(this.meetVal, this.timeRange[0], this.timeRange[1])
			},
			fetchMeetings (type, start, end) {
				let that = this
				that.meetingList = []
				uni.request({
					url: publicPath + '/backstage/app/getAppMeetingList',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
					},
					data: {
						meetingType: type,
						startTime: start,
						endTime: end
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 500) {
							/* uni.showToast({
								icon: 'none',
								title: '该时间段暂无例会数据！'
							}) */
							that.showNoData = true
						} else {
							that.showNoData = false
							for (let i = 0; i < res.data.data.length; i++) {
								switch (res.data.data[i].meetingType) {
									case '1':
										res.data.data[i].meetingType = '月例会'
										break;
									case '2':
										res.data.data[i].meetingType = '周例会'
										break;
									case '3':
										res.data.data[i].meetingType = '安全例会'
										break;
								}
							}
							that.meetingList = res.data.data
						}
					}
				})
			},
			timestampToTime (timestamp) {
				var date = new Date(timestamp);
				  var Y = date.getFullYear() + "-";
				  var M =
				    (date.getMonth() + 1 < 10
				      ? "0" + (date.getMonth() + 1)
				      : date.getMonth() + 1) + "-";
				  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
				  return Y + M + D;
			},
			jumpDetail (id) {
				uni.navigateTo({
					url: `/pages/meetingDetail/meetingDetail?id=${id}`
				})
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/addMeeting/addMeeting'
			})
		},
		onShow() {
			this.yr = new Date().getFullYear()
			this.month = new Date().getMonth() + 1
			this.day = new Date().getDate()
			if (this.month < 10) {
				this.month = '0' + this.month
			}
			if (this.day < 10) {
				this.day = '0' + this.day
			}
			let today = this.yr + '-' + this.month + '-' + this.day
			console.log(today);
			let lastSeven = this.timestampToTime(new Date(today).getTime() - (1000 * 60 * 60 * 24 * 7)) 
			console.log(lastSeven);
			this.timeRange = [lastSeven, today]
			this.fetchMeetings(this.meetVal, lastSeven, today)
		}
	}
</script>

<style lang="scss" scoped>
	.hole-page{
		width: 100%;
		height: 100vh;
		background-color: #f7fbfe;
		.select-area{
			width: 100%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			font-size: 14px;
			background-color: #fff;
			box-sizing: border-box;
			padding: 20rpx;
		}
		.single-meeting{
			width: 100%;
			margin: 20rpx auto;
			box-sizing: border-box;
			padding: 0 40rpx 20rpx 40rpx;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			view{
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #dbdbdb;
				h4{
					font-weight: normal;
					font-size: 14px;
					color: #868686;
				}
				span{
					font-size: 14px;
				}
			}
		}
		.no-data{
			width: 100%;
			height: 50vh;
			display: flex;
			background-color: #fff;
			.cen-pic{
				width: 30%;
				height: 15vh;
				margin: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				image{
					width: 100%;
					height: 12vh;
				}
				span{
					font-size: 14px;
					color: #9f9f9f;
				}
			}
		}
	}
</style>