feat()：关于我们 服务协议

src/api/setting.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function fetchSetting(type) {
+  return request({
+    url: '/setting/read?type=' + type,
+    method: 'get',
+    params: { type }
+  })
+}
+export function updateSetting(data, type) {
+  return request({
+    url: '/setting/update?type=' + type,
+    method: 'post',
+    data
+  })
+}

src/router/index.js

@@ -128,6 +128,29 @@ export const constantRoutes = [
     ]
   },
   {
+    path: '/setting',
+    component: Layout,
+    name: 'setting',
+    meta: {
+      title: '小程序设置',
+      icon: 'el-icon-s-help'
+    },
+    children: [
+      {
+        path: 'edit',
+        component: () => import('@/views/setting/edit'),
+        name: 'CreateBanner',
+        meta: { title: '关于我们', icon: 'el-icon-edit' }
+      },
+      {
+        path: 'editServer',
+        component: () => import('@/views/setting/editServer'),
+        name: 'EditBanner',
+        meta: { title: '服务协议', icon: 'el-icon-edit' }
+      }
+    ]
+  },
+  {
     path: '/banner',
     component: Layout,
     redirect: '/banner/list',

src/views/advice/list.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-<!--      <el-input v-model="listQuery.question" 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">-->
-<!--        Search-->
-<!--      </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">

src/views/join/list.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { fetchList, deleteBanner } from '@/api/join'
+import { fetchList, deleteJoin } from '@/api/join'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 import waves from '@/directive/waves'
 
@@ -134,7 +134,7 @@ export default {
         type: 'warning'
       })
         .then(async() => {
-          await deleteBanner(row.id)
+          await deleteJoin(row.id)
           this.list.splice($index, 1)
           this.$message({
             type: 'success',

src/views/setting/components/ArticleDetail.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="createPost-container">
+    <el-form ref="postForm" :label-position="labelPosition" :model="postForm" :rules="rules" class="form-container">
+      <div class="createPost-main-container">
+        <el-form-item prop="content" style="" label="关于我们">
+          <Tinymce ref="editor" v-model="postForm.content" :height="400" />
+        </el-form-item>
+        <el-row>
+          <el-button v-loading="loading" type="success" @click="updateArticle">
+            修改
+          </el-button>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+// import Sticky from '@/components/Sticky' // 粘性header组件
+// import { validURL } from '@/utils/validate'
+import { fetchSetting, updateSetting } from '@/api/setting'
+// import { searchUser } from '@/api/remote-search'
+// 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 },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      userListOptions: [],
+      rules: {
+      },
+      tempRoute: {},
+      labelPosition: 'top'
+    }
+  },
+  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) {
+      this.fetchData()
+    }
+    // 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() {
+      const type = 'about'
+      fetchSetting(type).then(response => {
+        this.postForm = response.data.info
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    updateArticle() {
+      this.postForm.type = 'about'
+      updateSetting(this.postForm, 'about').then(response => {
+        this.$notify({
+          title: '修改',
+          message: '修改成功',
+          type: 'success',
+          duration: 2000
+        })
+        this.postForm.status = 'published'
+        this.loading = false
+        this.listLoading = false
+      })
+    },
+    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'
+    }
+  }
+}
+</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/setting/components/ArticleDetailServer.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="createPost-container">
+    <el-form ref="postForm" :label-position="labelPosition" :model="postForm" :rules="rules" class="form-container">
+      <div class="createPost-main-container">
+        <el-form-item prop="content" style="" label="服务协议">
+          <Tinymce ref="editor" v-model="postForm.content" :height="400" />
+        </el-form-item>
+        <el-row>
+          <el-button v-loading="loading" type="success" @click="updateArticle">
+            修改
+          </el-button>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+// import Sticky from '@/components/Sticky' // 粘性header组件
+// import { validURL } from '@/utils/validate'
+import { fetchSetting, updateSetting } from '@/api/setting'
+import { searchUser } from '@/api/remote-search'
+// 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 },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      userListOptions: [],
+      rules: {
+      },
+      tempRoute: {},
+      labelPosition: 'top'
+    }
+  },
+  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) {
+      const type = 'server'
+      fetchSetting(type).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}`
+    },
+    updateArticle() {
+      this.postForm.type = 'server'
+      updateSetting(this.postForm, 'server').then(response => {
+        this.$notify({
+          title: '修改',
+          message: '修改成功',
+          type: 'success',
+          duration: 2000
+        })
+        this.postForm.status = 'published'
+        this.loading = false
+        this.listLoading = false
+      })
+    },
+    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/setting/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/setting/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/setting/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/setting/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/setting/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/setting/editServer.vue

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