realty/virgo.wzfrontend/yui_wx/components/common/process.vue

<template>
	<view class="process-list">
		<view class="process-box">
			<view class="process-item" v-for="(item,index) in list" :key="index">
				<view class="user-avatar-box">
					<view class="user-avatar">{{index+1}}</view>
					<view :class="'user-avatar-status '+ returnStatus(item.status).className">
						<uni-icons :type="returnStatus(item.status).icon" size="10" color="#fff"></uni-icons>
					</view>
				</view>
				<view class="process-content">
					<view class="user-name">
						<view class="name">{{item.operatorName}}</view>
						<view v-if="item.status" class="date"><text>{{item.date}}</text></view>
					</view>
					<view class="user-content" v-if="item.remark">
						<view class="remark">
							{{item.remark}}
						</view>
						<view class="remark-file" v-if="item.attachment && item.attachment != '[]'">
							<upload :list="item.attachment ? JSON.parse(item.attachment) : []" type="preview"></upload>
						</view>
					</view>
				</view>
				<view class="user-line" v-if="index < list.length-1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import upload from '@/components/common/upload'
	export default {
		props: ['process'],
		data() {
			return {
				list: [],
				visible: false
			}
		},
		created() {
			this.list = this.process;
		},
		methods: {
			returnStatus(state) {
				let className = '',
					icon = '';
				switch (state) {
					case 0:
						className = 'info';
						icon = 'link';
						break;
					case 1:
						className = 'success'
						icon = 'checkmarkempty';
						break;
					case 2:
						className = 'failed'
						icon = 'closeempty';
						break;
					default:
						className = 'info'
						icon = 'link';
						break;
				}
				return {
					className: className,
					icon: icon
				};
			}
		},
		watch: {
			process() {
				this.list = this.process;
			}
		},
		components: {
			upload
		},
	}
</script>

<style lang="scss">
	.process-list {
		padding-top: 20rpx;

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

			.user-avatar-box {
				position: relative;

				.user-avatar {
					width: 64rpx;
					height: 64rpx;
					background: $uni-primary;
					border-radius: 50%;
					margin-right: 20rpx;
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					overprocess: hidden;
					color: #fff;
				}

				.user-avatar-status {
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
					border: 2rpx solid #fff;
					position: absolute;
					top: 60rpx;
					right: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.user-avatar-status.success {
					background: $uni-success;
				}

				.user-avatar-status.failed {
					background: $uni-error;
				}

				.user-avatar-status.waiting {
					background: $uni-warning;
				}

				.user-avatar-status.info {
					background: $uni-info;
				}
			}


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


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

					.name {
						font-size: 32rpx;
						font-weight: 600;
					}

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

				.user-content {
					background-color: #f5f5f5;
					border-radius: 16rpx;
					padding: 20rpx 20rpx 10rpx 20rpx;

					.remark {
						line-height: 17px;
						font-weight: 400;
						padding-bottom: 10rpx;
					}
				}
			}

			.user-line {
				width: 1px;
				border-left: 1px solid $uni-border-4;
				position: absolute;
				top: 80rpx;
				bottom: -16rpx;
				left: 30rpx;
			}
		}
	}
</style>