wxy提交

pages/selectGradesTerms/index.vue

@@ -0,0 +1,135 @@
+<template>
+	<view>
+		<view>请选择年级和学期</view>
+		<text>我们会根据您选择，为您匹配对应的学习内容</text>
+		<view class="grade-label">
+			年级
+		</view>
+		<view class="grade-container">
+			<view v-for="item in data.nianji_list" :key="item.id" @click="handleSelectGrade(item)" :class="['grade-item', {active: item.id === data.activeGrade}]">{{item.label}}</view>
+		</view>
+		<view class="term-label">
+			学期
+		</view>
+		<view class="term-container">
+			<view v-for="item in data.xueqi_list" :key="item.id" @click="handleSelectTerm(item)"  :class="['term-item',{active: item.id === data.activeTerm}]">{{item.label}}</view>
+		</view>
+		<button @click="handleSelect">确定</button>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive
+	} from "vue"
+	
+	
+	const data = reactive({
+		nianji_list: [{
+				label: '一年级',
+				id: 1
+			},
+			{
+				label: '二年级',
+				id: 2
+			},
+			{
+				label: '三年级',
+				id: 3
+			},
+			{
+				label: '四年级',
+				id: 4
+			},
+			{
+				label: '五年级',
+				id: 5
+			},
+			{
+				label: '六年级',
+				id: 6
+			},
+		],
+		xueqi_list: [{
+				label: '上册',
+				id: 1
+			},
+			{
+				label: '下册',
+				id: 2
+			}
+		],
+		activeGrade: null,
+		activeTerm: null
+	})
+
+	function handleSelectGrade(item) {
+		data.activeGrade = item.id;
+	}
+	function handleSelectTerm(item) {
+			data.activeTerm= item.id;
+	}
+	
+	function handleSelect() {
+		if (!data.activeGrade) {
+			uni.showToast({
+					title: '请选择年级',
+					duration: 2000
+			})
+			return;
+		}
+		if (!data.activeTerm) {
+			uni.showToast({
+					title: '请选择学期',
+					duration: 2000
+			})
+			return;
+		}
+		
+		const text1 = data.nianji_list.find(item => item.id == data.activeGrade).label;
+		const text2 = data.xueqi_list.find(item => item.id == data.activeTerm).label;
+		const options = {
+			grade: data.activeGrade,
+			term: data.activeTerm,
+		}
+		uni.navigateTo({
+			url: `/pages/study/index?gradeId=${options.grade}&termId=${options.term}&text=${text1}${text2}`
+		})
+	}
+</script>
+
+<style lang="scss">
+	.active {
+		color: red
+	}
+	.grade-container {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.grade-item {
+		flex:1;
+		min-width: 50%;
+		text-align: center;
+		padding: 10px;
+	}
+	.grade-label {
+		text-align: center;
+		padding: 10px;
+	}
+	
+	.term-container {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.term-item {
+		flex:1;
+		min-width: 50%;
+		text-align: center;
+		padding: 10px;
+	}
+	.term-label {
+		text-align: center;
+		padding: 10px;
+	}
+</style>

pages/study/catalogue.vue

@@ -0,0 +1,104 @@
+<template>
+	<view>
+		<view>
+			<uni-icons type="left" size="30" @click="handleBack"></uni-icons>
+		</view>
+		<view>
+			<uni-collapse ref="collapse" v-model="value">
+				<uni-collapse-item :title="item.label" v-for="(item,index) in list" class="parent-item">
+					<template v-slot:title>
+						<uni-list>
+							<view class="title-layout">
+								<view>
+									<uni-badge class="uni-badge-left-margin" :text="index+1" type="primary" />
+									<text>{{item.label}}</text>
+								</view>
+								<uni-icons type="locked-filled" size="16" style="justify-self: flex-end;"></uni-icons>
+							</view>
+						</uni-list>
+					</template>
+					<view class="content">
+						<view class="text child-item" v-for="(citem,cIndex) in item.children">{{index+1}}.{{cIndex+1}}
+							{{citem.label}}</view>
+					</view>
+				</uni-collapse-item>
+			</uni-collapse>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from "vue";
+	
+	const activeCollapse = ref('');
+
+	const list = [{
+			label: '时、分、秒',
+			lock: false,
+			children: [],
+		},
+		{
+			label: '测量',
+			lock: false,
+			children: [{
+					label: '长度中的隐含条件',
+					index: 1,
+				},
+				{
+					label: '解决重叠问题',
+					index: 2,
+				},
+				{
+					label: '列表法解决方案问题',
+					index: 3,
+				},
+				{
+					label: '单元测试',
+					index: 4,
+				},
+			]
+		},
+		{
+			label: '万以内的加法和减法(一)',
+			lock: false,
+			children: []
+		},
+		{
+			label: '万以内的加法和减法(二)',
+			lock: false,
+			children: []
+		},
+		{
+			label: '倍的人事',
+			lock: false,
+			children: []
+		},
+		{
+			label: '多位数乘一位数',
+			lock: false,
+			children: []
+		}
+	]
+
+	function handleBack() {
+		uni.navigateBack();
+	}
+
+</script>
+
+<style lang="scss" scoped>
+	.parent-item {
+		.title-layout {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 10px
+		}
+	}
+
+	.child-item {
+		padding: 10px;
+	}
+</style>

pages/study/index.vue

@@ -0,0 +1,60 @@
+<template>
+	<view>
+		<view>{{gradeTerm.text}}</view>
+		<view>
+			<view v-for="item in data.list" :key="item.index"> {{item.index}} {{item.label}} </view>
+		</view>
+		<view>
+			<navigator url="/pages/study/catalogue" hover-class="navigator-hover">
+				<button type="default">学习计划</button>
+			</navigator>
+			<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
+				<button type="default">成长</button>
+			</navigator>
+			<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
+				<button type="default">伙伴</button>
+			</navigator>
+			<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
+				<button type="default">我的</button>
+			</navigator>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		useRoute
+	} from "vue-router";
+	import {
+		reactive
+	} from "vue";
+
+	const route = useRoute();
+	const gradeTerm = route.query;
+
+	const data = reactive({
+		list: [{
+				label: '长度中的隐含条件问题',
+				id: 1,
+			},
+			{
+				label: '解决重叠问题',
+				id: 2,
+			},
+			{
+				label: '列表法解决方案问题',
+				id: 3,
+			},
+			{
+				label: '真题测试',
+				id: 4,
+			},
+		]
+	})
+
+	console.log(route)
+</script>
+
+<style>
+
+</style>