ChuangHengWx/pages/report.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===2}" @tap="changeTab(2)">个人报告</div>
			<div class="t_pre" :class="{'active':tidx===1}" @tap="changeTab(1)">团队报告</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_title">{{item.reportName||''}}</div>
					<div class="li_pre">报告时间：<span>{{item.createDate||''}}</span></div>
					<div class="li_pre" v-if="item.type==1">作答人数：<span>{{item.answerNum||0}}/{{item.finishNum||0}}</span></div>
					<div class="li_pre">团队名称：<span>{{item.teamName||''}}</span></div>
					<div class="li_jd adfacjb" v-if="item.type==1">
						<div class="lj_l">
							<div class="ljl_box" :style="{'width':((item.answerNum||0)/(item.finishNum||0)*100)+'%'}"></div>
						</div>
						<div class="lj_r">进度<span>{{item.answerNum||0}}/{{item.finishNum||0}}</span></div>
					</div>
					<div class="li_view">查看</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:2,
				list:[]
			}
		},
		onLoad() {
			this.getReportList();
		},
		methods:{
			changeTab(idx){
				this.tidx = idx;
				this.getReportList();
			},
			getReportList(){
				this.$api.get('/core/report/member/personalReportList/'+this.tidx).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.list = res.data.data;
				})
			}
		}
	}
</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{
			padding: 0 24rpx;
			overflow: hidden;
			.l_item{
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 40rpx 24rpx;
				position: relative;
				.li_title{
					width: calc(100% - 100rpx);
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #252525;
					line-height: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.li_pre{
					margin-top: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #86909C;
					line-height: 26rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					span{
						color: #1D2129;
					}
				}
				.li_jd{
					margin-top: 27rpx;
					.lj_l{
						width: calc(100% - 181rpx);
						height: 10rpx;
						background: #EFEFEF;
						border-radius: 5rpx;
						position: relative;
						.ljl_box{
							height: 100%;
							background: #FFD750;
							border-radius: 5rpx;
							position: absolute;
							left: 0;
							top: 0;
						}
					}
					.lj_r{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #A6A6A6;
						line-height: 24rpx;
						span{
							color: #1D2129;
							margin-left: 8rpx;
						}
					}
				}
				.li_view{
					width: 88rpx;
					height: 54rpx;
					background: #833478;
					border-radius: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 54rpx;
					text-align: center;
					position: absolute;
					top: 40rpx;
					right: 24rpx;
				}
			}
		}
	}
</style>