增加弹窗广告类型，修改内容为富文本

src/views/message/components/pop-add-message.vue

@@ -1,17 +1,49 @@
 <template>
-  <el-dialog :title="title" width="500px" :visible.sync="dialogVisible" @close="diaClose"
+  <el-dialog
-    :close-on-click-modal="true">
+    :title="title"
-    <div >
+    width="800px"
+	top="20px"
+    :visible.sync="dialogVisible"
+    @close="diaClose"
+    :close-on-click-modal="true"
+  >
+    <div>
       <el-form ref="form" :rules="rules" :model="form" label-width="100px">
-        <el-form-item label="标题"  prop="title">
+        <el-form-item label="标题" prop="title">
           <el-input v-model="form.title"></el-input>
         </el-form-item>
-        <el-form-item label="内容"  prop="content">
+        <el-form-item label="类型" prop="title">
-          <el-input v-model="form.content" type="textarea"></el-input>
+          <el-radio-group v-model="form.type">
+            <el-radio
+              :label="item.value"
+              v-for="(item, index) in types"
+              :key="index"
+              >{{ item.label }}</el-radio
+            >
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="状态" required>
+		<el-form-item label="状态" required>
-          <el-switch v-model="form.state" :active-value="1" :inactive-value="0"></el-switch>
+          <el-switch
+            v-model="form.state"
+            :active-value="1"
+            :inactive-value="0"
+          ></el-switch>
         </el-form-item>
+        <el-form-item label="内容" prop="content">
+          <quill-editor
+            ref="myTextEditor"
+            v-model="form.content"
+            :options="quillOption"
+            style="
+              padding-bottom: 50px;
+              height: 300px;
+              width: 100%;
+              display: inline-table;
+            "
+          >
+          </quill-editor>
+        </el-form-item>
+
       </el-form>
     </div>
 
@@ -23,21 +55,35 @@
 </template>
 
 <script>
-import {$announcement as  $api} from "@/api/announcement.js";
+import { $announcement as $api } from "@/api/announcement.js";
-
+import { $types } from "../data.js";
+import { quillEditor } from "vue-quill-editor";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import quillConfig from "../../locality/quill-config.js";
 export default {
+  components: {
+    quillEditor,
+  },
+
   data() {
     return {
+      quillOption: quillConfig,
+      types: $types,
       dialogVisible: false,
       title: "",
       rules: {
         title: [{ required: true, message: "请输入公告标题", trigger: "blur" }],
-        content: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
+        content: [
+          { required: true, message: "请输入公告内容", trigger: "blur" },
+        ],
       },
       form: {
-        title:'',
+        title: "",
-        content:'',
+        content: "",
-        state:1,
+        state: 1,
+        type: "",
       },
     };
   },
@@ -51,9 +97,10 @@ export default {
     diaClose() {
       this.dialogVisible = false;
       this.form = {
-        title:'',
+        title: "",
-        content:'',
+        content: "",
-        state:1,
+        state: 1,
+        type: "",
       };
       this.$refs.form.resetFields();
     },
@@ -64,6 +111,9 @@ export default {
       if (!this.form.content) {
         return this.$message.error("请输入公告内容");
       }
+      if (this.form.type === "") {
+        return this.$message.error("请选择公告类型");
+      }
       this.submit();
     },
     async submit() {

src/views/message/data.js

@@ -0,0 +1,4 @@
+export const $types=[
+	{label:'首页',value:0},
+	{label:'提现',value:1}
+]

src/views/message/message.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="首页弹窗公告" name="dialogMessage">
+      <el-tab-pane label="弹窗公告" name="dialogMessage">
         <div style="float: right; margin-right: 2%">
           <el-button
             style="margin: 10px 0"
@@ -16,7 +16,11 @@
         <el-table v-loading="tableDataLoading" :data="tableData.list">
           <el-table-column prop="id" label="编号" width="80"> </el-table-column>
           <el-table-column prop="title" label="标题"> </el-table-column>
-          <el-table-column prop="content" label="内容"> </el-table-column>
+          <el-table-column prop="content" label="内容">
+            <template slot-scope="scope">
+				<div v-html="scope.row.content"></div>
+			</template>
+		  </el-table-column>
           <el-table-column prop="content" label="是否启用">
             <template slot-scope="scope">
 				<el-switch :value="scope.row.state" :active-value="1" :inactive-value="0" @change="dialogMessageUpdate($event, scope.row)"> </el-switch>