Homestay_manage_app/pages/complaintProgress/complaintProgress.vue

<template>
	<view class="container">
		<!-- 头部订单信息区域 -->
		<view class="header">
			<view class="header_title">
				<view class="title_left">标题标题标题</view>
				<view class="title_right">处理中</view>
			</view>
			<view class="header_info">
				<view class="info_box">
					<view class="box_key">订单号</view>
					<view class="box_value">2626262626260660606</view>
				</view>
				<view class="info_box">
					<view class="box_key">投诉单号</view>
					<view class="box_value">6165165116506503063</view>
				</view>
				<view class="info_box">
					<view class="box_key">反馈时间</view>
					<view class="box_value">2023-05-25 15:15:15</view>
				</view>
			</view>
		</view>

		<!-- 进度详情区域 -->
		<view class="progress">
			<view class="progress_title">进度详情</view>
			<!-- 进度条区域 -->
			<view class="progress_body">
				<!-- 每一个进度区域 -->
				<view class="body_item" v-for="item in list" :key="item.id">
					<view class="item_left">
						<view class="left_top">{{ item.day }}</view>
						<view class="left_bottom">{{ item.time }}</view>
						<view class="left_dot"></view>
					</view>
					<view class="item_right">
						<view class="right_top">{{ item.title }}</view>
						<view class="right_bottom" v-for="(ele, index) in item.tags" :key="index">
							{{ ele }}
						</view>
						<!-- 图片区域 -->
						<view class="right_bottom" v-if="item.imgs">
							<view class="bottom_key">图片：</view>
							<view class="bottom_value">
								<img mode="aspectFill" v-for="(img, index2) in item.imgs" :key="index2" :src="img" @click="() => handleClickImg(item, index2)" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="foot">
			<view class="btn_phone">服务热线</view>
			<view class="btn_finish">处理完成</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 进度条列表数据
			list: [
				{
					id: 1,
					day: '08-04',
					time: '12:13',
					title: '处理完成',
					tags: ['您的问题已处理']
				},
				{
					id: 1,
					day: '08-04',
					time: '12:13',
					title: '服务热线',
					tags: ['问题跟进中，呼叫结果：已接通']
				},
				{
					id: 1,
					day: '08-04',
					time: '12:13',
					title: '问题提交成功',
					tags: ['标题：xxxxxxxxxxxxxxxx', '问题描述：xxxxxxxxxxxxxxxx'],
					imgs: [
						'https://img1.baidu.com/it/u=4085584268,3308739054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
						'https://img1.baidu.com/it/u=4085584268,3308739054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
						'https://img1.baidu.com/it/u=4085584268,3308739054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
						'https://img1.baidu.com/it/u=4085584268,3308739054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
						'https://img1.baidu.com/it/u=4085584268,3308739054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
						'https://img1.baidu.com/it/u=4085584268,3308739054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
					]
				}
			]
		}
	},
	methods: {
		// 点击进度条图片回调
		handleClickImg(item, index) {
			uni.previewImage({
				urls: item.imgs,
				current: index
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	height: 100vh;
	overflow-y: auto;
	background-color: #f7f7f7;

	.header {
		box-sizing: border-box;
		padding: 0 30rpx;
		height: 290rpx;
		background-color: #fff;

		.header_title {
			display: flex;
			align-items: center;
			height: 89rpx;
			font-size: 28rpx;
			border-bottom: 1rpx solid #e5e5e5;

			.title_left {
				flex: 4;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.title_right {
				flex: 1;
				text-align: end;
				color: #a6a6a6;
			}
		}

		.header_info {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			height: 200rpx;
			font-size: 28rpx;

			.info_box {
				display: flex;
				align-items: center;

				.box_key {
					width: 130rpx;
					color: #808080;
				}
				.box_value {
					color: #383838;
				}
			}
		}
	}

	.progress {
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-top: 20rpx;
		background-color: #fff;

		.progress_title {
			display: flex;
			align-items: center;
			height: 89rpx;
			font-size: 28rpx;
			font-weight: bold;
			border-bottom: 1rpx solid #e5e5e5;
		}

		.progress_body {
			padding-top: 22rpx;
			padding-bottom: 47rpx;

			.body_item {
				display: flex;

				.item_left {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-right: 20rpx;
					width: 100rpx;
					border-right: 1rpx dotted #a6a6a6;

					.left_top {
						font-size: 28rpx;
					}
					.left_bottom {
						font-size: 20rpx;
					}

					.left_dot {
						position: absolute;
						top: 18rpx;
						right: -8rpx;
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #096562;
					}
				}

				.item_right {
					flex: 1;
					margin-top: -10rpx;
					margin-left: 30rpx;
					padding-bottom: 20rpx;
					overflow: hidden;

					.right_top {
						margin-bottom: 8rpx;
						font-weight: bold;
						font-size: 28rpx;
					}
					.right_bottom {
						display: flex;
						margin-bottom: 12rpx;
						font-size: 24rpx;
						color: #808080;

						.bottom_key {
							width: 75rpx;
						}

						.bottom_value {
							flex: 1;
							display: grid;
							grid-template-columns: repeat(auto-fill, 103rpx);
							gap: 12rpx;

							img {
								width: 103rpx;
								height: 122rpx;
								border-radius: 5rpx;
							}
						}
					}
				}
			}
		}
	}

	.foot {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 66rpx 30rpx;
		font-size: 28rpx;

		.btn_phone {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 330rpx;
			height: 84rpx;
			color: #096562;
			border-radius: 22rpx;
			border: 1rpx solid #096562;
		}
		.btn_finish {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 330rpx;
			height: 84rpx;
			color: #fff;
			border-radius: 22rpx;
			background-color: #096562;
		}
	}
}
</style>