update

.gitignore

@@ -5,3 +5,4 @@ unpackage/
 wxcomponents/**/*.vue
 wxcomponents/**/*.css
 .hbuilderx/
+.idea/

components/catalogue/catalogue.vue

@@ -0,0 +1,177 @@
+<template>
+	<uni-popup ref="popupRef" :mask-background-color="popup_background_color">
+		<uni-card :is-shadow="false" class="card-container">
+			<template #title>
+				<!-- 章节目录区域 -->
+				<view class="catalogue-custom-title">
+					<!-- 自定义标题区域 -->
+					<text></text>
+					<uni-icons type="closeempty" size="16" @click="handleClose"></uni-icons>
+				</view>
+			</template>
+			<!-- 目录区域 -->
+			<uni-collapse v-model="activeCollapse" class="collapse-container" accordion>
+				<uni-collapse-item title-border="none" :border="false" v-for="(item,index) in list">
+					<template v-slot:title>
+						<view class="title-layout">
+							<view @click.stop="handleSelectZhang(item)" class="text-container">
+								<uni-badge class="uni-badge-left-margin" :text="index+1" type="primary" />
+								<!-- 章名 -->
+								<text class="text-white">{{item.zhangName}}</text>
+							</view>
+							<uni-icons :class="['right-icon']" @click="handleExpand" type="locked-filled" size="16" style="justify-self: flex-end;"></uni-icons>
+						</view>
+					</template>
+					<view class="content">
+						<view v-for="(jie,cindex) in item.jieList">
+							<text class="jie-index">{{`${index+1}.${cindex+1}`}}</text>
+							<text class="text">{{jie.jieName}}</text>
+						</view>
+					</view>
+				</uni-collapse-item>
+			</uni-collapse>
+		</uni-card>
+	</uni-popup>
+</template>
+
+<script setup>
+	import {
+		useCatalogue
+	} from './useCatalogue';
+	import {
+		ref
+	} from "vue";
+	import {toast} from "@/utils/common.js"
+	
+	const $emit = defineEmits(['change-zhang'])
+	
+	
+	const {
+		getCatalogue,
+	} = useCatalogue();
+	const popupRef = ref(null); // 索引
+	const list = ref([]); // 章节
+	const activeCollapse = ref('');
+	
+	const popup_background_color = `rgba(0,0,0,0.2)`; // 【弹出框模态层背景颜色】
+
+
+	/**
+	 * @summary 展示弹窗 暴露函数
+	 */
+	async function showPopup() {
+		const  [err, data] = await getCatalogue();
+		console.log('ddd',data);
+		if (err) {
+			toast("章节目录数据获取失败");
+			return;
+		}
+		refreshCatalogue(data);
+		handleShow();
+	}
+	
+	/**
+	 * @param([]) 章节赋值
+	 */
+	function refreshCatalogue(data) {
+		list.value = data;
+	}
+	
+	/**
+	 * @summary 展示目录弹窗
+	 */
+	function handleShow() {
+		popupRef.value.open('center');
+	}
+
+	/**
+	 * @summary 关闭目录弹窗
+	 */
+	function handleClose() {
+		popupRef.value.close();
+	}
+
+	/**
+	 * @summary 选中
+	 * @param({zhangId:string}) data
+	 */ 
+	function handleSelectZhang(data) {
+		$emit('change-zhang', Object.assign({},data));
+		handleClose();
+	}
+
+	function handleExpand() {
+		console.log('zhankai')
+	}
+
+	defineExpose({
+		showPopup
+	})
+</script>
+
+<style lang="scss" scoped>
+	.title-layout {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 10px
+	}
+
+	.child-item {
+		padding: 10px;
+	}
+
+	// 章节目录Card
+	.card-container {
+		background-color: rgba(0, 0, 0, 0.2); // 【弹出框 背景颜色】
+		min-width: 300px;
+	}
+
+	// 目录区域 
+	::v-deep .uni-card__content {
+		padding: 0 !important;
+		margin: 10px 0;
+		background-color: rgba(0, 0, 0, 0.5);  // 【弹出框 内容区域背景颜色】
+		border-radius: 4px;
+	}
+	// 目录文字 颜色调整
+	.text-white {
+		color: #fff; // 【课件 章文字颜色】
+	}
+
+	// 章节目录区域 标题
+	.catalogue-custom-title {
+		display: flex;
+		justify-content: space-between;
+		height: 40px;
+		line-height: 40px;
+		margin-top: 10px;
+		background-color: #fff; // 【弹出 框 标题背景 待替换成背景图】
+
+		border-top-left-radius: 4px;
+		border-top-right-radius: 4px;
+	}
+	
+	// 章文本区域
+	.text-container {
+		width: 100%;
+	}
+	
+	.collapse-container {
+		background-color: transparent;  // 【弹出框 内容区域背景颜色】
+	}
+	
+	::v-deep .uni-collapse-item__wrap {
+		background-color: transparent;  // 【弹出框 内容区域背景颜色】
+	}
+	
+	::v-deep .uni-collapse-item__wrap-content {
+		color: #fff; // 【课件 章文字颜色】
+		line-height: 1.5;
+		padding: 5px 10px;
+	}
+	
+	.jie-index {
+		margin-right: 5px;
+	}
+</style>

