1.提交总后台的过程页配置

src/api/course/userCourse.js

@@ -88,3 +88,12 @@ export function pullOff(courseIds) {
     method: 'post'
   })
 }
+
+// 修改课堂配置
+export function editConfig(data) {
+  return request({
+    url: '/course/userCourse/editConfig',
+    method: 'post',
+    data: data
+  })
+}

src/views/course/userCourse/index.vue

@@ -41,7 +41,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="课堂类型" prop="isPrivate" style="display: none">
+      <el-form-item label="课堂类型" prop="isPrivate">
         <el-select v-model="queryParams.isPrivate" placeholder="请选择" clearable size="small">
           <el-option
             v-for="dict in courseTypeOptions"
@@ -161,6 +161,15 @@
             v-hasPermi="['course:userCourse:remove']"
           >删除
           </el-button>
+          <!-- 过程页配置 -->
+          <el-button
+            size="mini"
+            type="text"
+            v-if="scope.row.isPrivate === 1"
+            v-has-permi="['course:userCourse:editConfig']"
+            @click="configCourse(scope.row)"
+          >过程页配置
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -253,6 +262,78 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 过程页配置 -->
+    <el-dialog
+      :visible.sync="configDialog.dialogVisible"
+      title="过程页配置"
+      append-to-body
+      width="1200px"
+    >
+      <el-form :model="configDialog.form" :rules="configDialog.rules" ref="configForm" label-width="110px">
+        <el-form-item label="过程页图片" prop="coverImg">
+          <ImageUpload v-model="configDialog.form.coverImg" :height="150" :limit="1" :width="150" type="image"/>
+          <i class="el-icon-warning"/>
+          <span style="color: rgb(153, 169, 191)"> 不配置将使用课程默认图片</span>
+        </el-form-item>
+        <el-form-item label="首播电视台" prop="tvEnable">
+          <el-switch v-model="configDialog.form.tvEnable" active-color="#13ce66"/>
+        </el-form-item>
+        <el-form-item prop="tv" v-if="configDialog.form.tvEnable">
+          <el-input v-model="configDialog.form.tv" clearable></el-input>
+          <i class="el-icon-warning"/>
+          <span style="color: rgb(153, 169, 191)"> 多个首播电视台，请用英文逗号隔开</span>
+          <ImageUpload v-model="configDialog.form.tvImg" :height="150" :limit="1" :width="150" type="image"/>
+        </el-form-item>
+
+        <el-form-item label="制作单位" prop="unitEnable">
+          <el-switch v-model="configDialog.form.unitEnable" active-color="#13ce66"/>
+        </el-form-item>
+        <el-form-item prop="unit" v-if="configDialog.form.unitEnable">
+          <el-input v-model="configDialog.form.unit" clearable></el-input>
+          <i class="el-icon-warning"/>
+          <span style="color: rgb(153, 169, 191)"> 多个制作单位，请用英文逗号隔开</span>
+          <ImageUpload v-model="configDialog.form.unitImg" :height="150" :limit="1" :width="150" type="image"/>
+        </el-form-item>
+
+        <el-form-item label="网络播放平台" prop="networkEnable">
+          <el-switch v-model="configDialog.form.networkEnable" active-color="#13ce66"/>
+        </el-form-item>
+        <el-form-item prop="network" v-if="configDialog.form.networkEnable">
+          <el-input v-model="configDialog.form.network" clearable></el-input>
+          <i class="el-icon-warning"/>
+          <span style="color: rgb(153, 169, 191)"> 多个网络播放平台，请用英文逗号隔开</span>
+          <ImageUpload v-model="configDialog.form.networkImg" :height="150" :limit="1" :width="150" type="image"/>
+        </el-form-item>
+
+
+        <el-form-item label="主讲人姓名" prop="teamEnable">
+          <el-switch v-model="configDialog.form.compereEnable" active-color="#13ce66"/>
+        </el-form-item>
+        <el-form-item prop="team" v-if="configDialog.form.compereEnable">
+          <el-input v-model="configDialog.form.compere" clearable></el-input>
+          <i class="el-icon-warning"/>
+          <span style="color: rgb(153, 169, 191)"> 多个主讲人姓名，请用英文逗号隔开</span>
+        </el-form-item>
+
+        <el-form-item label="主讲人名头" prop="supportEnable">
+          <el-switch v-model="configDialog.form.compereTitleEnable" active-color="#13ce66"/>
+        </el-form-item>
+        <el-form-item prop="support" v-if="configDialog.form.compereTitleEnable">
+          <el-input v-model="configDialog.form.compereTitle" clearable></el-input>
+          <i class="el-icon-warning"/>
+          <span style="color: rgb(153, 169, 191)"> 多个主讲人名头，请用英文逗号隔开</span>
+          <ImageUpload v-model="configDialog.form.compereTitleImg" :height="150" :limit="1" :width="150" type="image"/>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary"
+                   :loading="configDialog.updating"
+                   :disabled="configDialog.updating"
+                   @click="submitConfigForm">确 定</el-button>
+        <el-button @click="cancelConfig">取 消</el-button>
+      </div>
+    </el-dialog>
     <el-drawer
       :with-header="false"
       size="75%"
@@ -273,7 +354,8 @@ import {
   updateIsShow,
   copyUserCourse,
   putOn,
-  pullOff
+  pullOff,
+  editConfig
 } from "@/api/course/userCourse";
 
 import {getSelectableRange} from "@/api/qw/sopTemp";
