|
@@ -4,13 +4,19 @@ import Back from '@/components/back.uvue'
|
|
|
import { ref, onMounted } from 'vue'
|
|
import { ref, onMounted } from 'vue'
|
|
|
import { querySubjectInfo, querySubjectInfoNoLogin, querySubjectUnit } from '@/services/subject/info'
|
|
import { querySubjectInfo, querySubjectInfoNoLogin, querySubjectUnit } from '@/services/subject/info'
|
|
|
import type { SubjectInfoResult } from '@/services/subject/info'
|
|
import type { SubjectInfoResult } from '@/services/subject/info'
|
|
|
-import { router, debounce, user } from "@/.cool";
|
|
|
|
|
|
|
+import { router, debounce, user, dict } from "@/.cool";
|
|
|
|
|
|
|
|
const isLoading = ref(true)
|
|
const isLoading = ref(true)
|
|
|
const dataList = ref<any[]>([])
|
|
const dataList = ref<any[]>([])
|
|
|
-
|
|
|
|
|
|
|
+const unitType = ref('course_unit')
|
|
|
|
|
+const visible = ref(false)
|
|
|
|
|
+const unitTypeMap = dict.getLabelByValueMapByType('subject_unit_type')
|
|
|
|
|
+console.log(unitTypeMap);
|
|
|
async function getDataList() {
|
|
async function getDataList() {
|
|
|
- const res = await querySubjectUnit()
|
|
|
|
|
|
|
+ const res = await querySubjectUnit({
|
|
|
|
|
+ subjectId: '69c49329091547710d451f9d',
|
|
|
|
|
+ unitType: unitType.value,
|
|
|
|
|
+ })
|
|
|
dataList.value = res || []
|
|
dataList.value = res || []
|
|
|
}
|
|
}
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
@@ -33,9 +39,15 @@ function handleDetail(item: any) {
|
|
|
path: "/pages/practice/detail",
|
|
path: "/pages/practice/detail",
|
|
|
query: {
|
|
query: {
|
|
|
num: item.sortNum,
|
|
num: item.sortNum,
|
|
|
|
|
+ unitType: unitType.value,
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
+async function handleSelect(val: any) {
|
|
|
|
|
+ unitType.value = val
|
|
|
|
|
+ visible.value = false
|
|
|
|
|
+ await getDataList()
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
@@ -49,6 +61,10 @@ function handleDetail(item: any) {
|
|
|
</view>
|
|
</view>
|
|
|
<image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/2.jpg" alt=""
|
|
<image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/2.jpg" alt=""
|
|
|
class="w-full h-full object-cover" />
|
|
class="w-full h-full object-cover" />
|
|
|
|
|
+ <view class="light-tag" @tap="visible = true">
|
|
|
|
|
+ <text class="light-text text-[#000]">{{ unitTypeMap[unitType] }}</text>
|
|
|
|
|
+ <cl-icon name="arrow-left-right-line" color="primary"></cl-icon>
|
|
|
|
|
+ </view>
|
|
|
<!-- 顶部右侧光标签 -->
|
|
<!-- 顶部右侧光标签 -->
|
|
|
<view class="boxs">
|
|
<view class="boxs">
|
|
|
<scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false" ref="cardsScrollView">
|
|
<scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false" ref="cardsScrollView">
|
|
@@ -61,6 +77,19 @@ function handleDetail(item: any) {
|
|
|
</view>
|
|
</view>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <cl-popup v-model="visible" :show-header="false" direction="center" :size="600">
|
|
|
|
|
+ <view class="p-4">
|
|
|
|
|
+ <cl-row :gutter="0">
|
|
|
|
|
+ <cl-col :span="8" v-for="(label, value) in unitTypeMap || []" :key="value" :pt="{
|
|
|
|
|
+ className: '!p-2'
|
|
|
|
|
+ }" @tap="handleSelect(value)">
|
|
|
|
|
+ <view class="select-item" :class="{ selected: value == unitType }">
|
|
|
|
|
+ <text class="text-[#000]">{{ label }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </cl-col>
|
|
|
|
|
+ </cl-row>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </cl-popup>
|
|
|
</cl-page>
|
|
</cl-page>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -85,7 +114,7 @@ function handleDetail(item: any) {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.light-tag {
|
|
.light-tag {
|
|
|
- @apply absolute top-3 left-1/2 z-[1] flex flex-row items-center bg-white px-3 py-2 font-bold rounded-full shadow-md;
|
|
|
|
|
|
|
+ @apply absolute top-3 left-1/2 z-[111] flex flex-row items-center bg-white px-3 py-2 font-bold rounded-full shadow-md;
|
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
|
|
|
|
|
|
.light-icon {
|
|
.light-icon {
|