edu-uniapp/pages/aiCt/examCommit.vue

<template>
	<view class="report-content">
		<view class="topinfo">
			<image 
			  style="position: relative; left: 7%;"
			  src="/static/img/ct.png"></image>
		</view>
		
		<!-- <view @click="userFormFlag = true" class="ehcarts-title">测评结果等级</view> -->
		
		
		
		<view style="margin-top: 250px;">
			<image 
			  style="width: 100%; height: 360upx; 30px" 
			  :src="'/static/img/E.png'"></image>
			<view class="min_title">
			   根据教育部《关于普通高中学业水平考试的实施意见》
			  （教基二[2014]10号）所给的标准，以等级呈现成绩，
               位次由高到低为A至E等级。其中A等级15%，B等级30%，C等级30%，D、E等级共25%，
			   智能提分系统参照此文件，在义务教育阶段同等适用。
			</view>
		</view>
		
		<uni-popup
		:show="userFormFlag" 
		type="center" 
		:custom="true" :mask-click="false">
			<view class="uni-tip">
				<view class="uni-tip-title">完善信息</view>
				<view class="uni-tip-content">
					<view class="form-container-box">
						<!-- 待用活动表单 -->
						<active-form 
						  :formDate="formDate"
						  @sure-btn="sure" @input-val="inputVal">								
						</active-form>
						
						<view style="margin: 10rpx; color: red;">
							温馨提示: 请准确填写相关信息帮助系统对您或您的孩子生成精准学习分析报告和推荐的学习路径
						</view>
						
					</view>
				</view>
				<view class="uni-tip-group-button">
					 <!-- <view @click="userFormFlag = false" class="uni-tip-button">取消</view> -->
					  <button style="font-size: 16px;" type="primary" @click="submitForm">提交查看结果</button>
					<!-- <view @click="submitForm" class="uni-tip-button">确定</view> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import activeForm from '@/components/userInfo/active_form.vue'
	export default {
		components: {uniPopup, activeForm},
		data() {
			return {
				userFormFlag: false,
				formDate: [
					{
						placeholder: "请输入姓名",
						label: "姓名",
						type: "text",
						rules: {
							name: "name",
							value: "",
							verify: "req",
							errMess: "请输入姓名"
						}
					},
					
					{
						placeholder: "请输入就读学校",
						label: "就读学校",
						type: "text",
						rules: {
							name: "from_school_name",
							value: "",
							verify: "req",
							errMess: "请输入就读学校"
						}
					},
					
					{
						placeholder: "请填写联系方式",
						label: "手机号",
						type: "number",
						rules: {
							name: "mobile",
							value: "",
							verify: "req|phone",
							errMess: "手机号填写不正确"
						}
				}]
			}
		},
		
		computed: {
		   ...mapGetters({
				fromSchoolId: 'paper/getFromSchoolId',
				examParams: 'paper/getExamParams'
		   })
		},
		
		
		onLoad(params) {
			setTimeout(() => {
				this.userFormFlag = true
			}, 100)
           
		},
		
		
		methods: {
			
			inputVal: function(data){
				var data=JSON.parse(data);
				if (String(data.val) != "" && String(data.index) != "") {				
					this.formDate[data.index].rules.value = data.val;
				}
			},
			
			submitForm () {
				// 表单验证 可选项 otherPra:otherPra
				var otherPra = {
					reqEmptyVal: true,
				}
				if (this.$vervify({
						formDate: this.formDate,
						otherPra: otherPra
					   })
					) {
						
					let formArray = []
					this.formDate.forEach(item => {
						let itemValue = item.rules
						if (itemValue.name === 'sex') {
							if (itemValue.value === '男') {
								itemValue.value = 1
							} else if (itemValue.value === '女') {
								itemValue.value = 0
							}
						}
						formArray.push({
							name: itemValue.name,
							value: itemValue.value,
						})
					})
					uni.showLoading({
						title: '正在生成测试报告, 请稍后...'
					})
					this.$httpApi.post('/front/potentialStudentInfo', {formList: formArray, fromSchoolId: parseInt(this.fromSchoolId)})
					.then(response => {
						if (response.code === 1) {
							let studentId = response.data
							this.$store.commit('paper/updateStudentId', response.data)
							this.sendCommitQuestionHttp(studentId)
						} else {
							uni.hideLoading()
							setTimeout(() => {
								uni.showToast({
									title: response.message
								})
							}, 100)
						}
					})
				}
			},
			
			sendCommitQuestionHttp (studentId) {
				let form = this.examParams
				form.potentialStudentInfoId = studentId
				
				this.$httpApi.post('/front/aiCt/commitAiPaperQuestion', form)
				 .then(response => {
					uni.hideLoading()
					if (response.code === 1) {
						uni.showToast({
							icon: 'none',
							title: '报告生成成功'
						})
						setTimeout(() => {
							// 跳转测评报告结果页
							uni.redirectTo({
								url: 'ctReport'
							})
						}, 100) 
					} else {
						uni.showToast({
							icon: 'none',
							title: '报告生成失败'
						})
					}
				})
			},
		},
		
		filters: {
			
		}
	}
