完成活动场所里的文件上传和富文本编辑器的基本使用

package-lock.json

@@ -16,7 +16,8 @@
         "vant": "^4.1.2",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
-        "vuex": "^4.0.2"
+        "vuex": "^4.0.2",
+        "wangeditor": "^3.1.1"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~5.0.0",
@@ -9964,6 +9965,11 @@
         "vue": "^3.0.2"
       }
     },
+    "node_modules/wangeditor": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-3.1.1.tgz",
+      "integrity": "sha512-co18zRS96xVKhLyhTIqgqWs5khSbNPlZeoT8/B2dxnVKQMntRGu1D8ks+nbNOvZcIjyrdhhtde6LjqzVECL6DA=="
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -18026,6 +18032,11 @@
         "@vue/devtools-api": "^6.0.0-beta.11"
       }
     },
+    "wangeditor": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-3.1.1.tgz",
+      "integrity": "sha512-co18zRS96xVKhLyhTIqgqWs5khSbNPlZeoT8/B2dxnVKQMntRGu1D8ks+nbNOvZcIjyrdhhtde6LjqzVECL6DA=="
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -15,7 +15,8 @@
     "vant": "^4.1.2",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",

src/api/sys/tools.js

@@ -8,5 +8,12 @@ export default class Tools {
             `/religioussites/siteinfo/religiousSitesInfo/list`,
             params
         )
+    };
+    // 文件上传
+    uploadFile(formData, uploadPath) {
+        return request.uploadFile(
+            `/sys/file/webupload/upload?uploadPath=${uploadPath}`,
+            formData
+        )
     }
 }

src/components/editor/WangEditor.vue

@@ -0,0 +1,104 @@
+<template>
+   <div class="editor" style="min-width:100px; padding-right:10px">
+    <div ref="toolbar" class="toolbar">
+    </div>
+    <div ref="editor" class="wtext">
+    </div>
+  </div>
+  </template>
+  
+  <script>
+import E from "wangeditor";
+export default {
+  name: "WangEditor",
+  data() {
+    return {
+      editor: null,
+      info_: null,
+    };
+  },
+  model: {
+    prop: "value",
+    event: "change",
+  },
+  props: {
+    isClear: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    isClear(val) {
+      // 触发清除文本域内容
+      if (val) {
+        this.editor.txt.clear();
+        this.info_ = null;
+      }
+    },
+  },
+  mounted() {
+    this.seteditor();
+  },
+  methods: {
+    init(val) {
+      // 使用 v-model 时，设置初始值
+      this.editor.txt.html(val);
+    },
+    seteditor() {
+      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
+      this.editor.customConfig.placeholder = "请输入内容";
+      this.editor.customConfig.uploadImgShowBase64 = true; // base 64 存储图片
+      this.editor.customConfig.uploadImgServer = ""; // 配置服务器端地址
+      this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header
+      this.editor.customConfig.uploadFileName = ""; // 后端接受上传文件的参数名
+      this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
+      this.editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
+      this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+      // 配置菜单
+      this.editor.customConfig.menus = [
+        "image", // 插入图片
+      ];
+      this.editor.customConfig.uploadImgHooks = {
+        fail: (xhr, editor, result) => {
+          // 插入图片失败回调
+        },
+        success: (xhr, editor, result) => {
+          // 图片上传成功回调
+        },
+        timeout: (xhr, editor) => {
+          // 网络超时的回调
+        },
+        error: (xhr, editor) => {
+          // 图片上传错误的回调
+        },
+        customInsert: (insertImg, result, editor) => {
+          // 图片上传成功，插入图片的回调
+        },
+      };
+      this.editor.customConfig.onchange = (html) => {
+        this.info_ = html; // 绑定当前逐渐地值
+        this.$emit("change", this.info_); // 将内容同步到父组件中
+      };
+      // 创建富文本编辑器
+      this.editor.create();
+    },
+    editable(value) {
+      this.editor.$textElem.attr("contenteditable", value);
+    },
+  },
+};
+</script>
+  
+<style lang="css">
+.editor {
+  width: 98%;
+  margin: 0 auto;
+}
+.toolbar {
+  border: 1px solid #ccc;
+}
+.wtext {
+  border: 1px solid #ccc;
+  height: 100px;
+}
+</style>