@@ -409,6 +491,66 @@ export default {
         integral: [
           {required: true, message: "小节兑换积分不能为空", trigger: "blur"}
         ],
+      },
+      configDialog: {
+        dialogVisible: false,
+        updating: false,
+        form: {
+          id: null,
+          coverImg: null,
+          tvEnable: 0,
+          tv: null,
+          tvImg: null,
+
+          networkEnable: 0,
+          network: null,
+          networkImg: null,
+
+          unitEnable: 0,
+          unit: null,
+          unitImg: null,
+
+          //主讲人姓名
+          compereEnable: 0,
+          compere: null,
+
+          //主讲人名头
+          compereTitleEnable: 0,
+          compereTitle: null,
+          compereTitleImg: null,
+        },
+        rules: {
+          tv: [
+            {required: true, message: '首播电视台不能为空', trigger: 'blur'}
+          ],
+          tvImg: [
+            {required: true, message: '首播电视台图片不能为空', trigger: 'blur'}
+          ],
+          network: [
+            {required: true, message: '网络播放平台不能为空', trigger: 'blur'}
+          ],
+          networkImg: [
+            {required: true, message: '网络播放平台图片不能为空', trigger: 'blur'}
+          ],
+          unit: [
+            {required: true, message: '制作单位不能为空', trigger: 'blur'}
+          ],
+          unitImg: [
+            {required: true, message: '制作单位图片不能为空', trigger: 'blur'}
+          ],
+          compere: [
+            {required: true, message: '主讲人姓名不能为空', trigger: 'blur'}
+          ],
+          compereImg: [
+            {required: true, message: '主讲人姓名图片不能为空', trigger: 'blur'}
+          ],
+          compereTitle: [
+            {required: true, message: '主讲人名头不能为空', trigger: 'blur'}
+          ],
+          compereTitleImg: [
+            {required: true, message: '主讲人名头图片不能为空', trigger: 'blur'}
+          ],
+        }
       }
     };
   },
@@ -733,7 +875,124 @@ export default {
         this.msgSuccess("下架成功");
       }).catch(function () {
       });
-    }
+    },
+    configCourse(row) {
+      if (row.configJson) {
+        this.configDialog.form = {
+          tvEnable: 0,
+          networkEnable: 0,
+          unitEnable: 0,
+          compereEnable: 0,
+          compereTitleEnable: 0,
+          ...JSON.parse(row.configJson)
+        }
+      }
+      this.configDialog.form.id = row.courseId
+      this.configDialog.dialogVisible = true;
+      this.configDialog.updating = false
+    },
+    submitConfigForm() {
+      this.$refs['configForm'].validate(valid => {
+        if (!valid) {
+          this.msgError('请完善配置内容')
+          return
+        }
+        // 验证启用项的图片是否已上传
+        const validationErrors = [];
+
+        if (this.configDialog.form.tvEnable && !this.configDialog.form.tvImg) {
+          validationErrors.push('请上传首播电视台图片');
+        }
+
+        if (this.configDialog.form.networkEnable && !this.configDialog.form.networkImg) {
+          validationErrors.push('请上传网络播放平台图片');
+        }
+
+        if (this.configDialog.form.unitEnable && !this.configDialog.form.unitImg) {
+          validationErrors.push('请上传制作单位图片');
+        }
+
+        if (this.configDialog.form.compereTitleEnable && !this.configDialog.form.compereTitleImg) {
+          validationErrors.push('请上传主讲人名头图片');
+        }
+
+        if (validationErrors.length > 0) {
+          this.msgError(validationErrors.join('、'));
+          return;
+        }
+
+        if (this.configDialog.updating) {
+          return
+        }
+        this.configDialog.updating = true
+
+        const content = {
+          coverImg: this.configDialog.form.coverImg,
+
+          tvEnable: this.configDialog.form.tvEnable,
+          tv: this.configDialog.form.tv?.replace("，",","),
+          tvImg: this.configDialog.form.tvImg,
+
+          networkEnable: this.configDialog.form.networkEnable,
+          network: this.configDialog.form.network?.replace("，",","),
+          networkImg: this.configDialog.form.networkImg,
+
+          unitEnable: this.configDialog.form.unitEnable,
+          unit: this.configDialog.form.unit?.replace("，",","),
+          unitImg: this.configDialog.form.unitImg,
+
+          compereEnable: this.configDialog.form.compereEnable,
+          compere: this.configDialog.form.compere?.replace("，",","),
+
+          compereTitleEnable: this.configDialog.form.compereTitleEnable,
+          compereTitle: this.configDialog.form.compereTitle?.replace("，",","),
+          compereTitleImg: this.configDialog.form.compereTitleImg,
+        }
+
+        const params = {
+          id: this.configDialog.form.id,
+          configJson: JSON.stringify(content)
+        }
+
+        editConfig(params).then(() => {
+          this.msgSuccess('修改成功')
+          this.configDialog.dialogVisible = false;
+          this.getList()
+        }).finally(() => {
+          setTimeout(() => {
+            this.configDialog.updating = false
+          }, 500)
+        })
+      })
+    },
+    cancelConfig() {
+      this.configDialog.form = {
+        id: null,
+        coverImg: null,
+
+        tvEnable: 0,
+        tv: null,
+        tvImg: null,
+
+        networkEnable: 0,
+        network: null,
+        networkImg: null,
+
+        unitEnable: 0,
+        unit: null,
+        unitImg: null,
+
+        compereEnable: 0,
+        compere: null,
+        compereImg: null,
+
+        compereTitleEnable: 0,
+        compereTitle: null,
+        compereTitleImg: null
+      }
+      this.resetForm('configForm')
+      this.configDialog.dialogVisible = false;
+    },
   }
 };
 </script>