1、直播链接短链

src/views/qw/sopLogs/sopLogsList.vue

@@ -184,7 +184,13 @@
                 <span v-if="item.contentType == 15">APP文本</span>
                 <span v-if="item.contentType == 16">APP语音</span>
                 <span v-if="item.contentType == 17">浏览器看课</span>
-                <span v-if="item.contentType == 4"><el-button size="mini" type="primary" @click="generateShortLink(item)" style="margin-left: 330px;">生成短链</el-button></span>
+                <span v-if="item.contentType == 18">直播卡片</span>
+                <span v-if="item.contentType == 19">直播短链</span>
+                <span v-if="item.contentType == 4 || item.contentType == 17"><el-button size="mini" type="primary" @click="generateShortLink(item)" style="margin-left: 330px;">生成短链</el-button></span>
+                <span v-if="item.contentType == 18 || item.contentType == 19"><el-button size="mini" type="primary" @click="generateLiveShortLink(item)" style="margin-left: 330px;">复制短链</el-button></span>
+                <span v-if="item.contentType == 21">发看课短信</span>
+                <span v-if="item.contentType == 23">APP看课跳转短链</span>
+                <span v-if="item.contentType == 24">APP直播跳转短链</span>
               </div>
               <div v-if="item.sendStatus">
                 <span>发送状态：</span>
@@ -193,7 +199,7 @@
               </div>
             </div>
             <div v-if="item.sendStatus && item.sendStatus == 2">发送失败原因：<span style="color: #ff4949">{{item.sendRemarks}}</span></div>
-            <div v-if="item.contentType == 1 || item.contentType == 15" v-html="item.value"></div>
+            <div v-if="item.contentType == 1 || item.contentType == 15 || item.contentType == 19" v-html="item.value"></div>
             <div v-if="item.contentType == 2">
               <el-image
                 style="width: 100px; height: 100px"
@@ -217,7 +223,7 @@
                 </div>
               </div>
             </div>
-            <div v-if="item.contentType == 4 || item.contentType == 10 || item.contentType == 17" class="message-style">
+            <div v-if="item.contentType == 4 || item.contentType == 10 || item.contentType == 18 || item.contentType == 17 || item.contentType == 23 || item.contentType == 24" class="message-style">
                 <div style="display: flex; justify-content: space-between; width: 100%">
                   <span style="font-size: 13px; flex: 1">{{ item.miniprogramTitle }}</span>
                   <el-image
@@ -335,7 +341,7 @@ import {
   listQwSopLogsList,
   delQwSopLogs,
   editCourseQwSopLogs,
-  generateShortLink
+  generateShortLink,generateLiveShortLink
 } from '../../../api/qw/sopLogs'
 import {delSopUserLogsInfo} from "@/api/qw/sopUserLogsInfo";
 import userVideo from "@/views/qw/userVideo/userVideo";