src/utils/request.js

@@ -125,6 +125,28 @@ var http = {
                 // }
                 // resolve(response.data);
 
+                resolve(response);
+            }).catch((error) => {
+                reject(error)
+            })
+        })
+    },
+    /**
+     * 文件上传
+     * @param {*} url      请求地址
+     * @param {*} data     请求参数
+     * @param {*} params   请求参数，拼接再url地址栏后面，无需求时忽略该参数
+     * @param {*} config   请求的config相关配置
+     * @returns
+     */
+    uploadFile: function(url, data = {}) {
+        return new Promise((resolve, reject) => {
+            axios({
+                url: url,
+                method: 'post',
+                data: data,
+                headers: { 'Content-Type': 'multipart/form-data' }
+            }).then((response) => {
                 resolve(response);
             }).catch((error) => {
                 reject(error)

src/views/activityMan/differentbelievers/ReligiousPeopleReportInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <van-nav-bar
+    fixed
     title="私设聚会点"
     left-text=""
     left-arrow
@@ -75,7 +76,12 @@ export default {
 };
 </script>
       
-  <style lang="less">
+<style lang="less">
+.main {
+  background: #fff;
+  position: relative;
+  top: 40px;
+}
 .banner {
   background-color: #36a7f3;
   padding: 20px 50px 40px 50px;
@@ -111,6 +117,6 @@ export default {
 }
 .van-loading {
   text-align: center;
-  margin-top: 20px;
+  margin-top: 80px;
 }
 </style>

src/views/activityMan/differentbelievers/ReligiousPeopleReportList.vue

@@ -1,5 +1,6 @@
 <template>
   <van-nav-bar
+    fixed
     title="信教群众异常"
     right-text="上报"
     left-arrow
@@ -184,7 +185,12 @@ export default {
 };
 </script >
     
-  <style scope>
+<style scope>
+.main {
+  background: #fff;
+  position: relative;
+  top: 40px;
+}
 .van-list {
   height: 80%;
   margin-top: 5px;

src/views/activityMan/differentbelievers/ReligiousPeopleReportView.vue

@@ -1,5 +1,6 @@
 <template>
   <van-nav-bar
+    fixed
     title="信息上报中心"
     left-text=""
     left-arrow
@@ -206,8 +207,11 @@ export default {
 }
 .main {
   background: #fff;
+  position: relative;
+  top: 40px;
 }
-.main p {
+.title,
+.miniTitle {
   height: 40px;
   line-height: 40px;
   color: #36a7f3;
@@ -259,6 +263,6 @@ export default {
 }
 .van-loading {
   text-align: center;
-  margin-top: 20px;
+  margin-top: 80px;
 }
 </style>

src/views/activityMan/personList.vue

@@ -60,7 +60,7 @@
 
 <script>
 import { ref } from "vue";
-import tools from "@/api/sys/tools";
+import UserManage from "@/api/user/UserManage";
 export default {
   name: "personList",
   emits: ["selected"],
@@ -72,8 +72,8 @@ export default {
     let index = 0;
     const onLoad = () => {
       // 异步更新数据
-      new tools()
-        .personList({
+      new UserManage()
+        .list({
           current: index + 1,
           size: 10,
         })

src/views/activityMan/placeactivity/placeActivityInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <van-nav-bar
+    fixed
     title="场所活动"
     left-text=""
     left-arrow
@@ -22,7 +23,7 @@
       <p>详细地址：{{ placeActivity.placeDel }}</p>
       <p>活动时间：{{ placeActivity.activityTime }}</p>
       <p>安全预案：<span style="color: #6892ff">活动申请书</span></p>
-      <p>主题内容：{{ placeActivity.sourceFunds }}</p>
+      <p>主题内容：{{ placeActivity.subjectContent }}</p>
     </div>
     <van-button type="primary" class="btn-sub">审核</van-button>
   </div>
@@ -94,6 +95,11 @@ export default {
 </script>
   
 <style lang="less">
+.main {
+  background: #fff;
+  position: relative;
+  top: 40px;
+}
 .banner {
   background-color: #36a7f3;
   padding: 20px 50px 40px 50px;
@@ -129,6 +135,6 @@ export default {
 }
 .van-loading {
   text-align: center;
-  margin-top: 20px;
+  margin-top: 80px;
 }
 </style>

src/views/activityMan/placeactivity/placeActivityList.vue

@@ -1,5 +1,6 @@
 <template>
   <van-nav-bar
+    fixed
     title="场所活动"
     left-text=""
     right-text="上报"
@@ -7,86 +8,88 @@
     @click-left="onClickLeft"
     @click-right="onClickRight"
   />
-  <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
-  <van-tabs
-    v-model:active="active"
-    title-inactive-color="#bdbdbd"
-    title-active-color="#36a7f3"
-    @click-tab="onClickTab"
-  >
-    <van-tab title="未审核" name="0">
-      <van-list
-        v-model:loading="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="onLoad"
-      >
-        <van-swipe-cell
-          v-for="item in list"
-          :key="item"
-          :before-close="beforeClose"
+  <div class="main">
+    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
+    <van-tabs
+      v-model:active="active"
+      title-inactive-color="#bdbdbd"
+      title-active-color="#36a7f3"
+      @click-tab="onClickTab"
+    >
+      <van-tab title="未审核" name="0">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
         >
-          <div class="list_item" @click="goInfo(item.id)">
-            <div class="item-left">
-              <p style="color: #c4c4c4">{{ item.activityTime }}</p>
-              <p style="color: red">待审核</p>
+          <van-swipe-cell
+            v-for="item in list"
+            :key="item"
+            :before-close="beforeClose"
+          >
+            <div class="list_item" @click="goInfo(item.id)">
+              <div class="item-left">
+                <p style="color: #c4c4c4">{{ item.activityTime }}</p>
+                <p style="color: red">待审核</p>
+              </div>
+              <van-cell is-link>
+                <template #title>
+                  {{ item.reporter.name }}申请于{{ item.placeDel }}举办{{
+                    item.activityName
+                  }}活动
+                </template>
+                <template #label>
+                  {{ item.place }}
+                </template>
+              </van-cell>
             </div>
-            <van-cell is-link>
-              <template #title>
-                {{ item.reporter.name }}申请于{{ item.placeDel }}举办{{
-                  item.activityName
-                }}活动
-              </template>
-              <template #label>
-                {{ item.place }}
-              </template>
-            </van-cell>
-          </div>
-          <template #right>
-            <van-button square type="danger" text="删除" class="button" />
-            <van-button
-              square
-              type="primary"
-              text="修改"
-              class="button"
-              @click="updateItem(item)"
-            />
-          </template>
-        </van-swipe-cell>
-      </van-list>
-    </van-tab>
-    <van-tab title="已审核" name="1">
-      <van-list
-        v-model:loading="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="onLoad"
-      >
-        <van-swipe-cell
-          v-for="item in list"
-          :key="item"
-          :before-close="beforeClose"
+            <template #right>
+              <van-button square type="danger" text="删除" class="button" />
+              <van-button
+                square
+                type="primary"
+                text="修改"
+                class="button"
+                @click="updateItem(item)"
+              />
+            </template>
+          </van-swipe-cell>
+        </van-list>
+      </van-tab>
+      <van-tab title="已审核" name="1">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
         >
-          <div class="list_item" @click="goInfo(item.id)">
-            <div class="item-left">
-              <p style="color: #c4c4c4">{{ item.activityTime }}</p>
-              <p style="color: red">已审核</p>
+          <van-swipe-cell
+            v-for="item in list"
+            :key="item"
+            :before-close="beforeClose"
+          >
+            <div class="list_item" @click="goInfo(item.id)">
+              <div class="item-left">
+                <p style="color: #c4c4c4">{{ item.activityTime }}</p>
+                <p style="color: red">已审核</p>
+              </div>
+              <van-cell is-link>
+                <template #title>
+                  {{ item.reporter.name }}申请于{{ item.placeDel }}举办{{
+                    item.activityName
+                  }}活动
+                </template>
+                <template #label>
+                  {{ item.place }}
+                </template>
+              </van-cell>
             </div>
-            <van-cell is-link>
-              <template #title>
-                {{ item.reporter.name }}申请于{{ item.placeDel }}举办{{
-                  item.activityName
-                }}活动
-              </template>
-              <template #label>
-                {{ item.place }}
-              </template>
-            </van-cell>
-          </div>
-        </van-swipe-cell>
-      </van-list>
-    </van-tab>
-  </van-tabs>
+          </van-swipe-cell>
+        </van-list>
+      </van-tab>
+    </van-tabs>
+  </div>
 </template>
 
 <script>
@@ -193,7 +196,12 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.main {
+  background: #fff;
+  position: relative;
+  top: 40px;
+}
 .van-list {
   height: 80%;
   margin-top: 5px;

src/views/activityMan/placeactivity/placeActivityView.vue

@@ -1,12 +1,13 @@
 <template>
   <van-nav-bar
+    fixed
     title="信息上报中心"
     left-text=""
     left-arrow
     @click-left="onClickLeft"
   />
-  <van-loading size="16px" v-if="isLoading">加载中...</van-loading>
-  <div class="main" v-if="!isLoading">
+  <van-loading size="16px" v-show="isLoading">加载中...</van-loading>
+  <div class="main" v-show="!isLoading">
     <p class="title">场所活动上报</p>
     <div class="formArea">
       <p class="miniTitle">基础信息</p>
@@ -189,23 +190,27 @@
       <van-cell-group>
         <van-field name="uploader" label="安全预案:">
           <template #input>
-            <van-uploader>
+            <van-uploader
+              :after-read="afterRead"
+              v-model="fileList"
+              multiple
+              :max-count="1"
+              accept=""
+            >
               <van-button icon="plus">上传文件</van-button>
             </van-uploader>
           </template>
         </van-field>
       </van-cell-group>
       <van-cell-group>
-        <div class="rowTextArea">
-          <van-field
-            v-model="placeActivity.subjectContent"
-            center
-            rows="2"
-            type="textarea"
-            label="主题内容:"
-            label-align="top"
-          />
-        </div>
+        <van-field name="content" label="主题内容:" label-align="top">
+          <template #input>
+            <wang-editor
+              ref="subjectContentEditor"
+              v-model="placeActivity.subjectContent"
+            />
+          </template>
+        </van-field>
       </van-cell-group>
     </div>
     <div class="subbtn">
@@ -222,8 +227,10 @@ import placeActivityServer from "@/api/placeActivity/placeActivityServer";
 import tools from "@/api/sys/tools";
 import UserManage from "@/api/user/UserManage";
 import { useRoute } from "vue-router";
+// 富文本编辑器
+import WangEditor from "@/components/editor/WangEditor";
 export default {
-  components: { personList },
+  components: { personList, WangEditor },
   setup() {
     // 加载
     let isLoading = ref(true);
@@ -263,6 +270,7 @@ export default {
       state: "0",
       assessment: "0",
     });
+    const subjectContentEditor = ref(null);
     // 根据路由初始化
     let route = useRoute();
     onMounted(() => {
@@ -276,9 +284,11 @@ export default {
               placeActivity.value.knownList.name += data.name + ",";
             });
           });
+          subjectContentEditor.value.init(placeActivity.value.subjectContent);
           isLoading.value = false;
         });
       } else {
+        subjectContentEditor.value.init("");
         isLoading.value = false;
       }
     });
@@ -359,6 +369,18 @@ export default {
         .map((option) => option.name)
         .join("/");
     };
+    // 文件上传
+    let fileList = ref([]);
+    const afterRead = (file) => {
+      // 此时可以自行将文件上传至服务器
+      console.log(file);
+      new tools()
+        .uploadFile(file, `reporting/reportingActivities`)
+        .then(({ data }) => {
+          fileList.value.push(data);
+          placeActivity.value.safetyPlan = data.url;
+        });
+    };
     // 提交数据
     const submit = () => {
       new placeActivityServer().save(placeActivity.value).then((res) => {
@@ -392,21 +414,24 @@ export default {
       options,
       onFinish,
       cascaderValue,
+      // 文件上传
+      afterRead,
+      fileList,
       submit,
+      subjectContentEditor,
     };
   },
 };
 </script>
 
 <style scoped>
-* {
-  margin: 0;
-  padding: 0;
-}
 .main {
   background: #fff;
+  position: relative;
+  top: 40px;
 }
-.main p {
+.miniTitle,
+.title {
   height: 40px;
   line-height: 40px;
   color: #36a7f3;
@@ -426,20 +451,12 @@ export default {
 .formArea .van-cell-group .van-field__label {
   height: 40px;
 }
-.formArea .van-cell-group .van-cell {
+/* .formArea .van-cell-group .van-cell {
   line-height: 40px;
-}
+} */
 .van-cell__value .van-field__right-icon .van-icon-location {
   color: #36a7f3 !important;
 }
-.rowTextArea::v-deep .van-field__value {
-  width: 98%;
-  border: 2px solid #ccc;
-  border-radius: 10px;
-}
-.rowTextArea::v-deep .van-cell {
-  display: flow-root;
-}
 .subbtn {
   margin: 20px;
   text-align: center;
@@ -459,6 +476,9 @@ export default {
 }
 .van-loading {
   text-align: center;
-  margin-top: 20px;
+  margin-top: 80px;
+}
+#editor {
+  width: 98%;
 }
 </style>

src/views/activityMan/selfMeetingReport/selfMeetingInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <van-nav-bar
+    fixed
     title="私设聚会点"
     left-text=""
     left-arrow
@@ -37,7 +38,7 @@ export default {
     // 加载
     let isLoading = ref(true);
     // 异常人员信息
-    let inputForm =ref({
+    let inputForm = ref({
       id: "",
       place: "320900",
       placeSelectName: "盐城市",
@@ -72,13 +73,18 @@ export default {
     return {
       onClickLeft,
       inputForm,
-      isLoading
+      isLoading,
     };
   },
 };
 </script>
     
 <style lang="less">
+.main {
+  background: #fff;
+  position: relative;
+  top: 40px;
+}
 .banner {
   background-color: #36a7f3;
   padding: 20px 50px 40px 50px;
@@ -114,6 +120,6 @@ export default {
 }
 .van-loading {
   text-align: center;
-  margin-top: 20px;
+  margin-top: 80px;
 }
 </style>

src/views/activityMan/selfMeetingReport/selfMeetingList.vue

@@ -1,5 +1,6 @@
 <template>
   <van-nav-bar
+    fixed
     title="私设聚会点"
     left-text=""
     right-text="上报"
@@ -7,80 +8,82 @@
     @click-left="onClickLeft"
     @click-right="onClickRight"
   />
-  <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
-  <van-tabs
-    v-model:active="active"
-    title-inactive-color="#bdbdbd"
-    title-active-color="#36a7f3"
-    @click-tab="onClickTab"
-  >
-    <van-tab title="未审核" name="0">
-      <van-list
-        v-model:loading="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="onLoad"
-      >
-        <van-swipe-cell
-          v-for="item in list"
-          :key="item"
-          :before-close="beforeClose"
+  <div class="main">
+    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
+    <van-tabs
+      v-model:active="active"
+      title-inactive-color="#bdbdbd"
+      title-active-color="#36a7f3"
+      @click-tab="onClickTab"
+    >
+      <van-tab title="未审核" name="0">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
         >
-          <div class="list_item" @click="goInfo(item.id)">
-            <div class="item-left">
-              <p style="color: #c4c4c4">{{ item.partyTime }}</p>
-              <p style="color: red">待审核</p>
+          <van-swipe-cell
+            v-for="item in list"
+            :key="item"
+            :before-close="beforeClose"
+          >
+            <div class="list_item" @click="goInfo(item.id)">
+              <div class="item-left">
+                <p style="color: #c4c4c4">{{ item.partyTime }}</p>
+                <p style="color: red">待审核</p>
+              </div>
+              <van-cell is-link>
+                <template #title>
+                  <p>地点：{{ item.placeSelectName }}</p>
+                  <p>相关人员：{{ item.relatedPersons.name }}</p>
+                  <p>频次：{{ item.frequency }}</p>
+                </template>
+              </van-cell>
             </div>
-            <van-cell is-link>
-              <template #title>
-                <p>地点：{{ item.placeSelectName }}</p>
-                <p>相关人员：{{ item.relatedPersons.name }}</p>
-                <p>频次：{{ item.frequency }}</p>
-              </template>
-            </van-cell>
-          </div>
-          <template #right>
-            <van-button square type="danger" text="删除" class="button" />
-            <van-button
-              square
-              type="primary"
-              text="修改"
-              class="button"
-              @click="updateItem(item)"
-            />
-          </template>
-        </van-swipe-cell>
-      </van-list>
-    </van-tab>
-    <van-tab title="已审核" name="1">
-      <van-list
-        v-model:loading="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="onLoad"
-      >
-        <van-swipe-cell
-          v-for="item in list"
-          :key="item"
-          :before-close="beforeClose"
+            <template #right>
+              <van-button square type="danger" text="删除" class="button" />
+              <van-button
+                square
+                type="primary"
+                text="修改"
+                class="button"
+                @click="updateItem(item)"
+              />
+            </template>
+          </van-swipe-cell>
+        </van-list>
+      </van-tab>
+      <van-tab title="已审核" name="1">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
         >
-          <div class="list_item" @click="goInfo(item.id)">
-            <div class="item-left">
-              <p style="color: #c4c4c4">{{ item.partyTime }}</p>
-              <p style="color: red">已审核</p>
+          <van-swipe-cell
+            v-for="item in list"
+            :key="item"
+            :before-close="beforeClose"
+          >
+            <div class="list_item" @click="goInfo(item.id)">
+              <div class="item-left">
+                <p style="color: #c4c4c4">{{ item.partyTime }}</p>
+                <p style="color: red">已审核</p>
+              </div>
+              <van-cell is-link>
+                <template #title>
+                  <p>地点：{{ item.placeSelectName }}</p>
+                  <p>相关人员：{{ item.relatedPersons.name }}</p>
+                  <p>频次：{{ item.frequency }}</p>
+                </template>
+              </van-cell>
             </div>
-            <van-cell is-link>
-              <template #title>
-                <p>地点：{{ item.placeSelectName }}</p>
-                <p>相关人员：{{ item.relatedPersons.name }}</p>
-                <p>频次：{{ item.frequency }}</p>
-              </template>
-            </van-cell>
-          </div>
-        </van-swipe-cell>
-      </van-list>
-    </van-tab>
-  </van-tabs>
+          </van-swipe-cell>
+        </van-list>
+      </van-tab>
+    </van-tabs>
+  </div>
 </template>
   
   <script>
@@ -186,6 +189,11 @@ export default {
 </script >
   
 <style scope>
+.main {
+  background: #fff;
+  position: relative;
+  top: 40px;
+}
 .van-list {
   height: 80%;
   margin-top: 5px;

src/views/activityMan/selfMeetingReport/selfMeetingView.vue

@@ -1,12 +1,13 @@
 <template>
   <van-nav-bar
+    fixed
     title="信息上报中心"
     left-text=""
     left-arrow
     @click-left="onClickLeft"
   />
-  <van-loading size="16px" v-if="isLoading">加载中...</van-loading>
-  <div class="main" v-if="!isLoading">
+  <van-loading size="16px" v-show="isLoading">加载中...</van-loading>
+  <div class="main" v-show="!isLoading">
     <p class="title">私设聚会点上报</p>
     <div class="formArea">
       <p class="miniTitle">基础信息</p>
@@ -104,11 +105,10 @@
           <van-field
             v-model="inputForm.into"
             center
-            rows="2"
-            type="textarea"
             label="内容:"
             label-align="top"
           />
+          <div name="editor" id="editor" ref="editor"></div>
         </div>
       </van-cell-group>
     </div>
@@ -126,6 +126,8 @@ import tools from "@/api/sys/tools";
 import PrivatePartyPointService from "@/api/privateparty/PrivatePartyPointService";
 import UserManage from "@/api/user/UserManage";
 import { useRoute } from "vue-router";
+// 富文本编辑器
+import EWangEditor from "wangeditor";
 export default {
   components: { personList },
   setup() {
@@ -155,9 +157,10 @@ export default {
       state: "0",
       assessment: "0",
     });
-    // 根据路由初始化
+
     let route = useRoute();
     onMounted(() => {
+      // 根据路由初始化
       if (route.query.id) {
         new PrivatePartyPointService()
           .queryById(route.query.id)
@@ -175,11 +178,37 @@ export default {
       } else {
         isLoading.value = false;
       }
+      // 富文本编辑器
+      let editor = new EWangEditor("#editor");
+      editor.config.uploadImgShowBase64 = true;
+      editor.config.onchangeTimeout = 400;
+
+      editor.config.customAlert = (err) => {
+        console.log(err);
+      };
+
+      editor.customConfig = editor.customConfig
+        ? editor.customConfig
+        : editor.config;
+
+      editor.customConfig.onchange = (html) => {
+        data.editorContent = html;
+        console.log(html);
+      };
+      //以下为新增
+      const menuItem = [
+        //工具栏里有哪些工具
+        "image",
+      ];
+      editor.config.menus = [...menuItem]; /* 应用设置好的工具栏 */
+      editor.config.height = 100; //你可能发现这个编辑器是没法用样式调高度的?
+      //新增至此
+      editor.create();
     });
     // 获取活动时间
     let showAct = ref(false);
     let currentDate = ref(["" + new Date().getFullYear(), "01", "01"]);
-    let currentTime = ref(["00", "00"]);
+    let currentTime = ref(["00", "00", "00"]);
     const columnsType = ["hour", "minute", "second"];
     const getTime = () => {
       showAct.value = false;
@@ -262,8 +291,11 @@ export default {
 }
 .main {
   background: #fff;
+  position: relative;
+  top: 40px;
 }
-.main p {
+.title,
+.miniTitle {
   height: 40px;
   line-height: 40px;
   color: #36a7f3;
@@ -289,14 +321,20 @@ export default {
 .van-cell__value .van-field__right-icon .van-icon-location {
   color: #36a7f3 !important;
 }
-.rowTextArea::v-deep .van-field__value {
+.rowTextArea {
   width: 98%;
-  border: 2px solid #ccc;
-  border-radius: 10px;
 }
 .rowTextArea::v-deep .van-cell {
   display: flow-root;
 }
+#editor {
+  position: relative;
+  top: -40px;
+  height: 100px;
+}
+.w-e-text-container {
+  height: 100px !important;
+}
 .subbtn {
   margin: 20px;
   text-align: center;
@@ -316,6 +354,6 @@ export default {
 }
 .van-loading {
   text-align: center;
-  margin-top: 20px;
+  margin-top: 80px;
 }
 </style>