show.all.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <html lang="zh">
  2. <head>
  3. <title></title>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <script src="/static/vue.js"></script>
  7. <script src="/static/jquery.min.js"></script>
  8. <style>
  9. p {
  10. white-space: pre-line;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="app">
  16. <p v-show="!ajaxFinish">{{msg}}</p>
  17. <!--<input v-show="ajaxFinish" type="checkbox" v-model="showAnswer" /><span v-show="ajaxFinish">显示答案</span>-->
  18. <p id="tools" v-show="ajaxFinish"><input type="checkbox" v-model="showAnswer"/><span>显示答案</span><input type="button" @click="print" value="打印"/></p>
  19. <div v-show="ajaxFinish" v-for="data in datas">
  20. <div v-if="data!=null">
  21. <!--data-->
  22. <h1>{{data.title}}</h1>
  23. <div v-for="group in data.groups">
  24. <h2>{{group.title}}</h2>
  25. <p v-if="group.memo!=''" v-html="group.memo"></p>
  26. <div v-for="question,index in group.questions">
  27. <p style="font-weight:bold;" v-html="(index+1)+ '. ' + question.title"></p>
  28. <ul>
  29. <li v-for="option in question.options" v-html="option.value + '. '+option.text"></li>
  30. </ul>
  31. <p v-show="showAnswer" v-html="'<b>答案:</b>'+question.answer.join(';')"></p>
  32. <p v-if="question.explanation" v-show="showAnswer" v-html="'<b>题解:</b>'+question.explanation"></p>
  33. <hr>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <script>
  40. var URL_PREFIX = "";
  41. var app = new Vue({
  42. el: '#app',
  43. data: {
  44. courses: [],
  45. datas: [],
  46. msg: "loading...",
  47. showAnswer: true,
  48. finishCount: 0,
  49. ajaxFinish: false
  50. },
  51. methods: {
  52. print() {
  53. var tools = document.getElementById("tools");
  54. tools.style.display = "none";
  55. print();
  56. tools.style.display = "";
  57. },
  58. getCourse() {
  59. var url = location.href.split('?')[0].split('/');
  60. var self = this;
  61. $.ajax({
  62. url: URL_PREFIX + "/get/question/list/" + url[url.length - 1],
  63. type: "GET",
  64. success: function(data) {
  65. if (data["success"]) {
  66. if (data["data"] && data["data"]["results"]) {
  67. var res = data["data"]["results"];
  68. for (var i = 0, j = res.length; i < j; i++) {
  69. self.courses.push(res[i]["id"]);
  70. }
  71. self.getContentLoop();
  72. }
  73. if (document.title === "") {
  74. document.title = "百日题库-" + data["data"]["title"];
  75. }
  76. }
  77. else {
  78. self.msg = "获取失败";
  79. }
  80. }
  81. });
  82. },
  83. getContentLoop() {
  84. for (var i = 0, j = this.courses.length; i < j; i++) {
  85. this.getContentById(this.courses[i], i);
  86. }
  87. },
  88. getContentById(id, pos) {
  89. var self = this;
  90. $.ajax({
  91. url: URL_PREFIX + "/get/question/content_object/" + id,
  92. type: "GET",
  93. success: function(data) {
  94. self.finishCount++;
  95. if (data["success"]) {
  96. self.$set(self.datas, pos, data["data"]);
  97. //self.datas[pos] = data["data"];
  98. }
  99. else {
  100. self.msg = "获取失败";
  101. }
  102. console.log(self.finishCount, self.courses.length);
  103. if (self.finishCount == self.courses.length) {
  104. self.ajaxFinish = true;
  105. }
  106. }
  107. })
  108. }
  109. },
  110. mounted() {
  111. var search = location.search.substr(1).split('&');
  112. var courseName = "";
  113. for (var i = 0, j = search.length; i < j; i++) {
  114. var s = search[i].split('=');
  115. switch (s[0]) {
  116. case "course_name":
  117. courseName = s[1];
  118. break;
  119. }
  120. }
  121. if (courseName !== "") {
  122. document.title = "百日题库-" + decodeURI(courseName);
  123. }
  124. this.getCourse();
  125. }
  126. });
  127. </script>
  128. </body>
  129. </html>