diff --git a/README.md b/README.md
index 827c5b3..3f2d2f3 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2021-11-29 11:14:13
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-09-14 09:05:48
+ * @LastEditTime: 2022-09-17 14:58:10
  * @FilePath: \TelpoUserManageAdmin\README.md
  * @description:
 -->
@@ -83,4 +83,15 @@ feat
 `2022.9.14`
 feat
 - 添加文章
-    - 富文本编辑器更换为 wangeditor/editor-for-vue
\ No newline at end of file
+    - 富文本编辑器更换为 wangeditor/editor-for-vue
+
+
+## v1.0.4
+`2022.9.17`
+feat
+- 添加文章
+  - 增加 富文本一些基本配置
+- 添加群发
+  - 增加 接口对接
+- 群发列表
+  - 增加 接口对接
\ No newline at end of file
diff --git a/src/api/wechat-fans.js b/src/api/wechat-fans.js
new file mode 100644
index 0000000..c1492ac
--- /dev/null
+++ b/src/api/wechat-fans.js
@@ -0,0 +1,67 @@
+/*
+ * @Date: 2022-09-15 16:40:39
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-09-17 16:34:33
+ * @FilePath: \TelpoUserManageAdmin\src\api\wechat-fans.js
+ * @description:
+ */
+import requestWxFans from '@/utils/request-wx-fans';
+export const APIWechatFans = {
+  SelfGroups, //获取自定义分组
+  getGroupSender, //获取群发列表
+  addGroupSender, //添加模板消息群发
+  getArticlesGroup, //获取文章列表
+  getGroupSenderDetails, //获取单个群发记录
+  deleteGroupSender, //删除单个群发记录
+};
+export default APIWechatFans;
+
+
+function SelfGroups(data) {
+  return requestWxFans({
+      url: '/SelfGroups',
+      method: 'get',
+      params: data,
+  });
+}
+
+function getGroupSender(data) {
+  return requestWxFans({
+      url: '/GroupSender',
+      method: 'get',
+      params: data,
+  });
+}
+
+function getArticlesGroup(data) {
+  return requestWxFans({
+      url: '/Articles',
+      method: 'get',
+      params: data,
+  });
+}
+
+function addGroupSender(params) {
+  return requestWxFans({
+      url: '/GroupSender',
+      method: 'post',
+      data: params,
+  });
+}
+
+
+function getGroupSenderDetails(data) {
+  return requestWxFans({
+      url: '/GroupSender/detail',
+      method: 'get',
+      params: data,
+  });
+}
+
+function deleteGroupSender(data) {
+  return requestWxFans({
+      url: '/GroupSender',
+      method: 'delete',
+      params: data,
+  });
+}
diff --git a/src/components/TTable/TTable.vue b/src/components/TTable/TTable.vue
index 9e25196..ec524b9 100644
--- a/src/components/TTable/TTable.vue
+++ b/src/components/TTable/TTable.vue
@@ -1,14 +1,14 @@
 <!--
  * @Date: 2021-11-30 17:19:51
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-08-16 16:13:27
+ * @LastEditTime: 2022-09-17 14:42:20
  * @FilePath: \TelpoUserManageAdmin\src\components\TTable\TTable.vue
  * @description: 封装通用的table组件
 -->
 <template>
     <div class="app-container">
         <!-- 表格 -->
-        <el-table :data="tableData" border fit highlight-current-row @sort-change="sortChange" :height="400" >
+        <el-table :data="tableData" border fit highlight-current-row @sort-change="sortChange" :empty-text="emptyText" :height="400" >
             <template v-for="column in columns">
                 <!-- 标题 -->
                 <el-table-column
@@ -61,6 +61,9 @@ export default {
             type: Array,
             default: () => []
         },
+        emptyText: {
+           type: String,
+        },
         btnType: {
             type: String
         }
diff --git a/src/main.js b/src/main.js
index 0178848..f657f76 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,8 @@
 /*
  * @Date: 2021-11-30 15:35:16
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-08-06 10:25:02
- * @FilePath: \telpoAdminTemplate\src\main.js
+ * @LastEditTime: 2022-09-17 15:12:15
+ * @FilePath: \TelpoUserManageAdmin\src\main.js
  * @description:
  */
 import Vue from 'vue'
