Browse Source

我的报告静态页完成

htc 1 day ago
parent
commit
cb598582ff

+ 12 - 0
pages.json

@@ -106,6 +106,18 @@
 					"style": {
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "report",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "reportResult",
+					"style": {
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},

+ 1 - 1
pages/home.vue

@@ -61,7 +61,7 @@
 					<image :src="imgBase+'home_img_pinggu.png'"></image>
 					<text>PREILL评估</text>
 				</view>
-				<view class="common-menu-pre adffcac">
+				<view class="common-menu-pre adffcac" @click="toTurn('/pagesHome/report')">
 					<image :src="imgBase+'home_img_baogao.png'"></image>
 					<text>PREILL报告</text>
 				</view>

+ 167 - 0
pagesHome/components/report/generateList.vue

@@ -0,0 +1,167 @@
+<template>
+	<view class="gbox">
+		<u-list @scrolltolower="scrolltolower" height="100%">
+			<u-list-item v-for="(item, index) in list" :key="item.id">
+				<view class="gbox-item">
+					<view class="gbox-item-top adfac">
+						<view class="gbox-item-top-type">{{typeCfg['1']}}</view>
+						<view class="gbox-item-top-title">{{'甜梦巧克力公司PREILL分析报告'}}</view>
+					</view>
+					<view class="gbox-item-p adf">
+						<view class="gbox-item-p-left">团队名称:</view>
+						<view class="gbox-item-p-right">{{'甜梦巧克力有限公司'}}</view>
+					</view>
+					<view class="gbox-item-p adfac">
+						<view class="gbox-item-p-left">报告进度:</view>
+						<view class="gbox-item-p-progress adfacjb">
+							<view class="gbox-item-p-progress-l">
+								<view class="gbox-item-p-progress-l-current" :style="{'width':(80)+'%'}"></view>
+							</view>
+							<view class="gbox-item-p-progress-r">{{80}}%</view>
+						</view>
+					</view>
+					<view class="gbox-item-bottom adfacjb">
+						<view class="gbox-item-bottom-left adfac">
+							<view class="gbox-item-bottom-left-text">创建时间:</view>
+							<view class="gbox-item-bottom-left-time">{{'2025-05-28 12:00:00'}}</view>
+						</view>
+						<view class="gbox-item-bottom-right" @click="sendReport(item)">发送报告</view>
+					</view>
+				</view>
+			</u-list-item>
+		</u-list>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			list:{
+				typeof:Array,
+				default:[]
+			}
+		},
+		data(){
+			return {
+				typeCfg:{
+					1:'基础版',
+					2:'专业版',
+					3:'专家版'
+				}
+			}
+		},
+		methods:{
+			scrolltolower(){
+				this.$emit('scrolltolower')
+			},
+			sendReport(item){
+				uni.navigateTo({
+					url:'/pagesHome/reportResult'
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.gbox{
+		height: 100%;
+		&-item{
+			margin-top: 20rpx;
+			background: #FFFFFF;
+			border-radius: 24rpx;
+			padding: 40rpx 24rpx 10rpx;
+			position: relative;
+			&-top{
+				&-type{
+					padding: 2rpx 13rpx;
+					background: #FFF7DC;
+					border-radius: 6rpx;
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #BA9B31;
+					line-height: 33rpx;
+				}
+				&-title{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #002846;
+					line-height: 32rpx;
+					text-indent: 17rpx;
+				}
+			}
+			
+			&-p{
+				margin-top: 36rpx;
+				&>view{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #667E90;
+					line-height: 24rpx;
+				}
+				&-left{
+					width: 134rpx;
+				}
+				&-right{
+					width: calc(100% - 134rpx);
+				}
+				&-progress{
+					width: calc(100% - 134rpx);
+					&-l{
+						width: 410rpx;
+						height: 12rpx;
+						background: #F0F2F8;
+						border-radius: 6rpx;
+						position: relative;
+						&-current{
+							height: 12rpx;
+							background: #FFDF73;
+							border-radius: 6rpx;
+							position: absolute;
+							left: 0;
+							top: 0;
+						}
+					}
+					&-r{
+						width: calc(100% - 410rpx);
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #002846;
+						line-height: 24rpx;
+						text-align: right;
+					}
+				}
+			}
+			
+			&-bottom{
+				margin-top: 30rpx;
+				border-top: 1rpx solid #EFEFEF;
+				padding-top: 18rpx;
+				&-left{
+					&>view{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #667E90;
+						line-height: 24rpx;
+					}
+				}
+				&-right{
+					padding: 17rpx 20rpx;
+					background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
+					border-radius: 30rpx;
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 24rpx;
+					color: #FFFFFF;
+					line-height: 26rpx;
+					letter-spacing: 2rpx;
+				}
+			}
+		}
+	}
+</style>

+ 121 - 0
pagesHome/components/report/receiveList.vue

@@ -0,0 +1,121 @@
+<template>
+	<view class="rbox">
+		<u-list @scrolltolower="scrolltolower" height="100%">
+			<u-list-item v-for="(item, index) in list" :key="item.id">
+				<view class="rbox-item">
+					<view class="rbox-item-top adfac">
+						<view class="rbox-item-top-type">{{typeCfg['1']}}</view>
+						<view class="rbox-item-top-title">{{'甜梦巧克力公司PREILL分析报告'}}</view>
+					</view>
+					<view class="rbox-item-p adf">
+						<view class="rbox-item-p-left">团队名称:</view>
+						<view class="rbox-item-p-right">{{'甜梦巧克力有限公司'}}</view>
+					</view>
+					<view class="rbox-item-p adf">
+						<view class="rbox-item-p-left">发送教练:</view>
+						<view class="rbox-item-p-right">{{'刘亦可'}}</view>
+					</view>
+					<view class="rbox-item-p adf">
+						<view class="rbox-item-p-left">报告时间:</view>
+						<view class="rbox-item-p-right">{{'2025-05-28 12:00:00'}}</view>
+					</view>
+					<view class="rbox-item-btn" @click="reviewReport(item)">查看报告</view>
+				</view>
+			</u-list-item>
+		</u-list>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			list:{
+				typeof:Array,
+				default:[]
+			}
+		},
+		data(){
+			return {
+				typeCfg:{
+					1:'基础版',
+					2:'专业版',
+					3:'专家版'
+				}
+			}
+		},
+		methods:{
+			scrolltolower(){
+				this.$emit('scrolltolower')
+			},
+			reviewReport(item){
+				if(!item.fileUrl) return this.$showToast('报告pdf为空,请联系教练。')
+				uni.navigateTo({
+					url:`/pages/reportDetail?pdfUrl=${item.fileUrl}&reportId=${item.reportId}&fileName=${item.programName}-${item.reportName}`
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.rbox{
+		height: 100%;
+		&-item{
+			margin-top: 20rpx;
+			background: #FFFFFF;
+			border-radius: 24rpx;
+			padding: 40rpx 24rpx;
+			position: relative;
+			&-top{
+				&-type{
+					padding: 2rpx 13rpx;
+					background: #FFF7DC;
+					border-radius: 6rpx;
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #BA9B31;
+					line-height: 33rpx;
+				}
+				&-title{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #002846;
+					line-height: 32rpx;
+					text-indent: 17rpx;
+				}
+			}
+			&-p{
+				margin-top: 36rpx;
+				&>view{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 24rpx;
+					color: #667E90;
+					line-height: 24rpx;
+				}
+				&-left{
+					width: 134rpx;
+				}
+				&-right{
+					width: calc(100% - 134rpx);
+				}
+			}
+			&-btn{
+				padding: 17rpx 20rpx;
+				background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
+				border-radius: 30rpx;
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 24rpx;
+				color: #FFFFFF;
+				line-height: 26rpx;
+				letter-spacing: 2rpx;
+				position: absolute;
+				bottom: 40rpx;
+				right: 24rpx;
+			}
+		}
+	}
+</style>

+ 133 - 0
pagesHome/components/report/sendList.vue

@@ -0,0 +1,133 @@
+<template>
+	<view class="sbox">
+		<u-list @scrolltolower="scrolltolower" height="100%">
+			<u-list-item v-for="(item, index) in list" :key="item.id">
+				<view class="sbox-item">
+					<view class="sbox-item-top adfacjb">
+						<view class="sbox-item-top-left adfac">
+							<image :src="imgBase+'avatar.png'"></image>
+							<text>{{'刘怡然'}}</text>
+							<view class="type">{{'赞助人Sponsor'}}</view>
+						</view>
+						<view class="sbox-item-top-right adfac">
+							<image :src="imgBase+'send_success.png'"></image>
+							<!-- <image :src="imgBase+'send_fail.png'"></image> -->
+							<text>{{'发送成功'}}</text>
+						</view>
+					</view>
+					<view class="sbox-item-pre first adfacjb">
+						<view class="sbox-item-pre-left">报告名称:</view>
+						<view class="sbox-item-pre-right">{{'甜梦巧克力公司PREILL分析报告/专业版'}}</view>
+					</view>
+					<view class="sbox-item-pre adfacjb">
+						<view class="sbox-item-pre-left">团队名称:</view>
+						<view class="sbox-item-pre-right">{{'甜梦巧克力有限公司'}}</view>
+					</view>
+					<view class="sbox-item-pre adfacjb">
+						<view class="sbox-item-pre-left">发送时间:</view>
+						<view class="sbox-item-pre-right">{{'2025-05-28 12:00:00'}}</view>
+					</view>
+				</view>
+			</u-list-item>
+		</u-list>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			list:{
+				typeof:Array,
+				default:[]
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		methods:{
+			scrolltolower(){
+				this.$emit('scrolltolower')
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.sbox{
+		height: 100%;
+		&-item{
+			margin-top: 20rpx;
+			background: #FFFFFF;
+			border-radius: 24rpx;
+			padding: 36rpx 24rpx;
+			&-top{
+				&-left{
+					image{
+						width: 48rpx;
+						height: 48rpx;
+					}
+					text{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 32rpx;
+						color: #002846;
+						line-height: 32rpx;
+						margin-left: 20rpx;
+					}
+					.type{
+						padding: 5rpx 16rpx;
+						background: #FFF7DC;
+						border-radius: 20rpx;
+						margin-left: 11rpx;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 22rpx;
+						color: #BA9B31;
+						line-height: 30rpx;
+					}
+				}
+				&-right{
+					image{
+						width: 26rpx;
+						height: 26rpx;
+					}
+					text{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #95A5B1;
+						line-height: 32rpx;
+						margin-left: 6rpx;
+					}
+				}
+			}
+			&-pre{
+				margin-top: 36rpx;
+				&-left{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 26rpx;
+					color: #667E90;
+					line-height: 26rpx;
+					width: 130rpx;
+				}
+				&-right{
+					width: calc(100% - 130rpx);
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 26rpx;
+					color: #002846;
+					line-height: 26rpx;
+					text-align: right;
+				}
+				&.first{
+					margin-top: 24rpx;
+					border-top: 1rpx solid #EFEFEF;
+					padding-top: 24rpx;
+				}
+			}
+		}
+	}
+</style>

+ 140 - 0
pagesHome/report.vue

@@ -0,0 +1,140 @@
+<template>
+	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='我的报告' bgColor="transparent"></cus-header>
+		<image class="top_bg" :src="imgBase+'report_bg.png'" mode="widthFix"></image>
+		<view class="tab adfac">
+			<view class="tab-pre" :class="{'active':tindex===0}" @click="changeTab(0)">我收到的</view>
+			<view class="tab-pre" :class="{'active':tindex===1}" @click="changeTab(1)">我生成的</view>
+			<view class="tab-pre" :class="{'active':tindex===2}" @click="changeTab(2)">我发送的</view>
+		</view>
+		<view class="query adfacjb">
+			<u-icon name="search" size="38rpx" color="#B3BFC8"></u-icon>
+			<view class="query-inp">
+				<u-input v-model="keyword" border="none" fontSize="26rpx" color="#002846" clearable
+				 placeholder="请输入团队名称查询" @confirm="getList"></u-input>
+			</view>
+		</view>
+		<view class="box">
+			<template v-if="tindex===0">
+				<receive-list :list="list" @scrolltolower="scrolltolower"></receive-list>
+			</template>
+			<template v-else-if="tindex===1">
+				<generate-list :list="list" @scrolltolower="scrolltolower"></generate-list>
+			</template>
+			<template v-else-if="tindex===2">
+				<send-list :list="list" @scrolltolower="scrolltolower"></send-list>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	import ReceiveList from './components/report/receiveList.vue'
+	import GenerateList from './components/report/generateList.vue'
+	import SendList from './components/report/sendList.vue'
+	export default {
+		components:{
+			ReceiveList,
+			GenerateList,
+			SendList
+		},
+		data(){
+			return {
+				tindex:0,
+				keyword:'',
+				list:[]
+			}
+		},
+		onLoad() {
+			this.getList();
+		},
+		methods:{
+			changeTab(index){
+				this.tindex = index;
+				this.getList();
+			},
+			getList(){
+				if(this.tindex===0) this.getReceiveList()
+				else if(this.tindex===1) this.getGenerateList()
+				else if(this.tindex===2) this.getSendList()
+			},
+			getReceiveList(){
+				this.list = [{id:1},{id:2},{id:3}];
+			},
+			getGenerateList(){
+				this.list = [{id:1},{id:2},{id:3}];
+			},
+			getSendList(){
+				this.list = [{id:1},{id:2},{id:3}];
+			},
+			scrolltolower(){
+				console.log(this.tindex);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.default_page{
+		padding: 0 24rpx 40rpx;
+		background: #F7F7F7;
+		box-sizing: border-box;
+		
+		.top_bg{
+			width: 100%;
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+	
+		.query{
+			width: calc(100% - 12rpx);
+			margin: 40rpx 6rpx 0;
+			height: 72rpx;
+			background: #FFFFFF;
+			border-radius: 36rpx;
+			padding: 0 36rpx;
+			box-sizing: border-box;
+			position: relative;
+			&-inp{
+				width: calc(100% - 55rpx);
+			}
+		}
+	
+		.box{
+			flex: 1;
+			overflow-y: auto;
+		}
+	
+		.tab{
+			margin-top: 20rpx;
+			position: relative;
+			&-pre{
+				width: 50%;
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 30rpx;
+				color: #002846;
+				line-height: 42rpx;
+				text-align: center;
+				&.active{
+					font-weight: bold;
+					font-size: 32rpx;
+					line-height: 45rpx;
+					position: relative;
+					&::after{
+						content: '';
+						width: 48rpx;
+						height: 6rpx;
+						background: #335368;
+						border-radius: 9rpx;
+						position: absolute;
+						left: 50%;
+						margin-left: -24rpx;
+						bottom: -22rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

+ 128 - 0
pagesHome/reportResult.vue

@@ -0,0 +1,128 @@
+<template>
+	<view class="default_page" :style="{'height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='生成报告' bgColor="transparent"></cus-header>
+		<div class="box adffcac">
+			<div class="box-loading adffcacjc">{{1}}%</div>
+			<div class="box-p1">{{'报告正在生成中~'}}</div>
+			<div class="box-p2">预计所需时间7-10分钟</div>
+			<div class="box-p3">{{'稍后可去报告管理中查看结果'}}</div>
+		</div>
+		<div class="form">
+			<div class="form-item adfacjb">
+				<div class="form-item-left">问卷名称</div>
+				<div class="form-item-right">{{'GW+MC PREILL36测评题库版本'}}</div>
+			</div>
+			<div class="form-item adfacjb">
+				<div class="form-item-left">团队名称</div>
+				<div class="form-item-right">{{'甜梦巧克力有限公司'}}</div>
+			</div>
+			<div class="form-item adfacjb">
+				<div class="form-item-left">创建时间</div>
+				<div class="form-item-right">{{'2025-10-23 15:00'}}</div>
+			</div>
+		</div>
+		<div class="btn">
+			<div class="zt_btn" @click="handleBack">返回</div>
+			<!-- <div class="zt_btn" @click="handleReCreate">重新生成</div> -->
+		</div>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				// 报告生成失败
+				// 失败原因:网络延迟
+			}
+		},
+		methods:{
+			handleBack(){
+				uni.navigateBack()
+			},
+			handleReCreate(){
+				
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.default_page{
+		background: #F7F7F7;
+		.box{
+			width: 100%;
+			background: #FFFFFF;
+			border-radius: 36rpx 36rpx 0rpx 0rpx;
+			padding: 54rpx 0 64rpx;
+			&-loading{
+				width: 340rpx;
+				height: 340rpx;
+				background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/send_loading.png') no-repeat;
+				background-size: 100% 100%;
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 54rpx;
+				color: #FFFFFF;
+				line-height: 54rpx;
+			}
+			&-p1{
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #002846;
+				line-height: 40rpx;
+				text-align: center;
+				margin-top: 41rpx;
+			}
+			&-p2{
+				font-family: PingFang-SC, PingFang-SC;
+				font-weight: bold;
+				font-size: 28rpx;
+				color: #002846;
+				line-height: 28rpx;
+				text-align: center;
+				margin-top: 23rpx;
+			}
+			&-p3{
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #667E90;
+				line-height: 28rpx;
+				text-align: center;
+				margin-top: 24rpx;
+			}
+		}
+		
+		.form{
+			width: 100%;
+			margin-top: 20rpx;
+			&-item{
+				padding: 28rpx 24rpx;
+				background: #FFFFFF;
+				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
+				&-left{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 30rpx;
+					color: #002846;
+					line-height: 42rpx;
+				}
+				&-right{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 30rpx;
+					color: #667E90;
+					line-height: 32rpx;
+					text-align: right;
+				}
+			}
+		}
+		
+		.btn{
+			width: calc(100% -100rpx);
+			margin: 120rpx 50rpx 0;
+		}
+	}
+</style>