分段式进度条process

// An highlighted block
<template>
	<view>
		<view class="gift-out-box">
			<!--2 固定间距5
				除以时得到下标, 有余数/无余数,  
				if(index <= rIndex) 下标之前的orange,
				else-if( 余数>0 && rIndex+1 == index) 有余数的部分占比width,
				else 灰颜色
			-->
			<view class="gift-in-box">
				<!-- <view class="item" v-for="(item,index) in list" :key='index'>
					<view class="out-process" v-if='index <= rIndex'>
						<view class="in-process in-process-width"></view>
					</view>
					<view class="out-process" v-else-if='rIndex+1 == index && remainder>0'>
						<view class="in-process in-process-orange" :style="{width:`${remainderWidth}rpx`}"></view>
					</view>
					<view class="out-process in-process-grey" v-else>
						<view class="in-process"></view>
					</view>
					<image :src="index <= rIndex ? '/static/gift.png' : '/static/gift-grey.png'" mode="aspectFit" class="img"></image>
				</view> -->
				<!--1 动态间距 start -->
				<view class="item" v-for="(item,index) in list" :key='index'>
					<!-- 满格 -->
					<view class="out-process" v-if='index <= rIndex'>
						<view class="in-process in-process-width"></view>
					</view>
					<!-- 灰格 -->
					<view class="out-process in-process-grey" v-else-if="index > greyIndex">
						<view class="in-process"></view>
					</view>
					<!-- 中间 -->
					<view class="out-process" v-else>
						<view class="in-process in-process-orange" :style="{width:`${remainderWidth}rpx`}"></view>
					</view>
					<image :src="index <= rIndex ? '/static/gift.png' : '/static/gift-grey.png'" mode="aspectFit" class="img"></image>
				</view>
				<!--1 动态间距 end -->
			</view>
			<view class="person-box">
				<text>0人</text>
				<text v-for='(item,index) in list' :key='index'>{{getNum(item.num,index)}}</text>
			</view>
		</view>
		{{personNum}}
		<!-- <view class="out-process">
			<view class="in-process" :style="{width:`${percent*200/100}rpx`}"></view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percent:58,  
				personNum:22,   //人数
				
				list:[
					{num:11}, 
					{num:19}, 
					{num:23}, 
					{num:39}  
				],
				// list:[
				// 	{num:5}, 
				// 	{num:10}, 
				// 	{num:15}, 
				// 	{num:20}  
				// ],
				rIndex:-1,
				remainder:0,
				remainderWidth:0,  //余数的宽
				greyIndex:-1,
			}
		},
		computed: {  
			
		},
		mounted() {
			this.getIndex();
		},
		methods: {
			getIndex(){
				//1 动态间距
				//满格的下标0、灰色格
				let arr = this.list.map(item => item.num);
				this.greyIndex = arr.findIndex( item => item >= this.personNum);   //找到第一次灰色格下标
				arr.map((item,index)=>{
					if(item <= this.personNum) this.rIndex = index;   //找到满格下标
				})
				
				// 下一个下标的num - 上一个下标num = 间距
				// 间距/(this.personNum - this.list[this.rIndex].num)*100
				let interval = 0,resInterval = 0;
				
				if(this.rIndex == -1){  // 人数少于第一节点人数 
					this.remainderWidth = (this.personNum/arr[0]*100).toFixed(2);  // 人数/第一节点得到宽度
				}else{
					if(this.rIndex != arr.length-1){  //当全部是满格时, 则没有间距差=> 满格下标不是数组长度-1时, 计算间距差
						interval = Number(arr[this.rIndex+1] - arr[this.rIndex]);  // 当前节点与下一节点的间距差
					}
					resInterval = Number(this.personNum - arr[this.rIndex]);      // 已知人数与上一节点的间距
					this.remainderWidth = (resInterval/interval*100).toFixed(2);  // 比例得到宽度
				}
				
				//2 {5,10,15,20} 固定间距5
				//整数
				// this.rIndex = parseInt(this.personNum/5) - 1;
				//余数  
				// if(this.personNum%5 > 0){
				// 	this.remainder = this.personNum%5;
				// 	this.remainderWidth = (this.personNum%5)/5*100;
				// } 
				// console.log(this.rIndex,"...",this.remainderWidth)
			},
			getNum(num,index){
				return num = index <= this.rIndex?`已邀${num}人`:`${num}人`;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.out-process{
		width:200rpx;
		height:20rpx;
		background-color: #cccccc;
		border-radius: 8rpx;
		position: relative;
		.in-process{
			position: absolute;
			top:0;
			left:0;
			height:20rpx;
			border-radius: 8rpx;
			background-color: orangered;
		}
	}
	.gift-out-box{
		margin:40rpx 20rpx;
		padding: 20rpx;
		border: 1rpx solid #c0c0c0;
		.person-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:0 30rpx;
			font-size: 24rpx;
		}
		.gift-in-box{
			display: flex;
			align-items: center;
			justify-content: center;
			
			.item{
				display: flex;
				align-items: center;
				.out-process{
					position: relative;
					width:100rpx;
					height:14rpx;
					background-color: #cccccc;
					border-radius: 4rpx;
					.in-process{
						position: absolute;
						top:0;
						left:0;
						height:14rpx;
						border-radius: 4rpx;
					}
					// orange + width
					.in-process-width{
						width:100rpx;
						background-color: orangered;
					}
					//orange
					.in-process-orange{
						background-color: orangered;
					}
					// grey + width
					.in-process-grey{
						width:100rpx;
						background-color: #c0c0c0;
					}
				}
				.img{
					width:50rpx;
					height: 56rpx;
					margin:0 4rpx;
				}
			}
		}
		
	}
</style>


```![在这里插入图片描述](https://img-blog.csdnimg.cn/90dc836364bb4f0ea5dd1636295130eb.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/5ed29f9edc0d4c71a4822a8c715c264a.png#pic_center)