add:app配置添加企微客服

src/views/system/config/config.vue

@@ -1903,27 +1903,83 @@
       <el-tab-pane label="公司销售角色默认生成配置" name="companymenu.config">
         <companyMenuConfig></companyMenuConfig>
       </el-tab-pane>
-      <el-tab-pane label="APP推广" name="app.config">
-        <el-form ref="form25" :model="form25" :rules="rules25" label-width="160px">
-          <el-form-item label="APP推广图片" prop="images">
-            <Material v-model="appImages" type="image" :num="10" :width="150" :height="150"/>
-          </el-form-item>
-          <el-form-item label="APP推广视频" prop="videoUrl">
-            <div>
-              <el-upload
-                ref="upload"
-                class="upload-demo"
-                :action="uploadUrl"
-                :on-success="appHandleSuccess"
-                :before-upload="beforeUpload"
-                :limit="1"
-                :accept="videoAccept"
-              >
-                <el-button size="small" type="primary">点击上传视频</el-button>
-              </el-upload>
-              <video :src="form25.videoUrl" controls style="max-width: 400px; max-height: 400px;"></video>
+      <el-tab-pane label="APP设置" name="app.config">
+        <el-form ref="form25" :model="form25" :rules="rules25" label-width="160px" class="app-config-form">
+
+          <!-- 客服配置卡片 -->
+          <el-card class="config-card" shadow="hover">
+            <!-- 标题区域移到body内 -->
+            <div class="section-title">
+              <div class="title-icon">
+                <i class="el-icon-service"></i>
+              </div>
+              <div class="title-text">
+                <h3>APP客服配置</h3>
+                <p class="subtitle">配置企业微信客服相关参数</p>
+              </div>
             </div>
-          </el-form-item>
+
+            <el-divider></el-divider>
+
+            <el-form-item label="企微主体" prop="corpId">
+              <el-select
+                v-model="form25.corpId"
+                clearable filterable
+                placeholder="请选择企微主体"
+                style="width: 320px;">
+                <el-option
+                  v-for="item in corpOptions"
+                  :key="item.corpId"
+                  :label="item.corpName"
+                  :value="item.corpId"
+                >
+                </el-option>
+              </el-select>
+              <el-tooltip content="选择企业微信的主体" placement="right">
+                <i class="el-icon-question help-icon"></i>
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item label="客服链接" prop="corpUrl">
+              <el-input v-model="form25.corpUrl" label="请输入" style="width: 500px;"></el-input>
+            </el-form-item>
+          </el-card>
+
+          <!-- APP推广卡片 -->
+          <el-card class="config-card" shadow="hover">
+            <div class="section-title">
+              <div class="title-icon icon-promotion">
+                <i class="el-icon-mobile-phone"></i>
+              </div>
+              <div class="title-text">
+                <h3>APP推广</h3>
+                <p class="subtitle">配置APP推广素材，支持图片和视频</p>
+              </div>
+            </div>
+
+            <el-divider></el-divider>
+
+            <el-form-item label="APP推广图片" prop="images">
+              <Material v-model="appImages" type="image" :num="10" :width="150" :height="150"/>
+            </el-form-item>
+            <el-form-item label="APP推广视频" prop="videoUrl">
+              <div>
+                <el-upload
+                  ref="upload"
+                  class="upload-demo"
+                  :action="uploadUrl"
+                  :on-success="appHandleSuccess"
+                  :before-upload="beforeUpload"
+                  :limit="1"
+                  :accept="videoAccept"
+                >
+                  <el-button size="small" type="primary">点击上传视频</el-button>
+                </el-upload>
+                <video :src="form25.videoUrl" controls style="max-width: 400px; max-height: 400px;"></video>
+              </div>
+            </el-form-item>
+          </el-card>
+
+          <!-- 操作按钮 -->
           <div class="footer">
             <el-button type="primary" @click="submitForm25">提 交</el-button>
           </div>
@@ -2531,6 +2587,7 @@ import { getCitys } from '@/api/store/city'
 import { listCompany } from '@/api/company/company'
 import { getStoreProductColumns } from '@/api/hisStore/storeProduct'
 import { getStoreColumns } from '@/api/hisStore/store'
+import {listQwCompany} from "@/api/qw/qwCompany";
 
 export default {
   name: 'Config',
@@ -2541,6 +2598,7 @@ export default {
   },
   data() {
     return {
+      corpOptions:[],
       citys: [],
       images: [],
       appImages: [],
@@ -3064,6 +3122,9 @@ export default {
           this.form24 = JSON.parse(response.data.configValue)
           console.log(this.form24.sign)
         } else if (key == 'app.config') {
+          listQwCompany().then(response => {
+            this.corpOptions = response.rows;
+          });
           this.configId = response.data.configId
           this.configKey = response.data.configKey
           this.form25 = JSON.parse(response.data.configValue)
@@ -3680,4 +3741,176 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
+
+.app-config-form {
+  padding: 10px;
+}
+
+.config-card {
+  margin-bottom: 24px;
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
+}
+
+.config-card ::v-deep .el-card__body {
+  padding: 24px;
+}
+
+/* 章节标题样式 - 图标和文字在一起 */
+.section-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.title-icon {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.title-icon i {
+  color: #fff;
+  font-size: 20px;
+}
+
+.icon-promotion {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.title-text h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #303133;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.subtitle {
+  margin: 4px 0 0 0;
+  font-size: 13px;
+  color: #909399;
+  line-height: 1.4;
+}
+
+/* 分割线 */
+.el-divider {
+  margin: 20px 0;
+  background-color: #ebeef5;
+}
+
+/* 表单项 */
+.app-config-form ::v-deep .el-form-item {
+  margin-bottom: 24px;
+}
+
+.app-config-form ::v-deep .el-form-item:last-child {
+  margin-bottom: 0;
+}
+
+.help-icon {
+  margin-left: 8px;
+  color: #c0c4cc;
+  cursor: help;
+  font-size: 16px;
+  transition: color 0.3s;
+}
+
+.help-icon:hover {
+  color: #409EFF;
+}
+
+/* 上传区域 */
+.upload-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.upload-tip {
+  margin-top: 8px;
+  color: #909399;
+  font-size: 12px;
+}
+
+/* 视频上传 */
+.video-upload-wrapper {
+  width: 100%;
+  max-width: 400px;
+}
+
+.video-uploader ::v-deep .el-upload {
+  width: 100%;
+}
+
+.video-uploader ::v-deep .el-upload-dragger {
+  width: 100%;
+  height: 160px;
+  background: #fafafa;
+  border: 2px dashed #dcdfe6;
+  border-radius: 8px;
+}
+
+.video-uploader ::v-deep .el-upload-dragger:hover {
+  border-color: #409EFF;
+}
+
+.preview-video {
+  width: 100%;
+  max-width: 400px;
+  max-height: 250px;
+  border-radius: 8px;
+  background: #000;
+}
+
+.video-preview {
+  position: relative;
+  display: inline-block;
+}
+
+.video-actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.video-preview:hover .video-actions {
+  opacity: 1;
+}
+
+/* 底部按钮 */
+.form-footer {
+  margin-top: 32px;
+  padding-left: 160px;
+}
+
+.form-footer .el-button {
+  min-width: 100px;
+  padding: 12px 24px;
+  border-radius: 6px;
+}
+
+/* 响应式 */
+@media screen and (max-width: 768px) {
+  .section-title {
+    margin-bottom: 16px;
+  }
+
+  .form-footer {
+    padding-left: 0;
+    text-align: center;
+  }
+
+  .config-card ::v-deep .el-card__body {
+    padding: 16px;
+  }
+}
 </style>