up

houtai/package-lock.json

@@ -14,7 +14,8 @@
         "element-ui": "2.15.2",
         "js-base64": "^3.7.2",
         "vue": "^2.6.11",
-        "vue-router": "^3.2.0"
+        "vue-router": "^3.2.0",
+        "wangeditor": "^4.7.15"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.13",
@@ -1637,7 +1638,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.6.tgz",
       "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1645,6 +1645,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.18.6.tgz",
+      "integrity": "sha512-cOu5wH2JFBgMjje+a+fz2JNIWU4GzYpl05oSob3UDvBEh6EuIn+TXFHMmBbhSb+k/4HMzgKCQfEEDArAWNF9Cw==",
+      "dependencies": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.18.6",
       "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.18.6.tgz",
@@ -4784,6 +4796,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/core-js-pure": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.23.4.tgz",
+      "integrity": "sha512-lizxkcgj3XDmi7TUBFe+bQ1vNpD5E4t76BrBWI3HdUxdw/Mq1VF4CkiHzIKyieECKtcODK2asJttoofEeUKICQ==",
+      "hasInstallScript": true
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -10819,8 +10837,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.0",
@@ -13446,6 +13463,21 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/wangeditor": {
+      "version": "4.7.15",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.15.tgz",
+      "integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/wangeditor/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",
@@ -15564,11 +15596,19 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.6.tgz",
       "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.18.6.tgz",
+      "integrity": "sha512-cOu5wH2JFBgMjje+a+fz2JNIWU4GzYpl05oSob3UDvBEh6EuIn+TXFHMmBbhSb+k/4HMzgKCQfEEDArAWNF9Cw==",
+      "requires": {
+        "core-js-pure": "^3.20.2",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/template": {
       "version": "7.18.6",
       "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.18.6.tgz",
@@ -18248,6 +18288,11 @@
         }
       }
     },
+    "core-js-pure": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.23.4.tgz",
+      "integrity": "sha512-lizxkcgj3XDmi7TUBFe+bQ1vNpD5E4t76BrBWI3HdUxdw/Mq1VF4CkiHzIKyieECKtcODK2asJttoofEeUKICQ=="
+    },
     "core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -23249,8 +23294,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regenerator-transform": {
       "version": "0.15.0",
@@ -25458,6 +25502,23 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "wangeditor": {
+      "version": "4.7.15",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.15.tgz",
+      "integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",

houtai/package.json

@@ -13,7 +13,8 @@
     "element-ui": "2.15.2",
     "js-base64": "^3.7.2",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "wangeditor": "^4.7.15"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",

houtai/src/assets/base.css

@@ -35,4 +35,37 @@ a {
 .el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #BD9D6C;
   color: #fff;
+}
+.w-e-menu {
+	z-index: 2 !important;
+}
+.w-e-text-container {
+	z-index: 1 !important;
+}
+.w-e-toolbar {
+	z-index: 10 !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(18) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(19) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(13) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(14) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(16) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(20) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(21) {
+	display: none !important;
+}
+.w-e-toolbar .w-e-menu:nth-of-type(26) {
+	display: none !important;
 }

houtai/src/utils/api.js

@@ -30,4 +30,33 @@ export const logList = (data) => {
     url: '/sys/log/list',
     data
   })
+}
+// 新增/编辑
+export const activitySave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/activity/save',
+    data
+  })
+}
+// 删除列表
+export const activityRemove = (id) => {
+  return axios({
+    method: 'get',
+    url: `/cms/activity/remove/${id}`,
+  })
+}
+// 根据id获取详情
+export const activityDetail = (id) => {
+  return axios({
+    method: 'get',
+    url: `/cms/activity/detail/${id}`,
+  })
+}
+// 发布
+export const activityPublish = (id, display) => {
+  return axios({
+    method: 'get',
+    url: `/cms/activity/publish/${id}/${display}`,
+  })
 }

