realty/virgo.wzfrontend/yui_wx/components/contract/steps.vue

<template>
	<view class="steps-lists">
		<view class="steps-box">
			<view :class="status.sign ? 'steps-item success':'steps-item'">
				<view class="steps-state">
					<uni-icons class="inherit-icons" type="checkmarkempty" size="18" color="#fff">
					</uni-icons>
				</view>
				<view class="steps-content">
					<view class="steps-name">
						<view class="name">签订合同</view>
						<view class="date"><text>{{detail.signingDate}}</text></view>
					</view>
					<view v-if="status.sign">
						<view class="steps-item-content" v-for="(item,index) in documentFileList" :key="index"
							@click="openDocument(item)">
							<view class="steps-file">{{item.name}}</view>
							<uni-icons class="inherit-icons right-icon" type="right" color="#858585">
							</uni-icons>
						</view>
					</view>
				</view>
				<view class="steps-line"></view>
			</view>
			<view :class="status.payment ? 'steps-item success':'steps-item'">
				<view class="steps-state">
					<uni-icons class="inherit-icons" type="checkmarkempty" size="18" color="#fff">
					</uni-icons>
				</view>
				<view class="steps-content">
					<view class="steps-name">
						<view class="name">合同账单</view>
						<view class="date"><text>{{payment.date}}</text></view>
					</view>
					<view class="steps-item-content">
						<view class="title">合同账单</view>
						<view class="content">共<text class="steps-text">{{payment.all}}</text>期，已付款<text
								class="steps-text">{{payment.pass}}</text>期
						</view>
						<uni-icons class="inherit-icons right-icon" type="right" color="#858585">
						</uni-icons>
					</view>
				</view>
				<view class="steps-line"></view>
			</view>
			<view :class="status.invoice ? 'steps-item success':'steps-item'">
				<view class="steps-state">
					<uni-icons class="inherit-icons" type="checkmarkempty" size="18" color="#fff">
					</uni-icons>
				</view>
				<view class="steps-content">
					<view class="steps-name">
						<view class="name">合同发票</view>
						<view class="date"><text>{{invoice.date}}</text></view>
					</view>
					<view class="steps-item-content">
						<view class="title">合同发票</view>
						<view class="content">共<text class="steps-text">{{invoice.all}}</text>条发票
						</view>
						<uni-icons class="inherit-icons right-icon" type="right" color="#858585">
						</uni-icons>
					</view>
				</view>
				<view class="steps-line"></view>
			</view>
			<view class="steps-item">
				<view class="steps-state">
					<uni-icons class="inherit-icons" type="checkmarkempty" size="18" color="#fff">
					</uni-icons>
				</view>
				<view class="steps-content">
					<view class="steps-name">
						<view class="name">合同工单</view>
						<view class="date"><text>{{order.date}}</text></view>
					</view>
					<view class="steps-item-content">
						<view class="title">合同工单</view>
						<view class="content">共<text class="steps-text">{{order.all}}</text>条工单
						</view>
						<uni-icons class="inherit-icons right-icon" type="right" color="#858585">
						</uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/config";
	import {
		getPaymentListByPage
	} from '@/request/api/contract.js'
	import {
		getInvoiceListByPage
	} from '@/request/api/invouce.js'
	import {
		getOrderPageListByQuery
	} from '@/request/api/order.js'
	export default {
		props: ['detail'],
		data() {
			return {
				status: {
					sign: false,
					payment: false,
					invoice: false
				},
				documentFileList: [],
				payment: {
					date: '',
					all: 0,
					pass: 0
				},
				invoice: {
					date: '',
					all: 0
				},
				order: {
					date: '',
					all: 0
				},
			}
		},
		created() {
			this.status['sign'] = this.detail.status === 2;
			if (this.status.sign) {
				this.documentFileList = this.detail.document ? JSON.parse(this.detail.document) : [];
				this.getPayment();
				this.getInvoice();
				this.getOrder();
			}
		},
		methods: {
			openDocument(item) {
				let fileUrl = config.baseUrl + '/file/archived/' + item.id + '/pdf.pdf';
				this.$navigateTo('/pages/pdf/pdf?fileUrl=' + fileUrl + '&titleName=' + item.name);
			},
			getPayment() {
				getPaymentListByPage({
					currPage: 1,
					pageSize: 100,
					contractId: this.detail.id
				}).then(res => {
					if (res.code === 200) {
						if (res.data.totalCount === 0) return;
						this.status['payment'] = res.data.totalCount > 0;
						this.payment = {
							date: res.data.dataList[0].reminderDate,
							all: res.data.totalCount,
							pass: res.data.dataList.filter(node => node.status === 1).length
						}
					}
				})
			},
			getInvoice() {
				getInvoiceListByPage({
					currPage: 1,
					pageSize: 100,
					contractId: this.detail.id
				}).then(res => {
					if (res.data.totalCount === 0) return;
					this.status['invoice'] = res.data.totalCount > 0;
					this.invoice = {
						date: res.data.dataList[0].date || '-',
						all: res.data.totalCount
					}
				})
			},
			getOrder() {
				getOrderPageListByQuery({
					currPage: 1,
					pageSize: 100,
					contractId: this.detail.id
				}).then(res => {
					if (res.data.totalCount === 0) return;
					this.status['order'] = res.data.totalCount > 0;
					this.order = {
						date: res.data.dataList[0].date || '-',
						all: res.data.totalCount
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.steps-lists {
		background: #fff;
		padding: 30rpx;

		.steps-text {
			color: $uni-primary;
			margin: 0 2rpx;
			font-weight: 400;
		}

		.steps-item {
			position: relative;
			display: flex;

			.steps-state {
				width: 52rpx;
				height: 52rpx;
				background: $uni-border-4;
				border-radius: 50%;
				margin-right: 20rpx;
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				oversteps: hidden;
				color: #fff;
			}

			.steps-content {
				flex: 1;
				width: 0;

				.steps-name {
					height: 96rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.name {
						color: $uni-border-4;
						font-size: 32rpx;
						font-weight: 600;
					}

					.date {
						font-size: 24rpx;
						color: $uni-secondary-color;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}

				.steps-item-content {
					background-color: #ffffff;
					border-radius: 8px;
					box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
					padding: 10px;
					margin-bottom: 16rpx;
					position: relative;

					&.last {
						margin-bottom: 0;
					}

					.title {
						font-weight: 600;
						padding-bottom: 10rpx;
					}

					.content {
						font-weight: 300;
					}

					.right-icon {
						position: absolute;
						top: 50%;
						margin-top: -16rpx;
						right: 20rpx;
					}
				}
			}

			.steps-line {
				width: 1px;
				border-left: 1px solid $uni-border-4;
				position: absolute;
				top: 68rpx;
				bottom: -16rpx;
				left: 26rpx;
			}

			&.success {
				.steps-state {
					background: $uni-success;
				}

				.steps-name .name {
					color: $uni-success;
				}

				.steps-line {
					border-color: $uni-success;
				}
			}
		}
	}
</style>