zd2.0/pages/user/reportForRepair/Report.vue

<template>
	<view class="content">
		<view class="navStatus">
			<view class="flex margin-l-20 margin-r-20">
				<view class="itemNum" :class="{action:type>0}">
					1
				</view>
				<view class="content flex" :class="{action:type>1}">
				</view>
				<view class="itemNum" :class="{action:type>1}">
					2
				</view>
				<view class="content flex" :class="{action:type>2}">
				</view>
				<view class="itemNum" :class="{action:type>2}">
					3
				</view>
			</view>
			<view class="titleBox flex">
				<view class="title">
					报修申请
				</view>
				<view class="title">
					等待维修
				</view>
				<view class="title">
					维修完成
				</view>
			</view>
		</view>
		<status1 :cartInfo='cartInfo' v-if="type==1" @request='changeType(2)'></status1>
		<status2 :reportDeatil='reportDeatil' :cartInfo='cartInfo' v-if="type==2" @request='changeType(3)'></status2>
		<status3 :reportDeatil='reportDeatil' v-if="type==3"></status3>
	</view>
</template>

<script>
	import status1 from "./status1.vue"
	import status2 from "./status2.vue"
	import status3 from "./status3.vue"
	import {
		getCarInfo,
		question_info
	} from "../../../api/user.js"
	export default {
		components: {
			status1,
			status2,
			status3
		},
		data() {
			return {
				cartInfo: {},//车辆信息
				type: 1, //显示当前进度
				id: '', //车辆id
				loading: false, //是否提交中
				reportDeatil:{}//报修信息
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.getCarInfo();
			// 初始化加载报修信息
			this.question_info();
		},
		methods: {
			// 报修信息
			getCarInfo() {
				getCarInfo({
					car_number: this.id,
				}).then((e) => {
					this.cartInfo = e.data;
					// console.log(e);
				}).catch((e) => {
					console.log(e);
				})
			},
			changeType(type) {
				this.type = type
				if(type==2){
					this.question_info()
				}
			},
			// 获取报修详情
			question_info() {
				question_info({
					car_number: this.id
				}).then((e) => {
					if (e.data) {
						this.reportDeatil = e.data;
						if(e.data.status==2){
							this.type=3
						}else if(e.data.status==0||e.data.status==1){
							this.type=2
						}
						
					}
					// console.log(e);
				}).catch((e) => {
					uni.hideToast();
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.navStatus {
		padding: 60rpx 80rpx;

		.item {
			.itemGree {}
		}

		.itemNum {
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: $font-color-light;
			border-radius: 99rpx;

			&.action {
				background-color: $color-green;
			}
		}

		.title {
			margin-top: 30rpx;
			font-size: 24rpx;
			color: $font-color-light;
		}

		.content {
			flex-grow: 1;
			border-bottom: 8rpx dotted $font-color-light;
			margin: 0 10rpx;

			&.action {
				margin: 0;
				border-bottom: 8rpx solid $color-green;
			}
		}
	}
</style>