proginn-frontend/pages/seo/test.vue

<template>
    <div
        :class="$deviceType.isMobile() ? 'mobileMain' : ''"
        :style="{marginTop: mainMarginTop, marginBottom: $deviceType.isMobile() ? '0px' : '30px !important'}">
        <div class="consult-wrapper">
            <div class="consult-top">
                <div class="tabs">
                    <div class="tabs-item" :class="num==0 ? 'active' : ''" @click="tabsItem(0)">全部</div>
                    <div class="tabs-item" :class="num==19 ? 'active' : ''" @click="tabsItem(19)">技术服务商</div>
                    <div class="tabs-item" :class="num==18 ? 'active' : ''" @click="tabsItem(18)">人力外包</div>
                </div>
            </div>
            <div>
              <div class="company-list" v-if="companyList.length">
                <a :href="`/company/${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">
                    <h3 class="title">{{ item.name }}</h3>
                    <div class="industry">
                      <span v-for="tag in item.tag" :key="tag.name">{{ tag.name }}</span>
                    </div>
                    <div class="intro">
                      <span>入驻平台: <em>{{ !item.time ? 0 : item.time }}年</em></span>
                      <span>企业规模: <em>{{ !item.group_type ? 0 : item.group_type }}人</em></span>
                      <span>办公地址: <em>{{ !item.address ? '暂无' : item.address }}</em></span>
                    </div>
                    <p class="info">{{ item.brief_introduction }}</p>
                  </div>
                </a>
              </div>
              <div class="result-empty-wrapper" style="margin-top: 10px;" v-else>
                <img src="@/assets/img/common/empty@2x.png" alt="empty">
                <span>暂无内容</span>
              </div>
            </div>
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pagination.page"
                :total="pagination.total"
                @current-change="handlePageChange">
              </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex"
import DealSeoList from "@/components/company/dealSeoList"
import qs from "qs"

export default {
    name: 'SeoCompanyList',
    data () {
        return {
            num: 0,
            baseUrl: '',
            isWeixinApp: true,
            defaultImg: require('@/assets/img/common/empty@2x.png')
        }
    },
    head() {
        const {
            title = "",
            keyword = "",
            description = "",
            h1 = "",
            canonical = "",
            metaLocation
        } = this.head || {}
        let obj = {
            title: title,
            meta: [{
                name: "keywords",
                content: keyword
            }, {
                name: "description",
                content: description
            }, {
                name: "h1",
                content: h1
            }],
            link: [{rel: "canonical", href: canonical}]
        }
        if (metaLocation) {
            obj.meta.push({name: "location", content: metaLocation})
        }
        return obj
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader () {
            return !this.deviceType.app && !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
        },
        mainMarginTop () {
            if (this.mobile && this.showWxHeader) {
                return '64px !important'
            } else if (this.mobile) {
                return '0px !important'
            } else {
                return '10px !important'
            }
        }
    },
    async asyncData ({...params}) {
        let dealDataObj = new DealSeoList(params)
        let result = await dealDataObj.dealData()
        return {
            ...result
        }
    },
    mounted () {
      this.baseUrl = this.$store.state.domainConfig.siteUrl
      this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
    },
    methods: {
      tabsItem(num){
        this.num = num
        this.getCompanyList(num)
      },
      getCompanyList (num=0) {
        this.pagination.loading = true
        let data = {
          cert_id: num,
          page: this.pagination.page,
          pagesize: this.pagination.pagesize
        }
        this.$axios.$post('/uapi/company', data).then(res => {
          const { data, info, status} = res
          if(status===1){
            this.companyList = data.list
            this.pagination.total = data.count
          }
        }).then(()=>{
          this.pagination.loading = false
        })
        // this.pagination.loading = true
        // this.pagination.noMore = false
      },
      /** 分页页码改变时 */
      handlePageChange (val) {
        this.pagination.page = val
        this.getCompanyList(this.num)
      },
      /** mobile 加载更多 */
      // handleLoadMoreConsult () {
      //   if (this.pagination.loading) {
      //       return
      //   }

      //   this.pagination.page++
      //   this.getCompanyList()
      // },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/consult/list.scss";
</style>
<style lang="scss">
.consult-wrapper .consult-top{
  padding-bottom: 0 !important;
  border-radius: 6px !important;
}
.company-list {
  a {
    display: flex;
    font-family: PingFangSC, PingFangSC-Regular;
    padding: 18px;
    margin-top: 10px;
    background: #fff;
    .right {
      flex: 1;
      padding-left: 16px;
    }
    .img {
      width: 164px;
      height: 164px;
      background: #fff;
      border-radius: 8px;
    }
    .title {
      color: #222;
      font-size: 20px;
      padding-top: 4px;
    }
    .industry {
      padding: 12px 0;
      span {
        background: rgba(48,142,255,0.11);
        border-radius: 1px;
        padding: 9px 11px;
        color: #308eff;
        font-size: 12px;
        display: inline-block;
        margin-right: 8px;
      }
    }
    .intro {
      color: #999;
      font-size: 14px;
      span {
        display: inline-block;
        margin-right: 16px;
      }
      em {
        color: #308eff;
      }
    }
    .info {
      padding: 12px 0;
      color: #666;
      font-size: 14px;
      line-height: 22px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
.pagination {
  margin-top: 10px;
  background: #fff;
  width: 100%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-pagination {
    padding: 0;
  }
}
.consult-wrapper .consult-top .tabs .tabs-item {
  cursor: pointer;
}
.wx-header-custom-list {
    position: fixed !important;
    z-index: 11 !important;
}
</style>