</script>


<style scoped>
	.uni-tag {
		width: 30%
	}
	

	@import "../../colorui/animation.css";
		@import "../../colorui/main.css";
		@import "../../colorui/icon.css";
		/*每个页面公共css */
		page {
			background-color: #FFFFFF;
		}
		uni-radio:before {
			content: ''
		}
		
	
	/*    .questionInfo_content p {
			display: inline-block;
		} */
		uni-checkbox:before {
			content: ''
		}
	    
	    .line-green {
		   background-color: #409eff !important;
		   color: #F0F0F0;
		} 
		.cu-form-group {
			justify-content: flex-start
		}
	
		.cu-form-group .title {
			padding-left: 30upx;
			padding-right: 0upx;
		}
	
	/* 提示窗口 */
		.uni-tip {
			padding: 15px;
			width: 320px;
			background: #fff;
			box-sizing: border-box;
			border-radius: 10px;
		}
	
		.uni-tip-title {
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			color: #333;
		}
	
		.uni-tip-content {
			padding: 15px;
			font-size: 14px;
			color: #666;
		}
	
		.uni-tip-group-button {
			margin-top: 10px;
			display: flex;
		}
	
		.uni-tip-button {
			width: 100%;
			text-align: center;
			font-size: 14px;
			color: #3b4144;
		}
	
		.cu-form-group+.cu-form-group {
			border-top: none;
		}
	
		.cu-bar-title {
			min-height: 50upx;
		}
		.cu-list.menu>.cu-item-error{justify-content: flex-start;}
