feat()：init

src/api/setting.js

@@ -1,11 +1,21 @@
 import request from '@/utils/request'
 
-export function fetchSetting() {
+export function fetchList(query) {
+  return request({
+    url: '/setting/index',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchSetting(id) {
   return request({
     url: '/setting/read',
-    method: 'get'
+    method: 'get',
+    params: { id: id }
   })
 }
+
 export function updateSetting(data) {
   return request({
     url: '/setting/update',
@@ -13,3 +23,19 @@ export function updateSetting(data) {
     data
   })
 }
+
+export function getAuthCode(id) {
+  return request({
+    url: '/setting/authCode',
+    method: 'get',
+    params: { channelId: id }
+  })
+}
+
+export function createChannel(data) {
+  return request({
+    url: '/setting/save',
+    method: 'post',
+    data
+  })
+}

src/router/index.js

@@ -65,10 +65,23 @@ export const constantRoutes = [
     },
     children: [
       {
-        path: 'edit',
+        path: 'edit/:id(\\d+)',
         component: () => import('@/views/setting/edit'),
-        name: 'CreateBanner',
-        meta: { title: '参数设置', icon: 'el-icon-edit' }
+        name: 'EditSetting',
+        meta: { title: '参数设置', icon: 'el-icon-edit' },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/setting/list'),
+        name: 'settingList',
+        meta: { title: '频道列表', icon: 'el-icon-edit' }
+      },
+      {
+        path: 'create',
+        component: () => import('@/views/setting/create'),
+        name: 'CreateSetting',
+        meta: { title: '创建频道', icon: 'el-icon-edit' }
       }
     ]
   },

src/views/dashboard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">时髦之茶，源自沪上</div>
+    <div class="dashboard-text"></div>
   </div>
 </template>
 

src/views/setting/components/ArticleDetail.vue

@@ -11,15 +11,24 @@
         <el-form-item prop="domain" style="" label="域名">
           <el-input v-model="postForm.domain" placeholder="" style="width: 300px;" />
         </el-form-item>
+        <el-form-item prop="channel_name" style="" label="频道名称">
+          <el-input v-model="postForm.channel_name" placeholder="" style="width: 300px;" />
+        </el-form-item>
         <el-form-item prop="channel_id" style="" label="频道id">
           <el-input v-model="postForm.channel_id" placeholder="" style="width: 300px;" />
         </el-form-item>
         <el-form-item prop="channel_auth_code" style="" label="频道授权码">
           <el-input v-model="postForm.channel_auth_code" placeholder="" style="width: 300px;" />
+          <el-button v-if="!isEdit" type="success" @click="getAuthCode" style="margin-left: 10px;">
+            获取授权码
+          </el-button>
         </el-form-item>
-        <el-form-item prop="redirct_url" style="" label="跳转链接">
+        <el-form-item prop="redirct_url" style="" label="会畅授权跳转链接">
           <el-input v-model="postForm.redirct_url" placeholder="" style="width: 600px;" />
         </el-form-item>
+        <el-form-item prop="auth_redirct_url" style="" label="乙方跳转链接">
+          <el-input v-model="postForm.auth_redirct_url" placeholder="" style="width: 600px;" />
+        </el-form-item>
         <el-row>
           <el-button v-if="!isEdit" v-loading="loading" type="success" @click="submitForm">
             提交
@@ -34,27 +43,19 @@
 </template>
 
 <script>
-import { fetchSetting, updateSetting } from '@/api/setting'
-import Upload from '@/components/Upload/SingleImage3'
+import { fetchSetting, updateSetting, getAuthCode, createChannel } from '@/api/setting'
+// import Upload from '@/components/Upload/SingleImage3'
 // import { searchUser } from '@/api/remote-search'
 // import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
 
 const defaultForm = {
-  zs_hot_line: '',
-  kf_hot_line: '',
-  sw_concat: '',
-  zp_mail: '',
-  address: '',
-  qq_concat: '',
-  id: '',
-  kf_wechat: '',
-  sina_img: '',
-  wx_img: ''
+  channel_id: '',
+  channel_auth_code: ''
 }
 
 export default {
   name: 'ArticleDetail',
-  components: { Upload },
+  components: { },
   props: {
     isEdit: {
       type: Boolean,
@@ -91,7 +92,8 @@ export default {
   },
   created() {
     if (this.isEdit) {
-      this.fetchData()
+      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
@@ -99,8 +101,8 @@ export default {
     this.tempRoute = Object.assign({}, this.$route)
   },
   methods: {
-    fetchData() {
-      fetchSetting().then(response => {
+    fetchData(id) {
+      fetchSetting(id).then(response => {
         this.postForm = response.data.info
       }).catch(err => {
         console.log(err)
@@ -114,26 +116,49 @@ export default {
           type: 'success',
           duration: 2000
         })
-        this.postForm.status = 'published'
         this.loading = false
         this.listLoading = false
+        this.$router.push(`/setting/list`)
       })
     },
-    draftForm() {
-      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
+    getAuthCode() {
+      if (!this.postForm.channel_id || this.postForm.channel_id.length === 0) {
         this.$message({
-          message: '请填写必要内容',
+          message: '获取授权码前，必须填写频道id',
           type: 'warning'
         })
         return
       }
-      this.$message({
-        message: '保存成功',
-        type: 'success',
-        showClose: true,
-        duration: 1000
+      getAuthCode(this.postForm.channel_id).then(res => {
+        this.postForm.channel_auth_code = res.data.authCode
+        this.$message({
+          message: '获取授权码成功！',
+          type: 'success'
+        })
+      })
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          console.log(this.postForm)
+          createChannel(this.postForm).then(response => {
+            this.$notify({
+              title: '成功',
+              message: '创建成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.loading = false
+            this.listLoading = false
+            this.$router.push(`/setting/list`)
+          })
+          this.loading = false
+        } else {
+          console.log('error submit!!')
+          return false
+        }
       })
-      this.postForm.status = 'draft'
     }
   }
 }

src/views/setting/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/setting/list.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.channel_name" 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>
+      <router-link :to="{ path: '/setting/create' }">
+        <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit">
+          新建
+        </el-button>
+      </router-link>
+    </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.create_time }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="siteId">
+        <template slot-scope="scope">
+          <span>{{ scope.row.site_id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="uniqueKey">
+        <template slot-scope="scope">
+          <span>{{ scope.row.unique_key }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="频道id">
+        <template slot-scope="scope">
+          <span>{{ scope.row.channel_id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column min-width="300px" label="频道名字">
+        <template slot-scope="scope">
+          <span>{{ scope.row.channel_name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column min-width="200px" label="频道授权码">
+        <template slot-scope="scope">
+          <span>{{ scope.row.channel_auth_code }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="Actions" width="230" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <router-link :to="'/setting/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-s-check" style="margin-left: 10px;" :disabled="scope.row.status == '1' ? false : true" @click="handleDelete(scope)">
+            {{ scope.row.status == '1' ? "隐藏 " : "已隐藏" }}
+          </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 } from '@/api/setting'
+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: {
+  },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 10
+      },
+      temp: {
+        id: undefined,
+        mark: ''
+      },
+      dialogFormVisible: false
+    }
+  },
+  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 }) {
+      // this.temp = Object.assign({}, row) // copy obj
+      // this.dialogFormVisible = true
+      const type = row.status === 1 ? '隐藏' : '开启'
+      this.$confirm('您确定要隐藏吗', '警告', {
+        confirmButtonText: '是的',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async() => {
+          await deleteHome(row.id)
+          const rs = await fetchHome(row.id)
+          this.list.splice($index, 1, rs.data.info)
+          this.$message({
+            type: 'success',
+            message: type + '成功'
+          })
+        })
+    },
+    async updateData() {
+      const tempData = Object.assign({}, this.temp)
+      const index = this.list.findIndex(v => v.id === this.temp.id)
+      await updateHome(tempData)
+      const rs = await fetchHome(tempData.id)
+      this.list.splice(index, 1, rs.data.info)
+      this.dialogFormVisible = false
+      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>