调整资源对应的组件
This commit is contained in:
parent
275aacce23
commit
0b487b6d68
@ -115,4 +115,16 @@ export const xsJzListByXsIdApi = async (params: any) => {
|
|||||||
return await get("/api/jz/getListByXsId", params);
|
return await get("/api/jz/getListByXsId", params);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 教学资源树形
|
||||||
|
export const typesFindTreeApi = async () => {
|
||||||
|
return await get("/api/types/qryTreeReturn");
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取资源分页
|
||||||
|
export const resourcesFindPageApi = async (params: any) => {
|
||||||
|
return await get("/api/resources/findPage", params);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<view class="flex-col-center">
|
<view class="flex-col-center">
|
||||||
<view v-if="showNoDataImage" style="width: 300rpx;height: 300rpx">
|
<view style="width: 300rpx;height: 300rpx">
|
||||||
<image src="@/static/system/currency/zwjl.png" class="wh-full"/>
|
<image src="@/static/system/currency/zwjl.png" class="wh-full"/>
|
||||||
</view>
|
</view>
|
||||||
<view class="color-9">暂无数据...</view>
|
<view class="color-9">暂无数据...</view>
|
||||||
@ -29,10 +29,10 @@
|
|||||||
</z-paging>
|
</z-paging>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {reactive, watch, computed} from "vue";
|
import {reactive} from "vue";
|
||||||
import type {LayoutOptions, PagingRefInterface} from "@/components/BasicListLayout/type/useLayout";
|
import type {LayoutOptions, PagingRefInterface} from "@/components/BasicListLayout/type/useLayout";
|
||||||
|
|
||||||
const dataList = ref([])
|
const dataList = ref<any>([])
|
||||||
const fixed = ref(false)
|
const fixed = ref(false)
|
||||||
const pagingRef = ref<PagingRefInterface | null>(null)
|
const pagingRef = ref<PagingRefInterface | null>(null)
|
||||||
|
|
||||||
@ -41,6 +41,7 @@ const config = {
|
|||||||
'loading-full-fixed': true,
|
'loading-full-fixed': true,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let componentProps = ref<any>({})
|
let componentProps = ref<any>({})
|
||||||
const emits = defineEmits(['register'])
|
const emits = defineEmits(['register'])
|
||||||
let props: LayoutOptions
|
let props: LayoutOptions
|
||||||
@ -48,7 +49,7 @@ const setProps = (propValue: LayoutOptions) => {
|
|||||||
componentProps.value = propValue.componentProps ? propValue.componentProps : {}
|
componentProps.value = propValue.componentProps ? propValue.componentProps : {}
|
||||||
props = reactive(propValue)
|
props = reactive(propValue)
|
||||||
}
|
}
|
||||||
emits('register', setProps, pagingRef, dataList)
|
emits('register', setProps, pagingRef)
|
||||||
|
|
||||||
async function query(pageNo: number, pageSize: number) {
|
async function query(pageNo: number, pageSize: number) {
|
||||||
if (props.query) {
|
if (props.query) {
|
||||||
@ -67,7 +68,4 @@ function changeSearch(e: string) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 控制暂无数据图片显示
|
|
||||||
const showNoDataImage = computed(() => dataList.value.length === 0)
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import {isFunction} from "lodash";
|
import {isFunction} from "lodash";
|
||||||
import {Ref, ref, nextTick} from "vue";
|
import {Ref} from "vue";
|
||||||
import {hideLoading, showLoading} from "@/utils/uniapp";
|
import {hideLoading, showLoading} from "@/utils/uniapp";
|
||||||
import type {
|
import type {
|
||||||
LayoutCallback,
|
LayoutCallback,
|
||||||
@ -13,46 +13,22 @@ import type {
|
|||||||
export function useLayout(options: LayoutOptions): UseLayoutInterfaceReturn {
|
export function useLayout(options: LayoutOptions): UseLayoutInterfaceReturn {
|
||||||
|
|
||||||
let methods: Ref<PagingRefInterface>
|
let methods: Ref<PagingRefInterface>
|
||||||
let dataListRef: Ref<any[]> | undefined
|
|
||||||
|
|
||||||
// 强制设置concat为false,使用完整数据模式
|
|
||||||
if (!options.componentProps) options.componentProps = {};
|
|
||||||
options.componentProps.concat = false;
|
|
||||||
|
|
||||||
// 用于维护所有已加载数据
|
|
||||||
const allData = ref<any[]>([]);
|
|
||||||
|
|
||||||
async function requestApi(pageNo: number, pageSize: number) {
|
async function requestApi(pageNo: number, pageSize: number) {
|
||||||
if (isFunction(options.api)) {
|
if (isFunction(options.api)) {
|
||||||
try {
|
try {
|
||||||
const result = await options.api(Object.assign({}, {
|
let params = Object.assign({}, {
|
||||||
pageNo: pageNo,
|
rows: pageSize,
|
||||||
pageSize: pageSize
|
page: pageNo
|
||||||
}, options.param))
|
}, options.param)
|
||||||
|
const result = await options.api(params)
|
||||||
await nextTick()
|
await nextTick()
|
||||||
if (methods.value) {
|
if (methods.value) {
|
||||||
let newList = result[options.resultKey || 'rows'] || [];
|
// @ts-ignore
|
||||||
if (pageNo === 1) {
|
await methods.value.complete(result[options.resultKey || 'rows'])
|
||||||
allData.value = [...newList];
|
|
||||||
if (dataListRef) dataListRef.value = allData.value;
|
|
||||||
} else {
|
|
||||||
// 合并去重
|
|
||||||
const map = new Map();
|
|
||||||
[...allData.value, ...newList].forEach(item => {
|
|
||||||
map.set(item.id, item);
|
|
||||||
});
|
|
||||||
allData.value = Array.from(map.values());
|
|
||||||
if (dataListRef) dataListRef.value = allData.value;
|
|
||||||
}
|
|
||||||
const hasMoreData = newList.length > 0;
|
|
||||||
if (!hasMoreData) {
|
|
||||||
await methods.value.completeByNoMore(allData.value as any, true);
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
await methods.value.complete(allData.value as any);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
console.log('err', err)
|
||||||
if (methods.value) {
|
if (methods.value) {
|
||||||
await methods.value.complete(false);
|
await methods.value.complete(false);
|
||||||
}
|
}
|
||||||
@ -64,9 +40,8 @@ export function useLayout(options: LayoutOptions): UseLayoutInterfaceReturn {
|
|||||||
options.query = requestApi
|
options.query = requestApi
|
||||||
}
|
}
|
||||||
|
|
||||||
const register = (callback: LayoutCallback, pagingRef: Ref<PagingRefInterface>, listRef?: Ref<any[]>) => {
|
const register = (callback: LayoutCallback, pagingRef: Ref<PagingRefInterface>) => {
|
||||||
methods = pagingRef
|
methods = pagingRef
|
||||||
dataListRef = listRef
|
|
||||||
callback(options)
|
callback(options)
|
||||||
}
|
}
|
||||||
return [register,
|
return [register,
|
||||||
|
|||||||
@ -16,7 +16,6 @@ interface LayoutOptions {
|
|||||||
createdReload?: boolean //组件created时立即触发reload(可解决一些情况下先看到页面再看到loading的问题),auto为true时有效。为否时将在mounted+nextTick后触发reload
|
createdReload?: boolean //组件created时立即触发reload(可解决一些情况下先看到页面再看到loading的问题),auto为true时有效。为否时将在mounted+nextTick后触发reload
|
||||||
autoCleanListWhenReload?: boolean //reload时立即自动清空原list,若立即自动清空,则在reload之后、请求回调之前页面是空白的
|
autoCleanListWhenReload?: boolean //reload时立即自动清空原list,若立即自动清空,则在reload之后、请求回调之前页面是空白的
|
||||||
fixed?: boolean //z-paging是否使用fixed布局,若使用fixed布局,则z-paging的父view无需固定高度,z-paging高度默认铺满屏幕,页面中的view请放在z-paging标签内,需要固定在顶部的view使用slot="top"包住,需要固定在底部的view使用slot="bottom"包住。
|
fixed?: boolean //z-paging是否使用fixed布局,若使用fixed布局,则z-paging的父view无需固定高度,z-paging高度默认铺满屏幕,页面中的view请放在z-paging标签内,需要固定在顶部的view使用slot="top"包住,需要固定在底部的view使用slot="bottom"包住。
|
||||||
concat?: boolean //自动拼接complete中传过来的数组
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -79,7 +79,7 @@ export default {
|
|||||||
minDate: {
|
minDate: {
|
||||||
type: Number,
|
type: Number,
|
||||||
// 最小默认值为前10年
|
// 最小默认值为前10年
|
||||||
default: new Date(new Date().getFullYear() - 80, 0, 1).getTime()
|
default: new Date(new Date().getFullYear() - 10, 0, 1).getTime()
|
||||||
},
|
},
|
||||||
// 可选的最小小时,仅mode=time有效
|
// 可选的最小小时,仅mode=time有效
|
||||||
minHour: {
|
minHour: {
|
||||||
|
|||||||
@ -407,7 +407,7 @@ export default {
|
|||||||
background: #FFF;
|
background: #FFF;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
height: 90vh;
|
height: 88vh;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
// pointer-events:none;
|
// pointer-events:none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -170,10 +170,10 @@ export default {
|
|||||||
parentArr = [...parents]
|
parentArr = [...parents]
|
||||||
delete parentArr.children
|
delete parentArr.children
|
||||||
parentid.push(item[this.idKey]);
|
parentid.push(item[this.idKey]);
|
||||||
// 保留所有原始字段,而不仅仅是 key 和 title
|
parentArr.push({
|
||||||
const parentItem = { ...item };
|
[this.idKey]: item[this.idKey],
|
||||||
delete parentItem.children; // 移除 children 字段避免循环引用
|
[this.rangeKey]: item[this.rangeKey]
|
||||||
parentArr.push(parentItem);
|
})
|
||||||
this._renderTreeList(item.children, rank + 1, parentid, parentArr);
|
this._renderTreeList(item.children, rank + 1, parentid, parentArr);
|
||||||
} else {
|
} else {
|
||||||
this.treeList[this.treeList.length - 1].lastRank = true;
|
this.treeList[this.treeList.length - 1].lastRank = true;
|
||||||
|
|||||||
@ -4735,6 +4735,7 @@ function drawYAxis(series, opts, config, context) {
|
|||||||
let textAlign = yData.textAlign || "right";
|
let textAlign = yData.textAlign || "right";
|
||||||
//画Y轴刻度及文案
|
//画Y轴刻度及文案
|
||||||
rangesFormat.forEach(function(item, index) {
|
rangesFormat.forEach(function(item, index) {
|
||||||
|
var label = opts.yAxis.format(item);
|
||||||
var pos = points[index];
|
var pos = points[index];
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.setFontSize(yAxisFontSize);
|
context.setFontSize(yAxisFontSize);
|
||||||
@ -4764,7 +4765,7 @@ function drawYAxis(series, opts, config, context) {
|
|||||||
context.setTextAlign('center');
|
context.setTextAlign('center');
|
||||||
tmpstrat = tStartLeft - yAxisWidth.width / 2
|
tmpstrat = tStartLeft - yAxisWidth.width / 2
|
||||||
}
|
}
|
||||||
context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);
|
context.fillText(String(label), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);
|
||||||
|
|
||||||
} else if (yAxisWidth.position == 'right') {
|
} else if (yAxisWidth.position == 'right') {
|
||||||
//画刻度线
|
//画刻度线
|
||||||
@ -4786,7 +4787,7 @@ function drawYAxis(series, opts, config, context) {
|
|||||||
context.setTextAlign('center');
|
context.setTextAlign('center');
|
||||||
tmpstrat = tStartRight + yAxisWidth.width / 2
|
tmpstrat = tStartRight + yAxisWidth.width / 2
|
||||||
}
|
}
|
||||||
context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);
|
context.fillText(String(label), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);
|
||||||
} else if (yAxisWidth.position == 'center') {
|
} else if (yAxisWidth.position == 'center') {
|
||||||
//画刻度线
|
//画刻度线
|
||||||
if (yData.calibration == true) {
|
if (yData.calibration == true) {
|
||||||
@ -4808,7 +4809,7 @@ function drawYAxis(series, opts, config, context) {
|
|||||||
context.setTextAlign('center');
|
context.setTextAlign('center');
|
||||||
tmpstrat = tStartCenter - yAxisWidth.width / 2
|
tmpstrat = tStartCenter - yAxisWidth.width / 2
|
||||||
}
|
}
|
||||||
context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);
|
context.fillText(String(label), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);
|
||||||
}
|
}
|
||||||
context.closePath();
|
context.closePath();
|
||||||
context.stroke();
|
context.stroke();
|
||||||
@ -7016,7 +7017,10 @@ var uCharts = function uCharts(opts) {
|
|||||||
dashLength: 4 * opts.pix,
|
dashLength: 4 * opts.pix,
|
||||||
gridColor: '#cccccc',
|
gridColor: '#cccccc',
|
||||||
padding: 10,
|
padding: 10,
|
||||||
fontColor: '#666666'
|
fontColor: '#666666',
|
||||||
|
format: function format(val) {
|
||||||
|
return val;
|
||||||
|
}
|
||||||
}, opts.yAxis);
|
}, opts.yAxis);
|
||||||
opts.xAxis = assign({}, {
|
opts.xAxis = assign({}, {
|
||||||
rotateLabel: false,
|
rotateLabel: false,
|
||||||
|
|||||||
@ -1,214 +1,116 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<BasicLayout>
|
||||||
<view class="teaching-resource-page">
|
<view class="teaching-resource-page">
|
||||||
<!-- 主要内容区域 -->
|
<!-- 主要内容区域 -->
|
||||||
<view class="main-content">
|
<view class="main-content">
|
||||||
<!-- 左侧课程列表 -->
|
|
||||||
<view class="left-panel">
|
|
||||||
<scroll-view class="subject-list" scroll-y="true" show-scrollbar="false">
|
|
||||||
<view
|
|
||||||
class="subject-item"
|
|
||||||
v-for="(subject, index) in subjectList"
|
|
||||||
:key="subject.id"
|
|
||||||
:class="{ active: selectedSubjectIndex === index }"
|
|
||||||
@click="selectSubject(index)"
|
|
||||||
>
|
|
||||||
<text class="subject-name">{{ subject.name }}</text>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 右侧内容区域 -->
|
<!-- 右侧内容区域 -->
|
||||||
<view class="right-panel">
|
<view class="right-panel">
|
||||||
|
<view class="resource-section">
|
||||||
|
<view class="section-title">科目</view>
|
||||||
|
<view class="type-grid">
|
||||||
|
<view class="type-item" :class="{ active: curType && curType.key === type.key }" v-for="(type, index) in typeTree" :key="index"
|
||||||
|
@click="selectType(type)">
|
||||||
|
<text class="type-text">{{ type.title }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="resource-section" v-if="curType && curType.children && curType.children.length > 0">
|
||||||
|
<view class="section-title">年级</view>
|
||||||
|
<view class="type-grid">
|
||||||
|
<view class="type-item" :class="{ active: curNj && curNj.key === type.key }" v-for="(type, index) in curType.children" :key="index"
|
||||||
|
@click="selectNj(type)">
|
||||||
|
<text class="type-text">{{ type.title }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="resource-section" v-if="curNj && curNj.children && curNj.children.length > 0">
|
||||||
|
<view class="section-title">上下册</view>
|
||||||
|
<view class="type-grid">
|
||||||
|
<view class="type-item" :class="{ active: curCe && curCe.key === type.key }" v-for="(type, index) in curNj.children" :key="index"
|
||||||
|
@click="selectCe(type)">
|
||||||
|
<text class="type-text">{{ type.title }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<!-- 资源类型 -->
|
<!-- 资源类型 -->
|
||||||
<view class="resource-section" v-if="currentSubject.resourceTypes && currentSubject.resourceTypes.length > 0">
|
<view class="resource-section">
|
||||||
<view class="section-title">资源类型</view>
|
<view class="section-title">资源类型</view>
|
||||||
<view class="type-grid">
|
<view class="type-grid">
|
||||||
<view
|
<view class="type-item" :class="{ active: curCategory && curCategory.key === type.key }" v-for="(type, index) in categoryList" :key="index"
|
||||||
class="type-item"
|
@click="selectCategory(type)">
|
||||||
v-for="(type, index) in currentSubject.resourceTypes"
|
<text class="type-text">{{ type.label }}</text>
|
||||||
:key="index"
|
|
||||||
@click="goToResourceList('type', type)"
|
|
||||||
>
|
|
||||||
<text class="type-text">{{ type }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 年级选择 -->
|
|
||||||
<view class="grade-section" v-if="currentSubject.grades && currentSubject.grades.length > 0">
|
|
||||||
<view class="section-title">年级</view>
|
|
||||||
<view class="grade-grid">
|
|
||||||
<view
|
|
||||||
class="grade-item"
|
|
||||||
v-for="(grade, index) in currentSubject.grades"
|
|
||||||
:key="index"
|
|
||||||
@click="goToResourceList('grade', grade)"
|
|
||||||
>
|
|
||||||
<text class="grade-text">{{ grade }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<template #bottom>
|
||||||
<!-- 空状态 -->
|
<view class="white-bg-color py-5">
|
||||||
<view class="empty-state" v-if="!currentSubject.name">
|
<view class="flex-row items-center pb-10 pt-5">
|
||||||
<text class="empty-text">请从左侧选择学科</text>
|
<u-button text="查询" class="mx-15" type="primary" @click="goTo"/>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
</BasicLayout>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { reactive, ref, computed, onMounted } from "vue";
|
import { typesFindTreeApi } from "@/api/base/server";
|
||||||
|
import { useDataStore } from "@/store/modules/data";
|
||||||
|
const { setData } = useDataStore();
|
||||||
|
|
||||||
// 定义数据接口
|
const typeTree = ref<any>([]);
|
||||||
interface Subject {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
resourceTypes?: string[];
|
|
||||||
grades?: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 响应式数据
|
const categoryList = ref([
|
||||||
const selectedSubjectIndex = ref(1); // 默认选中数学
|
{ key: '', label: '不限' },
|
||||||
|
{ key: '1', label: '课件' },
|
||||||
// 模拟课程数据
|
{ key: '2', label: '教案' },
|
||||||
const subjectList = reactive<Subject[]>([
|
{ key: '3', label: '学案' },
|
||||||
{
|
{ key: '4', label: '作业' },
|
||||||
id: 'chinese',
|
{ key: '5', label: '试卷' },
|
||||||
name: '语文',
|
{ key: '6', label: '教材' },
|
||||||
description: '语言文字运用与文学鉴赏',
|
{ key: '7', label: '示范课' },
|
||||||
resourceTypes: ['课件', '教案', '学案', '作业', '试卷'],
|
{ key: '8', label: '音视频合集' }
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'math',
|
|
||||||
name: '数学',
|
|
||||||
description: '数学思维与逻辑推理',
|
|
||||||
resourceTypes: ['题集', '素材', '备课综合'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'english',
|
|
||||||
name: '英语',
|
|
||||||
description: '英语听说读写综合能力',
|
|
||||||
resourceTypes: ['课件', '音频', '视频', '练习'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'moral',
|
|
||||||
name: '道德与法治',
|
|
||||||
description: '品德修养与法律意识',
|
|
||||||
resourceTypes: [],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'science',
|
|
||||||
name: '科学',
|
|
||||||
description: '科学探究与实验操作',
|
|
||||||
resourceTypes: ['实验', '课件', '视频'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'it',
|
|
||||||
name: '信息科技',
|
|
||||||
description: '信息技术与编程思维',
|
|
||||||
resourceTypes: ['软件', '教程', '项目'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'music',
|
|
||||||
name: '音乐',
|
|
||||||
description: '音乐欣赏与艺术表现',
|
|
||||||
resourceTypes: ['音频', '乐谱', '视频'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'art',
|
|
||||||
name: '美术',
|
|
||||||
description: '美术创作与艺术鉴赏',
|
|
||||||
resourceTypes: ['图片', '视频', '作品'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'pe',
|
|
||||||
name: '体育',
|
|
||||||
description: '体育运动与健康生活',
|
|
||||||
resourceTypes: ['视频', '规则', '训练'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'labor',
|
|
||||||
name: '劳动技术',
|
|
||||||
description: '劳动实践与技能培养',
|
|
||||||
resourceTypes: ['教程', '工具', '项目'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'expand',
|
|
||||||
name: '拓展',
|
|
||||||
description: '综合素质拓展活动',
|
|
||||||
resourceTypes: ['活动', '方案', '素材'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'psychology',
|
|
||||||
name: '心理健康',
|
|
||||||
description: '心理健康与情感教育',
|
|
||||||
resourceTypes: ['课件', '测试', '案例'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'practice',
|
|
||||||
name: '综合实践',
|
|
||||||
description: '综合实践活动课程',
|
|
||||||
resourceTypes: ['方案', '案例', '工具'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'calligraphy',
|
|
||||||
name: '书法',
|
|
||||||
description: '书法艺术与汉字文化',
|
|
||||||
resourceTypes: ['字帖', '视频', '作品'],
|
|
||||||
grades: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
|
|
||||||
}
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 计算属性
|
const curType = ref<any>();
|
||||||
const currentSubject = computed(() => {
|
const curNj = ref<any>();
|
||||||
return subjectList[selectedSubjectIndex.value] || {};
|
const curCe = ref<any>();
|
||||||
|
const curCategory = ref<any>();
|
||||||
|
|
||||||
|
const selectType = (type: any) => {
|
||||||
|
curType.value = type;
|
||||||
|
curNj.value = curType.value.children[0];
|
||||||
|
curCe.value = curNj.value.children[0];
|
||||||
|
}
|
||||||
|
const selectNj = (type: any) => {
|
||||||
|
curNj.value = type;
|
||||||
|
curCe.value = curNj.value.children[0];
|
||||||
|
}
|
||||||
|
const selectCe = (type: any) => {
|
||||||
|
curCe.value = type;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectCategory = (type: any) => {
|
||||||
|
curCategory.value = type;
|
||||||
|
}
|
||||||
|
|
||||||
|
const goTo = function () {
|
||||||
|
setData({
|
||||||
|
resourceType: curCe.value.key,
|
||||||
|
category: curCategory.value.key,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 方法
|
|
||||||
const selectSubject = (index: number) => {
|
|
||||||
selectedSubjectIndex.value = index;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 跳转到资源列表页面
|
|
||||||
const goToResourceList = (filterType: string, filterValue: string) => {
|
|
||||||
const subject = currentSubject.value;
|
|
||||||
const params = {
|
|
||||||
subjectId: subject.id,
|
|
||||||
subjectName: subject.name,
|
|
||||||
filterType: filterType,
|
|
||||||
filterValue: filterValue
|
|
||||||
};
|
|
||||||
|
|
||||||
const queryString = Object.entries(params).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
|
|
||||||
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/view/routine/JiaoXueZiYuan/indexList?${queryString}`
|
url: `/pages/view/routine/JiaoXueZiYuan/indexList`
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// 页面加载完成后的初始化操作
|
// 页面加载完成后的初始化操作
|
||||||
console.log('教学资源页面加载完成');
|
onMounted(async () => {
|
||||||
|
const res = await typesFindTreeApi();
|
||||||
|
typeTree.value = res.result || [];
|
||||||
|
console.log('教学资源页面加载完成', res);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -310,7 +212,7 @@ onMounted(() => {
|
|||||||
color: #666666;
|
color: #666666;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&.active {
|
||||||
border-color: #ff9800;
|
border-color: #ff9800;
|
||||||
background: #fff3e0;
|
background: #fff3e0;
|
||||||
|
|
||||||
|
|||||||
@ -1,46 +1,38 @@
|
|||||||
<template>
|
<template>
|
||||||
<BasicListLayout
|
<BasicListLayout :show-nav-bar="true" :nav-bar-props="{ title: '教学资源' }" @register="register">
|
||||||
:show-nav-bar="true"
|
|
||||||
:nav-bar-props="{ title: '教学资源' }"
|
|
||||||
@register="register"
|
|
||||||
>
|
|
||||||
<template #top>
|
<template #top>
|
||||||
<view class="search-section">
|
<view class="search-section">
|
||||||
<view class="search-box">
|
<view class="search-box">
|
||||||
<uni-icons type="search" size="18" color="#999"></uni-icons>
|
<uni-icons type="search" size="18" color="#999"></uni-icons>
|
||||||
<input
|
<input class="search-input" type="text" placeholder="搜索资源名称" v-model="searchKeyword" />
|
||||||
class="search-input"
|
|
||||||
type="text"
|
|
||||||
placeholder="搜索教学资源..."
|
|
||||||
v-model="searchKeyword"
|
|
||||||
@input="onSearchInput"
|
|
||||||
@confirm="onSearchConfirm"
|
|
||||||
/>
|
|
||||||
<view class="search-clear" v-if="searchKeyword" @click="clearSearch">
|
<view class="search-clear" v-if="searchKeyword" @click="clearSearch">
|
||||||
<uni-icons type="clear" size="16" color="#999"></uni-icons>
|
<uni-icons type="clear" size="16" color="#999"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 增加一个搜索按钮 -->
|
||||||
|
<u-button text="搜索" class="search-btn" type="primary" @click="onSearchConfirm"/>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #default="{ list }">
|
<template #default="{ data }">
|
||||||
<view class="list-container">
|
<view class="list-container">
|
||||||
<!-- Add @click handler to navigate -->
|
<!-- Add @click handler to navigate -->
|
||||||
<view class="resource-item" v-for="item in list" :key="item.id" @click="goToDetail(item.id)">
|
<view class="resource-item" @click="goToDetail(data.id)">
|
||||||
<view class="item-icon-container">
|
<view class="item-icon-container">
|
||||||
<view class="item-icon">{{ item.iconLetter }}</view>
|
<view class="item-icon">{{ data.resSuf }}</view>
|
||||||
<text class="item-pages">-{{ item.pages }}页-</text>
|
<!-- <text class="item-pages">-{{ item.pages }}页-</text> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="item-details">
|
<view class="item-details">
|
||||||
<text class="item-title">{{ item.title }}</text>
|
<view class="item-title" v-if="data.resourName.includes('《') && data.resourName.includes('》')">{{ data.resourName }}{{ data.hour ? ' - ' + data.hour : '' }}</view>
|
||||||
|
<view class="item-title" v-else>《{{ data.resourName }}》{{ data.hour ? ' - ' + data.hour : '' }}</view>
|
||||||
<!-- 标签区域 -->
|
<!-- 标签区域 -->
|
||||||
<view class="tags-container" v-if="item.tags && item.tags.length > 0">
|
<view class="tags-container" v-if="data.parentName && data.parentName.length > 0">
|
||||||
<view class="tag-item" v-for="tag in item.tags" :key="tag">{{ tag }}</view>
|
<view class="tag-item" v-for="tag in data.parentName.split(',')" :key="tag">{{ tag }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item-meta">
|
<view class="item-meta">
|
||||||
<text class="meta-text">{{ item.publishDate }}</text>
|
<text class="meta-text">{{ data.createdTime }}</text>
|
||||||
<text class="meta-text">浏览量: {{ item.views }}</text>
|
<text class="meta-text">浏览量: {{ data.lookNum }}</text>
|
||||||
<text class="meta-text">下载量: {{ item.downloads }}</text>
|
<text class="meta-text">下载量: {{ data.downNum }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -49,197 +41,38 @@
|
|||||||
|
|
||||||
</BasicListLayout>
|
</BasicListLayout>
|
||||||
|
|
||||||
<!-- Filter Popup -->
|
|
||||||
<uni-popup ref="filterPopupRef" type="bottom" background-color="#fff">
|
|
||||||
<view class="popup-content">
|
|
||||||
<view class="popup-header">
|
|
||||||
<text>{{ currentFilterTitle }}</text>
|
|
||||||
<uni-icons type="closeempty" size="20" @click="closeFilterPopup"></uni-icons>
|
|
||||||
</view>
|
|
||||||
<scroll-view scroll-y class="popup-options">
|
|
||||||
<view
|
|
||||||
class="option-item"
|
|
||||||
v-for="option in currentFilterOptions"
|
|
||||||
:key="option.id ?? 'null'"
|
|
||||||
:class="{ active: isOptionSelected(option) }"
|
|
||||||
@click="selectFilterOption(option)"
|
|
||||||
>
|
|
||||||
{{ option.name }}
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</uni-popup>
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed } from "vue";
|
|
||||||
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
|
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
|
||||||
|
import { resourcesFindPageApi } from "@/api/base/server";
|
||||||
|
import { useDataStore } from "@/store/modules/data";
|
||||||
|
const { getData } = useDataStore();
|
||||||
|
|
||||||
interface Resource {
|
const buildParams = () => {
|
||||||
id: number;
|
setParam({ ...getData, ...{ keyword: searchKeyword.value } });
|
||||||
iconLetter: string;
|
reload();
|
||||||
title: string;
|
|
||||||
pages: number;
|
|
||||||
publishDate: string;
|
|
||||||
views: number;
|
|
||||||
downloads: number;
|
|
||||||
tags: string[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FilterOption {
|
|
||||||
id: string | number | null;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Filter Data (Mock) ---
|
|
||||||
const directories = ref<FilterOption[]>([
|
|
||||||
{ id: null, name: '全部目录' },
|
|
||||||
{ id: 'd1', name: '数学教案' },
|
|
||||||
{ id: 'd2', name: '语文课件' },
|
|
||||||
{ id: 'd3', name: '英语练习' },
|
|
||||||
{ id: 'd4', name: '科学实验' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const types1 = ref<FilterOption[]>([
|
|
||||||
{ id: null, name: '全部类型1' },
|
|
||||||
{ id: 't1-1', name: '课件PPT' },
|
|
||||||
{ id: 't1-2', name: '教学视频' },
|
|
||||||
{ id: 't1-3', name: 'Word文档' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const types2 = ref<FilterOption[]>([
|
|
||||||
{ id: null, name: '全部类型2' },
|
|
||||||
{ id: 't2-1', name: '期中' },
|
|
||||||
{ id: 't2-2', name: '期末' },
|
|
||||||
{ id: 't2-3', name: '单元测试' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// --- Search State ---
|
|
||||||
const searchKeyword = ref<string>('');
|
const searchKeyword = ref<string>('');
|
||||||
|
|
||||||
// --- Filter State ---
|
|
||||||
const selectedDirectory = ref<FilterOption | null>(directories.value[0]);
|
|
||||||
const selectedType1 = ref<FilterOption | null>(types1.value[0]);
|
|
||||||
const selectedType2 = ref<FilterOption | null>(types2.value[0]);
|
|
||||||
const filterPopupRef = ref<any>(null);
|
|
||||||
const currentFilterType = ref<'directory' | 'type1' | 'type2' | null>(null);
|
|
||||||
|
|
||||||
// --- Computed Properties for Popup ---
|
|
||||||
const currentFilterOptions = computed(() => {
|
|
||||||
switch (currentFilterType.value) {
|
|
||||||
case 'directory': return directories.value;
|
|
||||||
case 'type1': return types1.value;
|
|
||||||
case 'type2': return types2.value;
|
|
||||||
default: return [];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const currentFilterTitle = computed(() => {
|
|
||||||
switch (currentFilterType.value) {
|
|
||||||
case 'directory': return '选择目录';
|
|
||||||
case 'type1': return '选择类型1';
|
|
||||||
case 'type2': return '选择类型2';
|
|
||||||
default: return '选择选项';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const isOptionSelected = (option: FilterOption) => {
|
|
||||||
switch (currentFilterType.value) {
|
|
||||||
case 'directory': return selectedDirectory.value?.id === option.id;
|
|
||||||
case 'type1': return selectedType1.value?.id === option.id;
|
|
||||||
case 'type2': return selectedType2.value?.id === option.id;
|
|
||||||
default: return false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- Mock API (Changed return type to Promise<any>) ---
|
|
||||||
const testList = async (params: any): Promise<any> => {
|
|
||||||
console.log('API called with params:', params);
|
|
||||||
const page = params.page || 1;
|
|
||||||
const pageSize = params.pageSize || 10;
|
|
||||||
|
|
||||||
const allItems: Resource[] = Array.from({ length: 50 }).map((_, index) => {
|
|
||||||
const id = index + 1;
|
|
||||||
const directoryFilter = params.directoryId ? `[目录${params.directoryId}]` : '';
|
|
||||||
const type1Filter = params.type1Id ? `[类型1-${params.type1Id}]` : '';
|
|
||||||
const type2Filter = params.type2Id ? `[类型2-${params.type2Id}]` : '';
|
|
||||||
|
|
||||||
// 生成随机标签
|
|
||||||
const subjectTags = ['语文', '数学', '英语', '科学', '历史'];
|
|
||||||
const gradeTags = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'];
|
|
||||||
const termTags = ['上册', '下册'];
|
|
||||||
const typeTags = ['练习题', '课件', '教案', '测试卷'];
|
|
||||||
|
|
||||||
const tags = [
|
|
||||||
subjectTags[id % subjectTags.length],
|
|
||||||
gradeTags[id % gradeTags.length],
|
|
||||||
termTags[id % termTags.length],
|
|
||||||
...(id % 3 === 0 ? [typeTags[id % typeTags.length]] : [])
|
|
||||||
];
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: id,
|
|
||||||
iconLetter: 'W',
|
|
||||||
title: `专题${String(id).padStart(2, '0')}${directoryFilter}${type1Filter}${type2Filter} (突破)`,
|
|
||||||
pages: 30 + (id % 15),
|
|
||||||
publishDate: `0${1 + (id % 9)}月${10 + (id % 20)}日发布`,
|
|
||||||
views: 1500 + (id * 17 % 500),
|
|
||||||
downloads: 50 + (id * 7 % 40),
|
|
||||||
tags: tags,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
let filteredItems = allItems;
|
|
||||||
|
|
||||||
// 搜索关键词过滤
|
|
||||||
if (params.keyword) {
|
|
||||||
filteredItems = filteredItems.filter(item =>
|
|
||||||
item.title.toLowerCase().includes(params.keyword.toLowerCase())
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (params.directoryId) {
|
|
||||||
filteredItems = filteredItems.filter(item => item.title.includes(`[目录${params.directoryId}]`));
|
|
||||||
}
|
|
||||||
if (params.type1Id) {
|
|
||||||
filteredItems = filteredItems.filter(item => item.title.includes(`[类型1-${params.type1Id}]`));
|
|
||||||
}
|
|
||||||
if (params.type2Id) {
|
|
||||||
filteredItems = filteredItems.filter(item => item.title.includes(`[类型2-${params.type2Id}]`));
|
|
||||||
}
|
|
||||||
|
|
||||||
const totalFilteredItems = filteredItems.length;
|
|
||||||
const paginatedItems = filteredItems.slice((page - 1) * pageSize, page * pageSize);
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
// Return structure expected by useLayout
|
|
||||||
resolve({ message: "成功", resultCode: 200, rows: paginatedItems, total: totalFilteredItems });
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- Layout Hook (Removed 'immediate' from componentProps) ---
|
// --- Layout Hook (Removed 'immediate' from componentProps) ---
|
||||||
const [register, { reload, setParam }] = useLayout({
|
const [register, { reload, setParam }] = useLayout({
|
||||||
api: testList,
|
api: resourcesFindPageApi,
|
||||||
componentProps: {
|
componentProps: {
|
||||||
// No problematic props
|
defaultPageSize: 5, // 每页显示5条数据
|
||||||
|
loadingMoreEnabled: true, // 启用加载更多
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- Search Methods ---
|
// --- Search Methods ---
|
||||||
const onSearchInput = () => {
|
|
||||||
setParam({ keyword: searchKeyword.value });
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSearchConfirm = () => {
|
const onSearchConfirm = () => {
|
||||||
setParam({ keyword: searchKeyword.value });
|
buildParams();
|
||||||
};
|
};
|
||||||
|
|
||||||
const clearSearch = () => {
|
const clearSearch = () => {
|
||||||
searchKeyword.value = '';
|
searchKeyword.value = '';
|
||||||
setParam({ keyword: '' });
|
buildParams();
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- Navigation ---
|
// --- Navigation ---
|
||||||
@ -249,45 +82,22 @@
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- Filter Popup Methods ---
|
onMounted(async () => {
|
||||||
const openFilterPopup = (type: 'directory' | 'type1' | 'type2') => {
|
buildParams();
|
||||||
currentFilterType.value = type;
|
});
|
||||||
filterPopupRef.value?.open();
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeFilterPopup = () => {
|
|
||||||
filterPopupRef.value?.close();
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectFilterOption = (option: FilterOption) => {
|
|
||||||
switch (currentFilterType.value) {
|
|
||||||
case 'directory':
|
|
||||||
selectedDirectory.value = option;
|
|
||||||
setParam({ directoryId: option.id });
|
|
||||||
break;
|
|
||||||
case 'type1':
|
|
||||||
selectedType1.value = option;
|
|
||||||
setParam({ type1Id: option.id });
|
|
||||||
break;
|
|
||||||
case 'type2':
|
|
||||||
selectedType2.value = option;
|
|
||||||
setParam({ type2Id: option.id });
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
closeFilterPopup();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
.search-section {
|
.search-section {
|
||||||
padding: 20rpx 30rpx;
|
padding: 20rpx 30rpx;
|
||||||
|
display: flex;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-bottom: 1rpx solid #e0e0e0;
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
|
||||||
.search-box {
|
.search-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -296,6 +106,7 @@
|
|||||||
border-radius: 50rpx;
|
border-radius: 50rpx;
|
||||||
padding: 0 20rpx;
|
padding: 0 20rpx;
|
||||||
height: 70rpx;
|
height: 70rpx;
|
||||||
|
flex: 1 0 1px;
|
||||||
|
|
||||||
uni-icons {
|
uni-icons {
|
||||||
margin-right: 15rpx;
|
margin-right: 15rpx;
|
||||||
@ -319,6 +130,13 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-btn {
|
||||||
|
margin-left: 10px;
|
||||||
|
flex: 0 0 80px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-container {
|
.list-container {
|
||||||
@ -345,9 +163,9 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
.item-icon {
|
.item-icon {
|
||||||
width: 80rpx;
|
width: 160rpx;
|
||||||
height: 80rpx;
|
height: 160rpx;
|
||||||
line-height: 80rpx;
|
line-height: 160rpx;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
background-color: #409eff;
|
background-color: #409eff;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@ -413,6 +231,7 @@
|
|||||||
.meta-text {
|
.meta-text {
|
||||||
margin-right: 15rpx;
|
margin-right: 15rpx;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user