components/catalogue/useCatalogue.js

@@ -0,0 +1,50 @@
+import {
+	reactive,
+	ref,
+	toRefs
+} from "vue";
+import {
+	onLoad
+} from '@dcloudio/uni-app'
+import request from "@/utils/request.js"
+import {catchError} from "@/utils/common.js"
+
+export function useCatalogue() {
+	const data = reactive({
+		xueqi: null,
+		nianji: null
+	})
+
+	onLoad((options = {}) => {
+		const {
+			xueqi,
+			nianji
+		} = options;
+		data.nianji = nianji;
+		data.xueqi = xueqi;
+	})
+
+
+	function httpGetCatalogue() {
+		return request({
+			url: "/common/zhangjie/list",
+			method: "POST",
+			data: {
+				nianji: +data.nianji,
+				xueqi: +data.xueqi
+			}
+		})
+	}
+
+	async function getCatalogue() {
+		return await catchError(httpGetCatalogue());
+	}
+
+	return {
+		...toRefs(data),
+
+		// 获取章节数据
+		getCatalogue
+	}
+}
+

config.js

@@ -1,6 +1,6 @@
 // 应用全局配置
 export default   {
-  baseUrl: 'https://kf179.mtavip.com/api',
+  baseUrl: 'https://kf1.mtavip.com/api',
   // baseUrl: 'http://localhost:8080',
   // 应用信息
   appInfo: {

pages.json

@@ -19,13 +19,6 @@
 				"navigationBarTitleText": "学习",
 				"navigationStyle": "custom"
 			}
-		},
-		{
-			"path": "pages/study/catalogue",
-			"style": {
-				"navigationBarTitleText": "目录",
-				"navigationStyle": "custom"
-			}
 		}
 	],
 	"tabBar": {

pages/selectGradesTerms/index.vue

@@ -1,133 +1,85 @@
 <template>
-	<view>
-		<view>请选择年级和学期</view>
-		<text>我们会根据您选择，为您匹配对应的学习内容</text>
-		<view class="grade-label">
-			年级
+	<view class="grades-terms-container">
+		<view class="content-container">
+			<view class="content-title">请选择年级和学期</view>
+			<text class="content-desc">我们会根据您选择，为您匹配对应的学习内容</text>
+			<view class="grade-label">
+				年级
+			</view>
+			<view class="grade-container">
+				<view v-for="item in nianji_list" :key="item.id" @click="handleSelectGrade(item)"
+					:class="['grade-item', {active: item.id == activeNianji}]">{{item.label}}</view>
+			</view>
+			<view class="term-label">
+				学期
+			</view>
+			<view class="term-container">
+				<view v-for="item in xueqi_list" :key="item.id" @click="handleSelectTerm(item)"
+					:class="['term-item',{active: item.id == activeXueqi}]">{{item.label}}</view>
+			</view>
+			<view class="under-line"></view>
+			<button class="confirm-btn" @click="handleConfirm">确定</button>
 		</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
-	})
+		useSelectGrade
+	} from './useSelectGrade';
+
+	const {
+		nianji_list,
+		xueqi_list,
+		activeNianji,
+		activeXueqi,
+		handleConfirm
+	} = useSelectGrade()
 
 	function handleSelectGrade(item) {
-		data.activeGrade = item.id;
+		activeNianji.value = 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}`
-		})
+		activeXueqi.value = item.id;
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	.active {
+		// 选中状态
 		color: red
 	}
+
 	.grade-container {
 		display: flex;
 		flex-wrap: wrap;
 	}
+
 	.grade-item {
-		flex:1;
+		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;
+		flex: 1;
 		min-width: 50%;
 		text-align: center;
 		padding: 10px;
 	}
+
 	.term-label {
 		text-align: center;
 		padding: 10px;

pages/selectGradesTerms/useSelectGrade.js

@@ -0,0 +1,65 @@
+import { reactive, toRefs } from "vue";
+import { nianji_list, xueqi_list } from "@/utils/constant.js";
+import { onLoad } from "@dcloudio/uni-app";
+
+export function useSelectGrade() {
+  const data = reactive({
+    activeNianji: null, // 当前年级
+    activeXueqi: null, // 当前学期
+  });
+
+  onLoad((options) => {
+    const { nianji, xueqi } = options;
+    data.activeNianji = nianji;
+    data.activeXueqi = xueqi;
+  });
+
+  // 选择 年级+学期
+  function handleConfirm() {
+    if (!data.activeNianji) {
+      uni.showToast({
+        title: "请选择年级",
+        duration: 2000,
+      });
+      return;
+    }
+
+    if (!data.activeXueqi) {
+      uni.showToast({
+        title: "请选择学期",
+        duration: 2000,
+      });
+      return;
+    }
+
+    const text1 = nianji_list.find(
+      (item) => item.id == data.activeNianji
+    ).label;
+    const text2 = xueqi_list.find((item) => item.id == data.activeXueqi).label;
+
+    const options = {
+      nianji: data.activeNianji,
+      xueqi: data.activeXueqi,
+      text: text1 + text2,
+    };
+
+    goDAOToStudy(options);
+  }
+
+  // 跳转 岛 学习
+  function goDAOToStudy({ nianji, xueqi, text }) {
+    uni.navigateTo({
+      url: `/pages/study/index?nianji=${nianji}&xueqi=${xueqi}&text=${text}`,
+    });
+  }
+
+  return {
+    // 变量
+    nianji_list,
+    xueqi_list,
+    ...toRefs(data),
+
+    // 方法
+    handleConfirm, // 选择年级+学期
+  };
+}

pages/study/catalogue.vue

@@ -1,104 +0,0 @@
-<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

@@ -1,11 +1,12 @@
 <template>
 	<view>
-		<view>{{gradeTerm.text}}</view>
+		<view @click="goBack">{{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">
+			<uni-button @click="handleCheckCatalogue">go catalogue</uni-button>
+			<navigator :url="`/pages/study/catalogue?gradeId=1&termId=1&text=一年级上册`" hover-class="navigator-hover">
 				<button type="default">学习计划</button>
 			</navigator>
 			<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
@@ -18,22 +19,30 @@
 				<button type="default">我的</button>
 			</navigator>
 		</view>
-		
+
 		<!-- 蛋 -->
 		<view class="ezy-popup" >蛋</view>
+
+
+		<catalogue ref="catalogueRef" @change-zhang="handleChangeZhang"></catalogue>
 	</view>
 </template>
 
 <script setup>
 	import {
-		useRoute
-	} from "vue-router";
-	import {
-		reactive
+		reactive,ref,onMounted
 	} from "vue";
+	import { onLoad,onReady } from '@dcloudio/uni-app';
+	import catalogue from "@/components/catalogue/catalogue.vue";
+
 
-	const route = useRoute();
-	const gradeTerm = route.query;
+	const catalogueRef = ref(null);
+
+	const gradeTerm = ref('')
+
+	onLoad((options) => {
+		gradeTerm.value = options;
+	})
 
 	const data = reactive({
 		list: [{
@@ -55,7 +64,17 @@
 		]
 	})
 
-	console.log(route)
+	function handleChangeZhang(data) {
+		console.log('章:', data);
+	}
+
+	function handleCheckCatalogue() {
+		catalogueRef.value.showPopup();
+	}
+
+	function goBack() {
+		uni.navigateBack()
+	}
 </script>
 
 <style>

utils/common.js

@@ -35,4 +35,19 @@ export function tansParams(params) {
   let result = ''
   // FIXME   拼接参数 
   return result
-}
+}
+
+/**
+ * @summary 获取请求异常与正常返回
+ * @param {Object} promise
+ */
+export function catchError(promise) {
+	return new Promise((resolve,reject) => {
+		promise.then(data => {
+			console.log('response =>',data.data)
+			resolve([undefined, data.data]) 
+		}).catch(err => {
+			reject([err]) 
+		})
+	})
+}

utils/constant.js

@@ -4,5 +4,42 @@ const constant = {
    roles: 'vuex_roles',
    permissions: 'vuex_permissions'
  }
+ 
+ export const nianji_list = [{
+		label: '一年级',
+		id: 1
+	},
+	{
+		label: '二年级',
+		id: 2
+	},
+	{
+		label: '三年级',
+		id: 3
+	},
+	{
+		label: '四年级',
+		id: 4
+	},
+	{
+		label: '五年级',
+		id: 5
+	},
+	{
+		label: '六年级',
+		id: 6
+	},
+];
+ 
+export const xueqi_list = [{
+		label: '上册',
+		id: 1
+	},
+	{
+		label: '下册',
+		id: 2
+	}
+]
+ 
 
  export default constant