houtai/src/utils/request.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 const service = axios.create({
-  baseURL: 'http://192.168.10.38:8018', // 本地调试
+  baseURL: 'http://192.168.20.55:8018', // 本地调试
   // baseURL: 'http://project.4dage.com:8017', // 线上调试
   // baseURL: '', // build
   timeout: 5000

houtai/src/views/tab1/add.vue

@@ -5,178 +5,228 @@
       活动发布
     </div>
     <div class="main">
-      <div class="mainTit1">活动信息</div>
-      <div class="mainBox">
-        <el-form
-          :model="ruleForm"
-          :rules="rules"
-          ref="ruleForm"
-          label-width="140px"
-          class="demo-ruleForm"
-        >
-          <el-form-item label="活动名称：" prop="name">
-            <el-input
-              placeholder="请输入"
-              v-model="ruleForm.name"
-              maxlength="30"
-              show-word-limit
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="活动地点：" prop="name2">
-            <el-input
-              placeholder="请输入"
-              v-model="ruleForm.name2"
-              maxlength="50"
-              show-word-limit
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="活动主持人：" prop="name2">
-            <el-input
-              placeholder="请输入"
-              v-model="ruleForm.name2"
-              maxlength="10"
-              show-word-limit
-            ></el-input>
-          </el-form-item>
-          <div class="row">
-            <el-form-item label="参与活动年龄段：" prop="name2">
-              <el-select
-                v-model="ruleForm.name2"
-                placeholder="请选择"
-                style="width: 170px"
-              >
-                <el-option
-                  v-for="i in 99"
-                  :key="i"
-                  :label="`${i}岁`"
-                  :value="i"
+      <div class="mainTemp">
+        <div class="mainTit1">活动信息</div>
+        <div class="mainBox">
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="ruleForm"
+            label-width="140px"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="活动名称：" prop="name">
+              <el-input
+                placeholder="请输入"
+                v-model="ruleForm.name"
+                maxlength="30"
+                show-word-limit
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="活动地点：" prop="address">
+              <el-input
+                placeholder="请输入"
+                v-model="ruleForm.address"
+                maxlength="50"
+                show-word-limit
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="活动主持人：" prop="emcee">
+              <el-input
+                placeholder="请输入"
+                v-model="ruleForm.emcee"
+                maxlength="10"
+                show-word-limit
+              ></el-input>
+            </el-form-item>
+            <div class="row">
+              <el-form-item label="参与活动年龄段：">
+                <span class="biaoshi biaoshi3">*</span>
+                <el-select
+                  v-model="age1"
+                  placeholder="请选择"
+                  style="width: 170px"
                 >
-                </el-option>
-              </el-select>
+                  <el-option
+                    v-for="i in 99"
+                    :key="i"
+                    :label="`${i}岁`"
+                    :value="i"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <span class="fenge">-</span>
+              <el-form-item class="mySelect">
+                <el-select
+                  v-model="age2"
+                  placeholder="请选择"
+                  style="width: 170px"
+                >
+                  <el-option
+                    v-for="i in 99"
+                    :key="i"
+                    :label="`${i}岁`"
+                    :value="i"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+            <!-- 照片墙1 -->
+            <el-form-item label="图文封面：">
+              <span class="biaoshi">*</span>
+              <el-upload
+                :class="{ opcNone: ruleForm.thumb }"
+                accept=".png,.jpg,.jpeg,.gif"
+                :action="baseURL + '/cms/activity/upload'"
+                :data="{ type: 'img' }"
+                :file-list="imgUpList1"
+                :headers="{ token }"
+                :limit="1"
+                :on-exceed="handleExceed"
+                list-type="picture-card"
+                :on-preview="handlePictureCardPreview"
+                :on-remove="handleRemove1"
+                :before-remove="beforeRemove"
+                :before-upload="beforethumbUploadImg"
+                :on-success="upload_thumb_successImg1"
+              >
+                <i class="el-icon-plus"></i>
+                <div slot="tip" class="el-upload__tip">
+                  格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M
+                </div>
+              </el-upload>
             </el-form-item>
-            <span class="fenge">-</span>
-            <el-form-item prop="name3" class="mySelect">
-              <el-select
-                v-model="ruleForm.name3"
-                placeholder="请选择"
-                style="width: 170px"
+            <!-- 照片墙2 -->
+            <el-form-item label="活动顶部配图：">
+              <span class="biaoshi biaoshi2">*</span>
+              <el-upload
+                :class="{ opcNone: ruleForm.filePath }"
+                accept=".png,.jpg,.jpeg,.gif"
+                :action="baseURL + '/cms/activity/upload'"
+                :data="{ type: 'img' }"
+                :file-list="imgUpList2"
+                :headers="{ token }"
+                :limit="1"
+                :on-exceed="handleExceed"
+                list-type="picture-card"
+                :on-preview="handlePictureCardPreview"
+                :on-remove="handleRemove2"
+                :before-remove="beforeRemove"
+                :before-upload="beforethumbUploadImg"
+                :on-success="upload_thumb_successImg2"
               >
-                <el-option
-                  v-for="i in 99"
-                  :key="i"
-                  :label="`${i}岁`"
-                  :value="i"
-                >
-                </el-option>
-              </el-select>
+                <i class="el-icon-plus"></i>
+                <div slot="tip" class="el-upload__tip">
+                  格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M
+                </div>
+              </el-upload>
             </el-form-item>
+          </el-form>
+        </div>
+        <div class="mainTit1 mainTit2">活动时间</div>
+        <div class="mainBox">
+          <div class="row2">
+            <div>
+              <span>活动时间：</span>
+              <el-date-picker
+                value-format="yyyy-MM-dd"
+                v-model="time1"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </div>
           </div>
-          <!-- 照片墙1 -->
-          <el-form-item label="图文封面：">
-            <span class="biaoshi">*</span>
-            <el-upload
-              accept=".png,.jpg,.jpeg,.gif"
-              :action="baseURL + '/cms/content/upload'"
-              :data="{}"
-              :file-list="imgUpList1"
-              :headers="{ token }"
-              :limit="1"
-              :on-exceed="handleExceed"
-              list-type="picture-card"
-              :on-preview="handlePictureCardPreview"
-              :on-remove="handleRemove1"
-              :before-remove="beforeRemove"
-              :before-upload="beforethumbUploadImg"
-              :on-success="upload_thumb_successImg1"
-            >
-              <i class="el-icon-plus"></i>
-              <div slot="tip" class="el-upload__tip">
-                格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M
+          <div
+            class="row2 row3"
+            v-for="(item, index) in timeArr"
+            :key="item.id"
+          >
+            <div>
+              <span>活动时段{{ index + 1 }}：</span>
+              <el-time-picker
+                is-range
+                v-model="timeArr[index].time"
+                format="HH:mm"
+                value-format="HH:mm"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="选择时间范围"
+              >
+              </el-time-picker>
+            </div>
+            <div>
+              <span>预设名额{{ index + 1 }}：</span>
+              <el-input
+                style="width: 300px"
+                onkeyup="value=value.replace(/[^\d]/g,'')"
+                onblur="value=value.replace(/[^\d]/g,'')"
+                placeholder="请输入数字"
+                v-model="timeArr[index].num"
+                maxlength="3"
+              ></el-input>
+              <div
+                class="addTime"
+                v-if="index === 0"
+                @click="addTime(item.time, item.num)"
+              >
+                增加时间段+
               </div>
-            </el-upload>
-          </el-form-item>
-          <!-- 照片墙2 -->
-          <el-form-item label="活动顶部配图：">
-            <span class="biaoshi biaoshi2">*</span>
+              <div
+                class="addTime el-icon-close"
+                v-else
+                @click="delTime(item.id)"
+              ></div>
+            </div>
+          </div>
+        </div>
+        <div class="mainTit1">活动详情</div>
+        <!-- 富文本 -->
+        <div class="con_topBox">
+          <div class="con_top">
+            <div class="tttit">活动正文：</div>
+            <!-- 富文本上传图片 -->
             <el-upload
-              accept=".png,.jpg,.jpeg,.gif"
-              :action="baseURL + '/cms/content/upload'"
-              :data="{}"
-              :file-list="imgUpList2"
               :headers="{ token }"
-              :limit="1"
-              :on-exceed="handleExceed"
-              list-type="picture-card"
-              :on-preview="handlePictureCardPreview"
-              :on-remove="handleRemove2"
-              :before-remove="beforeRemove"
-              :before-upload="beforethumbUploadImg"
-              :on-success="upload_thumb_successImg2"
+              :action="baseURL + '/cms/activity/upload'"
+              :data="{ type: 'img' }"
+              accept=".png,.jpg,.jpeg,.gif"
+              title="上传图片"
+              class="upload-demo imgUplod"
+              multiple
+              :before-upload="beforethumbUploadImgFWB"
+              :on-success="upload_thumb_successImg"
             >
-              <i class="el-icon-plus"></i>
-              <div slot="tip" class="el-upload__tip">
-                格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M
-              </div>
+              <i class="w-e-icon-image"></i>
             </el-upload>
-          </el-form-item>
-        </el-form>
-      </div>
-      <div class="mainTit1 mainTit2">活动时间</div>
-      <div class="mainBox">
-        <div class="row2">
-          <div>
-            <span>活动时间：</span>
-            <el-date-picker
-              value-format="yyyy-MM-dd"
-              v-model="time1"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            >
-            </el-date-picker>
-          </div>
-        </div>
-        <div class="row2 row3" v-for="(item, index) in timeArr" :key="item.id">
-          <div>
-            <span>活动时段{{ index + 1 }}：</span>
-            <el-date-picker
-              value-format="yyyy-MM-dd"
-              v-model="timeArr[index].time"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            >
-            </el-date-picker>
-          </div>
-          <div>
-            <span>预设名额{{ index + 1 }}：</span>
-            <el-input
-              style="width: 300px"
-              onkeyup="value=value.replace(/[^\d]/g,'')"
-              onblur="value=value.replace(/[^\d]/g,'')"
-              placeholder="请输入数字"
-              v-model="timeArr[index].num"
-              maxlength="3"
-            ></el-input>
-            <div class="addTime" v-if="index === 0" @click="addTime">
-              增加时间段+
-            </div>
-            <div
-              class="addTime el-icon-close"
-              v-else
-              @click="delTime(item.id)"
-            ></div>
           </div>
+          <div id="div1" style="z-index: 1"></div>
         </div>
       </div>
-      <div class="mainTit1">活动详情</div>
+      <!-- 底部按钮 -->
+      <div class="bottomBtn">
+        <el-button @click="back">返 回</el-button>&emsp;&emsp;
+        <el-button type="primary" @click="save">{{
+          ruleForm.id ? "编 辑" : "新 增"
+        }}</el-button>
+      </div>
     </div>
+    <!-- 照片墙的查看照片 -->
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { activitySave, activityDetail } from "../../utils/api";
+import E from "wangeditor";
+import axios from "@/utils/request";
 export default {
   name: "tab1Add",
   components: {},
@@ -193,15 +243,30 @@ export default {
       time1: "",
       timeArr: [{ id: Date.now(), time: "", num: "" }],
       //关于活动时间 👆
+      age1: 18,
+      age2: 60,
       ruleForm: {
-        name: "",
-        name2: 18,
-        name3: 40,
+        name: "", //活动名称
+        address: "", //活动地点
+        emcee: "", //活动主持人
+        age: "", //年龄段
+        thumb: "", //封面图
+        filePath: "", //活动顶部配图
+        startDay: "", //活动时间范围
+        timeBuckets: [
+          //活动时间段
+          // {
+          //   endTime:'结束时间' ,
+          //   quota:'名额' ,
+          //   startTime:'开始时间'
+          // }
+        ],
+        content: "", //富文本简介
       },
       rules: {
         name: [{ required: true, message: "不能为空", trigger: "blur" }],
-        name2: [{ required: true, message: "不能为空", trigger: "blur" }],
-        name3: [{ required: true, message: "不能为空", trigger: "blur" }],
+        address: [{ required: true, message: "不能为空", trigger: "blur" }],
+        emcee: [{ required: true, message: "不能为空", trigger: "blur" }],
       },
     };
   },
@@ -219,8 +284,86 @@ export default {
   },
   //方法集合
   methods: {
+    // 点击编辑
+    async save() {
+      if (this.ruleForm.name.trim() === "")
+        return this.$message.warning("活动名称不能为空!");
+      if (this.ruleForm.address.trim() === "")
+        return this.$message.warning("活动地点不能为空!");
+      if (this.ruleForm.emcee.trim() === "")
+        return this.$message.warning("活动主持人不能为空!");
+      if (Number(this.age2) <= Number(this.age1))
+        return this.$message.warning("请正确填写年龄段!");
+      if (this.ruleForm.thumb === "")
+        return this.$message.warning("图片封面不能为空!");
+      if (this.ruleForm.filePath === "")
+        return this.$message.warning("活动顶部配图不能为空!");
+      if (!this.time1) return this.$message.warning("请选择活动时间!");
+      let timeFlag = false;
+      let numFlag = false;
+      let startTimeArr = [];
+      let endTimeArr = [];
+      // ---------处理格式
+      let timeBuckets = [];
+
+      this.timeArr.forEach((v) => {
+        if (!v.time) timeFlag = true;
+        else if (v.num === "") numFlag = true;
+        else {
+          startTimeArr.push(Number(v.time[0].replace(":", "")));
+          endTimeArr.push(Number(v.time[1].replace(":", "")));
+          timeBuckets.push({
+            startTime: v.time[0],
+            endTime: v.time[1],
+            quota: Number(v.num),
+          });
+        }
+      });
+      let allStartTime = startTimeArr.sort((a, b) => a - b);
+      let allEndTime = endTimeArr.sort((a, b) => a - b);
+      let result = 0; // 判断时间是否有重复区间
+      for (let k = 0; k < allStartTime.length; k++) {
+        if (k > 0) {
+          if (allStartTime[k] < allEndTime[k - 1]) {
+            result += 1;
+          }
+        }
+      }
+      if (timeFlag) return this.$message.warning("请选择活动时段!");
+      if (numFlag) return this.$message.warning("预设名额不能为空!");
+      if (result > 0) return this.$message.warning("活动时段重合!");
+      if (this.editor.txt.html() === "")
+        return this.$message.warning("活动正文不能为空!");
+      let obj = {
+        address: this.ruleForm.address,
+        age: `${this.age1},${this.age2}`,
+        content: this.editor.txt.html(),
+        emcee: this.ruleForm.emcee,
+        startDay: this.time1[0],
+        endDay: this.time1[1],
+        filePath: this.ruleForm.filePath,
+        name: this.ruleForm.name,
+        thumb: this.ruleForm.thumb,
+        timeBuckets,
+      };
+      if (this.ruleForm.id) obj.id = this.ruleForm.id;
+      let res = await activitySave(obj);
+      if (res.code === 0) {
+        this.$message.success("操作成功!");
+        this.back();
+      } else this.$message.warning(res.msg);
+    },
+    // 点击返回
+    back() {
+      let k = this.$route.query.k;
+      if (!k) k = "1";
+      this.$router.push({
+        path: "/layout/tab1",
+        query: { k },
+      });
+    },
     // 关于活动时间
-    addTime() {
+    addTime(time, num) {
       this.timeArr.push({ id: Date.now(), time: "", num: "" });
     },
     delTime(id) {
@@ -231,26 +374,50 @@ export default {
       })
         .then(() => {
           this.timeArr = this.timeArr.filter((v) => v.id !== id);
-
           this.$message.success("删除成功!");
         })
         .catch(() => {
           this.$message.info("已取消");
         });
     },
+    // 富文本上传图片
+    beforethumbUploadImgFWB(file) {
+      // console.log(998, file)
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 5;
+      const typeOk =
+        file.type === "image/png" ||
+        (file.type === "image/jpeg" && !file.name.includes(".jfif")) ||
+        file.type === "image/gif";
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error("图片格式有误！");
+          reject(file);
+        } else if (!sizeOk) {
+          this.$message.error("图片大小超过5M！");
+          reject(file);
+        } else {
+          resolve(file);
+        }
+      });
+    },
+    upload_thumb_successImg(data) {
+      this.$message.success("上传成功");
+      // console.log("--------", data);
+      this.editor.txt.append(
+        `<img src="${this.baseURL}${data.data.filePath}"  style="max-width:100%;display: block;margin: 10px auto;"/><p>&emsp;&emsp;</p>`
+      );
+    },
     // ---------------照片墙1
     beforeRemove(file, fileList) {
       if (file && file.status === "success") {
-        return this.$confirm(`此操作将永久删除 ${file.name}`);
+        return this.$confirm(`确定删除吗?`);
       }
     },
