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

<template>
	<u-card :style="bgColor" :show-head="showHead" :showFoot="false">
		<view v-if="showHead" slot="head" class="card_head">
			<u-icon name="order" size="50" class="card_head_one"></u-icon>
			<text class="card_head_two">项目信息</text>
		</view>
		<view v-if="bodyInfo === 1" slot="body" class="u-padding-20 card_body">
			<view class="over_style u-margin-bottom-12">项目名称:&ensp;{{ projectInfo.name }}</view>
			<view class="over_style u-margin-bottom-12">项目编号:&ensp;{{ projectInfo.code }}</view>
			<view class="d-flex u-margin-bottom-12">
				<view class="flex-s u-margin-right-20">项目内容:</view>
				<view>{{ projectInfo.text }}</view>
			</view>
			<view class="d-flex u-margin-bottom-12">
				<view class="u-margin-right-20">项目规模:</view>
				<view>
					<view class="u-margin-bottom-12">线路长度:&ensp;{{ projectInfo.large }}</view>
					<view>变电容量:&ensp;{{ projectInfo.space }}</view>
				</view>
			</view>
			<view class="u-margin-bottom-12">总投资:&ensp;{{ projectInfo.invest }}</view>
			<view class="u-margin-bottom-12">负责人:&ensp;{{ projectInfo.people }}</view>
			<view>联系电话:&ensp;{{ projectInfo.phone }}</view>
		</view>
		<view v-else slot="body">
			<view class="d-flex a-center j-center u-margin-left-129 u-margin-bottom-38">
				<view class="u-margin-right-20 word-one">额定项目天数:&ensp;{{ projectTime.edTime }}天</view>|
				<view class="u-margin-left-20 word-one">已完成天数:&ensp;{{ projectTime.wcTime }}天</view>
			</view>
			<view style="padding: 0 60rpx">
				<fxyk-progress :status="2" :wcDay="projectTime.wcTime" :edDay="projectTime.edTime"/>
			</view>
			<view class="d-flex j-sb" style="padding: 12rpx 12rpx 8rpx 12rpx">
				<view class="word-two">{{ projectTime.start | showtime }}</view>
				<view class="word-two">{{ projectTime.end | showtime }}</view>
			</view>
		</view>
	</u-card>
</template>

<script>
	import { formatDate } from '@/utils/datetime'
	export default {
		props: {
			// 项目信息数据
			projectInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 项目工期数据
			projectTime: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 是否需要表头
			showHead: {
				type: Boolean,
				default: true
			},
			// 表体信息 1:项目信息 2:项目工期
			bodyInfo: {
				type: Number,
				default: 1
			}
		},
		computed: {
			bgColor() {
				if (this.showHead) {
					return {'background-color': '#40349C'}
				} else {
					return {'background-color': '#fff'}
				}
			}
		},
		filters: {
			showtime(value) {
				let date = new Date(value*1000);
				return formatDate(date, 'yyyy.MM.dd')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_head {
		height: 40rpx;
		display: flex;
		align-items: center;
		.card_head_one {
			color: #fff;
			margin-right: 10rpx;
		}
		.card_head_two {
			font-size: 27rpx;
			font-family: SimSun;
			font-weight: 400;
			line-height: 38rpx;
			color: #FAFAFA;
			margin-top: 10rpx;
		}
	}
	.card_body {
		font-size: 25rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 33rpx;
		color: #FFFFFF;
	}
	.word-one {
		font-size: 25rpx;
		font-family: SimSun;
		font-weight: 400;
		color: #000000;
	}
	.word-two {
		font-size: 27rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 38rpx;
		color: #000000;
	}
</style>