微信素材管理

src/api/wechat/article.js

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

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

@@ -0,0 +1,16 @@
+<template>
+  <article-form :type="wechatType" />
+</template>
+<script>
+import ArticleForm from '../../components/articleForm'
+export default {
+  name: 'WeChatCmArticleEdit',
+  components: { ArticleForm },
+  data: function() {
+    return {
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 1
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <article-list :list-type="wechatType" />
+</template>
+<script>
+import ArticleList from '../../components/articleList'
+export default {
+  name: 'WeChatCmArticleList',
+  components: { ArticleList },
+  data: function() {
+    return {
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 1
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <text-form :type="wechatType" />
+</template>
+<script>
+import TextForm from '../../components/textForm'
+export default {
+  name: 'WeChatCmTextEdit',
+  components: { TextForm },
+  data: function() {
+    return {
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 1
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <text-list :list-type="wechatType" />
+</template>
+<script>
+import TextList from '../../components/textList'
+export default {
+  name: 'WeChatCmTextList',
+  components: { TextList },
+  data: function() {
+    return {
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 1
+    }
+  }
+}
+</script>

src/views/wechat/components/articleForm.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="app-container">
+    <el-page-header :content="isEdit?'编辑图文素材':'添加图文素材'" @back="goBack" />
+    <el-card class="form-container" shadow="never">
+      <el-form ref="weChatArticleFrom" :model="article" :rules="rules" label-width="120px">
+        <el-form-item label="标题:" prop="title">
+          <el-input v-model="article.title" />
+        </el-form-item>
+        <el-form-item label="素材详细列表:" prop="detailJson">
+          <el-input v-model="article.detailJson" />
+          <el-table row-key="title" :data="detailList" border highlight-current-row>
+            <el-table-column label="标题" prop="title" align="center">
+              <template slot-scope="{row}">
+                <el-input v-model="row.title" />
+              </template>
+            </el-table-column>
+            <el-table-column label="跳转链接" prop="linkUrl" align="center">
+              <template slot-scope="{row}">
+                <el-input v-model="row.linkUrl" />
+              </template>
+            </el-table-column>
+            <el-table-column label="图片链接" prop="pictureUrl" align="center">
+              <template slot-scope="{row}">
+                <el-input v-model="row.pictureUrl" />
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+              <template slot-scope="{row}">
+                <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="detail-btn">
+            <el-button type="primary" @click="handleCreate">添加</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit('weChatArticleFrom')">提交</el-button>
+          <el-button v-if="!isEdit" type="info" @click="resetForm('weChatArticleFrom')">重置</el-button>
+          <el-button @click="goBack">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+<script>
+import { getArticle, updateArticle, createArticle } from '@/api/wechat/article'
+const defaultArticle = {
+  id: 0,
+  title: '',
+  detailJson: '',
+  type: ''
+}
+const defaultDetail = {
+  id: 0,
+  title: '',
+  linkUrl: '',
+  pictureUrl: ''
+}
+export default {
+  name: 'WeChatArticleForm',
+  props: {
+    // type 类型： 1采美，2呵呵商城
+    type: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      rules: {
+        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }]
+      },
+      article: Object.assign({}, defaultArticle),
+      detailList: [],
+      isEdit: false
+    }
+  },
+  watch: {
+    $route(route) {
+      this.getFormData()
+    }
+  },
+  created() {
+    this.article.type = this.type
+    this.getFormData()
+  },
+  methods: {
+    goBack() {
+      // 调用全局挂载的方法,关闭当前标签页
+      this.$store.dispatch('tagsView/delView', this.$route)
+      // 返回上一步路由，返回上一个标签页
+      this.$router.go(-1)
+    },
+    getFormData() {
+      if (this.$route.query.id) {
+        this.article.id = this.$route.query.id
+        this.isEdit = true
+        getArticle(this.article.id).then(response => {
+          this.article.title = response.data.title
+          this.detailList = response.data.detailList
+        })
+      } else {
+        this.article.id = ''
+        this.isEdit = false
+        this.article = Object.assign({}, defaultArticle)
+      }
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.article = Object.assign({}, defaultArticle)
+      this.getFormData()
+    },
+    onSubmit(formName) {
+      this.article.detailJson = JSON.stringify(this.detailList)
+      this.$refs[formName].validate(valid => {
+        console.log(this.article)
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonArticle: '确定',
+            cancelButtonArticle: '取消',
+            type: 'warning'
+          }).then(() => {
+            if (this.isEdit) {
+              updateArticle(this.$route.query.id, this.article).then(response => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
+            } else {
+              createArticle(this.article).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
+        }
+      })
+    },
+    handleDelete(row) {
+      const temp = this.detailList
+      const newList = []
+      temp.forEach(item => {
+        if (item.id !== row.id) {
+          newList.push(item)
+        }
+      })
+      this.detailList = newList
+    },
+    handleCreate() {
+      this.detailList.push(Object.assign({}, defaultDetail))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.form-container{
+  width:1000px;
+}
+.detail-btn{
+  text-align: center;
+  padding:15px 0;
+  border-bottom: 1px solid #e6ebf5;
+}
+</style>

src/views/wechat/components/articleList.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      标题:
+      <el-input v-model="listQuery.title" class="filter-item" placeholder="请输入" @change="handleFilter" />
+      <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="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, deleteArticle } from '@/api/wechat/article'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'WeChatArticleList',
+  components: { Pagination },
+  props: {
+    // type 类型： 1采美，2呵呵商城
+    listType: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listQuery: {
+        // type 类型： 1采美，2呵呵商城
+        type: '0',
+        title: '',
+        pageNum: 1,
+        pageSize: 20
+      },
+      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: {
+    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}/article/add` })
+    },
+    handleUpdate(row) {
+      this.$router.push({ path: `/wechat/${this.linkPath}/article/edit`, query: { id: row.id }})
+    },
+    handleDelete(row) {
+      this.$confirm('是否要删除该图文素材', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteArticle(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/components/textForm.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="app-container">
+    <el-page-header :content="isEdit?'编辑文本素材':'添加文本素材'" @back="goBack" />
+    <el-card class="form-container" shadow="never">
+      <el-form ref="weChatTextFrom" :model="text" :rules="rules" label-width="150px">
+        <el-form-item label="标题:" prop="title">
+          <el-input v-model="text.title" />
+        </el-form-item>
+        <el-form-item label="内容:" prop="content">
+          <el-input v-model="text.content" type="textarea" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit('weChatTextFrom')">提交</el-button>
+          <el-button v-if="!isEdit" type="info" @click="resetForm('weChatTextFrom')">重置</el-button>
+          <el-button @click="goBack">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+<script>
+import { getText, updateText, createText } from '@/api/wechat/text'
+const defaultText = {
+  id: '',
+  title: '',
+  content: '',
+  type: ''
+}
+export default {
+  name: 'WeChatTextForm',
+  props: {
+    // type 类型： 1采美，2呵呵商城
+    type: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      rules: {
+        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }]
+      },
+      text: Object.assign({}, defaultText),
+      isEdit: false
+    }
+  },
+  watch: {
+    $route(route) {
+      this.getFormData()
+    }
+  },
+  created() {
+    this.text.type = this.type
+    this.getFormData()
+  },
+  methods: {
+    goBack() {
+      // 调用全局挂载的方法,关闭当前标签页
+      this.$store.dispatch('tagsView/delView', this.$route)
+      // 返回上一步路由，返回上一个标签页
+      this.$router.go(-1)
+    },
+    getFormData() {
+      if (this.$route.query.id) {
+        this.text.id = this.$route.query.id
+        this.isEdit = true
+        getText(this.text.id).then(response => {
+          this.text.title = response.data.title
+          this.text.content = response.data.content
+        })
+      } else {
+        this.text.id = ''
+        this.isEdit = false
+        this.text = Object.assign({}, defaultText)
+      }
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.text = Object.assign({}, defaultText)
+      this.getFormData()
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        console.log(this.text)
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            if (this.isEdit) {
+              updateText(this.$route.query.id, this.text).then(response => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
+            } else {
+              createText(this.text).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>
+</style>

src/views/wechat/components/textList.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      标题:
+      <el-input v-model="listQuery.title" class="filter-item" placeholder="请输入" @change="handleFilter" />
+      <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="title" />
+      <el-table-column label="内容" prop="content">
+        <template slot-scope="{row}">
+          <el-tooltip :content="row.content" placement="top">
+            <span v-text="limitString(row.content, 20)" />
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <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, deleteText } from '@/api/wechat/text'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'WeChatTextList',
+  components: { Pagination },
+  props: {
+    // type 类型： 1采美，2呵呵商城
+    listType: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listQuery: {
+        // type 类型： 1采美，2呵呵商城
+        type: '0',
+        title: '',
+        pageNum: 1,
+        pageSize: 20
+      },
+      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: {
+    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)
+      })
+    },
+    limitString(str, size) {
+      if (String(str).length > size) {
+        return String(str).substring(0, size) + '...'
+      }
+      return str
+    },
+    handleCreate() {
+      this.$router.push({ path: `/wechat/${this.linkPath}/text/add` })
+    },
+    handleUpdate(row) {
+      this.$router.push({ path: `/wechat/${this.linkPath}/text/edit`, query: { id: row.id }})
+    },
+    handleDelete(row) {
+      this.$confirm('是否要删除该文本素材', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteText(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/article/form.vue

@@ -0,0 +1,16 @@
+<template>
+  <article-form :type="wechatType" />
+</template>
+<script>
+import ArticleForm from '../../components/articleForm'
+export default {
+  name: 'WeChatHeArticleEdit',
+  components: { ArticleForm },
+  data: function() {
+    return {
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 2
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <article-list :list-type="wechatType" />
+</template>
+<script>
+import ArticleList from '../../components/articleList'
+export default {
+  name: 'WeChatHeArticleList',
+  components: { ArticleList },
+  data: function() {
+    return {
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 2
+    }
+  }
+}
+</script>

src/views/wechat/hehe/text/form.vue

@@ -0,0 +1,16 @@
+<template>
+  <text-form :type="wechatType" />
+</template>
+<script>
+import TextForm from '../../components/textForm'
+export default {
+  name: 'WeChatHeTextEdit',
+  components: { TextForm },
+  data: function() {
+    return {
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 2
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <text-list :list-type="wechatType" />
+</template>
+<script>
+import TextList from '../../components/textList'
+export default {
+  name: 'WeChatHeTextList',
+  components: { TextList },
+  data: function() {
+    return {
+      // wechatType 类型： 1采美，2呵呵商城
+      wechatType: 2
+    }
+  }
+}
+</script>