JinShan_uniapp/pages/mySeekHelp/index.vue

<template>
	<view class="container">
		<!-- 引入头部组件 -->
		<Header :title="'我的求助'"></Header>
		<view class="content">

			<!-- 标签栏 -->
			<u-tabs :list="tabList" lineWidth="30" lineColor="#3B8CFF" :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:90px"></u-tabs>


		</view>
		<view class="content_wapper">
			<view class="content_list">
				<!-- 工单列表 -->
				<view v-for="(order, index) in filteredOrders" :key="index" class="order-item">
					<view class="order-title">
						 <view class="title">
							<view class="title-text">{{ order.title }}</view>
				
						    <u-tag size="mini" text="求助中" plain></u-tag>
						 </view>
						 <view class="date">{{ order.date }}</view>
					</view>
					<view class="order-description">{{ order.description }}</view>
				<!-- 	<view class="order-status">
						<u-tag size="mini" text="待解决" plain></u-tag>
					</view> -->
					<button @click="handleAction(order)" class="order-action">{{ order.actionText }}</button>
				</view>
			</view>

		</view>
		<Footer></Footer>
	</view>

</template>

<script>
	import Header from '@/components/header_common.vue';
	import Footer from '@/components/footer_common.vue';
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				tabList: [{
						name: '全部'
					},
					{
						name: '求助中'
					},
					{
						name: '已解决'
					}
				],
				orders: [{
						title: '楼道垃圾',
						description: '公寓2期xx楼梯门口有垃圾...公寓2期xx楼梯门口有垃圾...公寓2期xx楼梯门口有垃圾...公寓2期xx楼梯门口有垃圾...公寓2期xx楼梯门口有垃圾...公寓2期xx楼梯门口有垃圾...公寓2期xx楼梯门口有垃圾...',
						date: '2025-03-25',
						status: '待解决',
						actionText: '撤回'
					},
					{
						title: '电梯故障',
						description: '公寓2期xx楼电梯无法正常使用...',
						date: '2025-02-21',
						status: '已解决',
						actionText: '无'
					},
					// 其他工单数据...
				],
				currentTab: '全部'
			};
		},
		computed: {
			filteredOrders() {
				if (this.currentTab === '全部') {
					return this.orders;
				} else {
					return this.orders.filter(order => order.status === this.currentTab);
				}
			}
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1 // 返回上一级页面
				});
			},
			// 切换tabs
			handleTabChange(index) {
				this.currentTab = this.tabList[index].name;
			},
		}
	};
</script>

<style lang="scss" scoped>
	// 定义全局变量
	$primary-color: #1890ff;
	$light-bg: #f0f8ff;
	$text-color: #333;
	$sub-text-color: #3D3D3D;
	$disabled-text-color: #999;

	.container {
		width: 100%;
		min-height: 100vh;
		/* 占满整个视口高度 */
		opacity: 1;
		background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
			linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
		position: relative;

		.content {
			width: 100%;
			position: absolute;
			margin-top: 300rpx;

			background-color: rgba(252, 252, 252, 0.8);
			padding-bottom: 16rpx;


		}

		.content_wapper {
			width: 100%;
			height: auto;
			position: absolute;
			margin-top: 420rpx;
			background-color: rgba(252, 252, 252, 0.8);

			.content_list {
				width: 100%; 
				padding: 0 20rpx;
				box-sizing: border-box;
				.order-item {
					display: flex;
					flex-direction: column;
					width: 90%;
					margin: 20rpx auto;
					border-radius: 10rpx;
					margin-bottom: 40rpx;
					padding:40rpx 20rpx;
					border-radius: 14.17px;
					background: linear-gradient(90deg, rgba(199, 222, 255, 0.5) 0%, rgba(255, 255, 255, 0.72) 100%);
					box-shadow: 0px 2px 4px  rgba(191, 218, 255, 0.58);
					position: relative;

					.order-title {
						font-size: 28rpx;
						display: flex;
						justify-content: space-between;
						.title{
							width: 90%;
							font-weight: bold;
							display: flex;
							align-items: center;
							gap: 8rpx;
							
							.title-text{
								white-space: nowrap; 
								overflow: hidden; 
								text-overflow: ellipsis; 
								max-width: 200rpx;
							}
							
						}
						.date{
							width: 40%;
							font-weight: normal;
							text-align: right;
						}
						
					}

					.order-description {
						font-size: 26rpx;
						color: $sub-text-color;
						margin-top: 10rpx;
						margin-bottom: 30rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical; 
						overflow: hidden; 
						text-overflow: ellipsis; 
						-webkit-line-clamp: 2; 
						line-height: 50rpx;
						
					}

					.order-status {
						font-size: 22rpx;
						color: $text-color;
						margin-top: 10rpx;
						width: 100rpx;
					}

					.order-action {
						margin-top: 40rpx;
						width: 120rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background-color: $primary-color;
						color: #fff;
						border-radius: 10rpx;
						font-size: 24rpx;
						margin-top: 20rpx;
						position: absolute;
						right: 20rpx;
						bottom: 20rpx;
					}


				}

			}
		}


	}
</style>