背景问题修改

src/views/personal_workbench/edit_task/edit/UseTemplate.vue

@@ -85,7 +85,7 @@
 import { unified_attrib } from '@/common/data';
 import { getRandomNumber } from '@/utils/index';
 import { PageQueryTemplateList_EditBookSelect } from '@/api/list';
-import { ContentGetCoursewareContent_View, ContentGetCoursewareContent } from '@/api/book';
+import { ContentGetCoursewareContent_View, GetCoursewareBackground, ContentGetCoursewareContent } from '@/api/book';
 import { GetTemplateChapterStructExpandList } from '@/api/template';
 import { isTrue } from '@/utils/validate';
 
@@ -235,11 +235,21 @@ export default {
           this.loading = false;
         });
     },
+    getCoursewareBackground(id) {
+      GetCoursewareBackground({ id }).then(({ background }) => {
+        if (background) {
+          let bg = JSON.parse(background);
+          bg.background.is_global = false;
+          this.background = bg;
+        }
+      });
+    },
     /**
      * 得到课件内容（展示内容）
      * @param {string} id - 课件ID
      */
     getCoursewareComponentContent_View(id) {
+      this.getCoursewareBackground(id);
       ContentGetCoursewareContent_View({ id }).then(
         ({ content, component_list, content_group_row_list, title_list }) => {
           if (title_list) this.title_list = title_list || [];
@@ -247,10 +257,6 @@ export default {
           if (content) {
             const _content = JSON.parse(content);
             this.coursewareData = _content;
-            this.background = {
-              background_image_url: _content.background_image_url,
-              background_position: _content.background_position,
-            };
           } else {
             this.coursewareData = { row_list: [] };
           }
@@ -365,6 +371,7 @@ export default {
       }
       this.$emit('useTemplate', {
         data: this.data,
+        background: this.background,
         content_group_row_list: this.data_content_group_row_list,
         temporaryCoursewareID: this.curSelectId,
       });

src/views/personal_workbench/edit_task/edit/index.vue

@@ -80,7 +80,7 @@ import FullTextSettings from '@/views/book/courseware/create/components/FullText
 import tinymce from 'tinymce';
 import * as OpenCC from 'opencc-js';
 import { GetBookCoursewareInfo, GetMyBookCoursewareTaskList } from '@/api/project';
-import { GetLanguageTypeList } from '@/api/book';
+import { GetLanguageTypeList, SaveCoursewareBackground } from '@/api/book';
 
 export default {
   name: 'EditTaskPage',
@@ -315,11 +315,15 @@ export default {
      * 处理使用模板事件
      * @param {Object} param
      * @param {Object} param.data - 模板数据
+     * @param {Object} param.background - 模板背景数据
      * @param {Array} param.content_group_row_list - 内容分组行列表
      * @param {string} param.temporaryCoursewareID - 临时课件ID
      */
-    handleUseTemplate({ data, content_group_row_list, temporaryCoursewareID }) {
+    handleUseTemplate({ data, background, content_group_row_list, temporaryCoursewareID }) {
       this.$refs.create.loadTemplateData_Create({ data, content_group_row_list });
+      if (background) {
+        SaveCoursewareBackground({ id: this.id, background: JSON.stringify(background) }).then(() => {});
+      }
       this.temporaryCoursewareID = temporaryCoursewareID;
       this.visibleTemplate = false;
     },

src/views/personal_workbench/template_list/preview/CommonPreview.vue

@@ -35,8 +35,8 @@
     </div>
     <div class="audit-content" :class="[type && type !== 'personal' ? 'audit-content_org' : '']">
       <div ref="previewMain" class="main-container" :style="{ paddingLeft: '0', paddingRight: '0' }">
-        <main :class="['preview-main', { 'no-audit': !isShowAudit }]">
-          <div class="preview-left"></div>
+        <main :class="['preview-main', { 'no-audit': !isShowAudit }]" :style="computedCommonPreviewStyle">
+          <div class="preview-left" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
           <CoursewarePreview
             v-if="courseware_info.book_name || courseware_info.name"
             ref="courseware"
@@ -52,7 +52,7 @@
             :component-remark-obj="{}"
             :project="project"
           />
-          <div class="preview-right"></div>
+          <div class="preview-right" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
         </main>
       </div>
       <div v-if="!sidebarShow" class="back-top" @click="backTop">
@@ -64,11 +64,12 @@
 
 <script>
 import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview.vue';
-import { isTrue } from '@/utils/validate';
 
+import { isTrue } from '@/utils/validate';
 import { GetBookCoursewareInfo } from '@/api/project';
 import { GetTemplateChapterStructExpandList, GetTemplateInfo } from '@/api/template';
-import { ContentGetCoursewareContent_View } from '@/api/book';
+import { ContentGetCoursewareContent_View, GetCoursewareBackground } from '@/api/book';
+import { buildCoursewareStyle } from '@/views/book/courseware/preview/common/utils/coursewareStyle';
 
 export default {
   name: 'CommonPreview',
@@ -150,7 +151,11 @@ export default {
       is_can_edit: 'false', // 是否可以编辑
     };
   },
-  computed: {},
+  computed: {
+    computedCommonPreviewStyle() {
+      return buildCoursewareStyle(this.background, 'commonPreview');
+    },
+  },
   watch: {},
   created() {
     if (this.id) {
@@ -228,21 +233,24 @@ export default {
         },
       );
     },
+    getCoursewareBackground(id) {
+      GetCoursewareBackground({ id }).then(({ background }) => {
+        if (background) {
+          this.background = JSON.parse(background);
+        }
+      });
+    },
     /**
      * 得到课件内容（展示内容）
      * @param {string} id - 课件ID
      */
     getCoursewareComponentContent_View(id) {
+      this.getCoursewareBackground(id);
       ContentGetCoursewareContent_View({ id }).then(
         ({ content, component_list, content_group_row_list, title_list }) => {
           if (content) {
             const _content = JSON.parse(content);
             this.data = _content;
-            this.background = {
-              background_image_url: _content.background_image_url,
-              background_position: _content.background_position,
-              background: _content.background,
-            };
           } else {
             this.data = { row_list: [] };
           }