zhuoxin-user-uniapp/components/fxyk-timeline/fxyk-timeline.vue

<template>
	<view class="d-flex">
		<view class="flex-s tag" :style="projectInfo[1]" >{{ projectInfo[0] }}</view>
		<u-time-line-item nodeTop="2" class="u-margin-left-62 u-margin-bottom-0">
			<!-- 此处自定义了左边内容，用一个图标替代 --> 
			<template v-slot:node>
				<!-- 此处为uView的icon组件 -->
				<u-icon class="icon-bgcolor" name="checkmark-circle-fill" :size="42" :color="projectInfo[2]"></u-icon>
			</template>
			<template v-slot:content>
				<view class="card-style">
					<view class="d-flex">
						<view class="word-one">{{ projectPlan }}</view>
						<view>
							<text class="word-two">
								<text>2019.6.7</text>
								-
								<text>2019.6.9</text>
							</text>
							<text class="word-three">营销部</text>
							<view class="word-four u-maring-top-12">额定天数: 4天</view>
							<view class="d-flex" style="margin-top:8rpx">
								<view class="word-four">实际天数: 4天</view> 
								<view class="word-five" @click.stop="jump_project_info_point_order"><text>批示</text></view>
								<view class="word-six"><text>查看附件</text></view>
							</view>
						</view>
					</view>	
					<!-- <view class="word-seven">逾期原因:现场施工逾期一天完成</view> -->
				</view>
				<u-line v-if="projectIndex !== 9" style="margin-left: -15rpx;" length="560rpx" color="black" margin="10.5rpx" border-style="dashed"/>
			</template>
		</u-time-line-item>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否逾期 决定左侧文字背景颜色 图标颜色 进程颜色 实际天数颜色 逾期原因的展示 
			// 1 如期完成 2 预期完成 3项目终止
			projectStatus: {
				type: [ Number, String ],
				default: 1
			},
			// 项目进度
			projectIndex: {
				type: [ Number, String ],
				default: 1
			},
			// 项目数据
			// projectData: {
			// 	type: Object,
			// 	default: () => {
			// 		return {}
			// 	}
			// }
		},
		computed: {
			projectInfo() {
				if ( parseInt(this.projectStatus) === 1 ) {
					return ['如期完成', {'background-color': '#4CB1FF'}, '#4CB1FF']
				} else if ( parseInt(this.projectStatus) === 2 ) {
					return ['逾期完成', {'background-color': '#F17E38'}, '#F17E38']
				} else {
					return ['项目终止', {'background-color': '#FF0014'}, '#FF0014']
				}
			},
			projectPlan() {
				switch(parseInt(this.projectIndex)) {
					case 1: 
						return '立项审批'
					case 2: 
					    return '设计委托'
					case 3:
					    return '初设评审'
					case 4:
					    return '占地进度'
					case 5:
					    return '现场施工'
					case 6:
					    return '竣工验收'
					case 7:
					    return '物资管理'
					case 8:
					    return '工程结算'
					case 9:
					    return '资料归档'	
				}
			}	
		},
		methods: {
			// 跳到节点批示页
			jump_project_info_point_order() {
				uni.navigateTo({
					url: '/pages/index/projectInfoPointOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		width: 110rpx;
		height: 33rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 33rpx;
		font-size: 21rpx;
		font-family: SimSun;
		color: #FFFFFF;
		margin-top:5rpx;
	}
	.icon-bgcolor {
		background-color: #F7FBFF;
	}
	.card-style{
		width: 560rpx;
		height: 130rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 13rpx rgba(0, 0, 0, 0.16);
		border-radius: 17rpx;
		margin-left: -15rpx;
		padding: 12rpx 5rpx;
		.word-one {
			width: 117rpx;
			height: 29rpx;
			font-size: 29rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 40rpx;
			color: #000000;
			margin-right: 27rpx;
		}
		.word-two {
			width: 213rpx;
			height: 25rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #000000;
			margin-right: 54rpx;
		}
		.word-three {
			width: 75rpx;
			height: 25rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #000000;
		}
		.word-four {
			width: 163rpx;
			height: 25rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #000000;
		}
		.word-five {
			width: 63rpx;
			height: 33rpx;
			background: #4CB2FF;
			border-radius: 8rpx;
			font-size: 21rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #FFFFFF;
			text-align: center;
			margin-left: 60rpx;
		}
		.word-six {
			width: 106rpx;
			height: 33rpx;
			background: #4CB2FF;
			border-radius: 8rpx;
			font-size: 21rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #FFFFFF;
			text-align: center;
			margin-left: 17rpx;
		}
		.word-seven {
			width: 375rpx;
			height: 25rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 25rpx;
			color: #F97D35;
			margin-top: 10rpx;
			margin-left: 35rpx;
		}
	}
</style>