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 class="inherit-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">

</style>