144 lines
3.3 KiB
Vue
144 lines
3.3 KiB
Vue
<template>
|
||
<view class="steps">
|
||
<view class="step" v-for="(item, i) in list" :key="i">
|
||
<!-- 左侧 -->
|
||
<view class="step_left"> {{ item.createTime !== null ? item.createTime : '未审核' }}</view>
|
||
<!-- 中部 -->
|
||
<view class="step_mid">
|
||
<view class="step_dot" :style="{ backgroundColor: item.stateFlow ? activeColor : '' }">{{ stepType === 'number' ? i + 1 : '' }}</view>
|
||
<template v-if="i < list.length - 1">
|
||
<view class="step_line" :style="{ backgroundColor: item.stateFlow ? activeColor : '' }"></view>
|
||
</template>
|
||
</view>
|
||
<!-- 右侧 -->
|
||
<view class="step_right">
|
||
<view class="step_name">{{ item.state }}</view>
|
||
<view class="step_idea" :style="{ color: getStateColor(item.stateFlow) }">{{ getStateText(item.stateFlow) }}</view>
|
||
<view class="step_idea" :style="{ color: getStateColor(item.stateFlow) }" v-if="item.stateFlow==1">同意</view>
|
||
<view class="step_idea"> {{ item.opinionOwn !== null ? item.opinionOwn : '' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
// 步骤条格式 数字或者为点
|
||
stepType: {
|
||
type: String,
|
||
default: 'dot'
|
||
},
|
||
// 激活颜色
|
||
activeColor: {
|
||
type: String,
|
||
default: '#55aaff'
|
||
},
|
||
// 数据列表
|
||
list: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 根据 stateFlow 获取状态文本
|
||
getStateText(stateFlow) {
|
||
// 状态映射对象（可根据需求扩展）
|
||
const stateMap = {
|
||
0: '待审核', // 未通过
|
||
1: '已通过', // 通过
|
||
2: '已驳回' // 驳回
|
||
};
|
||
// 未知状态返回默认文本
|
||
return stateMap[stateFlow] || '未知状态';
|
||
},
|
||
|
||
// 根据 stateFlow 获取状态颜色
|
||
getStateColor(stateFlow) {
|
||
// 颜色映射对象（可根据需求调整）
|
||
const colorMap = {
|
||
0: '#dcdcdc', // 待审核：灰色
|
||
1: '#55aaff', // 已通过：蓝色（使用 activeColor）
|
||
2: '#ff4d4f' // 已驳回：红色
|
||
};
|
||
// 未知状态返回默认颜色
|
||
return colorMap[stateFlow] || '#dcdcdc';
|
||
}
|
||
},
|
||
data() {
|
||
return {};
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.steps {
|
||
.step {
|
||
display: flex;
|
||
.step_left {
|
||
width: 150rpx;
|
||
margin-top: -5rpx;
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
text-align: right;
|
||
}
|
||
.step_mid {
|
||
// width: 50rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin: 0 25rpx;
|
||
.step_dot {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #dcdcdc;
|
||
border: 5rpx solid #f5f5f5;
|
||
border-radius: 50%;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
}
|
||
.active_dot {
|
||
background: #2a62ed;
|
||
border: 5rpx solid #e3ebff;
|
||
}
|
||
.step_line {
|
||
width: 4rpx;
|
||
height: 160rpx;
|
||
background-color: #eeeeee;
|
||
}
|
||
.active_line {
|
||
background: #2a62ed;
|
||
}
|
||
}
|
||
.step_right {
|
||
width: 430rpx;
|
||
height: fit-content;
|
||
padding: 25rpx 30rpx;
|
||
margin-top: -14rpx;
|
||
background-color: #f8f8f8;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
|
||
view {
|
||
width: 100%;
|
||
}
|
||
.step_name {
|
||
font-size: 30rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.step_idea {
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|