edu-uniapp/pages/index/test.vue

<template>
	<view class="content">
		<view class="title">
			阶段
		</view>
		<view>
			<view class="title_name on"
				>
				sdsdd
			</view>
		</view>
		
		<view class="title">
			年级
		</view>
		<view>
			<view 
				class="title_name ">
				年级
			</view>
		</view>
		
		<view class="title">
			科目
		</view>
		<view>
			<view class="title_name">
			   科目
			</view>
			<view class="title_name">
			   科目
			</view>
			<view class="title_name">
			   科目
			</view>
		</view>
		
		<view class="title">
			知识点
		</view>
		<view>
			<ly-tree 
			  :tree-data="languagePointsList" 
				:ready="ready"
				:show-checkbox="true"
				node-key="id" 
				@node-expand="handleNodeExpand" 
				@node-click="handleNodeClick">
			</ly-tree>
		</view>
		
		<view class="title">
			已选择知识点
		</view>
		
		<view>
			<view class="title_name">知识点1</view>
			<view class="title_name">知识点2</view>
		</view>
		
		<view class="uni-padding-wrap">
		           <view class="uni-title">默认样式</view>
		           <view>
		               <label class="radio"><radio value="r1" checked="true" />选中</label>
		               <label class="radio"><radio value="r2" />未选中</label>
		           </view>
		       </view>
		
		<view class="ai_btn">
			<button
			 class="ai_btn_item"
			 type="warn">取消</button>
			 
			<button 
			 type="primary"
			 @click="createCtPaper"
			 class="ai_btn_item">确定</button>
		</view>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	import { mapGetters, mapState } from 'vuex'
	export default {
		components: {LyTree},
		data() {
			return {
			   selectSubjectId: 0,
			   selectSchoolTypeId: 0,
			   selectGradeTypeId: 0,
			   ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
			   subjectList: [],
			   languagePointsList: [],
			   schoolTypeList: [],
			   gradeTypeList: [],
			   selectLanguagePointsList: [], //选中的知识点集合
			   languagePointsList: []
			}
		},
		
		onLoad() {
			// this.getData()
			
			// 模拟异步请求
			        setTimeout(() => {
			            this.languagePointsList = [{
			                id: 1,
			                label: '一级 1',
			                children: [{
			                    id: 11,
			                    label: '二级 1-1',
			                    children: [{
			                        id: 111,
			                        label: '三级 1-1-1'
			                    }]
			                }]
			            }, {
			                id: 2,
			                label: '一级 2',
			                children: [{
			                    id: 21,
			                    label: '二级 2-1',
			                    children: [{
			                        id: 211,
			                        label: '三级 2-1-1'
			                    }]
			                }, {
			                    id: 22,
			                    label: '二级 2-2',
			                    children: [{
			                        id: 221,
			                        label: '三级 2-2-1'
			                    }]
			                }]
			            }, {
			                id: 3,
			                label: '一级 3',
			                children: [{
			                    id: 31,
			                    label: '二级 3-1',
			                    children: [{
			                        id: 311,
			                        label: '三级 3-1-1'
			                    }]
			                }, {
			                    id: 32,
			                    label: '二级 3-2',
			                    children: [{
			                        id: 321,
			                        label: '三级 3-2-1'
			                    }]
			                }]
			            }];
			
			            this.ready = true;
			        }, 2000);
		},
			
		methods: {
			
			selectSchoolType (item) {
				
			},
			
			getData () {
				this.$httpApi.get('/front/userInfo/getStudentInfo', {})
				 .then(res => {
					let result = res.data.data
					this.schoolTypeList = result.schoolTypeList
					this.gradeTypeList = result.gradeTypeList
					this.selectSchoolTypeId = result.selectSchoolTypeId
					this.selectGradeTypeId = result.selectGradeTypeId
					this.subjectList = result.subjectList
					this.selectSubjectId = result.selectSubjectId
				})
			},
			
			 // 加载科目知识点
		    loadLanguagePointsList () {
			  this.$httpApi.get(this.$httpApi.httpUrl('/front/languagePoints'), {
			    params: {
				  gradeType: this.selectGradeTypeId,
				  subjectId: this.selectSubjectId
			    }
			  }).then(response => {
			    this.languagePointsList = response.data.data
			  })
		    },
			
			createCtPaper () {
				if (this.selectGradeTypeId === 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择年级'
					});
				    return false
				}
				
				if (this.selectSubjectId === 0) {
				   uni.showToast({
				  	  icon: 'none',
				  	  title: '请选择科目'
				    });	
				    return false
				}
				
				uni.navigateTo({
				    url: 'result'
				})
			},
			
			generatePaper () {
				let form = {
				  subjectId: this.selectSubjectId,
				  schoolType: this.selectSchoolTypeId,
				  gradeType: this.selectGradeTypeId,
				  languagePointsList: this.selectLanguagePointsList
				}
				this.$httpApi.post(this.$httpApi.httpUrl('/front/aiCt/createAiCtPaper'), form).then(response => {
				  if (response.data.code === 1) {
					let paperInfo = response.data.data
					paperInfo.languagePointsList = this.selectLanguagePointsList
					this.$store.commit('paper/updatePaperInfo', paperInfo)
				  } else {
					loading.close();
					this.$message.error(response.data.message)
				  }
				})
			},
			
			// uni-app中emit触发的方法只能接受一个参数，所以会回传一个对象，打印对象即可见到其中的内容
			handleNodeClick(obj) {
				console.log('handleNodeClick', JSON.stringify(obj));
			},
			
			handleNodeExpand(obj) {
				console.log('handleNodeExpand', JSON.stringify(obj));
			}
		}
	}
</script>

<style lang="scss">
   .content {
	   padding: 10px;
	   margin: 2%;
	   width: 90%;
	   height: 90%;
	   display: flex;
	   flex-direction: column;
	   .on {
			background: #409eff;
			color: #fff;
			border: 1px solid #409eff;
        }	
		.on:hover {
			background: #409eff;
			color: #fff;
			border: 1px solid #409eff;
		}
   }
   
   .title_name {
	   cursor: pointer;
	   color: #cacaca;
	   margin: 10px 5px 10px 10px;
	   padding: 0px 5px 0px 5px;
	   display: block;
	   min-width: 65px;
	   line-height: 30px;
	   float: left;
	   text-align: center;
	   border: 1px solid #d0d0d0;
   }
   .ai_btn {
	   display: inline-block;
	   float: right;
	   line-height: 40px;
	   position: relative;
	   left: 10%;
   }
   .ai_btn_item {
	   width: 100px;
	   float: left;
	   line-height: 50px;
	   margin-left: 20px;
	   margin-top: 20px;
   }
</style>