lock_Maintenance/pages/Repair/Repair.vue

<template>
	<view class="container">
		<view class="container-nav">
			<view class="container-tabs">
				<view class="container-tab" v-for="item in activeList" :key="item.index" @click="active=item.index">
					<view style="width: 130rpx;" :class="{active:item.index==active}">{{item.text}}</view>
				</view>
			</view>
		</view>

		<view class="container-card">
			<view class="container-card-item" @click="handleJump">
				<view class="container-top" >
					<view class="container-tag" style="background-color:  #f5ab4c;" v-if="active==1">未处理</view>
					<view class="container-tag" style="background-color:  #06cc76;" v-else-if="active==2">处理中</view>
					<view class="container-tag" style="background-color: #ff5842;" v-else-if="active==3">已取消</view>
					<view class="container-tag" style="background-color:  #0e7ff5" v-else>已完工</view>
					<view class="container-bh">BX1356351685</view>
				</view>
				<view class="container-body">
					<view class="container-body-item">
						<view class="container-body-left">报修人：</view>
						<view class="container-body-right">张三三</view>
					</view>
					<view class="container-body-item">
						<view class="container-body-left">保修内容：</view>
						<view class="container-body-right">机器故障</view>
					</view>
					<view class="container-body-item">
						<view class="container-body-left">维修人员：</view>
						<view class="container-body-right">张三三</view>
					</view>
					<view class="container-body-item">
						<view class="container-body-left">维修单号：</view>
						<view class="container-body-right">wu15654185652</view>
					</view>
				</view>

				<image src="@/static/line.svg" class="container-line"></image>

				<view class="container-bottom">
					<view class="container-bottom-left">2023.08.08 22:40:23</view>
					<view class="container-bottom-right" v-if="active==1">去指派</view>
					<view class="container-bottom-right" v-else-if="active==2">中止任务</view>
	
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	// 状态
	const active = ref(1)
	// 文字显示

	const statusText = (item) => {
		switch (item) {
			case 1:
				return '未处理';
			case 2:
				return '处理中';
			case 3:
				return '已取消';
			case 4:
				return '已完成';
		}
	}

	const activeList = [{
			"index": 1,
			"text": "未处理"
		},
		{
			"index": 2,
			"text": "处理中"
		},
		{
			"index": 3,
			"text": "已取消"
		},
		{
			"index": 4,
			"text": "已完成"
		}
	]

	const handleChangeActive = () => {
		console.log(active.value)
	}
	
	const handleJump = ()=>{
		uni.navigateTo({
			url:'/pages/Repair/RepairDetail'
		})
	}
</script>

<style lang="scss">
	$globalWidth: 650rpx;
	$buttonColor: #0e7ff5;




	.container {
		display: flex;
		background: -webkit-linear-gradient(270deg,
				rgba(227, 239, 249, 1) 0%,
				rgba(245, 245, 247, 1) 100%);
		flex-direction: column;
		/* align-items: center; */
		width: 100%;
		height: 100vh;

		align-items: center;

	}

	.container-nav {
		width: 100%;
		background-color: white;
		height: 80rpx;
		transition: all 0.3s;

		.container-tabs {
			width: 100%;
			height: 100%;
			display: flex;

		}

		.container-tab {
			width: 25%;
			height: 100%;
			line-height: 80rpx;
			text-align: center;
			border-bottom: 4rpx solid transparent;
			display: flex;
			justify-content: center;

		}

		.active {
			color: $buttonColor;
			border-bottom: 4rpx solid $buttonColor !important;
		}
	}


	.container-card {
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;

		.container-card-item {
			width: $globalWidth;
			min-height: 300rpx;
			border-radius: 20rpx;
			background-color: white;
			padding: 20rpx;
		}

		.container-top {
			display: flex;

		}

		.container-tag {
			color: white;
			width: 120rpx;
			text-align: center;
		}


		.container-bh {
			margin-left: 40rpx;
		}

		.container-body {
			margin-top: 40rpx;

		}

		.container-body-item {
			display: flex;
			font-size: 25rpx;
			margin-bottom: 10rpx;

			.container-body-left {
				color: #ccc;
				width: 140rpx;
			}
		}

		.container-line {
			height: 2px;
		}

		.container-bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 25rpx;

			height: 50rpx;

			justify-content: space-between;

			.container-bottom-right {
				width: 150rpx;
				height: 50rpx;
				color: white;
				background-color: $buttonColor;
				text-align: center;
				line-height: 50rpx;
				border-radius: 30rpx;

			}
		}


	}
</style>