<template>
|
<div class="chapter" num="2">
|
<!-- P1 -->
|
<div class="page-box" page="9">
|
<div v-if="showPageList.indexOf(9) > -1">
|
<div class="bodystyle">
|
</div>
|
</div>
|
</div>
|
|
<div class="page-box" page="10">
|
<div v-if="showPageList.indexOf(10) > -1">
|
<ul class="fl al-c fc ml-9">
|
<li class="br1">2</li>
|
<li>托育机构管理实务</li>
|
</ul>
|
<div class="bodystyle">
|
|
</div>
|
</div>
|
</div>
|
<div class="page-box" page="11">
|
<div v-if="showPageList.indexOf(11) > -1" >
|
</div>
|
</div>
|
<!-- P2 -->
|
<div class="page-box" page="12">
|
<div v-if="showPageList.indexOf(12) > -1">
|
<ul class="fl al-c fc ml-9">
|
<li class="br">2</li>
|
<li class="lh">托育机构管理实务</li>
|
</ul>
|
<div class="bodystyle">
|
|
</div>
|
</div>
|
</div>
|
<!-- P3 -->
|
<div class="page-box" page="13">
|
<div v-if="showPageList.indexOf(13) > -1">
|
<ul class="fl al-c jc-fe fc">
|
<li class="br1">模块一</li>
|
<li>托育机构概述</li>
|
<li class="br-r">3</li>
|
</ul>
|
<div class="bodystyle">
|
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import { getResourcePath,uploadFilePath } from "@/assets/methods/resources";
|
import {
|
getCollectResource,
|
setCollectResource,
|
} from "@/assets/methods/resources";
|
|
import tool from '@/assets/js/toolClass.js'
|
export default {
|
name: "chapterOne",
|
props: {
|
showPageList: {
|
type: Array,
|
},
|
},
|
|
data() {
|
return {
|
dialogVisible: false,
|
pdfTitle: '',
|
p_md5: '',
|
pdfDialogRef: "",
|
mindMapDialogRef:'',
|
mapDialogVisible: false,
|
collectImg: require("../../assets/images/icon/heart.png"),
|
collectCheck: require("../../assets/images/icon/heart-check.png"),
|
videoPathOne: "",
|
collectResourceList: [],
|
chapterData: {
|
isCollectVideo: false,
|
},
|
questionData: {
|
taskData:{
|
one:"",
|
two:"",
|
three:"",
|
four:"",
|
},
|
askAbout: {
|
one: "",
|
two: "",
|
three: "",
|
four:"",
|
five:"",
|
six:"",
|
seven:"",
|
eight:""
|
},
|
practiceData:{
|
one:"",
|
two:""
|
}
|
},
|
askAnswerOne: false,
|
askAnswerTwo: false,
|
askAnswerThree: false,
|
askAnswerFour: false,
|
pdfMd5: {
|
1: {
|
md5: '0107C87C520689110F980461151A7DDE',
|
name: '马背上的摇篮',
|
},
|
2: {
|
md5: '4F277404C357505B6B316C7CEEB3F431',
|
name: '《托儿所、幼儿园建筑设计规范》',
|
}
|
|
},
|
questionDataImg:""
|
};
|
},
|
async mounted() {
|
//项目自测及寻礼之问
|
const bookQuestion = localStorage.getItem(
|
"childcareInstitutionsManagement-book-chapter01-question"
|
);
|
if (bookQuestion) {
|
this.questionData = JSON.parse(bookQuestion);
|
this.questionDataImg = getResourcePath(this.questionData.askAbout.one);
|
}
|
this.getVidoePath();
|
this.collectResourceList = await getCollectResource(
|
this.config.activeBook.bookId
|
);
|
|
},
|
methods: {
|
async getVidoePath() {
|
this.videoPathOne = await getResourcePath(
|
"016175AFC879C8DD70F3D5C5E04D3680"
|
);
|
console.log(this.videoPathOne,111)
|
},
|
closeDialog() {
|
this.dialogVisible = false
|
},
|
toUrl(val) {
|
if (val) {
|
this.dialogVisible = true
|
this.p_md5 = this.pdfMd5[val].md5
|
this.pdfTitle = this.pdfMd5[val].name
|
this.$refs.pdfDialogRef.openDialog();
|
}
|
},
|
setBookQuestion() {
|
localStorage.setItem(
|
"childcareInstitutionsManagement-book-chapter01-question",
|
JSON.stringify(this.questionData)
|
);
|
},
|
|
handleCollect(e) {
|
if (e == "video-01") {
|
this.handleCollectResource(
|
"016175AFC879C8DD70F3D5C5E04D3680",
|
"016175AFC879C8DD70F3D5C5E04D3680",
|
"",
|
"视频",
|
"bits",
|
"视频：婴幼儿益智类玩具——配对游戏"
|
);
|
this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
|
}
|
this.handleChapterData();
|
},
|
|
handleChapterData() {
|
localStorage.setItem(
|
"childcareInstitutionsManagement-book-chapter01-Data",
|
JSON.stringify(this.chapterData)
|
);
|
},
|
|
//打开思维导图
|
showMindMapDialog(){
|
this.mapDialogVisible = true
|
this.$refs.mindMapDialogRef.openDialog();
|
},
|
|
//上传图片
|
fileUpload(file){
|
return new Promise((resolve, reject) => {
|
const isJPG = file.file.type === 'image/jpeg' || file.file.type === 'image/png'
|
if (!isJPG) {
|
ElMessage.error('上传文件只能是 jpg/png 格式!')
|
return reject()
|
}
|
const FileName = file.file.name.split('.')[0]
|
const Extension = file.file.name.split('.')[1]
|
const FileType = file.file.type
|
let size = 1024
|
tool
|
.getFileMd5(file.file, size * 1024)
|
.then(async(e) => {
|
if (!(this.questionData.askAbout.one == e)) {
|
const imgData = new FormData()
|
imgData.append('Md5', e)
|
imgData.append('FileName', FileName)
|
imgData.append('Extension', Extension)
|
imgData.append('FileType', FileType)
|
imgData.append('MetaData', null)
|
imgData.append('file', file.file)
|
let rData = await uploadFilePath(imgData);
|
if (rData){
|
this.questionData.askAbout.one = e
|
this.questionDataImg = await getResourcePath(e);
|
}
|
} else {
|
ElMessage.error('当前文件已上传，请勿重复操作！')
|
}
|
})
|
.catch((e) => {
|
console.error(e)
|
})
|
})
|
|
},
|
//删除
|
delFile(){
|
this.questionData.askAbout.one = ''
|
this.questionDataImg = ''
|
},
|
//资源收藏事件
|
// resourcePath 文件路径，
|
// resourceType 文件类型
|
// source 文件来源
|
handleCollectResource(
|
id,
|
md5,
|
resourcePath,
|
resourceType,
|
source,
|
resourceName
|
) {
|
let list = this.collectResourceList;
|
if (list.findIndex((item) => item.id == id) > -1) {
|
list = list.filter((item) => item.id != id);
|
} else {
|
list.push({
|
id,
|
md5,
|
resourcePath,
|
resourceType,
|
source,
|
resourceName,
|
});
|
}
|
this.collectResourceList = list;
|
setCollectResource(
|
this.config.activeBook.bookId,
|
this.collectResourceList
|
);
|
},
|
|
}
|
};
|
</script>
|
<style lang="less" scoped></style>
|
