回复配置页面

src/api/wechat/reply.js

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+/**
+ * 获取微信公众号回复配置列表
+ * @param {*} query type 类型： 1采美，2呵呵商城
+ */
+export function fetchList(query) {
+  return request({
+    url: '/wechat/reply/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 根据ID获取微信公众号回复配置
+ */
+export function getReply(id) {
+  return request({
+    url: '/wechat/reply/' + id,
+    method: 'get'
+  })
+}
+
+/**
+ * 根据ID更新微信公众号回复配置
+ */
+export function updateReply(id, data) {
+  return request({
+    url: '/wechat/reply/update/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 添加微信公众号回复配置
+ */
+export function createReply(data) {
+  return request({
+    url: '/wechat/reply/create',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 根据ID删除微信公众号回复配置
+ */
+export function deleteReply(id) {
+  return request({
+    url: '/wechat/reply/delete/' + id,
+    method: 'post'
+  })
+}

src/api/wechat/text.js

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+/**
+ * 获取微信公众号文本素材列表
+ * @param {*} query type 类型： 1采美，2呵呵商城
+ */
+export function fetchList(query) {
+  return request({
+    url: '/wechat/text/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 根据ID获取微信公众号文本素材
+ */
+export function getText(id) {
+  return request({
+    url: '/wechat/text/' + id,
+    method: 'get'
+  })
+}
+
+/**
+ * 根据ID更新微信公众号文本素材
+ */
+export function updateText(id, data) {
+  return request({
+    url: '/wechat/text/update/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 添加微信公众号文本素材
+ */
+export function createText(data) {
+  return request({
+    url: '/wechat/text/create',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 根据ID删除微信公众号文本素材
+ */
+export function deleteText(id) {
+  return request({
+    url: '/wechat/text/delete/' + id,
+    method: 'post'
+  })
+}

src/router/modules/wechat.js

@@ -108,31 +108,31 @@ const wechatRouter = {
           ]
         },
         {
-          path: 'image',
-          component: () => import('@/views/wechat/caimei/image/index'),
-          redirect: '/wechat/caimei/image/list',
-          name: 'WeChatCmImage',
+          path: 'article',
+          component: () => import('@/views/wechat/caimei/article/index'),
+          redirect: '/wechat/caimei/article/list',
+          name: 'WeChatCmArticle',
           meta: { title: '图文素材管理' },
           children: [
             {
               path: 'list',
               hidden: true,
-              component: () => import('@/views/wechat/caimei/image/list.vue'),
-              name: 'WeChatCmImageList',
+              component: () => import('@/views/wechat/caimei/article/list.vue'),
+              name: 'WeChatCmArticleList',
               meta: { title: '图文素材列表' }
             },
             {
               path: 'edit',
               hidden: true,
-              component: () => import('@/views/wechat/caimei/image/form.vue'),
-              name: 'WeChatCmImageEdit',
+              component: () => import('@/views/wechat/caimei/article/form.vue'),
+              name: 'WeChatCmArticleEdit',
               meta: { title: '编辑图文素材', noCache: true }
             },
             {
               path: 'add',
               hidden: true,
-              component: () => import('@/views/wechat/caimei/image/form.vue'),
-              name: 'WeChatCmImageEdit',
+              component: () => import('@/views/wechat/caimei/article/form.vue'),
+              name: 'WeChatCmArticleEdit',
               meta: { title: '添加图文素材', noCache: true }
             }
           ]
@@ -237,31 +237,31 @@ const wechatRouter = {
           ]
         },
         {
-          path: 'image',
-          component: () => import('@/views/wechat/hehe/image/index'),
-          redirect: '/wechat/hehe/image/list',
-          name: 'WeChatHeImage',
+          path: 'article',
+          component: () => import('@/views/wechat/hehe/article/index'),
+          redirect: '/wechat/hehe/article/list',
+          name: 'WeChatHeArticle',
           meta: { title: '图文素材管理' },
           children: [
             {
               path: 'list',
               hidden: true,
-              component: () => import('@/views/wechat/hehe/image/list.vue'),
-              name: 'WeChatHeImageList',
+              component: () => import('@/views/wechat/hehe/article/list.vue'),
+              name: 'WeChatHeArticleList',
               meta: { title: '图文素材列表' }
             },
             {
               path: 'edit',
               hidden: true,
-              component: () => import('@/views/wechat/hehe/image/form.vue'),
-              name: 'WeChatHeImageEdit',
+              component: () => import('@/views/wechat/hehe/article/form.vue'),
+              name: 'WeChatHeArticleEdit',
               meta: { title: '编辑图文素材' }
             },
             {
               path: 'add',
               hidden: true,
-              component: () => import('@/views/wechat/hehe/image/form.vue'),
-              name: 'WeChatHeImageEdit',
+              component: () => import('@/views/wechat/hehe/article/form.vue'),
+              name: 'WeChatHeArticleEdit',
               meta: { title: '添加图文素材' }
             }
           ]

src/views/wechat/caimei/menus/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <menus-list :list-type="menusType" />
+  <menus-list :list-type="wechatType" />
 </template>
 <script>
 import MenusList from '../../components/menusList'
@@ -8,8 +8,8 @@ export default {
   components: { MenusList },
   data: function() {
     return {
-      // menusType 类型： 1采美，2呵呵商城
-      menusType: 1
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 1
     }
   }
 }

src/views/wechat/caimei/reply/form.vue

@@ -1,12 +1,16 @@
 <template>
-  <menus-form />
+  <reply-form :type="wechatType" />
 </template>
 <script>
-import MenusForm from '../../components/menusForm'
+import ReplyForm from '../../components/replyForm'
 export default {
-  components: { MenusForm }
+  name: 'WeChatCmReplyEdit',
+  components: { ReplyForm },
+  data: function() {
+    return {
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 1
+    }
+  }
 }
 </script>
-<style>
-
-</style>

src/views/wechat/caimei/reply/list.vue

@@ -1,14 +1,15 @@
 <template>
-  <menus-list :list-type="menusType" />
+  <reply-list :list-type="wechatType" />
 </template>
 <script>
-import MenusList from '../../components/menusList'
+import ReplyList from '../../components/replyList'
 export default {
-  components: { MenusList },
+  name: 'WeChatCmReplyList',
+  components: { ReplyList },
   data: function() {
     return {
-      // menusType 类型： 1采美，2呵呵商城
-      menusType: 1
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 1
     }
   }
 }

src/views/wechat/components/replyForm.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="app-container">
+    <el-page-header :content="isEdit?'编辑回复配置':'添加回复配置'" @back="goBack" />
+    <el-card class="form-container" shadow="never">
+      <el-form ref="weChatReplyFrom" :model="reply" label-width="150px">
+        <el-form-item label="回复类型:" prop="msgType">
+          <el-select v-model="reply.msgType" placeholder="请选择">
+            <el-option value="" label="请选择" />
+            <el-option label="请选择回复类型" value="" />
+            <el-option label="文本输入" value="input" />
+            <el-option label="点击事件" value="click" />
+            <el-option label="关注" value="subscribe" />
+            <el-option label="扫码" value="scan" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件类型:" prop="responseType">
+          <el-select v-model="reply.responseType" placeholder="请选择">
+            <el-option label="请选择" value="" />
+            <el-option label="文本素材" value="text" />
+            <el-option label="图文素材" value="news" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="关键字:" prop="keyword">
+          <el-input v-model="reply.keyword" />
+        </el-form-item>
+        <el-form-item label="回复素材标题:" prop="title">
+          <el-input v-model="reply.title" readonly disabled />
+          <el-button @click="dialogTableVisible = true">选择</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit('weChatReplyFrom')">提交</el-button>
+          <el-button v-if="!isEdit" type="info" @click="resetForm('weChatReplyFrom')">重置</el-button>
+          <el-button @click="goBack">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-dialog title="素材选择" :visible.sync="dialogTableVisible">
+      <el-table row-key="id" :data="textData">
+        <el-table-column prop="title" label="标题">
+          <template slot-scope="{row}">
+            <el-radio v-model="reply.relateId" :label="row.id">{{ limitString(row.title, 8) }}</el-radio>
+          </template>>
+        </el-table-column>
+        <el-table-column prop="content" label="内容">
+          <template slot-scope="{row}">
+            <el-tooltip :content="row.content" placement="top">
+              <span v-text="limitString(row.content, 15)" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="updateTime" label="最后更新时间" width="100" />
+      </el-table>
+      <pagination v-show="textTotal>0" :total="textTotal" :page.sync="textQuery.pageNum" :limit.sync="textQuery.pageSize" @pagination="getTextData" />
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getReply, updateReply, createReply } from '@/api/wechat/reply'
+import { fetchList as fetchTextList } from '@/api/wechat/text'
+import Pagination from '@/components/Pagination'
+const defaultReply = {
+  // 类型： 1采美，2呵呵商城
+  type: '',
+  id: 0,
+  keyword: '',
+  responseType: '',
+  msgType: '',
+  title: '',
+  relateId: 0
+}
+export default {
+  name: 'WeChatReplyForm',
+  components: { Pagination },
+  props: {
+    // type 类型： 1采美，2呵呵商城
+    type: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      reply: Object.assign({}, defaultReply),
+      isEdit: false,
+      dialogTableVisible: false,
+      textTotal: 0,
+      textData: [],
+      textQuery: {
+        // type 类型： 1采美，2呵呵商城
+        type: '0',
+        title: '',
+        pageNum: 1,
+        pageSize: 10
+      }
+    }
+  },
+  watch: {
+    $route(route) {
+      this.getFormData()
+    }
+  },
+  created() {
+    this.reply.type = this.type
+    this.textQuery.type = this.type
+    this.getFormData()
+    this.getTextData()
+  },
+  methods: {
+    goBack() {
+      // 调用全局挂载的方法,关闭当前标签页
+      this.$store.dispatch('tagsView/delView', this.$route)
+      // 返回上一步路由，返回上一个标签页
+      this.$router.go(-1)
+    },
+    getFormData() {
+      this.reply.type = this.type
+      if (this.$route.query.id) {
+        this.reply.id = this.$route.query.id
+        this.isEdit = true
+        getReply(this.reply.id).then(response => {
+          this.reply.keyword = response.data.keyword
+          this.reply.responseType = response.data.responseType
+          this.reply.msgType = response.data.msgType
+          this.reply.title = response.data.title
+          this.reply.relateId = response.data.relateId
+        })
+      } else {
+        this.reply.id = ''
+        this.isEdit = false
+        this.reply = Object.assign({}, defaultReply)
+      }
+    },
+    getTextData() {
+      fetchTextList(this.textQuery).then(response => {
+        this.textData = response.data.results
+        this.textTotal = response.data.totalRecord
+      })
+    },
+    limitString(str, size) {
+      if (String(str).length > size) {
+        return String(str).substring(0, size) + '...'
+      }
+      return str
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.reply = Object.assign({}, defaultReply)
+      this.getFormData()
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        console.log(this.reply)
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            if (this.isEdit) {
+              updateReply(this.$route.query.id, this.reply).then(response => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
+            } else {
+              createReply(this.reply).then(response => {
+                this.$refs[formName].resetFields()
+                this.resetForm(formName)
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
+            }
+          })
+        } else {
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000
+          })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-content{
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

src/views/wechat/components/replyList.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      回复素材标题:
+      <el-input v-model="listQuery.title" class="filter-item" placeholder="请输入" @change="handleFilter" />
+      事件类型:
+      <el-select v-model="listQuery.responseType" class="filter-item" @change="handleFilter">
+        <el-option label="请选择事件类型" value="" />
+        <el-option label="文本素材" value="text" />
+        <el-option label="图文素材" value="news" />
+      </el-select>
+      回复类型:
+      <el-select v-model="listQuery.msgType" class="filter-item" @change="handleFilter">
+        <el-option label="请选择回复类型" value="" />
+        <el-option label="文本输入" value="input" />
+        <el-option label="点击事件" value="click" />
+        <el-option label="关注" value="subscribe" />
+        <el-option label="扫码" value="scan" />
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加回复配置</el-button>
+    </div>
+    <el-table v-loading="listLoading" row-key="id" :data="list" border fit highlight-current-row>
+      <el-table-column label="关键词" prop="keyword" align="center" />
+      <el-table-column label="事件类型" prop="responseType" align="center">
+        <template slot-scope="{row}"><span v-text="showResponseTypeText(row.responseType)" /></template>
+      </el-table-column>
+      <el-table-column label="回复类型" prop="msgType" align="center">
+        <template slot-scope="{row}"><span v-text="showMsgTypeText(row.msgType)" /></template>
+      </el-table-column>
+      <el-table-column label="回复素材标题" prop="title" align="center" />
+      <el-table-column label="最后更新时间" prop="updateTime" align="center" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{row}">
+          <el-button size="mini" type="primary" @click="handleUpdate(row)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { fetchList, deleteReply } from '@/api/wechat/reply'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'WeChatReplyList',
+  components: { Pagination },
+  props: {
+    // type 类型： 1采美，2呵呵商城
+    listType: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listQuery: {
+        // type 类型： 1采美，2呵呵商城
+        type: '0',
+        title: '',
+        responseType: '',
+        msgType: '',
+        pageNum: 1,
+        pageSize: 20
+      },
+      createTitle: '',
+      linkPath: ''
+    }
+  },
+  watch: {
+    $route(route) {
+      this.getList()
+    }
+  },
+  created() {
+    this.listQuery.type = this.listType
+    if (this.listQuery.type === 1) {
+      this.linkPath = 'caimei'
+    } else {
+      this.linkPath = 'hehe'
+    }
+    this.getList()
+  },
+  methods: {
+    showResponseTypeText: function(type) {
+      if (type === 'text') return '文本素材'
+      if (type === 'news') return '图文素材'
+    },
+    showMsgTypeText: function(type) {
+      if (type === 'input') return '文本输入'
+      if (type === 'click') return '点击事件'
+      if (type === 'subscribe') return '关注'
+      if (type === 'scan') return '扫码'
+    },
+    handleFilter() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.listLoading = false
+        this.list = response.data.results
+        this.total = response.data.totalRecord
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1.5 * 1000)
+      })
+    },
+    handleCreate() {
+      this.$router.push({ path: `/wechat/${this.linkPath}/reply/add` })
+    },
+    handleUpdate(row) {
+      this.$router.push({ path: `/wechat/${this.linkPath}/reply/edit`, query: { id: row.id }})
+    },
+    handleDelete(row) {
+      this.$confirm('是否要删除该回复配置', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteReply(row.id).then(response => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            duration: 1000
+          })
+          this.getList()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.filter-item{
+  width: 160px;
+  margin-right: 20px;
+}
+</style>

src/views/wechat/hehe/menus/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <menus-list :list-type="menusType" />
+  <menus-list :list-type="wechatType" />
 </template>
 <script>
 import MenusList from '../../components/menusList'
@@ -8,8 +8,8 @@ export default {
   components: { MenusList },
   data: function() {
     return {
-      // menusType 类型： 1采美，2呵呵商城
-      menusType: 2
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 2
     }
   }
 }