feat()：用户列表

src/api/user.js

@@ -25,3 +25,34 @@ export function logout() {
     method: 'post'
   })
 }
+
+export function fetchList(query) {
+  return request({
+    url: '/user/index',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchUser(id) {
+  return request({
+    url: '/User/read',
+    method: 'get',
+    params: { id }
+  })
+}
+
+export function updateUser(data) {
+  return request({
+    url: '/User/update?id=' + data.id,
+    method: 'post',
+    data
+  })
+}
+
+export function deleteUser(id) {
+  return request({
+    url: '/User/delete?id=' + id,
+    method: 'get'
+  })
+}

src/api/users.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/user/index',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchUser(id) {
+  return request({
+    url: '/User/read',
+    method: 'get',
+    params: { id }
+  })
+}
+
+export function updateUser(data) {
+  return request({
+    url: '/User/update?id=' + data.id,
+    method: 'post',
+    data
+  })
+}
+
+export function deleteUser(id) {
+  return request({
+    url: '/User/delete?id=' + id,
+    method: 'get'
+  })
+}

src/router/index.js

@@ -140,6 +140,38 @@ export const constantRoutes = [
     ]
   },
   {
+    path: '/user',
+    component: Layout,
+    redirect: '/user/list',
+    name: 'user',
+    meta: {
+      title: '用户',
+      icon: 'el-icon-s-help'
+    },
+    children: [
+      {
+        path: 'create',
+        component: () => import('@/views/user/create'),
+        name: 'CreateUser',
+        meta: { title: '创建用户', icon: 'el-icon-edit' },
+        hidden: true
+      },
+      {
+        path: 'edit/:id(\\d+)',
+        component: () => import('@/views/user/edit'),
+        name: 'EditUser',
+        meta: { title: '修改用户', noCache: true, activeMenu: '/user/list' },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/user/list'),
+        name: 'UserList',
+        meta: { title: '用户列表', icon: 'el-icon-s-order' }
+      }
+    ]
+  },
+  {
     path: '/article',
     component: Layout,
     redirect: '/article/list',

src/views/join/components/ArticleDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="createPost-container">
-    <el-form ref="postForm" :label-position="labelPosition" :model="postForm" :rules="rules" class="form-container" label-width="120px">
+    <el-form ref="postForm" :label-position="labelPosition" :model="postForm" :rules="rules" class="form-container" label-width="200px">
       <div class="createPost-main-container">
         <el-form-item prop="meet_people" label="对接人">
           <el-input v-model="postForm.meet_people" style="width: 300px;" />
@@ -61,7 +61,7 @@
             </el-radio-group>
           </template>
         </el-form-item>
-        <el-form-item prop="experience" label="是否有开店经验/创业经验/管理经验，若有请描述创业时间和所从事的行业，以及做到的最高成绩">
+        <el-form-item prop="experience" label="是否有开店经验/创业经验/管理经验">
           <el-input v-model="postForm.experience" placeholder="" style="width: 300px;" />
         </el-form-item>
         <el-form-item prop="sub_ayi" label="关注沪上阿姨多长时间了">
@@ -70,7 +70,7 @@
         <el-form-item prop="channel" label="通过那个渠道了解阿姨">
           <el-input v-model="postForm.channel" placeholder="" style="width: 300px;" />
         </el-form-item>
-        <el-form-item prop="friend" label="是否有认识的人正在经营沪上阿姨，若有填写姓名和店名">
+        <el-form-item prop="friend" label="是否有认识的人正在经营沪上阿姨">
           <el-input v-model="postForm.friend" placeholder="" style="width: 300px;" />
         </el-form-item>
         <el-form-item prop="use_product" label="喝过沪上阿姨几款产品">
@@ -85,7 +85,7 @@
         <el-form-item prop="why_join" label="为什么想加入沪上阿姨">
           <el-input v-model="postForm.why_join" placeholder="" style="width: 300px;" />
         </el-form-item>
-        <el-form-item prop="resource" label="是否有寻找店铺的资源，若有请描述：">
+        <el-form-item prop="resource" label="是否有寻找店铺的资源">
           <el-input v-model="postForm.resource" placeholder="" style="width: 300px;" />
         </el-form-item>
         <el-form-item prop="user_id" label="用户id">
@@ -93,10 +93,10 @@
         </el-form-item>
         <el-row>
           <el-button v-if="!isEdit" v-loading="loading" type="success" @click="submitForm">
-            提交
+            查看
           </el-button>
           <el-button v-if="isEdit" v-loading="loading" type="success" @click="updateArticle">
-            修改
+            查看
           </el-button>
         </el-row>
       </div>
@@ -110,7 +110,7 @@
 
 // import Sticky from '@/components/Sticky' // 粘性header组件
 // import { validURL } from '@/utils/validate'
-import { fetchJoin, updateJoin } from '@/api/join'
+import { fetchJoin } from '@/api/join'
 // import Warning from './Warning'
 // import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
 
@@ -138,26 +138,14 @@ export default {
     }
   },
   data() {
-    const validateRequire = (rule, value, callback) => {
-      if (value === '') {
-        this.$message({
-          message: rule.field + '为必传项',
-          type: 'error'
-        })
-        callback(new Error(rule.field + '为必传项'))
-      } else {
-        callback()
-      }
-    }
     return {
       postForm: Object.assign({}, defaultForm),
       loading: false,
       userListOptions: [],
       rules: {
-        url: [{ message: 'banner图不为空', validator: validateRequire }]
       },
       tempRoute: {},
-      labelPosition: 'left',
+      labelPosition: 'left'
     }
   },
   computed: {
@@ -192,22 +180,6 @@ export default {
       this.$refs.postForm.validate(valid => {
         if (valid) {
           this.loading = true
-          console.log(this.postForm)
-          if (this.postForm.status || this.postForm.status === '') {
-            this.postForm.status = 1
-          }
-          this.postForm.createPosition = this.formatCreatePosition(this.postForm.position)
-          createBanner(this.postForm).then(response => {
-            this.$notify({
-              title: '成功',
-              message: 'banner创建成功',
-              type: 'success',
-              duration: 2000
-            })
-            this.loading = false
-            this.listLoading = false
-            this.$router.push(`/banner/list`)
-          })
         } else {
           console.log('error submit!!')
           return false
@@ -216,18 +188,19 @@ export default {
     },
     updateArticle() {
       console.log(this.postForm)
-      updateJoin(this.postForm).then(response => {
-        this.$notify({
-          title: '修改',
-          message: '修改成功',
-          type: 'success',
-          duration: 2000
-        })
-        this.postForm.status = 'published'
-        this.loading = false
-        this.listLoading = false
-        this.$router.push(`/banner/list`)
-      })
+      this.$router.push(`/join/list`)
+      // updateJoin(this.postForm).then(response => {
+      //   this.$notify({
+      //     title: '修改',
+      //     message: '修改成功',
+      //     type: 'success',
+      //     duration: 2000
+      //   })
+      //   this.postForm.status = 'published'
+      //   this.loading = false
+      //   this.listLoading = false
+      //   this.$router.push(`/banner/list`)
+      // })
     },
     draftForm() {
       if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {

src/views/question/components/ArticleDetail.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="createPost-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+      <div class="createPost-main-container">
+        <el-row>
+          <Warning />
+
+          <el-col :span="24">
+            <el-form-item style="margin-bottom: 40px;" prop="title">
+              <MDinput v-model="postForm.title" :maxlength="50" name="name" required>
+                文章标题
+              </MDinput>
+            </el-form-item>
+            <div class="postInfo-container">
+              <div style="margin-bottom: 10px;">封面图</div>
+              <el-form-item prop="cover_img" style="margin-bottom: 30px;" label="">
+                <Upload v-model="postForm.cover_img" />
+              </el-form-item>
+            </div>
+          </el-col>
+        </el-row>
+        <el-form-item prop="content" style="margin-bottom: 30px;">
+          <Tinymce ref="editor" v-model="postForm.content" :height="400" />
+        </el-form-item>
+        <el-row>
+          <el-button v-if="!isEdit" v-loading="loading" type="success" @click="submitForm">
+            提交
+          </el-button>
+          <el-button v-if="isEdit" v-loading="loading" type="success" @click="updateArticle">
+            修改
+          </el-button>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+import Upload from '@/components/Upload/SingleImage3'
+import MDinput from '@/components/MDinput'
+// import Sticky from '@/components/Sticky' // 粘性header组件
+// import { validURL } from '@/utils/validate'
+import { fetchArticle, createArticle, updateArticle } from '@/api/article'
+import { searchUser } from '@/api/remote-search'
+import Warning from './Warning'
+// import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
+
+const defaultForm = {
+  status: 'draft',
+  title: '', // 文章题目
+  content: '', // 文章内容
+  content_short: '', // 文章摘要
+  video_url: '', // 文章外链
+  cover_img: '', // 文章图片
+  display_time: undefined, // 前台展示时间
+  id: undefined,
+  platforms: ['a-platform'],
+  comment_disabled: false,
+  importance: 0
+}
+
+export default {
+  name: 'ArticleDetail',
+  components: { Tinymce, MDinput, Warning, Upload },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      if (value === '') {
+        this.$message({
+          message: rule.field + '为必传项',
+          type: 'error'
+        })
+        callback(new Error(rule.field + '为必传项'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      userListOptions: [],
+      rules: {
+        cover_img: [{ message: '封面图不为空', validator: validateRequire }],
+        title: [{ message: '标题不为空', validator: validateRequire }],
+        content: [{ message: '内容不为空', validator: validateRequire }]
+      },
+      tempRoute: {}
+    }
+  },
+  computed: {
+    contentShortLength() {
+      return this.postForm.content_short.length
+    },
+    displayTime: {
+      // set and get is useful when the data
+      // returned by the back end api is different from the front end
+      // back end return => "2013-06-25 06:59:25"
+      // front end need timestamp => 1372114765000
+      get() {
+        return (+new Date(this.postForm.display_time))
+      },
+      set(val) {
+        this.postForm.display_time = new Date(val)
+      }
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    }
+    // Why need to make a copy of this.$route here?
+    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(id) {
+      fetchArticle(id).then(response => {
+        this.postForm = response.data.info
+        // set tags view title
+        // this.setTagsViewTitle()
+        // set page title
+        // this.setPageTitle()
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    setPageTitle() {
+      const title = 'Edit Article'
+      document.title = `${title} - ${this.postForm.id}`
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          console.log(this.postForm)
+          createArticle(this.postForm).then(response => {
+            this.$notify({
+              title: '成功',
+              message: '发布文章成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.postForm.status = 'published'
+            this.loading = false
+            this.listLoading = false
+            this.$router.push(`/article/list`)
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    updateArticle() {
+      console.log(this.postForm)
+      updateArticle(this.postForm).then(response => {
+        this.$notify({
+          title: '修改',
+          message: '修改文章成功',
+          type: 'success',
+          duration: 2000
+        })
+        this.postForm.status = 'published'
+        this.loading = false
+        this.listLoading = false
+        this.$router.push(`/article/list`)
+      })
+    },
+    draftForm() {
+      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
+        this.$message({
+          message: '请填写必要的标题和内容',
+          type: 'warning'
+        })
+        return
+      }
+      this.$message({
+        message: '保存成功',
+        type: 'success',
+        showClose: true,
+        duration: 1000
+      })
+      this.postForm.status = 'draft'
+    },
+    getRemoteUserList(query) {
+      searchUser(query).then(response => {
+        if (!response.data.items) return
+        this.userListOptions = response.data.items.map(v => v.name)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+
+.article-textarea ::v-deep {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+</style>

src/views/question/components/Dropdown/Comment.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-dropdown :show-timeout="100" trigger="click">
+    <el-button plain>
+      {{ !comment_disabled?'Comment: opened':'Comment: closed' }}
+      <i class="el-icon-caret-bottom el-icon--right" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown" class="no-padding">
+      <el-dropdown-item>
+        <el-radio-group v-model="comment_disabled" style="padding: 10px;">
+          <el-radio :label="true">
+            Close comment
+          </el-radio>
+          <el-radio :label="false">
+            Open comment
+          </el-radio>
+        </el-radio-group>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    comment_disabled: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

src/views/question/components/Dropdown/Platform.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
+    <el-button plain>
+      Platfroms({{ platforms.length }})
+      <i class="el-icon-caret-bottom el-icon--right" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown" class="no-border">
+      <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
+        <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
+          {{ item.name }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      required: true,
+      default: () => [],
+      type: Array
+    }
+  },
+  data() {
+    return {
+      platformsOptions: [
+        { key: 'a-platform', name: 'a-platform' },
+        { key: 'b-platform', name: 'b-platform' },
+        { key: 'c-platform', name: 'c-platform' }
+      ]
+    }
+  },
+  computed: {
+    platforms: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

src/views/question/components/Dropdown/SourceUrl.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-dropdown :show-timeout="100" trigger="click">
+    <el-button plain>
+      Link
+      <i class="el-icon-caret-bottom el-icon--right" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
+      <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
+        <el-input v-model="source_uri" placeholder="Please enter the content">
+          <template slot="prepend">
+            URL
+          </template>
+        </el-input>
+      </el-form-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    source_uri: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

src/views/question/components/Dropdown/index.js

@@ -0,0 +1,3 @@
+export { default as CommentDropdown } from './Comment'
+export { default as PlatformDropdown } from './Platform'
+export { default as SourceUrlDropdown } from './SourceUrl'

src/views/question/components/Warning.vue

@@ -0,0 +1,9 @@
+<template>
+  <aside>
+    <!--<a
+      href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
+      target="_blank"
+    >Document</a>-->
+  </aside>
+</template>
+

src/views/question/create.vue

@@ -0,0 +1,13 @@
+<template>
+  <article-detail :is-edit="false" />
+</template>
+
+<script>
+import ArticleDetail from './components/ArticleDetail'
+
+export default {
+  name: 'CreateArticle',
+  components: { ArticleDetail }
+}
+</script>
+

src/views/question/edit.vue

@@ -0,0 +1,13 @@
+<template>
+  <article-detail :is-edit="true" />
+</template>
+
+<script>
+import ArticleDetail from './components/ArticleDetail'
+
+export default {
+  name: 'EditForm',
+  components: { ArticleDetail }
+}
+</script>
+

src/views/question/list.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <!--<el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
+        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
+      </el-select>-->
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        Search
+      </el-button>
+      <router-link :to="{ path: '/article/create' }">
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit">
+          新建文章
+        </el-button>
+      </router-link>
+      <!--<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+        reviewer
+      </el-checkbox>-->
+    </div>
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+      <el-table-column align="center" label="ID" width="80">
+        <template slot-scope="scope">
+          <span>{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="180px" align="center" label="Date">
+        <template slot-scope="scope">
+          <span>{{ scope.row.create_time }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="Status" width="80ß">
+        <template slot-scope="{row}">
+          <el-tag :type="row.status | statusFilter">
+            {{ row.status == 'normal' ? "正常" : "删除" }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column min-width="300px" label="Title">
+        <template slot-scope="{row}">
+          <router-link :to="'/article/edit/'+row.id" class="link-type">
+            <span>{{ row.title }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Actions" width="190" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <router-link :to="'/article/edit/'+scope.row.id">
+            <el-button type="primary" size="mini" icon="el-icon-edit">
+              修改
+            </el-button>
+          </router-link>
+          <el-button type="danger" size="mini" icon="el-icon-delete" style="margin-left: 10px;" @click="handleDelete(scope)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { fetchList, deleteArticle } from '@/api/article'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import waves from '@/directive/waves'
+
+export default {
+  name: 'ArticleList',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        normal: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.list
+        this.total = response.data.count
+        this.listLoading = false
+      })
+    },
+    handleFilter() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.list
+        this.total = response.data.count
+        this.listLoading = false
+      })
+    },
+    handleDelete({ $index, row }) {
+      console.log(row.id)
+      this.$confirm('您确定要删除吗', '警告', {
+        confirmButtonText: '是的',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async() => {
+          await deleteArticle(row.id)
+          this.list.splice($index, 1)
+          this.$message({
+            type: 'success',
+            message: '删除成功'
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+.filter-container{
+  margin-bottom: 20px;
+}
+.filter-item {
+  margin-right: 10px;
+}
+
+</style>

src/views/user/components/ArticleDetail.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="createPost-container">
+    <el-form ref="postForm" :label-position="labelPosition" :model="postForm" :rules="rules" class="form-container" label-width="60px">
+      <div class="createPost-main-container">
+        <el-row>
+          <el-form-item prop="head_img" style="margin-bottom: 30px;" label="头像">
+            <el-image :src="postForm.head_img" />
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="user_name" style="margin-bottom: 30px;" label="姓名">
+            <el-input v-model="postForm.user_name" placeholder="" style="width: 300px;" />
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="mobile" style="margin-bottom: 30px;" label="手机号">
+            <el-input v-model="postForm.mobile" placeholder="" style="width: 200px;" />
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item prop="open_id" style="margin-bottom: 30px;" label="openid">
+            <el-input v-model="postForm.open_id" placeholder="" style="width: 200px;" :disabled="true" />
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-button v-if="!isEdit" v-loading="loading" type="success" @click="submitForm">
+            提交
+          </el-button>
+          <el-button v-if="isEdit" v-loading="loading" type="success" @click="updateArticle">
+            修改
+          </el-button>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+// import Upload from '@/components/Upload/SingleImage3'
+
+// import Sticky from '@/components/Sticky' // 粘性header组件
+// import { validURL } from '@/utils/validate'
+import { fetchUser, updateUser } from '@/api/user'
+// import Warning from './Warning'
+// import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
+
+const defaultForm = {
+  // status: 'draft',
+  user_name: '', // 文章题目
+  status: true, // 文章内容
+  head_img: '', // 文章摘要
+  mobile: '', // 文章外链
+  open_id: '', // 文章图片
+  display_time: undefined, // 前台展示时间
+  id: undefined,
+  platforms: ['a-platform'],
+  comment_disabled: false,
+  importance: 0
+}
+
+export default {
+  name: 'ArticleDetail',
+  components: { },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      userListOptions: [],
+      rules: {
+      },
+      tempRoute: {},
+      labelPosition: 'left'
+    }
+  },
+  computed: {
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    }
+    // Why need to make a copy of this.$route here?
+    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(id) {
+      fetchUser(id).then(response => {
+        this.postForm = response.data
+        // set tags view title
+        // this.setTagsViewTitle()
+        // set page title
+        // this.setPageTitle()
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    setPageTitle() {
+      const title = 'Edit Article'
+      document.title = `${title} - ${this.postForm.id}`
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    updateArticle() {
+      console.log(this.postForm)
+      updateUser(this.postForm).then(response => {
+        this.$notify({
+          title: '修改',
+          message: '修改成功',
+          type: 'success',
+          duration: 2000
+        })
+        this.postForm.status = 'published'
+        this.loading = false
+        this.listLoading = false
+        this.$router.push(`/user/list`)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+
+.article-textarea ::v-deep {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+</style>

src/views/user/components/Dropdown/Comment.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-dropdown :show-timeout="100" trigger="click">
+    <el-button plain>
+      {{ !comment_disabled?'Comment: opened':'Comment: closed' }}
+      <i class="el-icon-caret-bottom el-icon--right" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown" class="no-padding">
+      <el-dropdown-item>
+        <el-radio-group v-model="comment_disabled" style="padding: 10px;">
+          <el-radio :label="true">
+            Close comment
+          </el-radio>
+          <el-radio :label="false">
+            Open comment
+          </el-radio>
+        </el-radio-group>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    comment_disabled: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

src/views/user/components/Dropdown/Platform.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
+    <el-button plain>
+      Platfroms({{ platforms.length }})
+      <i class="el-icon-caret-bottom el-icon--right" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown" class="no-border">
+      <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
+        <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
+          {{ item.name }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      required: true,
+      default: () => [],
+      type: Array
+    }
+  },
+  data() {
+    return {
+      platformsOptions: [
+        { key: 'a-platform', name: 'a-platform' },
+        { key: 'b-platform', name: 'b-platform' },
+        { key: 'c-platform', name: 'c-platform' }
+      ]
+    }
+  },
+  computed: {
+    platforms: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

src/views/user/components/Dropdown/SourceUrl.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-dropdown :show-timeout="100" trigger="click">
+    <el-button plain>
+      Link
+      <i class="el-icon-caret-bottom el-icon--right" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
+      <el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
+        <el-input v-model="source_uri" placeholder="Please enter the content">
+          <template slot="prepend">
+            URL
+          </template>
+        </el-input>
+      </el-form-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    source_uri: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

src/views/user/components/Dropdown/index.js

@@ -0,0 +1,3 @@
+export { default as CommentDropdown } from './Comment'
+export { default as PlatformDropdown } from './Platform'
+export { default as SourceUrlDropdown } from './SourceUrl'

src/views/user/components/Warning.vue

@@ -0,0 +1,9 @@
+<template>
+  <aside>
+    <!--<a
+      href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
+      target="_blank"
+    >Document</a>-->
+  </aside>
+</template>
+

src/views/user/create.vue

@@ -0,0 +1,13 @@
+<template>
+  <article-detail :is-edit="false" />
+</template>
+
+<script>
+import ArticleDetail from './components/ArticleDetail'
+
+export default {
+  name: 'CreateArticle',
+  components: { ArticleDetail }
+}
+</script>
+

src/views/user/edit.vue

@@ -0,0 +1,13 @@
+<template>
+  <article-detail :is-edit="true" />
+</template>
+
+<script>
+import ArticleDetail from './components/ArticleDetail'
+
+export default {
+  name: 'EditForm',
+  components: { ArticleDetail }
+}
+</script>
+

src/views/user/list.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.mobile" placeholder="手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        搜索
+      </el-button>
+    </div>
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+      <el-table-column align="center" label="ID" width="80">
+        <template slot-scope="scope">
+          <span>{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="180px" align="center" label="用户名">
+        <template slot-scope="scope">
+          <span>{{ scope.row.user_name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="手机号">
+        <template slot-scope="scope">
+          <span>{{ scope.row.mobile }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="openId">
+        <template slot-scope="scope">
+          <span>{{ scope.row.open_id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="状态" width="80px">
+        <template slot-scope="{row}">
+          <el-tag :type="row.status | statusFilter">
+            {{ row.status == '1' ? "正常" : "删除" }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="Actions" width="190" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <router-link :to="'/user/edit/'+scope.row.id">
+            <el-button type="primary" size="mini" icon="el-icon-edit">
+              查看
+            </el-button>
+          </router-link>
+          <el-button type="danger" size="mini" icon="el-icon-delete" style="margin-left: 10px;" @click="handleDelete(scope)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { fetchList, deleteUser } from '@/api/user'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import waves from '@/directive/waves'
+
+export default {
+  name: 'ArticleList',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        draft: 'info',
+        0: 'danger'
+      }
+      return statusMap[status]
+    },
+    positionFilter(status) {
+      const statusMap = {
+        'HOME': 'success',
+        draft: 'info',
+        2: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.list
+        this.total = response.data.count
+        this.listLoading = false
+      })
+    },
+    handleFilter() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.list
+        this.total = response.data.count
+        this.listLoading = false
+      })
+    },
+    handleDelete({ $index, row }) {
+      console.log(row.id)
+      this.$confirm('您确定要隐藏吗', '警告', {
+        confirmButtonText: '是的',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async() => {
+          await deleteUser(row.id)
+          this.list.splice($index, 1)
+          this.$message({
+            type: 'success',
+            message: '隐藏成功'
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+.filter-container{
+  margin-bottom: 20px;
+}
+.filter-item {
+  margin-right: 10px;
+}
+
+</style>