@@ -357,6 +363,7 @@ export default {
   },
   data() {
     return {
+
       videoNumOptions: {
         title: '选择视频号',
         open: false,
@@ -397,10 +404,19 @@ export default {
       //企微SOP发送类型
       sysQwSopType: [],
 
+      //APP发送状态
+      sysQwAppSendStatusOptions: [
+        { dictValue: '0', dictLabel: '未发送', listClass: 'default' },
+        { dictValue: '1', dictLabel: '成功', listClass: 'success' },
+        { dictValue: '2', dictLabel: '失败', listClass: 'danger' },
+        { dictValue: '3', dictLabel: '不发送', listClass: 'warning' }
+      ],
+
       //发送的消息
       contentDialog:{
         isDialogVisible:false,
         json: [],
+        videoId:null,
       },
       // 弹出层标题
       title: "",
@@ -450,6 +466,15 @@ export default {
 
   },
   methods: {
+      // 获取发送用户类型文本
+      getOnlyUnregisteredText(value) {
+          const typeMap = {
+              1: '已注册',
+              2: '未注册',
+              3: '未对话'
+          };
+          return typeMap[value] || value;
+      },
 
     qwUserVideoResult(val) {
 
@@ -560,9 +585,8 @@ export default {
       // 替换非法换行符等控制字符
       const sanitizedJson = contentJson.replace(/[\u0000-\u001F\u007F]/g, '');
       const parsedData = JSON.parse(sanitizedJson);
-
       this.contentDialog.json = parsedData.setting;
-
+      this.contentDialog.videoId=parsedData.videoId
       this.contentDialog.isDialogVisible = true;
     },
     /** 搜索按钮操作 */
@@ -641,6 +665,16 @@ export default {
       });
       this.shortLinkDialogVisible = true;
     },
+    generateLiveShortLink(val){
+      const param = {
+        linkStr:val.miniprogramPage,
+        appId:val.miniprogramAppid
+      };
+      generateLiveShortLink(param).then(res=>{
+        this.copyText = res.urlLink;
+      });
+      this.shortLinkDialogVisible = true;
+    },
     onCopy(){
       navigator.clipboard.writeText(this.copyText).then(() => {
         this.$message.success('复制成功')

src/views/qw/sopTemp/updateSopTemp.vue

@@ -158,41 +158,58 @@
                                     <el-radio :label="2">课程</el-radio>
                                     <el-radio :label="4">AI触达</el-radio>
                                     <el-radio :label="5">打标签</el-radio>
+                                    <el-radio :label="20">直播间</el-radio>
                                   </el-radio-group>
                                 </el-form-item>
-                                <el-form-item label="课程" v-if="content.type == 2 && form.sendType != 5" required>
-                                  <el-select :disabled="formType == 3 || form.sendType == 11 || !roles.includes('edit_sop_temp_content')" v-model="content.courseId"
-                                             placeholder="请选择课程" style=" margin-right: 10px;" size="mini" remote
-                                             filterable
-                                             @change="courseChangeUpdate(content,index,contentIndex)">
-                                    <el-option
-                                      v-for="dict in courseList"
-                                      :key="dict.dictValue"
-                                      :label="dict.dictLabel"
-                                      :value="parseInt(dict.dictValue)"
-                                    />
-                                  </el-select>
-                                  <el-select :disabled="formType == 3 || form.sendType == 11 || !roles.includes('edit_sop_temp_content')" v-model="content.videoId"
-                                             placeholder="请选择小节" size="mini" style=" margin-right: 10px;" remote
-                                             filterable
-                                             @change="videoIdChange(content,index,contentIndex)">
-                                    <el-option
-                                      v-for="dict in videoList[contentIndex]"
-                                      :key="dict.dictValue"
-                                      :label="dict.dictLabel"
-                                      :value="parseInt(dict.dictValue)"
-                                    />
-                                  </el-select>
-                                  <el-select :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="content.courseType"
-                                             placeholder="请选择消息类型" size="mini"
-                                             style=" margin-right: 10px;" v-if="content.type != 4 ">
-                                    <el-option
-                                      v-for="dict in sysFsSopWatchStatus"
-                                      :key="dict.dictValue"
-                                      :label="dict.dictLabel"
-                                      :value="Number(dict.dictValue)"
-                                    />
-                                  </el-select>
+                                <el-form-item label="直播间" v-if="content.type == 20">
+                                      <el-select  v-model="content.liveId"
+                                                  filterable
+                                                  placeholder="请选择直播间" size="mini"
+                                                  @change="liveChangeContent(content)" >
+                                        <el-option
+                                          v-for="dict in liveList"
+                                          :key="dict.liveId"
+                                          :label="dict.liveName"
+                                          :value="dict.liveId"
+                                        />
+                                      </el-select>
+                                </el-form-item>
+                                <el-form-item label="课程选择" v-if="content.type == 2 && form.sendType != 5" required class="course-select-item">
+                                  <div class="course-select-row">
+                                    <el-select :disabled="formType == 3 || form.sendType == 11 || !roles.includes('edit_sop_temp_content')" v-model="content.courseId"
+                                               placeholder="请选择课程" size="small" remote
+                                               filterable
+                                               @change="courseChangeUpdate(content,index,contentIndex)">
+                                      <el-option
+                                        v-for="dict in courseList"
+                                        :key="dict.dictValue"
+                                        :label="dict.dictLabel"
+                                        :value="parseInt(dict.dictValue)"
+                                      />
+                                    </el-select>
+                                    <el-select :disabled="formType == 3 || form.sendType == 11 || !roles.includes('edit_sop_temp_content')" v-model="content.videoId"
+                                               placeholder="请选择小节" size="small" remote
+                                               filterable
+                                               @change="videoIdChange(content,index,contentIndex)">
+                                      <el-option
+                                        v-for="dict in videoList[contentIndex]"
+                                        :key="dict.dictValue"
+                                        :label="dict.dictLabel"
+                                        :value="parseInt(dict.dictValue)"
+                                      />
+                                    </el-select>
+                                  </div>
+                                  <div class="course-type-row" v-if="content.type != 4">
+                                    <el-select :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="content.courseType"
+                                               placeholder="请选择消息类型" size="small">
+                                      <el-option
+                                        v-for="dict in sysFsSopWatchStatus"
+                                        :key="dict.dictValue"
+                                        :label="dict.dictLabel"
+                                        :value="Number(dict.dictValue)"
+                                      />
+                                    </el-select>
+                                  </div>
 
                                 </el-form-item>
                                 <el-form-item label="Ai触达" v-if="content.type == 4 ">
@@ -418,12 +435,17 @@
                                               </el-form-item>
                                             </el-card>
                                           </div>
-                                          <div v-if="setList.contentType == 12">
-                                            <!--                                           <div >-->
-                                            <el-card class="box-card">
-                                              <el-form-item label="直播间" >
+                                          <div v-if="setList.contentType == 12 || setList.contentType == 18 || setList.contentType == 19 || setList.contentType == 24">
+                                            <el-card class="box-card miniprogram-card">
+                                              <div slot="header" class="card-header-mini">
+                                                <i class="el-icon-video-camera"></i>
+                                                <span>直播小程序</span>
+                                              </div>
+                                              <el-form-item label="直播间" required>
                                                 <el-select  v-model="setList.liveId"
                                                             placeholder="请选择直播间" size="mini"
+                                                            filterable
+                                                            :disabled="content.type==20"
                                                             @change="liveChange(setList)" >
                                                   <el-option
                                                     v-for="dict in liveList"
@@ -434,15 +456,15 @@
                                                 </el-select>
                                               </el-form-item>
 
-                                              <el-form-item label="标题" prop="miniprogramTitle">
-                                                <el-input v-model="setList.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字节" :rows="2" maxlength="64"
+                                              <el-form-item label="标题" prop="miniprogramTitle" required>
+                                                <el-input  :disabled="content.type==20" v-model="setList.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字节" :rows="2" maxlength="64"
                                                           type="textarea" @input="checkByteLength(content,setList.contentType,content.isOfficial)"   />
                                               </el-form-item>
-                                              <el-form-item label="封面" prop="miniprogramPicUrl">
-                                                <ImageUpload v-model="setList.miniprogramPicUrl" type="image" :num="10" :width="150" :height="150" />
+                                              <el-form-item label="封面" prop="miniprogramPicUrl" required>
+                                                <ImageUpload  :disabled="content.type==20" v-model="setList.miniprogramPicUrl" type="image" :num="10" :width="150" :height="150" />
                                               </el-form-item>
                                               <el-form-item label="appid" prop="miniprogramAppid" v-show="false">
-                                                <el-input v-model="setList.miniprogramAppid='wx503cf8ab31f83dd4' " disabled />
+                                                <el-input v-model="setList.miniprogramAppid='wxcfd4cd6e2375e42f' " disabled />
                                               </el-form-item>
                                               <el-form-item label="page路径" prop="miniprogramPage"  v-show="false" label-width="100px" style="margin-left: -30px">
                                                 <el-input v-model="setList.miniprogramPage" placeholder="小程序消息打开后的路径"  disabled />
@@ -747,6 +769,864 @@
   background: rgb(26, 164, 255) !important;
   color: #FFF !important;
 }
+
+/* ===== 页面头部样式 ===== */
+.sop-temp-container {
+  padding: 20px;
+  background: #f5f7fa;
+}
+
+.page-header {
+  background: linear-gradient(135deg, #1890ff 0%, #0066cc 100%);
+  padding: 20px 30px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.15);
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.header-title i {
+  font-size: 20px;
+  margin-right: 10px;
+}
+
+.header-subtitle {
+  padding-left: 30px;
+}
+
+.template-id {
+  display: inline-block;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 4px 12px;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 13px;
+  font-family: 'Courier New', monospace;
+  backdrop-filter: blur(10px);
+}
+
+/* ===== 表单内容区样式 ===== */
+.form-content {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+/* 基本信息卡片 */
+.info-card {
+  margin-bottom: 20px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+}
+
+.info-card ::v-deep .el-card__header {
+  padding: 12px 20px;
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.info-card .card-header {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  color: #333;
+}
+
+.info-card .card-header i {
+  margin-right: 8px;
+  font-size: 16px;
+  color: #1890ff;
+}
+
+/* 基本信息项目布局 */
+.info-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 8px 0;
+}
+
+.info-item {
+  display: inline-flex;
+  align-items: center;
+  background: #f8f9fa;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  padding: 8px 16px;
+  gap: 8px;
+}
+
+.info-label {
+  color: #606266;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.info-label::after {
+  content: '：';
+}
+
+.info-value {
+  color: #303133;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.info-item .el-tag {
+  margin-left: 0;
+}
+
+/* 规则配置样式 */
+.rule-form-item {
+  margin-top: 20px;
+}
+
+.rule-form-item ::v-deep .el-form-item__label {
+  font-weight: 600;
+  color: #333;
+}
+
+.rule-actions {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: #f9f9f9;
+  border-radius: 6px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.rule-actions .el-button {
+  margin-left: 0;
+}
+
+/* 规则标签页样式 */
+.rule-tabs {
+  margin-top: 16px;
+}
+
+.rule-tabs ::v-deep .el-tabs__header {
+  margin-bottom: 20px;
+}
+
+.rule-tabs ::v-deep .el-tabs__item {
+  height: 42px;
+  line-height: 42px;
+  font-size: 14px;
+}
+
+.rule-tabs ::v-deep .el-tabs__item.is-active {
+  background: #1890ff;
+  color: #fff;
+  border-color: #1890ff;
+}
+
+/* 红点样式优化 - 未选中状态 */
+.rule-tabs ::v-deep .el-badge__content.is-dot {
+  width: 6px;
+  height: 6px;
+  top: -3px;
+  right: -8px;
+  background-color: #f56c6c;
+  border: none;
+  box-shadow: none;
+}
+
+/* 红点样式优化 - 选中状态 */
+.rule-tabs ::v-deep .el-tabs__item.is-active .el-badge__content.is-dot {
+  background-color: #faad14;
+  border: none;
+  box-shadow: none;
+}
+
+/* 标签内容区域 */
+.tab-content-row {
+  min-height: 300px;
+}
+
+/* 加载动画优化 */
+.tab-content-row ::v-deep .el-loading-mask {
+  border-radius: 6px;
+}
+
+.tab-content-row ::v-deep .el-loading-spinner {
+  top: 40%;
+}
+
+.tab-content-row ::v-deep .el-loading-spinner .circular {
+  width: 42px;
+  height: 42px;
+}
+
+.tab-content-row ::v-deep .el-loading-spinner .el-loading-text {
+  color: #1890ff;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+/* 天内容卡片 */
+.day-content-card {
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  margin-bottom: 20px;
+}
+
+.day-content-card ::v-deep .el-card__body {
+  padding: 20px;
+}
+
+/* 内容项卡片 */
+.content-item-card {
+  background-color: #fafafa;
+  padding: 16px;
+  border: 1px solid #e6e6e6;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  transition: all 0.3s;
+}
+
+.content-item-card:hover {
+  border-color: #1890ff;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+}
+
+/* 内容类别样式 */
+.content-type-item {
+  margin-bottom: 20px;
+}
+
+.content-type-item ::v-deep .el-form-item__label {
+  font-weight: 600;
+  line-height: 32px;
+}
+
+.content-type-item ::v-deep .el-form-item__content {
+  line-height: 32px;
+}
+
+.content-type-item ::v-deep .el-radio-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+  line-height: 32px;
+}
+
+.content-type-item ::v-deep .el-radio {
+  margin-right: 0;
+  line-height: 32px;
+}
+
+/* 表单优化 */
+.sop-form ::v-deep .el-form-item {
+  margin-bottom: 18px;
+}
+
+.sop-form ::v-deep .el-form-item__label {
+  color: #606266;
+  font-size: 14px;
+}
+
+/* 标签优化 */
+.sop-form ::v-deep .el-tag {
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 28px;
+  line-height: 28px;
+}
+
+/* 输入框优化 */
+.sop-form ::v-deep .el-input__inner,
+.sop-form ::v-deep .el-textarea__inner {
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.sop-form ::v-deep .el-input__inner:focus,
+.sop-form ::v-deep .el-textarea__inner:focus {
+  border-color: #1890ff;
+}
+
+/* 卡片样式统一 */
+.sop-form ::v-deep .el-card {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.sop-form ::v-deep .box-card {
+  margin-top: 12px;
+  background: #f9f9f9;
+  border: 1px solid #e8e8e8;
+}
+
+.sop-form ::v-deep .box-card .el-card__body {
+  padding: 16px;
+}
+
+/* 按钮组样式 */
+.sop-form ::v-deep .el-button-group {
+  display: flex;
+  gap: 8px;
+}
+
+/* 开关样式优化 */
+.sop-form ::v-deep .el-switch {
+  margin-right: 12px;
+}
+
+/* 提示信息样式 */
+.sop-form ::v-deep .el-form-item__content > div[style*="color: #999"] {
+  background: #f0f9ff;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border-left: 3px solid #1890ff;
+  margin-top: 8px;
+}
+
+.sop-form ::v-deep .el-form-item__content > div[style*="color: #999"] i {
+  color: #1890ff;
+  margin-right: 6px;
+}
+
+/* ===== 规则内容优化 ===== */
+.rule-content-item {
+  margin-top: 20px;
+}
+
+.rule-content-item ::v-deep .el-form-item__label {
+  font-weight: 600;
+  font-size: 15px;
+  color: #333;
+}
+
+/* 内容项卡片头部 */
+.content-item-header {
+  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
+  padding: 12px 16px;
+  margin: -16px -16px 16px -16px;
+  border-bottom: 2px solid #1890ff;
+  border-radius: 6px 6px 0 0;
+}
+
+.content-item-title {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  font-size: 14px;
+  color: #333;
+}
+
+.content-item-title i {
+  margin-right: 6px;
+  color: #1890ff;
+  font-size: 16px;
+}
+
+/* 设置项卡片 */
+.setting-item-card {
+  background: #fff;
+  border: 1px solid #e0e6ed;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  padding: 16px;
+  transition: all 0.3s;
+}
+
+.setting-item-card:hover {
+  border-color: #1890ff;
+  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.12);
+}
+
+.setting-item-header {
+  margin: -16px -16px 16px -16px;
+  padding: 10px 16px;
+  background: #f9fafb;
+  border-bottom: 1px solid #e8e8e8;
+  border-radius: 6px 6px 0 0;
+}
+
+.setting-item-title {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-size: 13px;
+  color: #606266;
+}
+
+.setting-item-title i {
+  margin-right: 6px;
+  color: #909399;
+  font-size: 14px;
+}
+
+.setting-content {
+  padding-bottom: 12px;
+}
+
+/* 内容表单统一样式 */
+.content-form ::v-deep .el-form-item__label {
+  padding-right: 8px;
+  text-align: right;
+}
+
+/* 内联表单项 */
+.inline-form-item {
+  margin-bottom: 18px;
+}
+
+.inline-form-item ::v-deep .el-form-item__content {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0 !important;
+}
+
+/* 开关表单项 */
+.switch-form-item {
+  margin-bottom: 20px;
+}
+
+.switch-form-item ::v-deep .el-form-item__label {
+  line-height: 32px;
+}
+
+.switch-form-item ::v-deep .el-form-item__content {
+  display: block;
+}
+
+.switch-form-item ::v-deep .el-switch {
+  vertical-align: middle;
+}
+
+/* 表单提示信息 */
+.form-tip-info {
+  background: #f0f9ff;
+  color: #666;
+  font-size: 13px;
+  padding: 10px 14px;
+  border-radius: 4px;
+  border-left: 3px solid #1890ff;
+  display: flex;
+  align-items: flex-start;
+  line-height: 1.6;
+  margin-top: 8px;
+}
+
+.form-tip-info i {
+  color: #1890ff;
+  margin-right: 8px;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+/* 内容操作按钮 */
+.content-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 4px;
+}
+
+.content-actions .el-button {
+  margin-left: 0;
+  padding: 8px 15px;
+}
+
+.content-actions .el-button [class*="el-icon-"] {
+  margin-right: 4px;
+}
+
+/* 消息类别 Radio 组优化 */
+.sop-form ::v-deep .el-radio {
+  margin-right: 16px;
+  margin-bottom: 8px;
+}
+
+.sop-form ::v-deep .el-radio__label {
+  font-size: 13px;
+  padding-left: 8px;
+}
+
+/* Select 下拉框优化 */
+.sop-form ::v-deep .el-select {
+  margin-right: 12px;
+  margin-bottom: 8px;
+}
+
+.sop-form ::v-deep .el-select .el-input__inner {
+  border-radius: 4px;
+}
+
+/* 标签输入优化 */
+.sop-form ::v-deep .el-tag {
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+.sop-form ::v-deep .input-new-tag {
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+.sop-form ::v-deep .button-new-tag {
+  margin-bottom: 8px;
+}
+
+/* ===== 小程序、福袋、上传卡片优化 ===== */
+.miniprogram-card,
+.luckybag-card,
+.upload-card {
+  margin-top: 12px;
+  border: 1px solid #e8e8e8;
+}
+
+.miniprogram-card ::v-deep .el-card__header,
+.luckybag-card ::v-deep .el-card__header,
+.upload-card ::v-deep .el-card__header {
+  padding: 0;
+  border-bottom: none;
+}
+
+.miniprogram-card ::v-deep .el-card__body,
+.luckybag-card ::v-deep .el-card__body,
+.upload-card ::v-deep .el-card__body {
+  padding: 16px 20px;
+}
+
+.card-header-mini {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  font-size: 14px;
+  color: #333;
+  padding: 10px 16px;
+  background: linear-gradient(135deg, #f9fafb 0%, #f0f4f8 100%);
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.card-header-mini i {
+  margin-right: 8px;
+  font-size: 16px;
+  color: #1890ff;
+}
+
+.miniprogram-card .el-form-item,
+.luckybag-card .el-form-item,
+.upload-card .el-form-item {
+  margin-bottom: 16px;
+}
+
+.miniprogram-card .el-form-item:last-child,
+.luckybag-card .el-form-item:last-child,
+.upload-card .el-form-item:last-child {
+  margin-bottom: 0;
+}
+
+.miniprogram-card .el-form-item__label::before,
+.luckybag-card .el-form-item__label::before,
+.upload-card .el-form-item__label::before {
+  color: #f56c6c;
+  margin-right: 4px;
+}
+
+/* 上传组件优化 */
+.avatar-uploader ::v-deep .el-upload {
+  border: 2px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+}
+
+.avatar-uploader ::v-deep .el-upload:hover {
+  border-color: #1890ff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 150px;
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.avatar-uploader ::v-deep .el-upload:hover .avatar-uploader-icon {
+  color: #1890ff;
+}
+
+/* ===== 排序对话框优化 ===== */
+.sort-dialog ::v-deep .el-dialog {
+  border-radius: 8px;
+}
+
+.sort-dialog ::v-deep .el-dialog__header {
+  background: linear-gradient(135deg, #1890ff 0%, #0066cc 100%);
+  padding: 16px 20px;
+  border-radius: 8px 8px 0 0;
+}
+
+.sort-dialog ::v-deep .el-dialog__title {
+  color: #fff;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.sort-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+  font-size: 18px;
+}
+
+.sort-dialog ::v-deep .el-dialog__body {
+  padding: 20px;
+}
+
+.sort-dialog-content {
+  min-height: 200px;
+}
+
+.sort-tip {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  background: #f0f9ff;
+  border-left: 3px solid #1890ff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  color: #666;
+  font-size: 13px;
+}
+
+.sort-tip i {
+  color: #1890ff;
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.sort-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 20px;
+  background: #fafafa;
+  border-radius: 6px;
+  min-height: 120px;
+}
+
+.sort-button {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: move;
+  transition: all 0.3s;
+  border: 2px solid #e8e8e8;
+  background: #fff;
+}
+
+.sort-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: #1890ff;
+}
+
+.sort-button.changed {
+  background: linear-gradient(135deg, #fff1f0 0%, #ffccc7 100%);
+  border-color: #ff4d4f;
+  color: #cf1322;
+  font-weight: 600;
+}
+
+.origin-day {
+  font-size: 12px;
+  color: #999;
+  margin-left: 6px;
+  font-weight: normal;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 10px;
+}
+
+.dialog-footer .el-button {
+  margin-left: 0;
+}
+
+/* ===== 图片和链接卡片优化 ===== */
+.image-card,
+.link-card {
+  margin-top: 12px;
+  border: 1px solid #e8e8e8;
+}
+
+.image-card ::v-deep .el-card__header,
+.link-card ::v-deep .el-card__header {
+  padding: 0;
+  border-bottom: none;
+}
+
+.image-card ::v-deep .el-card__body,
+.link-card ::v-deep .el-card__body {
+  padding: 16px 20px;
+}
+
+.image-card .el-form-item,
+.link-card .el-form-item {
+  margin-bottom: 16px;
+}
+
+.image-card .el-form-item:last-child,
+.link-card .el-form-item:last-child {
+  margin-bottom: 0;
+}
+
+.image-card .el-form-item__label::before,
+.link-card .el-form-item__label::before {
+  color: #f56c6c;
+  margin-right: 4px;
+}
+
+/* 图片上传区域 */
+.image-card ::v-deep .image-upload {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+}
+
+/* 链接地址区域 */
+.link-url-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.link-tip-section {
+  margin-top: 16px;
+  padding: 16px;
+  background: #fffbf0;
+  border-radius: 6px;
+  border: 1px solid #ffe7ba;
+}
+
+.link-tip-section .el-tag {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  font-size: 13px;
+  line-height: 1.6;
+  border: none;
+  background: transparent;
+}
+
+.link-tip-section .el-tag i {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+/* 链接卡片输入框优化 */
+.link-card ::v-deep .el-input__inner,
+.link-card ::v-deep .el-textarea__inner {
+  border-radius: 6px;
+}
+
+.link-card ::v-deep .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+}
+
+/* 图片上传组件增强 */
+.image-card ::v-deep .el-upload {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.image-card ::v-deep .el-upload:hover {
+  border-color: #1890ff;
+}
+
+.image-card ::v-deep .el-upload-list__item {
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.image-card ::v-deep .el-upload-list__item:hover {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* ===== 消息类别和课程选择优化 ===== */
+.msg-category-item {
+  margin-bottom: 20px;
+}
+
+.msg-category-item ::v-deep .el-form-item__label {
+  font-weight: 500;
+  white-space: nowrap;
+  line-height: 32px;
+}
+
+.msg-category-item ::v-deep .el-form-item__content {
+  line-height: 32px;
+}
+
+.msg-category-item ::v-deep .el-radio-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+  line-height: 32px;
+}
+
+.msg-category-item ::v-deep .el-radio {
+  margin-right: 0;
+  margin-bottom: 0;
+  line-height: 32px;
+}
+
+/* 课程选择区域 */
+.course-select-item {
+  margin-bottom: 20px;
+}
+
+.course-select-item ::v-deep .el-form-item__label {
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.course-select-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.course-select-row .el-select {
+  min-width: 160px;
+  flex: 1;
+}
+
+.course-type-row {
+  display: flex;
+  gap: 12px;
+}
+
+.course-type-row .el-select {
+  width: 180px;
+}
 </style>
 <script>
 import draggable from 'vuedraggable';

src/views/qw/sopUserLogsInfo/sendMsgOpenTool.vue

@@ -21,7 +21,7 @@
         </el-form-item>
 
         <el-form-item label="选择课程" v-if="msgForm.draftStrategy==1" >
-          <el-select  v-model="msgForm.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini"  @change="courseChange()">
+          <el-select  v-model="msgForm.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini" filterable  @change="courseChange()">
             <el-option
               v-for="dict in courseList"
               :key="dict.dictValue"
@@ -29,7 +29,7 @@
               :value="parseInt(dict.dictValue)"
             />
           </el-select>
-          <el-select  v-model="msgForm.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;" @change="videoIdChange()"  >
+          <el-select  v-model="msgForm.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;" filterable @change="videoIdChange()"  >
             <el-option
               v-for="dict in videoList"
               :key="dict.dictValue"
@@ -45,6 +45,20 @@
               :value="parseInt(dict.dictValue)"
             />
           </el-select>
+        </el-form-item>
+         <el-form-item label="选择直播间">
+             <el-select  v-model="msgForm.liveId"
+                         filterable
+                                      placeholder="请选择直播间" size="mini"
+                                       style=" margin-right: 10px;"
+                                      @change="liveChangemsgForm(msgForm.liveId)" clearable >
+                            <el-option
+                              v-for="dict in liveList"
+                              :key="dict.liveId"
+                              :label="dict.liveName"
+                              :value="dict.liveId"
+                            />
+              </el-select>
         </el-form-item>
         <el-form-item label="规则" prop="setting" v-if="msgForm.draftStrategy==1"  >
           <div v-for="(item, index) in setting" :key="index" style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;">
@@ -87,12 +101,13 @@
                     </el-card>
                   </div> -->
                   <el-form-item label="内容" style="margin-bottom: 2%" >
-                    <div v-if="item.contentType == 12">
+                    <div v-if="item.contentType == 12 || item.contentType == 18 || item.contentType == 19 || item.contentType == 24">
                       <el-card class="box-card">
                         <el-form-item label="直播间" >
                           <el-select  v-model="item.liveId"
+                                      filterable
                                       placeholder="请选择直播间" size="mini"
-                                      @change="liveChange(item)" >
+                                      @change="liveChange(item)" :disabled="liveDisabled()">
                             <el-option
                               v-for="dict in liveList"
                               :key="dict.liveId"
@@ -103,14 +118,14 @@
                         </el-form-item>
 
                         <el-form-item label="标题" prop="miniprogramTitle">
-                          <el-input v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字节" :rows="2" maxlength="64"
+                          <el-input :disabled="liveDisabled()" v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字节" :rows="2" maxlength="64"
                                     type="textarea"   />
                         </el-form-item>
                         <el-form-item label="封面" prop="miniprogramPicUrl">
-                          <ImageUpload v-model="item.miniprogramPicUrl" type="image" :num="10" :width="150" :height="150" />
+                          <ImageUpload :disabled="liveDisabled()" v-model="item.miniprogramPicUrl" type="image" :num="10" :width="150" :height="150" />
                         </el-form-item>
                         <el-form-item label="appid" prop="miniprogramAppid" v-show="false">
-                          <el-input v-model="item.miniprogramAppid='wx503cf8ab31f83dd4' " disabled />
+                          <el-input v-model="item.miniprogramAppid='wxcfd4cd6e2375e42f' " disabled />
                         </el-form-item>
                         <el-form-item label="page路径" prop="miniprogramPage"  v-show="false" label-width="100px" style="margin-left: -30px">
                           <el-input v-model="item.miniprogramPage" placeholder="小程序消息打开后的路径"  disabled />
@@ -164,7 +179,7 @@
                         </el-form-item>
                       </el-card>
                     </div>
-                    <div v-if="item.contentType == 4 || item.contentType == 10 || item.contentType == 17">
+                    <div v-if="item.contentType == 4 || item.contentType == 10  || item.contentType == 17 || item.contentType == 23">
                       <el-card class="box-card">
                         <el-form-item label="标题" prop="miniprogramTitle">
                           <el-input v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字"  />
@@ -474,6 +489,7 @@ export default {
       form: {},
       setting:[{contentType:'1', value: '',}],
       msgForm:{
+        liveId:null,
         videoId:null,
         courseId:null,
         courseType:null,
@@ -580,7 +596,7 @@ export default {
               this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
             }
 
-            if ( this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17){
+            if ( this.setting[i].contentType == 4 || this.setting[i].contentType == 10  || this.setting[i].contentType == 17 || this.setting[i].contentType == 23){
               this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
             }
           }
@@ -611,7 +627,7 @@ export default {
 
             }
 
-            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17){
+            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10  || this.setting[i].contentType == 17 || this.setting[i].contentType == 23){
               this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
 
               if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
@@ -837,15 +853,12 @@ export default {
               this.$set(this.setting[i], 'linkTitle', selectedCourse.dictLabel);
               this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
             }
-            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10  || this.setting[i].contentType == 17){
+            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17
+              || this.setting[i].contentType == 23){//新增APP 看课 跳转短链回填封面
               this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
             }
-
-
           }
-
         }
-
       }
       if (this.msgForm.videoId != null ) {
         // 查找选中的课节对应的 label
@@ -862,7 +875,8 @@ export default {
                 this.$set(this.setting[i], 'linkImageUrl', selectedVideo.dictImgUrl);
               }
             }
-            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17){
+            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17
+              || this.setting[i].contentType == 23){//新增APP 看课 跳转短链回填标题
               this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
 
               if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
@@ -880,6 +894,7 @@ export default {
 
     resetSendMsgSop() {
       this.msgForm = {
+        liveId:null,
         videoId:null,
         courseId:null,
         courseType:null,
@@ -914,29 +929,29 @@ export default {
 
             this.msgForm.setting=JSON.stringify(this.setting)
 
-        let jsonSetting = JSON.parse(this.msgForm.setting);
-          let hasLiveSetting = false;
-          console.log(jsonSetting)
-          for(let index=0;index < jsonSetting.length;index++){
-           if(!!jsonSetting[index] && jsonSetting[index].contentType == "12") {
-            if(!!hasLiveSetting){
-               return this.$message.error("发送直播间只能一次只能发送一条");
+            let jsonSetting = JSON.parse(this.msgForm.setting);
+            let hasLiveSetting = false;
+            console.log(jsonSetting)
+            for (let index = 0; index < jsonSetting.length; index++) {
+              if (!!jsonSetting[index] && (jsonSetting[index].contentType == "12" || jsonSetting[index].contentType == "18" || jsonSetting[index].contentType == "19")) {
+                if (!!hasLiveSetting) {
+                  return this.$message.error("发送直播间只能一次只能发送一条");
+                }
+                hasLiveSetting = true;
+              }
             }
-            hasLiveSetting = true;
-           }
-          }
             if (this.setting.length <= 0) {
               return this.$message.error("请添加规则")
             }
-            if ((this.msgForm.courseId===null || this.msgForm.courseId==='') && !hasLiveSetting){
+            if ((this.msgForm.courseId === null || this.msgForm.courseId === '') && !hasLiveSetting && this.msgForm.liveId === null) {
               return this.$message.error("课程不能为空")
             }
 
-            if ((this.msgForm.videoId===null || this.msgForm.videoId==='') && !hasLiveSetting){
+            if ((this.msgForm.videoId === null || this.msgForm.videoId === '') && !hasLiveSetting && this.msgForm.liveId === null) {
               return this.$message.error("课节不能为空")
             }
 
-            if (this.msgForm.courseType===null || this.msgForm.courseType===''){
+            if (this.msgForm.courseType === null || this.msgForm.courseType === '') {
               return this.$message.error("消息类型不能为空")
             }
 
@@ -947,24 +962,24 @@ export default {
               if (this.setting[i].contentType == 2 && (this.setting[i].imgUrl == null || this.setting[i].imgUrl == "")) {
                 return this.$message.error("图片不能为空")
               }
-              if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9  ) && (this.setting[i].linkTitle == null || this.setting[i].linkTitle == "")) {
+              if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9) && (this.setting[i].linkTitle == null || this.setting[i].linkTitle == "")) {
                 return this.$message.error("链接标题不能为空")
               }
-              if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ) && (this.setting[i].linkDescribe == null || this.setting[i].linkDescribe == "")) {
+              if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9) && (this.setting[i].linkDescribe == null || this.setting[i].linkDescribe == "")) {
                 return this.$message.error("链接描述不能为空")
               }
-              if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ) && (this.setting[i].linkImageUrl == null || this.setting[i].linkImageUrl == "")) {
+              if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9) && (this.setting[i].linkImageUrl == null || this.setting[i].linkImageUrl == "")) {
                 return this.$message.error("链接图片不能为空")
               }
-              if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 )&& this.setting[i].type == 1 && (this.setting[i].linkUrl == null || this.setting[i].linkUrl == "")) {
+              if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9) && this.setting[i].type == 1 && (this.setting[i].linkUrl == null || this.setting[i].linkUrl == "")) {
                 return this.$message.error("链接地址不能为空")
               }
 
-              if ((this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17) && (this.setting[i].miniprogramTitle == null || this.setting[i].miniprogramTitle == "")) {
-                return this.$message.error("小程序/浏览器看课 消息标题不能为空")
+              if ((this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17 || this.setting[i].contentType == 23 || this.setting[i].contentType == 24) && (this.setting[i].miniprogramTitle == null || this.setting[i].miniprogramTitle == "")) {
+                return this.$message.error("小程序消息标题不能为空")
               }
-              if ((this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17) && (this.setting[i].miniprogramPicUrl == null || this.setting[i].miniprogramPicUrl == "")) {
-                return this.$message.error("小程序/浏览器看课 封面地址不能为空")
+              if ((this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17 || this.setting[i].contentType == 23 || this.setting[i].contentType == 24) && (this.setting[i].miniprogramPicUrl == null || this.setting[i].miniprogramPicUrl == "")) {
+                return this.$message.error("小程序封面地址不能为空")
               }
 
               if (this.setting[i].contentType == 10 && (this.setting[i].miniprogramPage == null || this.setting[i].miniprogramPage == "")) {
@@ -984,7 +999,7 @@ export default {
               if (this.setting[i].contentType == 14 && (this.setting[i].luckyBagId == null || this.setting[i].luckyBagId === "")) {
                 return this.$message.error("福袋不能为空")
               }
-              if(this.setting[i].contentType == 12 && (this.setting[i].liveId==null || this.setting[i].liveId == "")){
+              if ((this.setting[i].contentType == 12 || this.setting[i].contentType == 24) && (this.setting[i].liveId == null || this.setting[i].liveId == "")) {
                 return this.$message.error("直播间不能为空");
               }
             }
@@ -1017,7 +1032,19 @@ export default {
       this.sendMsgOpen.open = false;
       this.resetSendMsgSop();
     },
-
+    liveChangemsgForm(liveId){
+      console.log(liveId);
+      console.log(this.setting);
+      if(!!liveId){
+        for(let i =0;i<this.setting.length;i++){
+           this.$set(this.setting[i], 'liveId', liveId);
+           this.liveChange(this.setting[i]);
+        }
+      }
+    },
+    liveDisabled(){
+      return !!this.msgForm && !!this.msgForm.liveId ;
+    }
   }
 };
 </script>

src/views/qw/sopUserLogsInfo/sendMsgSopOpenTool.vue

@@ -21,7 +21,7 @@
         </el-form-item>
 
         <el-form-item label="选择课程" v-if="msgForm.draftStrategy==1" >
-          <el-select  v-model="msgForm.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini"  @change="courseChange()">
+          <el-select  v-model="msgForm.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini" filterable clearable @change="courseChange()">
             <el-option
               v-for="dict in courseList"
               :key="dict.dictValue"
@@ -29,7 +29,7 @@
               :value="parseInt(dict.dictValue)"
             />
           </el-select>
-          <el-select  v-model="msgForm.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;" @change="videoIdChange()"  >
+          <el-select  v-model="msgForm.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;" filterable clearable @change="videoIdChange()"  >
             <el-option
               v-for="dict in videoList"
               :key="dict.dictValue"
@@ -37,7 +37,7 @@
               :value="parseInt(dict.dictValue)"
             />
           </el-select>
-          <el-select  v-model="msgForm.courseType" placeholder="请选择消息类型" size="mini" style=" margin-right: 10px;">
+          <el-select  v-model="msgForm.courseType" placeholder="请选择消息类型" size="mini" style=" margin-right: 10px;" filterable clearable>
             <el-option
               v-for="dict in sysFsSopWatchStatus"
               :key="dict.dictValue"
@@ -104,7 +104,7 @@
                         </el-form-item>
                       </el-card>
                     </div>
-                    <div v-if="item.contentType == 4 || item.contentType == 10 || item.contentType == 17">
+                    <div v-if="item.contentType == 4 || item.contentType == 10 || item.contentType == 17 || item.contentType == 23">
                       <el-card class="box-card">
                         <el-form-item label="标题" prop="miniprogramTitle">
                           <el-input v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字"  />
@@ -204,10 +204,11 @@
                       </el-card>
                     </div>
 
-                    <div v-if="item.contentType == 12">
+                    <div v-if="item.contentType == 12 || item.contentType == 18 || item.contentType == 19 || item.contentType == 24">
                       <el-card class="box-card">
                         <el-form-item label="直播间" >
                           <el-select  v-model="item.liveId"
+                                      filterable
                                       placeholder="请选择直播间" size="mini"
                                       @change="liveChange(item)" >
                             <el-option
@@ -328,6 +329,7 @@ import ImageUpload from "@/views/qw/sop/ImageUpload.vue";
 import {courseList, videoList} from "@/api/qw/sop";
 import userVideo from "@/views/qw/userVideo/userVideo";
 import {listReward} from "@/api/qw/luckyBag";
+import {listToLiveNoEnd} from "@/api/live/live";
 
 
 export default {
@@ -404,6 +406,7 @@ export default {
       //插件版
       sysQwSopAiContentType:[],
 
+      liveList: [],
       sendMsgOpen:{
         title:'一键批量群发',
         open:false,
@@ -445,6 +448,9 @@ export default {
     this.getDicts("sys_fs_sop_watch_status").then(response => {
       this.sysFsSopWatchStatus = response.data;
     });
+    listToLiveNoEnd().then(response => {
+      this.liveList = response.rows;
+    });
 
     courseList().then(response => {
       this.courseList = response.list;
@@ -463,6 +469,20 @@ export default {
         content.luckyBagDataStatus = null;
       }
     },
+    liveChange(content) {
+      // content.liveId 是选中的直播间 ID（liveId）
+      const selectedLive = this.liveList.find(live => live.liveId === content.liveId);
+      if (selectedLive) {
+        // 从选中的直播间对象中提取标题和封面，赋值给当前内容的对应字段
+        // 假设直播间对象中标题字段为 liveTitle，封面字段为 coverImg（根据实际接口字段调整）
+        content.miniprogramTitle = selectedLive.liveName || ''; // 自动填充标题
+        content.miniprogramPicUrl = selectedLive.liveImgUrl || ''; // 自动填充封面
+      } else {
+        // 若未找到对应直播间，清空标题和封面（可选）
+        content.miniprogramTitle = '';
+        content.miniprogramPicUrl = '';
+      }
+    },
 
     qwUserVideoResult(val) {
 
@@ -501,7 +521,8 @@ export default {
               this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
             }
 
-            if ( this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17){
+            if ( this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17
+              || this.setting[i].contentType == 23){//新增APP 看课 跳转短链回填封面
               this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
             }
           }
@@ -531,7 +552,8 @@ export default {
               }
             }
 
-            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17){
+            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17
+              || this.setting[i].contentType == 23){//新增APP 看课 跳转短链回填标题
               this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
 
               if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
@@ -759,7 +781,8 @@ export default {
               this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
 
             }
-            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17){
+            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17
+              || this.setting[i].contentType == 23){
               this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
 
             }
@@ -786,7 +809,8 @@ export default {
               }
 
             }
-            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17){
+            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17
+              || this.setting[i].contentType == 23){
               this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
 
               if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
@@ -827,16 +851,35 @@ export default {
 
           if (this.msgForm.draftStrategy==1){
 
-            this.msgForm.setting=JSON.stringify(this.setting)
-
+            this.msgForm.setting = JSON.stringify(this.setting);
+            let jsonSetting = JSON.parse(this.msgForm.setting);
+            let hasLiveSetting = false;
+            let count = 0;
+            for (let index = 0; index < jsonSetting.length; index++) {
+              if (jsonSetting[index] && [12, 18, 19, 24].includes(Number(jsonSetting[index].contentType))) {
+                hasLiveSetting = true;
+                count++;
+              }
+            }
+            if (hasLiveSetting) {
+              if (this.msgForm.courseId) {
+                return this.$message.error("直播间不能选取课程");
+              }
+              if (this.msgForm.videoId) {
+                return this.$message.error("直播间不能选取课节");
+              }
+              if (count > 1) {
+                return this.$message.error("直播间一次只能发送一条");
+              }
+            }
             if (this.setting.length <= 0) {
               return this.$message.error("请添加规则")
             }
-            if (this.msgForm.courseId===null || this.msgForm.courseId===''){
+            if (!hasLiveSetting && !this.msgForm.courseId){
               return this.$message.error("课程不能为空")
             }
 
-            if (this.msgForm.videoId===null || this.msgForm.videoId===''){
+            if (!hasLiveSetting && !this.msgForm.videoId){
               return this.$message.error("课节不能为空")
             }
 
@@ -864,11 +907,11 @@ export default {
                 return this.$message.error("链接地址不能为空")
               }
 
-              if ((this.setting[i].contentType == 4 || this.setting[i].contentType == 10 || this.setting[i].contentType == 17) && (this.setting[i].miniprogramTitle == null || this.setting[i].miniprogramTitle == "")) {
-                return this.$message.error("小程序/浏览器看课 消息标题不能为空")
+              if ([4, 10, 17, 23, 24].includes(Number(this.setting[i].contentType)) && (this.setting[i].miniprogramTitle == null || this.setting[i].miniprogramTitle == "")) {
+                return this.$message.error("小程序消息标题不能为空")
               }
-              if ((this.setting[i].contentType == 4 || this.setting[i].contentType == 10  || this.setting[i].contentType == 17) && (this.setting[i].miniprogramPicUrl == null || this.setting[i].miniprogramPicUrl == "")) {
-                return this.$message.error("小程序/浏览器看课 封面地址不能为空")
+              if ([4, 10, 17, 23, 24].includes(Number(this.setting[i].contentType)) && (this.setting[i].miniprogramPicUrl == null || this.setting[i].miniprogramPicUrl == "")) {
+                return this.$message.error("小程序封面地址不能为空")
               }
 
               if (this.setting[i].contentType == 10 && (this.setting[i].miniprogramPage == null || this.setting[i].miniprogramPage == "")) {
@@ -884,6 +927,13 @@ export default {
               if (this.setting[i].contentType == 7 && (this.setting[i].value == null || this.setting[i].value == "")) {
                 return this.$message.error("语音不能为空")
               }
+              // 添加对福袋的验证
+              if (this.setting[i].contentType == 14 && (this.setting[i].luckyBagId == null || this.setting[i].luckyBagId === "")) {
+                return this.$message.error("福袋不能为空")
+              }
+              if ((this.setting[i].contentType == 12 || this.setting[i].contentType == 24) && (this.setting[i].liveId == null || this.setting[i].liveId == "")) {
+                return this.$message.error("直播间不能为空");
+              }
             }
           }
 

src/views/qw/sopUserLogsInfo/sopUserLogsInfoDetails.vue

@@ -50,7 +50,7 @@
         />
       </el-form-item>
       <el-form-item label="客户等级" prop="level">
-        <el-select v-model="queryParams.level" placeholder="客户等级" clearable size="small">
+        <el-select v-model="queryParams.level" placeholder="客户等级" filterable clearable size="small">
           <el-option
             v-for="dict in ratingType"
             :key="dict.dictValue"
@@ -68,7 +68,7 @@
         </el-date-picker>
       </el-form-item>
       <el-form-item label="官方群发需求" prop="fsUserIdStatus">
-        <el-select style="width: 200px" v-model="queryParams.fsUserIdStatus" placeholder="请选择" clearable size="small" >
+        <el-select style="width: 200px" v-model="queryParams.fsUserIdStatus" placeholder="请选择" filterable clearable size="small" >
           <el-option
             v-for="item in statusOptions"
             :key="item.dictValue"
@@ -242,7 +242,7 @@
     <el-dialog :title="sendMsgOpen.title" :visible.sync="sendMsgOpen.open"  width="1000px" append-to-body>
       <el-form ref="msgForm" :model="msgForm" :rules="msgRules" label-width="100px">
         <el-form-item label="选择课程">
-          <el-select  v-model="msgForm.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini" remote  filterable  @change="courseChange()">
+          <el-select  v-model="msgForm.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini" remote filterable clearable @change="courseChange()">
             <el-option
               v-for="dict in courseList"
               :key="dict.dictValue"
@@ -250,7 +250,7 @@
               :value="parseInt(dict.dictValue)"
             />
           </el-select>
-          <el-select  v-model="msgForm.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;" remote  filterable @change="videoIdChange()"  >
+          <el-select  v-model="msgForm.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;" remote filterable clearable @change="videoIdChange()"  >
             <el-option
               v-for="dict in videoList"
               :key="dict.dictValue"
@@ -258,7 +258,7 @@
               :value="parseInt(dict.dictValue)"
             />
           </el-select>
-          <el-select  v-model="msgForm.courseType" placeholder="请选择消息类型" size="mini" style=" margin-right: 10px;">
+          <el-select  v-model="msgForm.courseType" placeholder="请选择消息类型" size="mini" style=" margin-right: 10px;" filterable clearable>
             <el-option
               v-for="dict in sysFsSopWatchStatus"
               :key="dict.dictValue"
@@ -266,6 +266,29 @@
               :value="parseInt(dict.dictValue)"
             />
           </el-select>
+
+        </el-form-item>
+        <el-form-item label="选择直播间">
+             <el-select  v-model="msgForm.liveId"
+                         filterable
+                                      placeholder="请选择直播间" size="mini"
+                                       style=" margin-right: 10px;"
+                                      @change="liveChangemsgForm(msgForm.liveId)" clearable >
+                            <el-option
+                              v-for="dict in liveList"
+                              :key="dict.liveId"
+                              :label="dict.liveName"
+                              :value="dict.liveId"
+                            />
+              </el-select>
+            <!-- <el-select  v-model="msgForm.liveMsgType" placeholder="请选择直播间消息类型" size="mini" style=" margin-right: 10px;" clearable>
+            <el-option
+              v-for="dict in sysFsSopWatchStatus"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="parseInt(dict.dictValue)"
+            />
+          </el-select> -->
         </el-form-item>
         <el-form-item label="规则" prop="setting"  >
           <div v-for="(item, index) in setting" :key="index" style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;">
@@ -325,7 +348,7 @@
                         </el-form-item>
                       </el-card>
                     </div>
-                    <div v-if="item.contentType == 4 || item.contentType == 17">
+                    <div v-if="item.contentType == 4 || item.contentType == 23">
                       <el-card class="box-card">
                         <el-form-item label="标题" prop="miniprogramTitle">
                           <el-input v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字"  />
@@ -384,13 +407,14 @@
                         placeholder="输入要转为语音的内容" style="width: 90%;margin-top: 10px;"
                         @input="handleInputVideoText(item.value,item)"/>
                     </div>
-                    <div v-if="item.contentType == 12">
+                    <div v-if="item.contentType == 12 || item.contentType == 24">
                       <!--                                           <div >-->
                       <el-card class="box-card">
                         <el-form-item label="直播间" >
                           <el-select  v-model="item.liveId"
+                                      filterable
                                       placeholder="请选择直播间" size="mini"
-                                      @change="liveChange(item)" >
+                                      @change="liveChange(item)" :disabled="liveDisabled()" >
                             <el-option
                               v-for="dict in liveList"
                               :key="dict.liveId"
@@ -401,14 +425,14 @@
                         </el-form-item>
 
                         <el-form-item label="标题" prop="miniprogramTitle">
-                          <el-input v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字节" :rows="2" maxlength="64"
+                          <el-input :disabled="liveDisabled()" v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字节" :rows="2" maxlength="64"
                                     type="textarea"   />
                         </el-form-item>
                         <el-form-item label="封面" prop="miniprogramPicUrl">
-                          <ImageUpload v-model="item.miniprogramPicUrl" type="image" :num="10" :width="150" :height="150" />
+                          <ImageUpload :disabled="liveDisabled()" v-model="item.miniprogramPicUrl" type="image" :num="10" :width="150" :height="150" />
                         </el-form-item>
                         <el-form-item label="appid" prop="miniprogramAppid" v-show="false">
-                          <el-input v-model="item.miniprogramAppid='wx503cf8ab31f83dd4' " disabled />
+                          <el-input v-model="item.miniprogramAppid='wxcfd4cd6e2375e42f' " disabled />
                         </el-form-item>
                         <el-form-item label="page路径" prop="miniprogramPage"  v-show="false" label-width="100px" style="margin-left: -30px">
                           <el-input v-model="item.miniprogramPage" placeholder="小程序消息打开后的路径"  disabled />
@@ -715,6 +739,8 @@ export default {
       updateLogsInfoFrom:{},
       setting:[{contentType:'1', value: '',}],
       msgForm:{
+        liveId:null,
+        // liveMsgType:null,
         videoId:null,
         courseId:null,
         courseType:null,
@@ -759,9 +785,9 @@ export default {
     });
 
 
-    // listToLiveNoEnd().then(response => {
-    //   this.liveList = response.rows;
-    // });
+    listToLiveNoEnd().then(response => {
+      this.liveList = response.rows;
+    });
     listReward(this.queryParams1).then(response => {
       this.luckyBagList = response.rows;
     });
@@ -965,7 +991,7 @@ export default {
               this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
             }
 
-            if ( this.setting[i].contentType == 4 || this.setting[i].contentType == 17 ){
+            if ( this.setting[i].contentType == 4 || this.setting[i].contentType == 23){
               this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
             }
           }
@@ -1412,10 +1438,10 @@ export default {
               return this.$message.error("链接地址不能为空")
             }
 
-            if ((this.setting[i].contentType == 4  || this.setting[i].contentType == 17)&& (this.setting[i].miniprogramTitle == null || this.setting[i].miniprogramTitle == "")) {
+            if ((this.setting[i].contentType == 4  || this.setting[i].contentType == 17|| this.setting[i].contentType == 23 || this.setting[i].contentType == 24)&& (this.setting[i].miniprogramTitle == null || this.setting[i].miniprogramTitle == "")) {
               return this.$message.error("小程序/浏览器看课 消息标题不能为空")
             }
-            if ((this.setting[i].contentType == 4  || this.setting[i].contentType == 17) && (this.setting[i].miniprogramPicUrl == null || this.setting[i].miniprogramPicUrl == "")) {
+            if ((this.setting[i].contentType == 4  || this.setting[i].contentType == 17|| this.setting[i].contentType == 23 || this.setting[i].contentType == 24) && (this.setting[i].miniprogramPicUrl == null || this.setting[i].miniprogramPicUrl == "")) {
               return this.$message.error("小程序/浏览器看课 封面地址不能为空")
             }
             if (this.setting[i].contentType == 5 && (this.setting[i].fileUrl == null || this.setting[i].fileUrl == "")) {
@@ -1547,6 +1573,19 @@ export default {
       this.videoNumOptions.open = false;
 
     },
+    liveChangemsgForm(liveId){
+      console.log(liveId);
+      console.log(this.setting);
+      if(!!liveId){
+        for(let i =0;i<this.setting.length;i++){
+           this.$set(this.setting[i], 'liveId', liveId);
+           this.liveChange(this.setting[i]);
+        }
+      }
+    },
+    liveDisabled(){
+      return !!this.msgForm && !!this.msgForm.liveId ;
+    }
   }
 };
 </script>