审批流程组件

1.结构

<template>
    <view>
        <!-- 审批流程 -->
        <view class="approval_process">
            <bd-evan-steps :active="1">
                <bd-evan-step title="审批人">
                    <template slot="icon">
                        <uni-icons custom-prefix="iconfont" type="icon-renwu" size="24" color="#ccc">
                        </uni-icons>
                    </template>
                    <!-- 自定义内容 -->
                    <template slot="body">
                        <!-- 审批人 -->
                        <view class="people_man">
                            <view class="avatar">
                                <open-data type="userAvatarUrl"></open-data>
                            </view>
                            <view class="type_info">班组长</view>
                        </view>
                        <view class="people_man">
                            <view class="avatar">
                                <open-data type="userAvatarUrl"></open-data>
                            </view>
                            <view class="type_info">班组长</view>
                        </view>
                        <view class="people_man">
                            <view class="avatar">
                                <open-data type="userAvatarUrl"></open-data>
                            </view>
                            <view class="type_info">班组长</view>
                        </view>
                        <view class="people_man">
                            <view class="avatar">
                                <open-data type="userAvatarUrl"></open-data>
                            </view>
                            <view class="type_info">班组长</view>
                        </view>
                    </template>
                </bd-evan-step>
                <bd-evan-step title="抄送人">
                    <template slot="icon">
                        <uni-icons custom-prefix="iconfont" type="icon-fasong1" size="24" color="#ccc">
                        </uni-icons>
                    </template>
                    <!-- 自定义内容 -->
                    <template slot="body">
                        <view class="cc_man">
                            <uni-icons type="plusempty" size="30" color="#cecece"></uni-icons>
                        </view>
                    </template>
                </bd-evan-step>
            </bd-evan-steps>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        }
    }
</script>


<style lang="scss" scoped>
    /**
    * 审批流程
   */
    .approval_process {
        padding: 30rpx;


        .people_man {
            max-width: 150rpx;
            height: 40rpx;
            border-radius: 10rpx;
            color: #c0bfc2;
            background-color: #f2f2f2;
            display: flex;
            padding: 15rpx;

            margin: 20rpx 0;

            .avatar {
                width: 50rpx;
                height: 40rpx;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10rpx;
                margin: auto 0;
            }

            .type_info {
                padding-left: 10rpx;
                margin: auto 0;
            }
        }

        /**
    * 添加抄送人图标样式
   */
        .cc_man {
            width: 80rpx;
            height: 80rpx;
            background-color: #f2f2f2;
            text-align: center;
            line-height: 80rpx;
        }
    }
</style>

2.组件

<template>
	<view class="evan-steps" :class="'evan-steps--'+direction">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'EvanSteps',
		props: {
			direction: {
				type: String,
				default: 'vertical'
			},
			active: {
				type: Number,
				default: 0
			},
			// wait process finish error
			status: {
				type: String,
				default: 'process'
			},
			primaryColor: {
				type: String,
				default: '#108ee9'
			},
			errorColor: {
				type: String,
				default: '#F43347'
			}
		},
		data() {
			return {
				steps: []
			}
		}
	}
</script>

<style lang="scss">
	.evan-steps {
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
	}

	.evan-steps--vertical {}

	.evan-steps--horizontal {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: flex-start;

		/* #ifndef APP-NVUE */
		evan-step {
			flex: 1;
		}
		/* #endif */
	}
</style>