zhuoxin-user-uniapp/components/fxyk-timeline-newest/fxyk-timeline-newest.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="projectInfo[3]" :size="42" :color="projectInfo[2]"></u-icon>
			</template>
			<template v-slot:content>
				<view class="card-style">
					<view class="d-flex j-sb">
						<view class="word-one">立项审批</view>
						<view class="word-two">
							<text>2019.6.7</text>
							-
							<text>2019.6.9</text>
						</view>
						<view class="word-four">额定天数: 4天</view>
					</view>
					<view class="d-flex j-sb">
						<view class="word-three">部门:营销部</view>
						<view class="word-four">实际天数: 4天</view>
					</view>
					<view class="d-flex a-center j-sb">
						<view class="word-seven">位置: 1.11111 2.1111</view>
						<view style="margin-right:30rpx">
							<view class="word-six" @click="jump_project_info_point_order"><text>查看批示</text></view>
							<view class="word-six" style="margin-top:10rpx"><text>查看附件</text></view>
						</view>
					</view>
					<text class="word-five">现场图片:</text>
					<view class="d-flex u-m-b-5">
						<u-image class="u-m-r-15" width="121rpx" height="92rpx" src="/static/images/example.png" :fade="false"></u-image>
						<u-image class="u-m-r-15" width="92rpx" height="92rpx" src="/static/images/upload_img.png" :fade="false"></u-image>
						<!-- <u-image class="u-m-r-15" width="92rpx" height="92rpx" src="/static/images/upload_fj.png" :fade="false"></u-image> -->
					</view>
					<view class="word-three d-flex" style="width:520rpx;height:38rpx;border:1rpx solid #E0DFDF;">
						<view class="u-m-l-10">备注:</view>
						<u-input v-model="value"
							 type="text" 
							 :border="false" 
							 placeholder=""
							 :isExistIcon="false" 
							 height="38"
							 borderRadius="0"
							 style="margin-top:-5rpx" 
							 :clearable="false" 
							 :custom-style="{'font-size': '25rpx','font-weight': 400,'line-height': '33rpx'}" />
					</view>
					<fxyk-button width="147" 
								 height="38" 
								 content="提交" 
								 style="font-size: 25rpx;font-family: SimSun;font-weight: 400;line-height: 33rpx;margin-top: 8rpx;"/>
				</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 {}
			// 	}
			// }
		},
		data() {
			return {
				value: ''
			}
		},
		computed: {
			projectInfo() {
				if ( parseInt(this.projectStatus) === 0 ) {
					return ['进行中', {'background-color': '#E7AE5E'}, '#E7AE5E','clock-fill']
				} else if ( parseInt(this.projectStatus) === 1 ) {
					return ['逾期完成', {'background-color': '#4CB1FF'}, '#4CB1FF','checkmark-circle-fill']
				} else if ( parseInt(this.projectStatus) === 2 ) {
					return ['逾期完成', {'background-color': '#F17E38'}, '#F17E38','checkmark-circle-fill']
				} else {
					return ['项目终止', {'background-color': '#FF0014'}, '#FF0014','close-circle-fill']
				}
			},
			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: 36rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 36rpx;
		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 20rpx 10rpx;
		.word-one {
			width: 117rpx;
			height: 29rpx;
			font-size: 29rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 40rpx;
			color: #000000;
		}
		.word-two {
			width: 213rpx;
			height: 25rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #000000;
		}
		.word-three {
			// width: 75rpx;
			// height: 25rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #000000;
			margin-top: 20rpx;
		}
		.word-four {
			width: 163rpx;
			height: 25rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #000000;
		}
		.word-five {
			width: 125rpx;
			height: 25rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #000000;
		}
		.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: 75rpx;
			height: 25rpx;
			font-size: 25rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 33rpx;
			color: #000000;
		}
	}
</style>