assess-app/page_task/task_details/module/steps.vue

<template>
	<view class="">
		<view class="sys-background-fff m-20 p-20 r-20">
			<view class="row-c" v-for="(item,index) in stageList" :key="index">
				<view class="column-c" style="position: relative;top: 45rpx;">
					<image class="wh-36"
						:src="item.is_execute !== 1? 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/Checked1@3x.png':'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/Checked2@3x.png'"
						mode="aspectFill"></image>
					<view class="steps-line" :style="{opacity:index == stageList.length - 1?0:1}"></view>
				</view>
				<view class="sys-from-background-color steps-item p-20 r-20 column flex m-l20">
					<text class="size-22 color-718096">{{item.updated_at}}</text>
					<view >
						<text class="size-26 text-color-666">{{item.stage_name}}：</text>
						<text class="size-26  text-color-000 sys-weight-600">{{item.name?item.name:'----'}}</text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getStageList} from "@/api/task";

  export default {
		props: {
      businessId:{
        default:0
      }
		},
		data() {
			return {
        stageList: []
			}
		},
    watch:{
      'businessId':function () {
        // this.getStageList()
      }
    },
    mounted() {
      this.getStageList()
    },
    methods: {
      getStageList() {
        if(this.businessId<=0){
          return false
        }
        getStageList({
          'id': this.businessId
        }).then((res) => {
          if (res.code === 1) {
            this.stageList = res.data
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
	.steps-item:last-child {
		margin-bottom: 0;
	}

	.steps-line {
		width: 2rpx;
		background-color: #D9D9D9;
		height: 90rpx;
	}
</style>