-    async handleRemove1(file, fileList) {
-      const id = file.id || file.response.data.id;
-      const res = await delFileApi(id);
-      if (res.code === 0) {
-        this.$message.success("删除成功");
-        this.imgUpList1 = [];
-      } else this.$message.warning(res.msg);
+    handleRemove1(file, fileList) {
+      this.$message.success("删除成功");
+      this.ruleForm.thumb = "";
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
@@ -279,29 +446,73 @@ export default {
     },
     upload_thumb_successImg1(data) {
       this.$message.success("上传图片成功");
-      this.imgUpList1 = [data.data.id];
+      this.ruleForm.thumb = data.data.filePath;
     },
     handleExceed(files, fileList) {
       this.$message.warning("最多上传1张图片");
     },
     // 照片墙2
     async handleRemove2(file, fileList) {
-      const id = file.id || file.response.data.id;
-      const res = await delFileApi(id);
-      if (res.code === 0) {
-        this.$message.success("删除成功");
-        this.imgUpList2 = [];
-      } else this.$message.warning(res.msg);
+      this.$message.success("删除成功");
+      this.ruleForm.filePath = "";
     },
     upload_thumb_successImg2(data) {
       this.$message.success("上传图片成功");
-      this.imgUpList2 = [data.data.id];
+      this.ruleForm.filePath = data.data.filePath;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  async mounted() {
+    // 初始化富文本
+    // 富文本
+    this.editor = new E("#div1");
+    // 配置字体
+    this.editor.config.fontNames = [
+      "黑体",
+      "仿宋",
+      "楷体",
+      "标楷体",
+      "华文仿宋",
+      "华文楷体",
+      "宋体",
+      "微软雅黑",
+      "Arial",
+      "Tahoma",
+      "Verdana",
+      "Times New Roman",
+    ];
+    this.editor.config.showLinkVideo = false;
+    this.editor.create();
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+    // 获取用户token
+    this.token = localStorage.getItem("WLBWG_token");
+    // 如果是编辑
+    if (this.$route.query.id) {
+      const res = await activityDetail(Number(this.$route.query.id));
+      this.ruleForm = res.data;
+      // 图片回显
+      this.imgUpList1 = [{ url: this.baseURL + res.data.thumb }];
+      this.imgUpList2 = [{ url: this.baseURL + res.data.filePath }];
+      // 参与活动年龄段回显
+      this.age1 =Number(res.data.age.split(',')[0])
+      this.age2 =Number(res.data.age.split(',')[1])
+      // 活动时间回显
+      this.time1 = [res.data.startDay, res.data.endDay];
+      this.timeArr = [];
+      res.data.timeBuckets.forEach((v) => {
+        this.timeArr.push({
+          id: v.id,
+          time: [v.startTime, v.endTime],
+          num: v.quota,
+        });
+      });
+      // 富文本回显
+      this.editor.txt.html(res.data.content);
+    }
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -340,101 +551,173 @@ export default {
     box-shadow: 1px 1px 6px 0px;
     width: 100%;
     height: calc(100% - 65px);
-    overflow-y: auto;
-    .mainTit1 {
-      height: 38px;
-      line-height: 38px;
-      background-color: #d5d8cc;
-      padding-left: 26px;
-      margin-bottom: 20px;
-    }
-    .mainTit2 {
-      background-color: #ece3d4;
-    }
-    .mainBox {
-      width: 1200px;
-      padding-left: 35px;
-      /deep/.el-form {
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
+    .mainTemp {
+      width: 100%;
+      height: calc(100% - 55px);
+      overflow-y: auto;
+      .mainTit1 {
+        height: 38px;
+        line-height: 38px;
+        background-color: #d5d8cc;
+        padding-left: 26px;
+        margin-bottom: 20px;
       }
-      /deep/.el-form-item {
-        width: 500px;
+      .mainTit2 {
+        background-color: #ece3d4;
       }
-      /deep/.el-input__inner {
-        padding-right: 50px;
-      }
-      .row {
-        width: 500px;
-        display: flex;
-        .fenge {
-          border-top: 1px solid #dcdfe6;
-          border-bottom: 1px solid #dcdfe6;
-          display: inline-block;
-          line-height: 36px;
-          padding: 0 7px;
-          height: 40px;
+      .mainBox {
+        width: 1200px;
+        padding-left: 35px;
+        /deep/.el-form {
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
         }
-        /deep/input {
-          border-radius: 4px 0 0 4px;
-          border: 1px solid #dcdfe6;
-          border-right: none;
+        /deep/.el-form-item {
+          width: 500px;
         }
-      }
-      .mySelect {
-        /deep/input {
-          border-radius: 0 4px 4px 0;
-          border-right: 1px solid #dcdfe6;
-          border-left: none;
+        /deep/.el-input__inner {
+          padding-right: 50px;
         }
-      }
-      .biaoshi {
-        position: absolute;
-        top: 0;
-        left: -92px;
-        color: #f56c6c;
-      }
-      .biaoshi2 {
-        left: -120px;
-      }
-      .row2 {
-        & > div {
-          & > span {
+        .row {
+          width: 500px;
+          display: flex;
+          .fenge {
+            border-top: 1px solid #dcdfe6;
+            border-bottom: 1px solid #dcdfe6;
             display: inline-block;
-            width: 140px;
-            text-align: right;
-            font-size: 14px;
-            color: #606266;
-            padding-right: 12px;
-            &::before {
-              content: "*";
-              color: #f56c6c;
-              margin-right: 4px;
+            line-height: 36px;
+            padding: 0 7px;
+            height: 40px;
+          }
+          /deep/input {
+            border-radius: 4px 0 0 4px;
+            border: 1px solid #dcdfe6;
+            border-right: none;
+          }
+        }
+        .mySelect {
+          /deep/input {
+            border-radius: 0 4px 4px 0;
+            border-right: 1px solid #dcdfe6;
+            border-left: none;
+          }
+        }
+        .biaoshi {
+          position: absolute;
+          top: 0;
+          left: -92px;
+          color: #f56c6c;
+        }
+        .biaoshi2 {
+          left: -120px;
+        }
+        .biaoshi3 {
+          left: -134px;
+        }
+        .row2 {
+          & > div {
+            & > span {
+              display: inline-block;
+              width: 140px;
+              text-align: right;
+              font-size: 14px;
+              color: #606266;
+              padding-right: 12px;
+              &::before {
+                content: "*";
+                color: #f56c6c;
+                margin-right: 4px;
+              }
             }
           }
         }
-      }
-      .row3 {
-        display: flex;
-        margin: 22px 0;
-        & > div {
-          width: 50%;
+        .row3 {
           display: flex;
-          align-items: center;
+          margin: 22px 0;
+          & > div {
+            width: 50%;
+            display: flex;
+            align-items: center;
+          }
+          .addTime {
+            cursor: pointer;
+            color: #b02323;
+            margin-left: 27px;
+            height: 40px;
+            line-height: 40px;
+          }
         }
-        .addTime {
-          cursor: pointer;
-          color: #b02323;
-          margin-left: 27px;
+      }
+      .mySelect {
+        /deep/.el-form-item__content {
+          margin-left: 0 !important;
+        }
+      }
+    }
+    .bottomBtn {
+      height: 55px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .con_topBox {
+      padding-bottom: 40px;
+      position: relative;
+      display: flex;
+      width: 1200px;
+      padding-left: 90px;
+    }
+    .con_top {
+      position: relative;
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+      color: #606266;
+      margin-right: 14px;
+      &::after {
+        content: "*";
+        position: absolute;
+        top: -1px;
+        left: -9px;
+        color: #f56c6c;
+      }
+      .imgUplod {
+        /deep/.w-e-icon-image {
+          color: #999;
+          display: inline-block;
+          width: 40px;
           height: 40px;
           line-height: 40px;
         }
+        /deep/.el-upload-list {
+          display: none !important;
+        }
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        position: absolute;
+        z-index: 9999;
+        top: 1px;
+        left: 1070px;
+        width: 40px;
+        height: 40px;
+        &:hover {
+          background-color: #f6f6f6;
+          /deep/.w-e-icon-image {
+            color: black;
+          }
+        }
       }
     }
-    .mySelect {
-      /deep/.el-form-item__content {
-        margin-left: 0 !important;
+    #div1 {
+      flex: 1;
+    }
+    .opcNone {
+      /deep/.el-upload--picture-card {
+        opacity: 0;
+        pointer-events: none;
       }
     }
   }

houtai/src/views/tab1/index.vue

@@ -61,17 +61,36 @@
           </el-table-column>
           <el-table-column prop="name" label="标题"></el-table-column>
           <el-table-column prop="address" label="活动地点"> </el-table-column>
-          <el-table-column prop="address" label="浏览量"> </el-table-column>
-          <el-table-column prop="address" label="活动主持人"> </el-table-column>
-          <el-table-column prop="address" label="活动时间"> </el-table-column>
-          <el-table-column prop="address" label="发布时间"> </el-table-column>
-          <el-table-column prop="address" label="状态"> </el-table-column>
+          <el-table-column prop="visit" label="浏览量"> </el-table-column>
+          <el-table-column prop="emcee" label="活动主持人"> </el-table-column>
+          <el-table-column label="活动时间" width="200">
+            <template #default="{ row }">
+              {{ row.startDay }}至{{ row.endDay }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="updateTime" label="发布时间">
+          </el-table-column>
+          <el-table-column label="状态">
+            <template #default="{ row }">
+              {{ mainObj[row.status] }}
+            </template>
+          </el-table-column>
           <el-table-column label="操作" width="280">
             <template #default="{ row }">
               <el-button type="text">预约名单导出</el-button>
-              <el-button type="text">发布</el-button>
-              <el-button type="text">编辑{{ row.name }}</el-button>
-              <el-button type="text">删除</el-button>
+              <el-button
+                type="text"
+                v-if="row.display == 0"
+                @click="activityPublish(row.id, 1)"
+                >发布</el-button
+              >
+              <el-button type="text" v-else @click="activityPublish(row.id, 0)"
+                >取消发布</el-button
+              >
+              <el-button type="text" @click="toEdit(row.id)">编辑</el-button>
+              <el-button type="text" @click="activityRemove(row.id)"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -94,7 +113,7 @@
 </template>
 
 <script>
-import { getList } from "@/utils/api";
+import { getList, activityRemove, activityPublish } from "@/utils/api";
 export default {
   name: "tab1",
   components: {},
@@ -109,8 +128,14 @@ export default {
         { id: 0, name: "草稿中" },
         { id: 2, name: "活动中" },
         { id: 1, name: "未开始" },
-        { id: 3, name: "已介绍" },
+        { id: 3, name: "已结束" },
       ],
+      mainObj: {
+        0: "草稿中",
+        1: "未开始",
+        2: "活动中",
+        3: "已结束",
+      },
       formData: {
         pageNum: 1,
         pageSize: 10,
@@ -136,6 +161,32 @@ export default {
   },
   //方法集合
   methods: {
+    // 点击发布
+    async activityPublish(id, display) {
+      let res = await activityPublish(id, display);
+      if (res.code === 0) {
+        this.$message.success("发布成功!");
+        this.getList(this.formData);
+      } else this.$message.warning(res.msg);
+    },
+    // 点击删除
+    async activityRemove(id) {
+      this.$confirm("删除后，信息将无法恢复，是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          let res = await activityRemove(id);
+          if (res.code === 0) {
+            this.$message.success("删除成功!");
+            this.getList(this.formData);
+          } else this.$message.warning(res.msg);
+        })
+        .catch(() => {
+          this.$message.info("已取消");
+        });
+    },
     // 点击重置
     reset() {
       this.time = "";
@@ -156,6 +207,13 @@ export default {
         query: { k: this.formData.pageNum },
       });
     },
+    // 点击编辑
+    toEdit(id) {
+      this.$router.push({
+        path: "/layout/tab1Add",
+        query: { k: this.formData.pageNum, id },
+      });
+    },
     // 切换 全部--草稿……
     cutTop(id) {
       this.mainTopInd = id;
@@ -173,7 +231,6 @@ export default {
       this.formData.pageNum = 1;
       this.formData.pageSize = val;
       this.getList(this.formData);
-      s;
     },
     // 封装一个获取列表的方法
     async getList(data) {