过程页配置修改

src/views/course/userCourse/index.vue

@@ -291,7 +291,16 @@
       width="1200px"
     >
       <el-form :model="configDialog.form" :rules="configDialog.rules" ref="configForm" label-width="110px">
-        <el-form-item label="过程页图片" prop="coverImg">
+        <el-form-item label="是否开启过程页" prop="isOpen">
+          <el-switch
+            v-model="configDialog.form.isOpen"
+            :active-value="0"
+            :inactive-value="1"
+            active-text="开启"
+            inactive-text="不开启">
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="过程页图片" prop="coverImg" v-if="configDialog.form.isOpen === 0">
           <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>
@@ -307,19 +316,24 @@
 <!--          </el-select>-->
 <!--        </el-form-item>-->
         <!-- 添加三个图片上传组件 -->
-        <el-form-item label="Home图标" prop="home">
+        <el-form-item label="联系电话" prop="phone" v-if="configDialog.form.isOpen === 0">
+          <el-input v-model="configDialog.form.phone" clearable placeholder="请输入联系电话"></el-input>
+          <i class="el-icon-warning"/>
+          <span style="color: rgb(153, 169, 191)"> 课程过程页联系电话</span>
+        </el-form-item>
+        <el-form-item label="Home图标" prop="home" v-if="configDialog.form.isOpen === 0">
           <ImageUpload v-model="configDialog.form.home" :height="150" :limit="1" :width="150" type="image"/>
         </el-form-item>
 
-        <el-form-item label="星星图标" prop="start">
+        <el-form-item label="星星图标" prop="start" v-if="configDialog.form.isOpen === 0" >
           <ImageUpload v-model="configDialog.form.start" :height="150" :limit="1" :width="150" type="image"/>
         </el-form-item>
 
-        <el-form-item label="背景图" prop="bg">
+        <el-form-item label="背景图" prop="bg" v-if="configDialog.form.isOpen === 0">
           <ImageUpload v-model="configDialog.form.bg" :height="150" :limit="1" :width="150" type="image"/>
         </el-form-item>
         <!-- 添加字体样式下拉框 -->
-        <el-form-item label="字体样式" prop="frontStyle">
+        <el-form-item label="字体样式" prop="frontStyle" v-if="configDialog.form.isOpen === 0">
           <el-select v-model="configDialog.form.frontStyle" placeholder="请选择字体样式">
             <el-option
               v-for="item in frontStyleOptions"
@@ -330,42 +344,42 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="首播电视台" prop="tvEnable">
+        <el-form-item label="首播电视台" prop="tvEnable" v-if="configDialog.form.isOpen === 0">
           <el-switch v-model="configDialog.form.tvEnable" active-color="#13ce66"/>
         </el-form-item>
-        <el-form-item prop="tv" v-if="configDialog.form.tvEnable">
+        <el-form-item prop="tv" v-if="configDialog.form.isOpen === 0 && 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>
         </el-form-item>
-        <el-form-item label="网络播放平台" prop="networkEnable">
+        <el-form-item label="网络播放平台" prop="networkEnable" v-if="configDialog.form.isOpen === 0">
           <el-switch v-model="configDialog.form.networkEnable" active-color="#13ce66"/>
         </el-form-item>
-        <el-form-item prop="network" v-if="configDialog.form.networkEnable">
+        <el-form-item prop="network" v-if="configDialog.form.isOpen === 0 && 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>
         </el-form-item>
-        <el-form-item label="制作单位" prop="unitEnable">
+        <el-form-item label="制作单位" prop="unitEnable" v-if="configDialog.form.isOpen === 0">
           <el-switch v-model="configDialog.form.unitEnable" active-color="#13ce66"/>
         </el-form-item>
-        <el-form-item prop="unit" v-if="configDialog.form.unitEnable">
+        <el-form-item prop="unit" v-if="configDialog.form.isOpen === 0 && 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>
         </el-form-item>
-        <el-form-item label="专家顾问团队" prop="teamEnable">
+        <el-form-item label="专家顾问团队" prop="teamEnable" v-if="configDialog.form.isOpen === 0">
           <el-switch v-model="configDialog.form.teamEnable" active-color="#13ce66"/>
         </el-form-item>
-        <el-form-item prop="team" v-if="configDialog.form.teamEnable">
+        <el-form-item prop="team" v-if="configDialog.form.isOpen === 0 && configDialog.form.teamEnable">
           <el-input v-model="configDialog.form.team" 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-form-item label="支持单位" prop="supportEnable" v-if="configDialog.form.isOpen === 0">
           <el-switch v-model="configDialog.form.supportEnable" active-color="#13ce66"/>
         </el-form-item>
-        <el-form-item prop="support" v-if="configDialog.form.supportEnable">
+        <el-form-item prop="support" v-if="configDialog.form.isOpen === 0 && configDialog.form.supportEnable">
           <el-input v-model="configDialog.form.support" clearable></el-input>
           <i class="el-icon-warning"/>
           <span style="color: rgb(153, 169, 191)"> 多个支持单位，请用英文逗号隔开</span>
@@ -568,6 +582,7 @@ export default {
           id: null,
           coverImg: null,
           // templateId: null,
+          isOpen: 0,  // 添加这个字段，默认开启
           frontStyle: null, // 字体样式字段
           home: null,  // 添加home图片字段
           start: null, // 添加start图片字段
@@ -581,12 +596,16 @@ export default {
           teamEnable: 0,
           team: null,
           supportEnable: 0,
-          support: null
+          support: null,
+          phone: null,
         },
         rules: {
           // templateId: [
           //   { required: true, message: '模板名称不能为空', trigger: 'blur' }
           // ],
+          isOpen: [
+            { required: true, message: '是否开启过程页不能为空', trigger: 'change' }
+          ],
           home: [
             { required: true, message: '首页图标不能为空', trigger: 'blur' }
           ],
@@ -981,6 +1000,7 @@ export default {
         id: null,
         coverImg: null,
         // templateId: null,
+        isOpen: 0,
         frontStyle: null, // 字体样式字段
         home: null,  // 添加home默认值
         start: null, // 添加start默认值
@@ -995,6 +1015,7 @@ export default {
         team: null,
         supportEnable: 0,
         support: null,
+        phone: null
       }
 
       let parsedConfig = {}
@@ -1011,6 +1032,8 @@ export default {
         ...parsedConfig,
         id: row.courseId,
         frontStyle: parsedConfig.frontStyle || null,
+        isOpen: parsedConfig.hasOwnProperty('isOpen') ? parsedConfig.isOpen : 0,
+        phone: parsedConfig.phone || null
       }
       this.configDialog.dialogVisible = true;
       this.configDialog.updating = false
@@ -1030,6 +1053,8 @@ export default {
         const content = {
           coverImg: this.configDialog.form.coverImg,
           frontStyle: this.configDialog.form.frontStyle,
+          isOpen: this.configDialog.form.isOpen,
+          phone: this.configDialog.form.phone,
           home: this.configDialog.form.home,  // 添加home字段
           start: this.configDialog.form.start, // 添加start字段
           bg: this.configDialog.form.bg,      // 添加bg字段
@@ -1067,6 +1092,7 @@ export default {
         coverImg: null,
         templateId: null,
         frontStyle: null,
+        isOpen: 0,
         home: null,  // 重置home字段
         start: null, // 重置start字段
         bg: null,    // 重置bg字段
@@ -1079,7 +1105,8 @@ export default {
         teamEnable: 0,
         team: null,
         supportEnable: 0,
-        support: null
+        support: null,
+        phone: null
       }
       this.resetForm('configForm')
       this.configDialog.dialogVisible = false;