</style>
<style>
	
	
	
	.icons_item {
		font-size: 30upx;
		margin-top: 10upx;
		margin-left: 10upx;
		color: red;
		width: 265upx;
		float: left;
		display: inline-block;
	}
	.uni-text-small {
		font-size:24upx;
	}
	/* page */
	.uni-h5 {font-size: 28upx; color: #8f8f94;}
	/* 文本溢出隐藏 */
	.uni-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		margin-top: 15upx;
		color: #999999;
		text-overflow: ellipsis;
	}
	.uni-page-head{
		padding:35upx;
		text-align: center;
	}
	.question_count_item {
		width: 30%;
		margin: 12upx;
		display: inline-block;
	}
	.uni-page-head-title {
		display: inline-block;
		padding: 0 40upx;
		font-size: 30upx;
		height: 88upx;
		line-height: 88upx;
		color: #BEBEBE;
		box-sizing: border-box;
		border-bottom: 2upx solid #D8D8D8;
	}
	
	.min_title {
		font-size: 14px;
		margin: 5px;
		color: #DADADA;
	}
	.uni-page-body {
		width: 100%;
		flex-grow: 1;
		overflow-x: hidden;
	}
	
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-list-cell-hover {
		background-color: #eee;
	}
	.uni-list-cell-pd {
		padding: 22upx 30upx;
	}
	.uni-list-cell-left {
		font-size:28upx;
		padding: 0 30upx;
	}
	.uni-list-cell-db,
	.uni-list-cell-right {
		flex: 1;
	}
	.uni-list-cell::after {
		position: absolute;
	  z-index: 3;
		right: 0;
		bottom: 0;
		left: 30upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.uni-list .uni-list-cell:last-child::after {
		height: 0upx;
	}
	.uni-list-cell-last.uni-list-cell::after {
		height: 0upx;
	}
	.uni-list-cell-divider {
		position: relative;
		display: flex;
		color: #999;
		background-color: #f7f7f7;
		padding:15upx 20upx;
	}
	.uni-list-cell-divider::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.tip {
		color: #9A9A9A;
		font-size: 26upx;
		margin-top: 2upx;
		width: 300upx; 
		text-align: center;
	}
	.uni-list-cell-divider::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.uni-list-cell-navigate {
		font-size:30upx;
		padding: 22upx 30upx;
		line-height: 48upx;
		position: relative;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		flex: 1;
		justify-content: space-between;
		align-items: center;
	}
	.uni-list-cell-navigate {
		padding-right: 36upx;
	}
	.uni-navigate-badge {
		padding-right: 50upx;
	}
	.uni-list-cell-navigate.uni-navigate-right:after {
		font-family: uniicons;
		content: '\e583';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.uni-list-cell-navigate.uni-navigate-bottom:after {
		font-family: uniicons;
		content: '\e581';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.uni-list-cell-navigate.uni-navigate-bottom.uni-active::after {
		font-family: uniicons;
		content: '\e580';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.uni-collapse.uni-list-cell {
		flex-direction: column;
	}
	.uni-list-cell-navigate.uni-active {
		background: #eee;
	}
	.uni-list.uni-collapse {
		box-sizing: border-box;
		height: 0;
		overflow: hidden;
	}
	.uni-collapse .uni-list-cell {
		padding-left: 20upx;
	}
	.uni-collapse .uni-list-cell::after {
		left: 52upx;
	}
	.uni-list.uni-active {
		height: auto;
	}
	
	/* 三行列表 */
	.uni-triplex-row {
		display: flex;
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		padding: 22upx 30upx;
	}
	.uni-triplex-right,
	.uni-triplex-left {
		display: flex;
		flex-direction: column;
	}
	.uni-triplex-left {
		width: 84%;
	}
	.uni-triplex-left .uni-title{
		padding:8upx 0;
	}
	.uni-text {
		display: inherit !important;
	}
	.uni-triplex-left .uni-text, .uni-triplex-left .uni-text-small{color:#999999;}
	.uni-triplex-right {
		width: 16%;
		text-align: right;
	}
	.count_item {
		display: inline-block;
		width: 50%;
		/* margin-left: 13%; */
		/* width: 40%;
		margin-left: 9%; */
		margin-top: 10px;
	}
	.topinfos {
	   margin: 20px auto;
	  padding: 10px 0 20px;
	  display: flex;
	  background-color: #ed2828;
	  color: #fff;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}
	.report-content {
		width: 100%;
		height: 100%;
		
	}
	.mark {
		position: relative;
		right: 4%;
		text-align: center;
		font-size: 24px;
		font-weight: 700;
	}
	.ehcarts-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: white;
		padding: 30upx 30upx 30upx 50upx;
		margin-top: 20upx;
		width: 100%;
		position: relative;
		background-color:  #FF9966;
		border-bottom: 1px  #FF9966 solid
	}
	
	.qiun-columns .item {
		/* width: 20upx; */
		display: inline-block;
		float: left;
		margin-top: 20upx;
		margin-bottom: 20upx;
		margin-left: 50upx;
	}
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}
	
	.ai_btn {
	   display: inline-block;
	   line-height: 40px;
	   position: relative;
	   left: 8%;
	}
	.ai_btn_item {
	   border-radius: 60upx;
	   float: left;
	   line-height: 50px;
	   margin-left: 20px;
	   margin-top: 20px;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	/* 通用样式 */
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	/* 横屏样式 */
	.qiun-charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
		padding: 25upx;
	}

	.charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
	}

	/* 圆弧进度样式 */
	.qiun-charts3 {
		width: 750upx;
		height: 250upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.charts3 {
		position: absolute;
		width: 250upx;
		height: 250upx;
		background-color: #FFFFFF;
	}

	.qiun-tip {
		display: block;
		width: auto;
		overflow: hidden;
		padding: 15upx;
		height: 30upx;
		line-height: 30upx;
		margin: 10upx;
		background: #ff9933;
		font-size: 30upx;
		border-radius: 8upx;
		justify-content: center;
		text-align: center;
		border: 1px solid #dc7004;
		color: #FFFFFF;
	}
</style>