courseView.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
  1. <template>
  2. <div class="container">
  3. <template v-if="!name">
  4. <Header />
  5. <Nav nav-value="书籍预览" />
  6. </template>
  7. <template>
  8. <div class="bookname">
  9. {{ name }}
  10. </div>
  11. </template>
  12. <div class="content">
  13. <div id="content-tree" class="content-tree">
  14. <TreeView
  15. ref="treeView"
  16. :book-id="bookId"
  17. :change-id="changeId"
  18. :changeTreeData="changeTreeData"
  19. :currentTreeID="chapterId"
  20. />
  21. </div>
  22. <div id="data-screen" class="inner">
  23. <!-- 显示答案按钮 -->
  24. <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
  25. <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
  26. <div v-if="chapterId" class="title-box">
  27. <img
  28. v-if="!treeFlag"
  29. src="../assets/common/icon-treelist.png"
  30. @click="treeShow"
  31. />
  32. <!-- <h2 class="title">{{ chapterName }}</h2> -->
  33. <el-switch
  34. v-if="!treeFlag"
  35. v-model="switchvalue"
  36. active-color="#FF9900"
  37. active-text
  38. inactive-text="生词模式"
  39. />
  40. </div>
  41. <template v-if="category == 'oc' || !category">
  42. <Preview
  43. v-if="chapterId && context"
  44. ref="previewAnswer"
  45. :context="context"
  46. :bookAnswerContent="bookAnswerContent"
  47. bookclientwidth="900"
  48. :TaskModel="TaskModel"
  49. @handleBookUserAnswer="handleBookUserAnswer"
  50. />
  51. </template>
  52. <template v-if="category == 'NPC'">
  53. <Booknpc
  54. v-if="chapterId && context"
  55. ref="previewAnswer"
  56. :context="context"
  57. :currentTreeID="chapterId"
  58. :FatherTreeData="FatherTreeData"
  59. :change-id="changeId"
  60. :themeColor="themeColor"
  61. :isShowTitle="true"
  62. />
  63. </template>
  64. <template v-if="category == 'NNPE'">
  65. <Booknnpe
  66. v-if="chapterId && context"
  67. ref="previewAnswer"
  68. :context="context"
  69. :currentTreeID="chapterId"
  70. :FatherTreeData="FatherTreeData"
  71. :change-id="changeId"
  72. :themeColor="themeColor"
  73. :isShowTitle="true"
  74. />
  75. </template>
  76. </div>
  77. </div>
  78. <!-- <Preview :context="context" :queIndex="queIndex" /> -->
  79. <a v-if="chapterId && treeFlag" class="screen-full" @click="fullScreen()" />
  80. </div>
  81. </template>
  82. <script>
  83. import Header from "@/components/inputModules/common/Header";
  84. import Nav from "@/components/inputModules/common/Nav";
  85. import TreeView from "@/components/inputModules/common/TreeView";
  86. import { getContent } from "@/api/ajax";
  87. import Cookies from "js-cookie";
  88. // import Preview from '@/componentsAnswer/PreviewAnswer.vue'
  89. import Preview from "@/components/Preview";
  90. export default {
  91. name: "CourseView",
  92. components: {
  93. Header,
  94. Nav,
  95. TreeView,
  96. Preview,
  97. },
  98. data() {
  99. return {
  100. bookId: "",
  101. chapterId: "",
  102. chapterName: "",
  103. fullscreen: false, // 控制全屏
  104. context: null,
  105. question: null, // 选择的模板题型
  106. queIndex: "",
  107. treeFlag: true, // tree是否显示
  108. switchvalue: true, // 生词模式
  109. isAnswerShow: false, // 是否显示答案
  110. bookAnswerContent: "[[6],[],[9]]",
  111. TaskModel: "Task",
  112. category: "",
  113. FatherTreeData: null,
  114. themeColor: "",
  115. type: "",
  116. name: "",
  117. };
  118. },
  119. created() {
  120. const _this = this;
  121. _this.bookId = this.$route.query.bookId;
  122. _this.type = this.$route.query.type;
  123. _this.name = this.$route.query.name;
  124. },
  125. methods: {
  126. changeTreeData(val) {
  127. this.FatherTreeData = JSON.parse(JSON.stringify(val));
  128. },
  129. changeId(id, name) {
  130. const _this = this;
  131. _this.chapterId = id;
  132. _this.chapterName = name;
  133. _this.isAnswerShow = false;
  134. _this.onGetData();
  135. },
  136. // 点击全屏展示 隐藏tree
  137. fullScreen() {
  138. this.treeFlag = false;
  139. document.getElementById("content-tree").style.display = "none";
  140. },
  141. treeShow() {
  142. this.treeFlag = true;
  143. document.getElementById("content-tree").style.display = "block";
  144. },
  145. // 获取预览数据
  146. onGetData() {
  147. const _this = this;
  148. const MethodName = "book-courseware_manager-GetCoursewareContent_View";
  149. const data = {
  150. id: _this.chapterId,
  151. };
  152. getContent(MethodName, data).then((res) => {
  153. this.category = res.category;
  154. this.themeColor = res.book_theme_color;
  155. if (res.content) {
  156. const _this = this;
  157. if (!this.category || this.category == "oc") {
  158. _this.context = {
  159. id: _this.chapterId,
  160. ui_type: JSON.parse(res.content).question
  161. ? JSON.parse(res.content).question.ui_type
  162. : "",
  163. sort_number: 1,
  164. content: JSON.parse(res.content),
  165. };
  166. } else if (this.category == "NPC") {
  167. _this.context = JSON.parse(res.content);
  168. } else if (this.category == "NNPE") {
  169. _this.context = JSON.parse(res.content);
  170. }
  171. } else {
  172. const _this = this;
  173. _this.context = null;
  174. }
  175. });
  176. },
  177. // 跳转编辑页面
  178. handleEdit() {
  179. const index = this.$refs.treeView.handleParentIndex().split("###");
  180. if (index.length > 1) {
  181. Cookies.set("bookIndex", index[0]);
  182. Cookies.set("bookLevel", index[1]);
  183. Cookies.set("bookNodename", index[2]);
  184. }
  185. this.$router.push("/input?bookId=" + this.bookId);
  186. },
  187. // 显示或隐藏答案
  188. handleAnswerShow() {
  189. this.isAnswerShow = !this.isAnswerShow;
  190. this.$refs.previewAnswer.bookAnswerShow(this.isAnswerShow);
  191. },
  192. // 得到用户答题答案
  193. handleBookUserAnswer(data) {
  194. console.log(data);
  195. },
  196. },
  197. };
  198. </script>
  199. <style lang="scss" scoped>
  200. .container {
  201. width: 100%;
  202. height: auto;
  203. .bookname {
  204. width: 100%;
  205. height: 60px;
  206. display: flex;
  207. justify-content: space-between;
  208. align-items: center;
  209. box-sizing: border-box;
  210. padding: 0 46px;
  211. background: #f3f7fa;
  212. }
  213. .content {
  214. width: 100%;
  215. display: flex;
  216. justify-content: flex-start;
  217. align-items: flex-start;
  218. &-tree {
  219. width: 340px;
  220. height: 100%;
  221. overflow: auto;
  222. padding: 20px 0px;
  223. border-right: 1px solid #d9d9d9;
  224. position: fixed;
  225. top: 0px;
  226. left: 0;
  227. padding-top: 124px;
  228. background: #fff;
  229. }
  230. .inner {
  231. // border-left: 1px solid #d9d9d9;
  232. width: 1000px;
  233. margin: 0 auto;
  234. margin-left: 340px;
  235. flex: 1;
  236. box-sizing: border-box;
  237. padding: 20px;
  238. position: relative;
  239. background: #fff;
  240. .title-box {
  241. display: flex;
  242. align-items: center;
  243. margin-bottom: 12px;
  244. padding-right: 160px;
  245. position: relative;
  246. > img {
  247. width: 40px;
  248. margin-right: 16px;
  249. cursor: pointer;
  250. }
  251. }
  252. .title {
  253. font-size: 24px;
  254. margin-bottom: 20px;
  255. line-height: 40px;
  256. margin: 0;
  257. }
  258. .has-module {
  259. display: flex;
  260. justify-content: flex-start;
  261. align-items: flex-start;
  262. &-tree {
  263. width: 340px;
  264. height: 100%;
  265. overflow: auto;
  266. padding: 20px 0px;
  267. border-right: 1px solid #d9d9d9;
  268. }
  269. .inner {
  270. // border-left: 1px solid #d9d9d9;
  271. width: 1000px;
  272. flex: 1;
  273. margin: 0 auto;
  274. box-sizing: border-box;
  275. padding: 20px;
  276. position: relative;
  277. background: #fff;
  278. .title-box {
  279. display: flex;
  280. align-items: center;
  281. margin-bottom: 12px;
  282. padding-right: 160px;
  283. position: relative;
  284. > img {
  285. width: 40px;
  286. margin-right: 16px;
  287. cursor: pointer;
  288. }
  289. }
  290. .title {
  291. font-size: 24px;
  292. margin-bottom: 20px;
  293. line-height: 40px;
  294. margin: 0;
  295. }
  296. .has-module {
  297. display: flex;
  298. justify-content: flex-start;
  299. align-items: flex-start;
  300. }
  301. .edit-btn {
  302. display: inline-block;
  303. font-size: 14px;
  304. background: #ff9900;
  305. float: right;
  306. line-height: 36px;
  307. color: #fff;
  308. width: 60px;
  309. text-align: center;
  310. border-radius: 4px;
  311. }
  312. }
  313. }
  314. }
  315. .nav-list {
  316. width: 200px;
  317. height: 40px;
  318. background: rgba(49, 212, 134, 0.2);
  319. border-radius: 240px;
  320. display: flex;
  321. justify-content: flex-start;
  322. align-items: center;
  323. padding: 0;
  324. margin: 0;
  325. margin-bottom: 10px;
  326. list-style: none;
  327. > li {
  328. height: 40px;
  329. width: 100px;
  330. text-align: center;
  331. font-style: normal;
  332. font-weight: bold;
  333. font-size: 14px;
  334. line-height: 40px;
  335. color: #19b068;
  336. cursor: pointer;
  337. &.active {
  338. background: #19b068;
  339. border-radius: 240px;
  340. color: #ffffff;
  341. }
  342. }
  343. }
  344. .screen-full {
  345. position: fixed;
  346. right: 30px;
  347. bottom: 30px;
  348. width: 48px;
  349. height: 48px;
  350. background: rgba(0, 0, 0, 0.4) url("../assets/common/icon-screenFull.png")
  351. center no-repeat;
  352. background-size: 32px;
  353. }
  354. }
  355. .answerShow {
  356. position: absolute;
  357. right: 20px;
  358. top: 20px;
  359. width: 112px;
  360. height: 40px;
  361. background: #ffffff url("../assets/common/icon-eye-close.png") 16px center
  362. no-repeat;
  363. background-size: 16px;
  364. border: 1px solid rgba(44, 44, 44, 0.15);
  365. box-sizing: border-box;
  366. border-radius: 4px;
  367. font-size: 14px;
  368. line-height: 150%;
  369. color: #000000;
  370. padding: 9px 16px 9px 36px;
  371. cursor: pointer;
  372. z-index: 2;
  373. &.answerShowTrue {
  374. background: #f5f5f5 url("../assets/common/icon-eye-open.png") 16px center
  375. no-repeat;
  376. background-size: 16px;
  377. }
  378. }
  379. }
  380. </style>
  381. <style lang="scss">
  382. .title-box {
  383. .el-switch {
  384. position: absolute;
  385. top: 0;
  386. right: 0px;
  387. border: 1px solid rgba(44, 44, 44, 0.15);
  388. border-radius: 40px;
  389. height: 40px;
  390. padding: 6px 6px 6px 16px;
  391. }
  392. .el-switch__label.is-active {
  393. color: #000000;
  394. font-size: 16px;
  395. }
  396. }
  397. </style>