ChuangHengWx/pages/questionnaire.vue

<template>
	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='问卷' :showback="false"></cus-header>
		<div class="tabs adf">
			<div class="t_pre" :class="{'active':tidx===1}" @tap="changeTab(1)">待参与</div>
			<div class="t_pre" :class="{'active':tidx===2}" @tap="changeTab(2)">已参与</div>
		</div>
		<template v-if="list.length">
			<div class="list">
				<div class="l_item" v-for="(item,index) in list" :key="index">
					<div class="li_top adfacjb">
						<div class="lt_l">{{'企业员工培训需求调查问卷'}}</div>
						<div class="lt_r" :class="{'dcy':item.status===0,'ycy':item.status===1}">{{item.status===0?'待参与':item.status===1?'已参与':''}}</div>
					</div>
					<div class="li_text">
						所属项目：<span>{{'合肥市传秀科技有限公司'}}</span>
					</div>
					<div class="li_text">
						所属团队：<span>{{'研发团队'}}</span>
					</div>
					<div class="li_bottom adfacjb">
						<div class="lb_l">截止时间：{{ '2025-05-28 24:00:00'}}</div>
						<div class="lb_r">
							<div class="lr_btn" @tap="" v-if="item.status===0" @tap="toFill">立即作答</div>
							<div class="lr_btn" @tap="" v-if="item.status===1" @tap="toRepoer">查看报告</div>
						</div>
					</div>
				</div>
			</div>
		</template>
		<Tabbar :tabbarIndex="1"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/CusTabbar/index.vue'
	export default {
		components:{ Tabbar },
		data(){
			return {
				tidx:1,
				dataList:[{status:0},{status:1}],
				list:[]
			}
		},
		onLoad() {
			this.list = JSON.parse(JSON.stringify(this.dataList)).filter(d=>d.status===0)
		},
		methods:{
			changeTab(index){
				this.tidx = index;
				this.list = JSON.parse(JSON.stringify(this.dataList)).filter(d=>d.status===index-1)
			},
			toFill(){
				uni.navigateTo({
					url:'/pages/questionnaireFill'
				})
			},
			toRepoer(){
				
			},
		}
	}
</script>

<style scoped lang="less">
	.tabPage{
		background: #F7F7F7;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		.tabs{
			width: 100%;
			height: 90rpx;
			background: #FFFFFF;
			.t_pre{
				width: 50%;
				height: 90rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #666666;
				line-height: 90rpx;
				text-align: center;
				position: relative;
				&.active{
					color: #761E6A;
					&::after{
						content: '';
						width: 148rpx;
						height: 6rpx;
						background: #761E6A;
						border-radius: 9rpx;
						position: absolute;
						left: 50%;
						margin-left: -74rpx;
						bottom: 0;
					}
				}
			}
		}
	
		.list{
			.l_item{
				background: #FFFFFF;
				margin-top: 20rpx;
				width: 100%;
				padding: 36rpx 30rpx;
				box-sizing: border-box;
				.li_top{
					.lt_l{
						width: calc(100% - 142rpx);
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #252525;
						line-height: 40rpx;
					}
					.lt_r{
						width: 142rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						line-height: 40rpx;
						text-align: right;
						&.dcy{
							color: #FD4F66;
						}
						&.ycy{
							color: #999999;
						}
					}
				}
				.li_text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 51rpx;
					margin-top: 15rpx;
				}
				.li_bottom{
					margin-top: 8rpx;
					padding-top: 29rpx;
					border-top: 1rpx solid #F0F2F8;
					.lb_l{
						width: calc(100% - 142rpx);
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #252525;
						line-height: 51rpx;
					}
					.lb_r{
						.lr_btn{
							width: 142rpx;
							height: 64rpx;
							background: #833478;
							border-radius: 24rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 64rpx;
							text-align: center;
							letter-spacing: 2rpx;
						}
					}
				}
			}
		}
	}
</style>