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? '/static/img/login/Checked1@3x.png':'/static/img/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-24 text-color-576">{{item.updated_at}}</text>
					<view >
						<text class="size-28 text-color-000 sys-weight-600">{{item.stage_name}}：</text>
						<text class="size-28 text-color-576">{{item.name?item.name:'----'}}</text>
					</view>
<!--					<view v-else>-->
<!--						<text class="size-28 text-color-666">外访：</text>-->
<!--						<text class="size-28 text-color-12 sys-weight-600">张三</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>