property-resident-side/property-uniapp-project/pageSubPack/inspection-revenue/inspection.vue

<template>
	<view class="contentStyle">
		<view class="status-bar"></view>
		<uni-nav-bar title="巡检记录" backgroundColor="transparent" :border="false" left-icon="left" @click-left="goBack" />
		<view class="content-wrap">
			<!-- 时间选择器 -->
			<view class="timebox">
				<view class="daybox flex ">
					<uni-datetime-picker type="date" :clear-icon="false" @change="handleChangeTime" v-model="datetime">
						<view class="inner-date-box">
							<view class="day">{{ showDate }}</view>
							<view class="searchiconbox">
								<view class="arrow"> </view>
								<view class="arrow1"> </view>
							</view>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
			<!-- 巡检列表 -->
			<scroll-view scroll-y class="scroll-view">
				<view class="list-container" @click="goToInspectionDetail">
					<view class="card-item" v-for="(item, index) in listData" :key="index">
						<view class="card-head">
							<text class="address">{{ item.address }}</text>
							<text class="status">{{ item.status }}</text>
						</view>
						<view class="tag-label">{{ item.type }}</view>
						<view class="text-row">巡检时间：{{ item.time }}</view>
						<view class="text-row">巡检人：{{ item.inspector }}</view>
					</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const datetime = ref('')
	const showDate = ref('选择日期')
	const listData = ref([
	  {
	    address: '幸福苑小区1号楼1单元电梯间',
	    status: '已巡检',
	    type: '设备巡检',
	    time: '07:00:00 –09:00:00',
	    inspector: '李祥龙'
	  },
	  {
	    address: '幸福苑小区1号楼1单元电梯间',
	    status: '已巡检',
	    type: '设备巡检',
	    time: '07:00:00 –09:00:00',
	    inspector: '李祥龙'
	  }
	])
	

	const handleChangeTime = (e) => {
		if (e) {
			// e 格式为 YYYY-MM-DD，只取 MM-DD
			showDate.value = e.slice(5)
		} else {
			showDate.value = '选择日期'
		}
	}
	// 返回
	const goBack = () => {
		uni.switchTab({
			url: '/pages/serviceIndex/serviceIndex'
		})
	}
	// 跳转详情
	const goToInspectionDetail = () =>{
		uni.navigateTo({
		  url: `/pageSubPack/inspection-revenue/inspection-details`
		})
	}

</script>

<style lang="scss" scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
	}

	.content-wrap {
		flex: 1;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
	}

	.status-bar {
		height: 46px;
		width: 100%;
	}

	.timebox {
		width: 188rpx;
		height: 48rpx;
		background: #ffffff;
		border-radius: 24rpx;
		text-align: center;
		line-height: 48rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;

		.daybox {
			height: 100%;
			box-sizing: border-box;
			position: relative;

			.inner-date-box {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
			}

			.day {
				flex: 1;
				font-size: 28rpx;
				text-align: left;
				padding-left: 15rpx;
			}

			.searchiconbox {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 38rpx;
				height: 48rpx;
				padding-right: 10rpx;
				flex-shrink: 0;
				margin-left: auto;

				.arrow,
				.arrow1 {
					border: 1rpx solid #ccc;
					width: 8rpx;
					height: 8rpx;
				}

				.arrow {
					border-right-color: transparent;
					border-top-color: transparent;
					transform: rotateZ(135deg);
				}

				.arrow1 {
					border-left-color: transparent;
					border-bottom-color: transparent;
					transform: rotateZ(135deg);
				}
			}
		}
	}
	//滚动容器 App重点：高度自适应 \*/
	.scroll-view {
	  height: calc(100vh - 140rpx);
	}
	.list-container {
	  display: flex;
	  flex-direction: column;
	  gap: 24rpx;
	}
	
	//卡片 \*/
	.card-item {
	  background-color: #fff;
	  border-radius: 16rpx;
	  padding: 32rpx;
	}
	.card-head {
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-start;
	  margin-bottom: 20rpx;
	}
	.address {
	  font-size: 32rpx;
	  color: #222;
	  font-weight: 500;
	}
	.status {
	  font-size: 24rpx;
	  color: #666;
	}
	
	// 标签 蓝色边框 \*/
	.tag-label {
	  display: inline-block;
	  border: 2rpx solid #2F77FD;
	  color: #222;
	  padding: 6rpx 16rpx;
	  border-radius: 8rpx;
	  font-size: 28rpx;
	  margin-bottom: 20rpx;
	}
	
	.text-row {
	  font-size: 28rpx;
	  color: #333;
	  line-height: 2;
	}
</style>