lock_Maintenance/pages/Me/MyRepair.vue

<template>
	<CpBg>
		<view class="container-nav">
			<CpNav :activeList="activeList" v-model:modelValue="active"></CpNav>
		</view>

		<view class="container-card">
			<view class="container-card-item" @click="handleJump">
				<view class="container-top">
					<view class="container-bh">BX1356351685</view>
					<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>
				<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>

				<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>
			</view>
		</view>
	</CpBg>
</template>

<script setup>
	import CpNav from '@/components/Cp_Nav.vue';
	import CpBg from '@/components/Cp_Bg.vue';
	import {
		ref,
		watch
	} from 'vue';
	// 状态
	const active = ref(1)
	// 文字显示

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

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

	const handleChangeActive = () => {
		console.log(active.value)
	}

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

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

	.container-nav {
		width: 100%;
	}

	.tab {
		width: 33% !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;
			justify-content: space-between;

		}

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




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

		}

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

			.container-body-left {
				color: #7c8191;
				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>