school-shunt-app/pages/index/components/schedule.vue

<template>
	<view style="padding: 0 32rpx">
		<u-class title="日程安排">
			<view v-if="list.length" class="timeline">
				<view v-for="(item,index) in list" :key="index" class="item-container">
					<view class="item-main u-flex" @click="toQuery(item)">
						<view class="left">
							<view class="left-label">{{item.labelTitle}}</view>
							<view class="left-time">{{item.labelStartDate}} ～ {{item.labelEndDate}}</view>
						</view>
						<!-- labelStatus	日程状态：-1：已结束，0-未开始，1-进行中 -->
						<view class="right-label">
							<image v-if="item.labelStatus==1" class="right-icon" src="/static/index/into_icon.png" />
							<view>{{item.labeltatusName ||item.labelStatusName || '--'}}</view>
						
						</view>
					</view>
					<view class="line" />
					<image v-if="item.labelStatus==-1" class="head-icon" src="/static/index/end_state_choose.png" />
					<image v-else-if="item.labelStatus==1" class="head-icon"
						src="/static/index/start_state_choose.png" />
					<image v-else class="head-icon not_state" src="/static/index/end_state_choose.png" />
				</view>
			</view>
			<view v-else class="no-data">
				<image class="icon" src="/static/no_list.png" mode="widthFix"></image>
				<view class="tip">暂无日程安排哦~</view>
			</view>
		</u-class>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				activeIndex: 1,
				list: [],
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.$ajax.post('/shunt/schedule').then(res => {
					this.list = res.data || []
				}).catch(error => {
					this.list = []
				})
			},

			toQuery(item) {
				const {
					path,
					labelStatus,
				} = item || {}
				if(labelStatus!==1) {
					console.log(item)
					return 
				}
				if (path && path.indexOf('/')>=0) {
					['/', '/pages/index/index', '/pages/my/my'].indexOf(path) >= 0 ?
						uni.switchTab({
							url: path
						}) :
						uni.navigateTo({
							url: path // `/pages/apps/progress-query/progress-query`
						})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.timeline {
		max-width: 400px;
		margin: 0 auto;

		.item-container {
			padding-left: 56rpx;
			position: relative;

			.item-main {
				width: 100%;
				height: 209rpx;
				background: url('/static/schedule_list_bg.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: right center;
				background-origin: content-box;
			}

			.left {
				padding-left: 60rpx;
			}

			.left-label {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 36rpx;
			}

			.left-time {
				font-size: 24rpx;
				font-weight: 400;
				color: #A3ABBF;
			}

			.right-label {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				padding-right: 60rpx;
			}

			.right-icon {
				cursor: pointer;
				width: 52rpx;
				height: 52rpx;
				margin-bottom: 22rpx;
			}

			.line {
				position: absolute;
				top: 0;
				left: 16rpx;
				width: 6rpx;
				height: 100%;
				background: #D1E3FA;
				transform: translateX(-50%);
			}

			&:nth-child(1) {
				.line {
					top: 50%;
					height: 50%;
				}
			}

			&:nth-last-child(1) {
				.line {
					height: 50%;
				}
			}

			.head-icon {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				z-index: 1;
				width: 32rpx;
				height: 32rpx;

				&.not_state {
					width: 22rpx;
					height: 22rpx;
					left: 5rpx
				}
			}

		}
	}

	.no-data {
		text-align: center;

		.icon {
			width: 183rpx;
			height: 167rpx;
			margin-top: 80rpx;
			margin-bottom: 40rpx;
		}

		font-size: 20rpx;
		font-weight: 400;
		color: #A3ABBF;
	}
</style>