优化

components/company/dealSeoList.js

@@ -1,60 +1,89 @@
 export default class DealSeoData {
-    constructor({$axios, req, app, redirect, error}) {
-        this.$axios = $axios
-        this.req = req
-        this.app = app
-        this.redirect = redirect
-        this.error = error
-        this.mobile = this.app.$deviceType.isMobile()
+  constructor({ $axios, req, app, redirect, error }) {
+    this.$axios = $axios
+    this.req = req
+    this.app = app
+    this.redirect = redirect
+    this.error = error
+    this.mobile = this.app.$deviceType.isMobile()
+    this.pagination = {
+      page: 1,
+      pagesize: 10,
+      total: 0,
+      pageCount: 1,
+      loading: false,
+      selectedTabVal: 0, // 0 全部 19 技术服务商 18 人力外包
+      noMore: true
     }
+  }
 
-    async dealData() {
-        const self = this
-        let {
-            name,
-            query: { page = 1, root_type = 0 },
-            path,
-            params,
-            fullPath
-        } = this.app.context.route
-        let match = params.pathMatch || ''
-        let matchList = match.split('/')
-        matchList.pop();
-        let lastMatch = matchList.pop() || '';
-
-        // 重定向
-        if (path.indexOf('/company/list') > -1) {
-            this.redirect(301, '/company/' + lastMatch)
-        }
-        return {
-            mobile: this.mobile,
-            head: this.dealThisMeta()
-        }
+  async dealData() {
+    const self = this
+    let {
+      name,
+      query: { page = 1, root_type = 0 },
+      path,
+      params,
+      fullPath
+    } = this.app.context.route
+    let match = params.pathMatch || ''
+    let matchList = match.split('/')
+    matchList.pop();
+    let lastMatch = matchList.pop() || '';
+    this.pagination.page = Number(page)
+    // 重定向
+    if (path.indexOf('/company/list') > -1) {
+      this.redirect(301, '/company/' + lastMatch)
+    }
+    if(['0', '18', '19'].includes(lastMatch)){
+      this.pagination.selectedTabVal = lastMatch
+    }
+    let companyList = await this._companyList()
+    return {
+      mobile: this.mobile,
+      companyList,
+      pagination: this.pagination,
+      head: this.dealThisMeta()
+    }
+  }
+  // 列表数据
+  async _companyList() {
+    let companyList = []
+    let data = {
+      cert_id: this.pagination.selectedTabVal,
+      page: this.pagination.page,
+      pagesize: this.pagination.pagesize
+    }
+    let res = await this.$axios.$post('/uapi/company', data)
+    if (res.status === 1) {
+      companyList = res.data.list || []
+      this.pagination.total = res.data.count
+      return companyList
+    }
+  }
+  dealThisMeta() {
+    let head = {
+      title: "",
+      keyword: "",
+      description: "",
+      h1: "",
+      canonical: "",
+      metaLocation: ""
     }
 
-    dealThisMeta() {
-        let head = {
-            title: "",
-            keyword: "",
-            description: "",
-            h1: "",
-            canonical: "",
-            metaLocation: ""
-        }
-
-        if (this.req) {
-            const { headers: { host }, url } = this.req
+    if (this.req) {
+      const { headers: { host }, url } = this.req
 
-            //拼接canonical
-            if (host.indexOf('local') !== -1) {
-              head.canonical = 'http://' + host + url
-            } else {
-              head.canonical = 'https://' + host + url
-            }
-        }
-        head.title = "程序员兼职,程序员私活,程序员接单平台-程序员客栈";
-        head.keyword = "网站建设,程序员外包,APP开发制作,APP小程序,程序员招聘";
-        head.description = "高级兼职程序员，帮您解决软件开发、UI设计、APP小程序、前端、原型产品经理、测试运维、人工智能、大数据区块链、网站建设制作、程序员招聘等问题";
-        return head
+      //拼接canonical
+      if (host.indexOf('local') !== -1) {
+        head.canonical = 'http://' + host + url
+      } else {
+        head.canonical = 'https://' + host + url
+      }
     }
+    head.title = "程序员兼职,程序员私活,程序员接单平台-程序员客栈";
+    head.keyword = "网站建设,程序员外包,APP开发制作,APP小程序,程序员招聘";
+    head.description = "高级兼职程序员，帮您解决软件开发、UI设计、APP小程序、前端、原型产品经理、测试运维、人工智能、大数据区块链、网站建设制作、程序员招聘等问题";
+    return head
+  }
 }

pages/company/list.vue

@@ -5,14 +5,14 @@
         <div class="consult-wrapper">
             <div class="consult-top">
                 <div class="tabs">
-                    <div class="tabs-item" :class="{active:active==0}" @click="tabItem(0)">全部</div>
-                    <div class="tabs-item" :class="{active:active==19}" @click="tabItem(19)">技术服务商</div>
-                    <div class="tabs-item" :class="{active:active==18}" @click="tabItem(18)">人力外包</div>
+                    <a href="/company/0/" class="tabs-item" :class="pagination.selectedTabVal==0 ? 'active' : ''">全部</a>
+                    <a href="/company/19/" class="tabs-item" :class="pagination.selectedTabVal==19 ? 'active' : ''">技术服务商</a>
+                    <a href="/company/18/" class="tabs-item" :class="pagination.selectedTabVal==18 ? 'active' : ''">人力外包</a>
                 </div>
             </div>
             <div>
               <div class="company-list" v-if="companyList.length">
-                <a :href="`/c/${item.uid}`" v-for="item in companyList" :key="item.uid">
+                <a :href="`/companyDetail/${item.uid}`" v-for="item in companyList" :key="item.uid">
                   <!-- <img class="img" :src="item.logo" :alt="item.name"> -->
                   <img class="img" :src="defaultImg" v-real-img="item.logo" :alt="item.name">
                   <div class="right">
@@ -38,7 +38,8 @@
               <el-pagination
                 background
                 layout="prev, pager, next"
-                :total="page.total"
+                :current-page="pagination.page"
+                :total="pagination.total"
                 @current-change="handlePageChange">
               </el-pagination>
             </div>
@@ -49,40 +50,18 @@
 <script>
 import {mapState} from "vuex"
 import DealSeoList from "@/components/company/dealSeoList"
+import qs from "qs"
 
 export default {
-    // name: 'SeoServeBusinessList',
     name: 'SeoCompanyList',
     data () {
         return {
             baseUrl: '',
             isWeixinApp: true,
-            page: { // 分页
-              total: 0,
-              currentPage: 1,
-              pageSize: 10
-            },
-            active: 0, // 0 全部， 19 技术服务商 18 人力外包
-            companyList: [],
             defaultImg: require('@/assets/img/common/empty@2x.png')
         }
     },
     head() {
-        // return {
-        //   title: '服务商列表',
-        //   meta: [
-        //     {
-        //         hid: 'keywords',
-        //         name: 'keywords',
-        //         content: '服务商列表 关键词'
-        //     },
-        //     {
-        //         hid: 'description',
-        //         name: 'description',
-        //         content: '服务商列表描述信息'
-        //     }
-        //   ]
-        // }
         const {
             title = "",
             keyword = "",
@@ -128,23 +107,16 @@ export default {
     },
     async asyncData ({...params}) {
         let dealDataObj = new DealSeoList(params)
-        let ans = await dealDataObj.dealData()
+        let result = await dealDataObj.dealData()
         return {
-            ...ans
+            ...result
         }
     },
     mounted () {
       this.baseUrl = this.$store.state.domainConfig.siteUrl
       this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
-      this.getCompanyList(0)
     },
     methods: {
-      // tab切换
-      tabItem(num){
-        this.active = num
-        this.getCompanyList(num)
-      },
-      /** 分页获取技能列表数据 */
       getCompanyList (num=0) {
         let data = {
           cert_id: num,
@@ -163,8 +135,10 @@ export default {
       },
       /** 分页页码改变时 */
       handlePageChange (val) {
-        this.page.currentPage = val
-        this.getCompanyList(this.active)
+        let query = {
+            page: val
+        }
+        window.location.href = `${window.location.origin}${window.location.pathname}?${qs.stringify(query)}`
       },
       /** mobile 加载更多 */
       // handleLoadMoreConsult () {

plugins/seoRouter.js

@@ -58,7 +58,7 @@ const extendRoutes = (routes, resolve) => {
       component: resolve(__dirname, '../pages/company/list.vue')
     },{
       name: 'SeoCompanyDetail',
-      path: '/c/:id?',
+      path: '/companyDetail/:id?',
       component: resolve(__dirname, '../pages/company/detail/_id.vue')
     }],