ChuangHengWx/pages/questionnaire.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='我的问卷'></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">{{item.title||''}}</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>{{item.programName||''}}</span>
					</div>
					<div class="li_text">
						所属公司：<span>{{item.enterpriseName||''}}</span>
					</div>
					<div class="li_text">
						所属团队：<span>{{item.teamName||''}}</span>
					</div>
					<div class="li_bottom adfacjb">
						<div class="lb_l adfac">
							<u-icon name="clock" color="#FD4F66" size="32"></u-icon>
							<span v-if="item.status===0">截止时间：{{ item.endTime||''}}</span>
							<span v-else-if="item.status===1">完成时间：{{ item.updateDate||''}}</span>
						</div>
						<div class="lb_r">
							<div class="lr_btn" v-if="item.status===0" @tap="toFill(item)">立即作答</div>
							<div class="lr_btn" v-if="item.status===1" @tap="toRepoer(item)">查看报告</div>
						</div>
					</div>
				</div>
			</div>
		</template>
		<template v-else>
			<page-empty :height="'calc(100vh - 200px)'"></page-empty>
		</template>
	</view>
</template>

<script>
	import pageEmpty from '@/components/pageEmpty/index.vue'
	export default {
		components:{ pageEmpty },
		data(){
			return {
				tidx:1,
				list:[]
			}
		},
		onLoad() {
			this.getList();
		},
		methods:{
			getList(){
				this.$api.get('/core/teammember/que/listByUser').then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.list = res.data.data.filter(d=>d.status===this.tidx-1)
				})
			},
			changeTab(index){
				this.tidx = index;
				this.getList();
			},
			toFill(item){
				if(Date.parse(new Date())-Date.parse(item.endTime)>0) return this.$showToast('已过截止时间，无法作答！')
				if(item.type==2){
					uni.navigateTo({
						url:`/pages/questionnaireFill2?teamQuestionnaireId=${item.teamQuestionnaireId}&title=${item.title}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/questionnaireFill?teamQuestionnaireId=${item.teamQuestionnaireId}&title=${item.title}`
					})
				}
			},
			toRepoer(item){
				uni.redirectTo({
					url:'/pages/report'
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F7F7F7;
		padding-bottom: 40rpx;
		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{
						background: rgba(253, 79, 102, 0.06);
						border-radius: 16rpx;
						padding: 3rpx 16rpx;
						span{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FD4F66;
							line-height: 51rpx;
							margin-left: 6rpx;
						}
					}
					.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>