property-resident-side/property-uniapp-project/pageSubPack/service-list/questionnaireSurveyIndex.vue

<template>
	<view class="contentStyle">
		<view style="width: 40vw;">
			<uni-segmented-control :current="currentTab" :values="tabs" @click-item="switchTab" style-type="text"
				active-color="#007AFF" inactive-color="#999" class="seg-control" />
		</view>

		<!-- 表单区域 -->
		<view class="page">
			<view class="list-container">
				<view v-if="currentList.length === 0" class="empty-state">
					<uni-icons type="info" size="30" color="#ccc"></uni-icons>
					<text class="empty-text">暂无数据</text>
				</view>

				<!-- 列表项：点击高亮 -->
				<view 
					v-for="(item, index) in currentList" 
					:key="index" 
					class="list-item" 
					:class="{
						disabled: currentTab === 1,
						selected: selectedIndex === index // 点击才高亮
					}" 
					@click="handleItemClick(item, index)"
				>
					<view class="item-content">
						<view class="item-title">{{ item.title }}</view>
						<view class="item-info">
							<text class="info-time">{{ item.createTime }}</text>
							<text class="info-community">{{ item.villageName }}</text>
						</view>
					</view>
					<view 
						class="item-status" 
						:class="{
							joined: item.answerStatus === '1',
							unjoined: item.answerStatus === '0'
						}"
					>
						{{ item.statusName}}
					</view>
				</view>
			</view>
			<view style="width: 100%;height:2rpx;"></view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onShow,onPullDownRefresh } from '@dcloudio/uni-app'
	import {getQuestionnaireList} from '../api/apiSub.js'

	// 状态栏高度
	// 当前选中tab
	const currentTab = ref(0)
	// tab标题
	const tabs = ["收集中", "已结束"]

	// 收集中列表
	const collectingList = ref([])
	// 已结束列表
	const endedList = ref([])
	
	// 点击选中的索引（控制高亮）
	const selectedIndex = ref(-1)

	// 计算属性：当前显示列表
	const currentList = computed(() => {
		return currentTab.value === 0 ? collectingList.value : endedList.value
	})

	// Tab切换
	const switchTab = (e) => {
		currentTab.value = e.currentIndex
		selectedIndex.value = -1 // 切换tab清空选中
		getDataList()
	}

	// 获取列表数据
	const getDataList = async () => {
		try{
			let params ={
				status: currentTab.value === 0 ? 1 : 2
			}
			const res = await getQuestionnaireList(params)
			if(res.code === 200){
				const list = (res.data || []).map(item => {
					return {
						...item,
						statusName: item.answerStatus == "0" ? '未参与' : '已参与'
					}
				})
				if(currentTab.value === 0){
					collectingList.value = list
				}else{
					endedList.value = list
				}
			}else{
				uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
			}
		}catch(err){
			uni.showToast({ title:  err.msg ||'网络异常', icon: 'none' })
		}finally{
		uni.stopPullDownRefresh();
	}
	}

	// 列表项点击（index 控制高亮）
	const handleItemClick = (item, index) => {
		selectedIndex.value = index //点击哪个，哪个高亮
		if (item.answerStatus === '1') {
			turnToDetail(item)
		} else {
			// if (currentTab.value === 0) {
				turnToFillout(item)
			// }
		}
	}

	// 跳转到填写问卷
	const turnToFillout = (item) => {
		uni.navigateTo({
			url: `/pageSubPack/service-list/questionnaireFillout?id=${item.id}`
		})
	}

	// 跳转到详情
	const turnToDetail = (item) => {
		uni.navigateTo({
			url: `/pageSubPack/service-list/questionnaireDetail?id=${item.id}`
		})
	}

	onShow(() => {
		getDataList()
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		getDataList();
	});
</script>

<style lang="scss">
	page {
		background: #f2f1f6;
	}
</style>

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

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 40rpx;
		box-sizing: border-box;
	}

	.seg-control {
		margin-bottom: 20rpx;
	}

	.list-container {
		padding-top: 20rpx;
	}

	.list-item {
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 2rpx solid #E6E6E6;
		background-color: #fff;

		&.disabled {
			opacity: 0.6;
		}

		&.selected {
			border: 2rpx solid #2F77FD;
			background-color: #F5FAFF;
		}
	}

	.item-content {
		width: calc(100% - 100rpx);
	}

	.item-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
		line-height: 44rpx;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.item-info {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.info-time,
		.info-community {
			font-size: 28rpx;
			color: #666;
			line-height: 32rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.item-status {
		font-size: 28rpx;
		font-weight: 500;
		border-radius: 8rpx;

		&.joined {
			color: #2F77FD;
		}

		&.unjoined {
			color: #999;
		}
	}


	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #ccc;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
</style>