|
@@ -20,10 +20,12 @@
|
|
|
<text class="text-white">{{item.zhangName}}</text>
|
|
|
</view>
|
|
|
<!-- 三角图标 双色激活不同图标 -->
|
|
|
- <uni-icons v-if="activeCollapse === index" type="right" size="16" style="justify-self: flex-end;"></uni-icons>
|
|
|
+ <uni-icons v-if="activeCollapse === index" type="right" size="16"
|
|
|
+ style="justify-self: flex-end;"></uni-icons>
|
|
|
<uni-icons v-else type="right" size="16" style="justify-self: flex-end;"></uni-icons>
|
|
|
<!-- 三角图标完结 -->
|
|
|
- <uni-icons :class="['right-icon']" @click="handleExpand" type="locked-filled" size="16" style="justify-self: flex-end;"></uni-icons>
|
|
|
+ <uni-icons :class="['right-icon']" @click="handleExpand" type="locked-filled" size="16"
|
|
|
+ style="justify-self: flex-end;"></uni-icons>
|
|
|
</view>
|
|
|
</template>
|
|
|
<view class="content">
|
|
@@ -45,27 +47,29 @@
|
|
|
import {
|
|
|
ref
|
|
|
} from "vue";
|
|
|
- import {toast} from "@/utils/common.js"
|
|
|
-
|
|
|
+ import {
|
|
|
+ toast
|
|
|
+ } from "@/utils/common.js"
|
|
|
+
|
|
|
const $emit = defineEmits(['change-zhang'])
|
|
|
-
|
|
|
+
|
|
|
const props = defineProps({
|
|
|
nianji: {
|
|
|
- type: [String,Number],
|
|
|
+ type: [String, Number],
|
|
|
},
|
|
|
xueqi: {
|
|
|
- type: [String,Number],
|
|
|
+ type: [String, Number],
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
const {
|
|
|
getCatalogue,
|
|
|
} = useCatalogue(props);
|
|
|
-
|
|
|
+
|
|
|
const popupRef = ref(null); // 索引
|
|
|
const list = ref([]); // 章节
|
|
|
const activeCollapse = ref('');
|
|
|
-
|
|
|
+
|
|
|
const popup_background_color = `rgba(0,0,0,0.2)`; // 【弹出框模态层背景颜色】
|
|
|
|
|
|
|
|
@@ -73,8 +77,8 @@
|
|
|
* @summary 展示弹窗 暴露函数
|
|
|
*/
|
|
|
async function showPopup() {
|
|
|
- const [err, data] = await getCatalogue();
|
|
|
- console.log('ddd',data);
|
|
|
+ const [err, data] = await getCatalogue();
|
|
|
+ console.log('ddd', data);
|
|
|
if (err) {
|
|
|
toast("章节目录数据获取失败");
|
|
|
return;
|
|
@@ -82,14 +86,14 @@
|
|
|
refreshCatalogue(data);
|
|
|
handleShow();
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* @param([]) 章节赋值
|
|
|
*/
|
|
|
function refreshCatalogue(data) {
|
|
|
list.value = data;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
/**
|
|
|
* @summary 展示目录弹窗
|
|
|
*/
|
|
@@ -103,23 +107,12 @@
|
|
|
function handleClose() {
|
|
|
popupRef.value.close();
|
|
|
}
|
|
|
- function getNextZhangData(data) {
|
|
|
- const index = list.value.findIndex(item => item.zhangId === data.zhangId);
|
|
|
- console.log(index);
|
|
|
- if (index === list.value.length -1) {
|
|
|
- return {}
|
|
|
- } else {
|
|
|
- return list.value[index+1]
|
|
|
- }
|
|
|
- }
|
|
|
/**
|
|
|
* @summary 选中
|
|
|
* @param({zhangId:string}) data
|
|
|
- */
|
|
|
+ */
|
|
|
function handleSelectZhang(data) {
|
|
|
- const nextZhang = getNextZhangData(data);
|
|
|
- console.log('nextZhang',nextZhang)
|
|
|
- $emit('change-zhang', Object.assign({},data, {nextZhang}));
|
|
|
+ $emit('change-zhang', Object.assign({}, data));
|
|
|
handleClose();
|
|
|
}
|
|
|
|
|
@@ -154,9 +147,10 @@
|
|
|
::v-deep .uni-card__content {
|
|
|
padding: 0 !important;
|
|
|
margin: 10px 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.5); // 【弹出框 内容区域背景颜色】
|
|
|
+ background-color: rgba(0, 0, 0, 0.5); // 【弹出框 内容区域背景颜色】
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
+
|
|
|
// 目录文字 颜色调整
|
|
|
.text-white {
|
|
|
color: #fff; // 【课件 章文字颜色】
|
|
@@ -174,30 +168,30 @@
|
|
|
border-top-left-radius: 4px;
|
|
|
border-top-right-radius: 4px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 章文本区域
|
|
|
.text-container {
|
|
|
width: 100%;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.collapse-container {
|
|
|
- background-color: transparent; // 【弹出框 内容区域背景颜色】
|
|
|
+ background-color: transparent; // 【弹出框 内容区域背景颜色】
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
::v-deep .uni-collapse-item__wrap {
|
|
|
- background-color: transparent; // 【弹出框 内容区域背景颜色】
|
|
|
+ background-color: transparent; // 【弹出框 内容区域背景颜色】
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
::v-deep .uni-collapse-item__wrap-content {
|
|
|
color: #fff; // 【课件 章文字颜色】
|
|
|
line-height: 1.5;
|
|
|
padding: 5px 10px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.jie-index {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.active {
|
|
|
rotate: 90deg;
|
|
|
color: red;
|