repair-project-240821/pages/repairList/repairList.vue

<template>
	<view class="repairList reserveSpace">
		<view class="tab">
			<uv-tabs :list="list" lineWidth="60" lineHeight="10" @click="selectTag"></uv-tabs>
		</view>

		<view class="repairList-main">
			<view v-for="item in 10" class="repairItem">
				<view class="repairMain">
					<!-- <view class="userName">用户名</view> -->
					<view class="build">
						<view>
							<text style="margin-right: 10rpx;">楼栋:楼栋1</text>
							<text>室号:A1001</text>
						</view>
						<text style="font-size: 26rpx;">2024-12-12</text>
					</view>
					<view class="desc">
						近期，我所在的学生宿舍楼X栋XXX室遇到了一个亟需解决的问题，特此提交报修申请。具体故障为：宿舍内卫生间水龙头出现持续滴漏现象，已持续多日，不仅造成了水资源的浪费，还影响了寝室的日常使用和休息环境。夜间滴水声尤为明显，干扰了同学们的睡眠质量。我们初步检查，未能自行解决，判断可能是内部密封件老化或松动所致。为尽快恢复宿舍正常生活环境，恳请学校后勤部门能尽快安排专业维修人员前来检查并修复，我们将积极配合维修工作，确保宿舍设施尽快恢复正常使用。感谢学校对我们学习生活环境的关心与支持！
					</view>
					<view class="repairImages">
						<view v-for="(item,index) in urls" :key="index" class="image-item">
							<image @click="viewImageAsList(index)" :src="item" mode="widthFix"></image>
						</view>
					</view>
					<view class="btns">
						<view @click="toReject" class="btn">驳回</view>
						<view @click="toFinish" class="btn">结单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				urls: [
					'http://www.mxqih.top:666/logo.png',
					'http://www.mxqih.top:666/logo.png',
					'http://www.mxqih.top:666/logo.png'
				],
				list: [{
					name: '待完成',
				}, {
					name: '已完成',
				}],
				current: 0,
				currentIndex : 0
			}
		},
		methods: {
			//跳转驳回
			toReject() {
				uni.navigateTo({
					url: '/pages/reject/reject'
				})
			},

			//跳转结单页面
			toFinish() {
				uni.navigateTo({
					url: '/pages/finish/finish'
				})
			},
			
			//查看图片
			viewImageAsList(index) {
				this.currentIndex = index
				this.$utils.previewImage({
					current: this.currentIndex,
					urls: this.urls
				})
			},
			
			//选择了顶部的标签
			selectTag(tag){
				console.log(tag);
			}
		}
	}
</script>

<style scoped>
	.repairList{
		background: #f8f8f8;
	}
	
	.tab{
		display: flex;
		align-items: center;
		height: 80rpx;
		background: white;
		margin-bottom: 20rpx;
	}
	
	.repairList-main {
		min-height: 100vh;
	}

	.repairItem {
		display: flex;
		background: white;
		width: 96%;
		margin: 0rpx auto;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.repairMain {
		width: 100%;
		box-sizing: border-box;
		padding-left: 20rpx;
	}
/* 
	.userName {
		font-size: 32rpx;
		margin: 10rpx 0rpx;
	} */

	.build {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin: 20rpx 0rpx;
	}

	.desc {
		height: 200rpx;
		overflow-y: scroll;
		margin-bottom: 20rpx;
	}

	.repairImages {
		display: flex;
		flex-wrap: wrap;
		margin: 10rpx 0rpx;
	}

	.image-item {
		width: 24%;
		margin-left: 1%;
		height: 180rpx;
		overflow: hidden;
	}

	.image-item image {
		width: 100%;
	}

	.btns {
		margin: 20rpx 0rpx;
		display: flex;
		justify-content: flex-end;
	}

	.btn {
		width: 200rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		margin-left: 15rpx;
		font-size: 30rpx;
		color: white;
		background: #f9ae3d;
	}

	.btn:nth-child(2) {
		background: #3c9cff;
	}
</style>