@@ -10,7 +10,7 @@ import Vue from 'vue'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+import 'element-ui/lib/theme-chalk/index.css';
 /* import locale from 'element-ui/lib/locale/lang/en' */ // lang i18n
 
 import '@/styles/index.scss' // global css
diff --git a/src/utils/model.js b/src/utils/model.js
index 8ed6a6e..aabcb9b 100644
--- a/src/utils/model.js
+++ b/src/utils/model.js
@@ -1,8 +1,8 @@
 /*
  * @Date: 2021-11-30 15:09:25
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-09-14 09:05:54
+ * @LastEditTime: 2022-09-17 14:58:22
  * @FilePath: \TelpoUserManageAdmin\src\utils\model.js
  * @description: 版本号
  */
-export const VersionModel = '1.0.3';
+export const VersionModel = '1.0.4';
diff --git a/src/utils/request-wx-fans.js b/src/utils/request-wx-fans.js
new file mode 100644
index 0000000..034e603
--- /dev/null
+++ b/src/utils/request-wx-fans.js
@@ -0,0 +1,78 @@
+/*
+ * @Date: 2021-12-08 15:59:46
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-09-15 17:30:14
+ * @FilePath: \TelpoUserManageAdmin\src\utils\request-wx-fans.js
+ * @description:
+ */
+import axios from 'axios'
+import {
+  Message
+} from 'element-ui'
+import store from '@/store'
+/* import { getToken } from '@/utils/auth' */
+
+// create an axios instance
+const service = axios.create({
+  baseURL: /* process.env.VUE_APP_BASE_API */'http://ping.ssjlai.com:8008/api/', // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  /* timeout: 5000  */ // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+    /* if (store.getters.token) {
+      config.headers['AuthToken'] = store.getters.token;
+    } */
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  response => {
+    const res = response.data;
+    return res;
+    // todo 拦截暂时去掉
+    /* if (res.code === 106) {
+      setTimeout(() => {
+        store.dispatch('user/resetToken').then(() => {
+          Message({
+            message: '登录过期,请您重新登录!',
+            type: 'error',
+            duration: 1500
+          })
+          location.reload()
+        })
+      }, 1000)
+    } else if (res.code === 200000) {
+      return res
+    } else {
+      Message({
+        message: res.message || '出错了,请联系管理员！',
+        type: 'error',
+        duration: 3 * 1000
+      })
+      return Promise.reject(new Error(res.message))
+    }
+  },
+  error => {
+    console.log('err:', error)
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 3 * 1000
+    })
+    return Promise.reject(error)
+  } */}
+);
+
+export default service;
diff --git a/src/views/message-manage/main/add-articles/index.vue b/src/views/message-manage/main/add-articles/index.vue
index 8c95661..d2d6bae 100644
--- a/src/views/message-manage/main/add-articles/index.vue
+++ b/src/views/message-manage/main/add-articles/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-08 10:09:45
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-09-13 17:00:45
+ * @LastEditTime: 2022-09-16 16:39:27
  * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\add-articles\index.vue
  * @description: 添加文章
 -->
@@ -70,6 +70,12 @@
                 :defaultConfig="editorConfig"
                 :mode="mode"
                 @onCreated="onCreated"
+                @onChange="onChange"
+                @onDestroyed="onDestroyed"
+                @onMaxLength="onMaxLength"
+                @onFocus="onFocus"
+                @onBlur="onBlur"
+                @customPaste="customPaste"
             />
          </div>
         </el-form-item>
@@ -113,8 +119,16 @@ export default {
     fileList: [],
     editor: null,
     toolbarConfig: { },
-    editorConfig: { placeholder: '请输入内容...' },
     mode: 'default', // or 'simple'
+    // 菜单配置
+    editorConfig: {
+      MENU_CONF: {
+         uploadImage: {
+           server: '', //上传图片地址 todo 待后端提供
+
+          }
+      }
+    }
 
    }
   },
