zheng_xie_ui/components/order/stepbar.vue

<template>
  <view class="stepbar" :class="fixeda?'sfixed':''">
	  <block v-for="(ite,idx) in steps" :key="idx">
		  <view class="steps" :class="ite.status>0?'act':''" v-if="reservatType!=2&&ite.val==2||ite.val!=2">
		  	<image :src="filln" class="img" v-if="ite.status==0"></image>
		  	<image :src="fillin" class="img" v-if="ite.status==1"></image>
		  	<image :src="fillf" class="img" v-if="ite.status==2"></image>
		  	<view class="tit">{{ite.tit}}</view>
			<image :src="line" class="line"></image>
		  	<!-- <view class="line"></view> -->
		  </view>
	  </block>
  </view>
</template>

<script>
//fixeda   固定
  export default {
	props:{
		steps: {
			type: Array,
			default () {
				return []
			}
		},
		fixeda:{
			type: Boolean,
			default () {
				return false
			}
		},
		reservatType:{
			type: [Number,String],
			default () {
				return 1
			}
		}
	},
	components:{
		
	},
	data(){
		return{
			fillin:require("@/static/images/order/come/fillin.png"),//填写
			fillf:require("@/static/images/order/come/fillf.png"), //完成
			filln:require("@/static/images/order/come/filln.png"),//未填
			line:require("@/static/images/order/come/line.png"),//完成
		}
	},
	onLoad: function() {
	},
	methods:{
		getDetail(e){
			this.$emit('getDetail')
		} 
	},
	
  }
</script>

<style lang="scss" scoped>
// .sfixed{position: absolute;left: 0;right: 0;top: 0;z-index: 10;}
.stepbar{background: transparent;display: flex;align-items: center;padding: 30rpx 0rpx;flex: 0 0 auto;
	.steps{display: flex;flex-direction: column;flex: 1;align-items: center;position: relative;
		.img{width: 30rpx;height: 30rpx;margin-bottom: 20rpx;}
		.tit{font-size: 24rpx;font-weight: bold;color: #ffffff;opacity: 0.7;

		}
		.line{position: absolute;width: 102rpx;height:18rpx;top: 6rpx;right: 0;transform: translateX(50%);opacity: 0.7;}
		&:last-of-type{.line{display: none;}}
		&.act{
			.line{opacity: 1;}
			.tit{opacity: 1;}
		}
	}

}
</style>