@@ -132,6 +146,27 @@ export default {
     onCreated(editor) {
       this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
     },
+    onChange(editor) { console.log('onChange', editor.children) },
+    onDestroyed(editor) { console.log('onDestroyed', editor) },
+    onMaxLength(editor) { console.log('onMaxLength', editor) },
+    onFocus(editor) { console.log('onFocus', editor) },
+    onBlur(editor) { console.log('onBlur', editor) },
+    customPaste(editor, event, callback) {
+        console.log('ClipboardEvent 粘贴事件对象', event)
+        // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
+        // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
+        // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
+
+        // 自定义插入内容
+        editor.insertText('')
+
+        // 返回 false ，阻止默认粘贴行为
+        event.preventDefault()
+        callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
+
+        // 返回 true ，继续默认的粘贴行为
+        // callback(true)
+    },
     // 清空本地上传的图片列表
     clearFiles() {},
     // 删除上传的图片
diff --git a/src/views/message-manage/main/add-mass/index.vue b/src/views/message-manage/main/add-mass/index.vue
index 2e5c34b..8bbfb29 100644
--- a/src/views/message-manage/main/add-mass/index.vue
+++ b/src/views/message-manage/main/add-mass/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-08 10:09:47
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-08-10 09:43:22
+ * @LastEditTime: 2022-09-17 16:32:26
  * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\add-mass\index.vue
  * @description: 添加群发
 -->
@@ -10,36 +10,48 @@
     <div class="home-container">
       <div class="form-container">
         <!-- 表单 -->
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="消息主题:" size="small">
-            <el-input v-model="form.msgTheme" class="input-width-400" clearable ></el-input>
+        <el-form ref="form" :model="form" label-width="100px" :rules="rules">
+          <el-form-item label="消息主题:" size="small" prop="subject">
+            <el-input v-model="form.subject" class="input-width-400" clearable ></el-input>
           </el-form-item>
-          <el-form-item label="内容模板:" size="small">
+          <el-form-item label="内容模板:" size="small" required>
 
-            <p>{{firstData}}</p>
-            <el-input v-model="form.contentTitle" class="input-width-600" clearable ></el-input>
 
-            <p>学习账号{{keyword1Data}}</p>
-            <el-input v-model="form.studyAccount" class="input-width-400" clearable ></el-input>
+            <el-form-item prop="first">
+              <p>{{firstData}}</p>
+              <el-input v-model="form.first" class="input-width-600" clearable prop="first"></el-input>
+            </el-form-item>
 
-            <p>更新内容{{keyword2Data}}</p>
-            <el-input v-model="form.updateCon" class="input-width-600" clearable ></el-input>
+            <el-form-item prop="keyword1">
+              <p>学习账号{{keyword1Data}}</p>
+              <el-input v-model="form.keyword1" class="input-width-400" clearable prop="keyword1"></el-input>
+            </el-form-item>
 
-            <p>{{remarkData}}</p>
-            <el-input v-model="form.contentDetails" class="input-width-600" clearable ></el-input>
+            <el-form-item prop="keyword2">
+              <p>更新内容{{keyword2Data}}</p>
+              <el-input v-model="form.keyword2" class="input-width-600" clearable prop="keyword1"></el-input>
+            </el-form-item>
+
+            <el-form-item prop="remark">
+              <p>{{remarkData}}</p>
+              <el-input v-model="form.remark" class="input-width-600" clearable prop="remark"></el-input>
+            </el-form-item>
           </el-form-item>
 
-          <el-form-item label="内容链接:" size="small" class="inline-form-item">
-            <el-input v-model="form.contentUrl" placeholder="请选择文章或者输入外部URL" class="input-width-400"></el-input>
-            <el-select v-model="article" placeholder="选择文章" clearable filterable @change="onSelectArt">
-              <el-option :label="item.label" :value="item.label" v-for="(item, index) in articleList" :key="index"/>
-            </el-select>
+          <el-form-item label="内容链接:" size="small" class="inline-form-item" prop="articleContent" required>
+            <el-form-item prop="remark">
+              <el-input v-model="form.articleContent" placeholder="请选择文章或者输入外部URL" class="input-width-400"></el-input>
+              <el-select v-model="article" placeholder="选择文章" clearable filterable @change="onSelectArt">
+                <el-option :label="item.label" :value="item.value" v-for="(item, index) in articleList" :key="index"/>
+              </el-select>
+            </el-form-item>
           </el-form-item>
-          <el-form-item label="群发对象:" size="small">
-            <el-select v-model="form.group" placeholder="选择分组" clearable filterable @change="onSelectMass">
-              <el-option :label="item.label" :value="item.label" v-for="(item, index) in groupList" :key="index"/>
+
+          <el-form-item label="群发对象:" size="small" prop="selfGroupId">
+            <el-select v-model="form.selfGroupId" placeholder="选择分组" clearable filterable @change="onSelectMass">
+              <el-option :label="item.label" :value="item.value" v-for="(item, index) in groupList" :key="index"/>
             </el-select>
-            <el-button type="primary" @click="onCheckList">查看名单</el-button>
+            <el-button type="primary" @click="onCheckList" disabled>查看名单</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -51,11 +63,11 @@
       <el-dialog title="预览信息" :visible.sync="previewShow">
         <div class="preview-container">
           <div class="top">
-            <p>{{form.contentTitle}}</p>
-            <p>学习账号：{{form.studyAccount}}</p>
-            <p>更新内容：{{form.updateCon}}</p>
-            <p>更新时间：{{updateTime}}</p>
-            <p>{{form.contentDetails}}</p>
+            <p>{{form.first}}</p>
+            <p>学习账号：{{form.keyword1}}</p>
+            <p>更新内容：{{form.keyword2}}</p>
+            <p>更新时间：{{initUpdateTime}}</p>
+            <p>{{form.remark}}</p>
           </div>
           <div class="fot">
             <p>详情</p>
@@ -72,6 +84,7 @@
 <script>
 //import TopMenu from "@/components/TopMenu/index";
 import { initTime } from '@/utils/index.js';
+import { APIWechatFans } from '@/api/wechat-fans.js';
 /* import './index.scss' */
 export default {
   name: 'add-mass',
@@ -84,28 +97,21 @@ export default {
      keyword2Data: '{{keyword2DATA}}:',
      remarkData: '{{remarkDATA}}:',
      form: {
-       msgTheme: '' || '财商学习通知',
-       contentTitle: '' || '家长您好，您孩子所需的财商学习内容有更新', //内容模板标题
-       studyAccount: '' || 'csds', //学习账号
-       updateCon: '' || '财商36问', //更新内容
-       contentDetails: '' || '请点击内容查看详情', //内容详情
-       contentUrl: '', //内容连接
-       group: '', //分组
+       subject: '' /* || '财商学习通知' */, //发送主题
+       templateId: 1, //模板id
+       articleContent: '', //文章内容
+       articleId: '', //文章id
+       selfGroupId: '', //分组id
+       first: '' /* || '家长您好，您孩子所需的财商学习内容有更新' */, //内容模板标题
+       keyword1: '' /* || 'csds' */, //学习账号
+       keyword2: '' /* || '财商36问' */, //更新内容
+       remark: '' /* || '请点击内容查看详情' */, //内容详情
      },
      article: '', //选择文章
-     articleList: [
-       { label: '文章1', value: '文章1' },
-       { label: '文章2', value: '文章2' },
-       { label: '文章3', value: '文章3' },
-       { label: '文章4', value: '文章4' },
-     ],
+    //  文章列表
+     articleList: [],
     //  用户分组
-    groupList: [
-      { label: '分组1', value: '分组2' },
-      { label: '分组2', value: '分组2' },
-      { label: '分组3', value: '分组3' },
-      { label: '分组4', value: '分组4' },
-    ],
+    groupList: [],
     // 底部操作按钮
     footBtnList: [
       { name: '立即发送', click: () => { this.onSend()}},
@@ -115,23 +121,168 @@ export default {
     ],
     // 预览dialog
     previewShow: false,
+    // form验证
+    rules: {
+      subject: [
+        { required: true, message: '请输入消息主题', trigger: 'blur' },
+      ],
+      first: [
+        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
+      ],
+      keyword1: [
+        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
+      ],
+      keyword2: [
+        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
+      ],
+      remark: [
+        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
+      ],
+      messageSubject: [
+        { required: true, message: '请填写消息模板内容', trigger: 'blur' },
+      ],
+      articleContent: [
+        { required: true, message: '请选择文章获取填写外部URL', trigger: 'blur' },
+      ],
+      selfGroupId: [
+        { required: true, message: '请选择群发分组', trigger: 'blur' },
+      ],
+    }
    }
   },
   computed: {
     // 初始弹窗更新时间
-    updateTime() {
+    initUpdateTime() {
        return initTime(new Date(), 'ymdh'); //更新时间
     }
   },
-  mounted() {},
-  created() {},
+  activated() {
+    this.getSelfGroups();
+    this.getArticlesGroup();
+  },
+  mounted() {
+  },
+  created() {
+    this.getSelfGroups();
+    this.getArticlesGroup();
+  },
   methods: {
+    // 获取自定义分组
+    getSelfGroups() {
+      let reqBody =  {
+        page_index: 1,
+        page_size: 10
+      }
+      APIWechatFans.SelfGroups(reqBody)
+        .then(res => {
+          let data = res.data;
+          this.groupList = data.map(item => {
+            return {
+              label: item.name,
+              value: item.id
+            }
+          })
+          console.log("data", data);
+        })
+    },
+    // 获取文章列表
+    getArticlesGroup() {
+      let reqBody =  {
+        page_index: 1,
+        page_size: 100000
+      }
+      APIWechatFans.getArticlesGroup(reqBody)
+        .then(res => {
+          let data = res.data;
+          console.log("文章data", data);
+          this.articleList = data.map(item => {
+            return {
+              label: item.title,
+              value: item.id
+            }
+          })
+      })
+    },
     // 查看白名单
     onCheckList() {},
     // 立即发送
-    onSend() {},
+    onSend() {
+      // 拼接所需字段
+      let keywordStr = this.form.keyword1 + ',' + this.form.keyword2;
+      let reqBody = {
+        send_now: true, //true 是立即发送， false是保存
+        subject: this.form.subject,
+        template_id: '1',
+        self_group_id: this.form.selfGroupId,
+        article_id: this.form.articleId,
+        first: this.form.first,
+        remark: this.form.remark,
+        keyword: keywordStr
+      };
+      this.$refs['form'].validate((valid) => {
+        if(valid) {
+          this.addGroupSender(reqBody, '群发');
+        } else {
+          this.$message({
+            type: "error",
+            message: "请完善群发消息"
+          });
+        }
+      });
+      //this.addGroupSender(reqBody);
+    },
     // 保存
     onSave() {
+      // 拼接所需字段
+      let keywordStr = this.form.keyword1 + ',' + this.form.keyword2;
+      let reqBody = {
+        send_now: false, //true 是立即发送， false是保存
+        subject: this.form.subject,
+        template_id: '1',
+        self_group_id: this.form.selfGroupId,
+        article_id: this.form.articleId,
+        first: this.form.first,
+        remark: this.form.remark,
+        keyword: keywordStr
+      };
+      this.$refs['form'].validate((valid) => {
+        if(valid) {
+          this.addGroupSender(reqBody, '保存');
+        } else {
+          this.$message({
+            type: "error",
+            message: "请完善群发消息"
+          });
+        }
+      });
+    },
+    // 添加群发
+    addGroupSender(reqBody, action) {
+      const loading = this.$loading({
+        text: `${action}中`
+      });
+      APIWechatFans.addGroupSender(reqBody)
+        .then(res => {
+          console.log("res", res);
+          if(res.code === 20000) {
+            this.$message({
+              type: "success",
+              message: `${action}成功!`
+            });
+          } else {
+            this.$message({
+              type: "error",
+              message: `${action}失败!${res.message}`
+            });
+          }
+        }).catch(error => {
+          this.$message({
+              type: "error",
+              message: '出错了！请联系管理员。'
+            });
+        }).finally(() => {
+          loading.close();
+        })
     },
     // 预览
     onPreview() {
@@ -144,15 +295,19 @@ export default {
     // 选择文章
     onSelectArt(value) {
         if(value) {
-            this.form.contentUrl = value;
-            console.log("this.form.contentUrl", this.form.contentUrl);
+            this.form.articleId = value;
+            this.form.articleContent = this.articleList.filter(item => {
+              return item.value === value;
+            }).map(item => {
+              return item.label;
+            }).toString();
         }
     },
     // 选择群发对象分组
     onSelectMass(value) {
         if(value) {
-            this.form.group = value;
-            console.log("this.form.group", this.form.group);
+            this.form.selfGroupId = value;
+            console.log("选择的对象分组", value);
         }
     }
   }
@@ -167,9 +322,9 @@ export default {
       border: none;
       box-shadow: none;
       .form-container {
-        height: 500px;
+        height: 520px;
+        padding: 5px 0;
         border: 1px solid #d8dce5;
-        padding: 20px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -187,7 +342,7 @@ export default {
         }
       }
       .footer-container {
-        height: 100px;
+        height: 60px;
         display: flex;
         justify-content: center;
         align-items: center;
diff --git a/src/views/message-manage/main/mass-list/index.vue b/src/views/message-manage/main/mass-list/index.vue
index f9158f4..dd9bddd 100644
--- a/src/views/message-manage/main/mass-list/index.vue
+++ b/src/views/message-manage/main/mass-list/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-08 10:09:50
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-09-09 15:03:34
+ * @LastEditTime: 2022-09-17 16:37:46
  * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\mass-list\index.vue
  * @description: 群发列表
 -->
@@ -13,8 +13,10 @@
             <!-- 搜索 -->
             <el-input
                 :placeholder="placeholder"
-                v-model="searchParams.inputValue"
+                v-model="searchParams.subject"
                 class="search-input"
+                clearable
+                @clear="onClear"
             />
             <el-button icon="el-icon-search" @click="onSearch" type="primary" class="search-btn">搜索</el-button>
         </div>
@@ -32,8 +34,10 @@
           :visible.sync="isDetailsShow"
           center
           top="5vh"
+          @close="onCloseDetail"
         >
-        <TTable :tableData="detailsDataList" :columns="detailsColumns"></TTable>
+        <TTable :tableData="detailsDataList" :columns="detailsColumns" :emptyText="errorMessage"></TTable>
+        <!-- <p v-else-if="detailsDataList.length <= 0">{{errorMessage}}</p> -->
         <!-- 分页 -->
         <pagination
             v-show="detailsTotal > 0"
@@ -49,6 +53,7 @@
 <script>
 import TTable from "@/components/TTable/TTable";
 import Pagination from "@/components/Pagination";
+import { APIWechatFans } from '@/api/wechat-fans.js';
 export default {
     name: "mass-list",
     components: { TTable, Pagination },
@@ -56,31 +61,26 @@ export default {
         return {
             buttonList: [], // 头部按钮，例子：  {name: '添加', type: 'primary', icon: 'el-icon-circle-plus', click: () => { this.AddDialog();}}
             searchParams: {
-                inputValue: "",
+                subject: "",
                 page: 1,
-                limit: 10
+                limit: 10000
             },
             placeholder: "可输入消息主题",
             dataList: [
-              { messageThem: '财商学习更新通知', messageContent: '家长您好...', massGroup: '活跃粉丝组', createTime: '2022.09.09 17:35' },
-              { messageThem: '财商学习更新通知', messageContent: '家长您好...', massGroup: '活跃粉丝组', createTime: '2022.09.09 17:35' },
-              { messageThem: '财商学习更新通知', messageContent: '家长您好...', massGroup: '活跃粉丝组', createTime: '2022.09.09 17:35' },
-            ],
-            detailsDataList: [
-              { sendUser: '张三', sendStatus: '成功', sendTime: '2022.09.09 17:35' },
-              { sendUser: '李四', sendStatus: '成功', sendTime: '2022.09.09 17:35' },
-              { sendUser: '王五', sendStatus: '失败', sendTime: '2022.09.09 17:35' },
+
             ],
+            // 群发详细数组
+            detailsDataList: [],
             detailsColumns: [
-                { prop: "sendUser", title: "发送对象", fixed: "left" },
-                { prop: "sendStatus", title: "发送状态" },
-                { prop: "sendTime", title: "发送时间" },
+                { prop: "nickname", title: "发送对象", fixed: "left" },
+                { prop: "status", title: "发送状态" },
+                { prop: "send_time", title: "发送时间" },
             ],
             columns: [
-                { prop: "messageThem", title: "消息主题", fixed: "left" },
-                { prop: "messageContent", title: "内容摘要(链接详情)" },
-                { prop: "massGroup", title: "发送分组" },
-                { prop: "createTime", title: "创建时间" },
+                { prop: "subject", title: "消息主题", fixed: "left" },
+                { prop: "template_first", title: "内容摘要(链接详情)" },
+                { prop: "self_group_name", title: "发送分组" },
+                { prop: "create_time", title: "创建时间" },
                 {
                     action: true,
                     title: "操作",
@@ -111,35 +111,110 @@ export default {
                     ]
                 }
             ],
-            total: 1,
+            total: 10,
             isDetailsShow: false,
-            detailsTotal: 1,
+            detailsTotal: 10,
             detailsParams: {
               page: 1,
               limit: 10
-            }
+            },
+            errorMessage: '', //详情错误信息
 
         };
     },
-    mounted() {},
-    created() {},
+    mounted() {
+
+    },
+    activated() {
+      this.getGroupSender();
+    },
+    created() {
+      this.getGroupSender();
+    },
     methods: {
-        onSearch() {},
+        //获取群发列表
+        getGroupSender() {
+          let reqBody = {
+            subject: this.searchParams.subject,
+            page_index: this.searchParams.page,
+            page_size: this.searchParams.limit
+          };
+          APIWechatFans.getGroupSender(reqBody)
+            .then(res => {
+              console.log("res::", res);
+              this.dataList = res.data;
+
+            })
+        },
+        // 搜索
+        onSearch() {
+          this.getGroupSender();
+        },
+        // 清空输入框
+        onClear() {
+          this.searchParams.subject = '';
+          this.getGroupSender();
+        },
         onUpdate() {
 
         },
-        onDelete() {
+        onDelete(value) {
+          let that = this;
           this.$confirm("是否删除?", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
           }).then(() => {
-              // todo 删除
-          }).catch(() => {})
+            let reqBody = {
+              id: value.id
+            }
+            APIWechatFans.deleteGroupSender(reqBody)
+              .then(res => {
+                if(res.code === 0) {
+                  this.$message({
+                    type: "success",
+                    message: "删除成功"
+                  });
+                }
+              })
+          }).catch(error => {
+            this.$message({
+              type: "error",
+              message: `删除失败！${error.message}`
+            });
+          })
         },
-        onDetails() {
+        // 群发明细
+        onDetails(value) {
+          console.log("value", value);
           //this.$router.push({name: 'send-details'});
           this.isDetailsShow = true;
+          this.getGroupSenderDetails(value.id);
+        },
+        // 获取单个群发明细
+        getGroupSenderDetails(id) {
+          let reqBody = {
+            subject_id: id,
+            page_index: 1,
+            page_size: 10,
+          };
+          APIWechatFans.getGroupSenderDetails(reqBody)
+            .then(res => {
+              console.log("res", res);
+              if(res.data !== null) {
+                this.detailsDataList = res.data.map(item => {
+                 item.status = item.status === 1 ? '发送成功' : '发送失败';
+                 return item
+                });
+              } else {
+                this.errorMessage = res.message;
+              }
+            })
+          console.log("reqBody", reqBody);
+        },
+        // 关闭群发明细
+        onCloseDetail() {
+          this.getGroupSender();
         }
     }
 };