|
|
@@ -0,0 +1,258 @@
|
|
|
+<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="{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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <ul class="company-list" v-if="companyList.length">
|
|
|
+ <!-- <li>
|
|
|
+ <img class="img" src="" alt="">
|
|
|
+ <div class="right">
|
|
|
+ <h3 class="title">互联网CRM+企业管理系统2.0</h3>
|
|
|
+ <div class="industry">
|
|
|
+ <span>电子商务</span>
|
|
|
+ <span>外贸商务</span>
|
|
|
+ </div>
|
|
|
+ <div class="intro">
|
|
|
+ <span>入驻平台: <em>3年</em></span>
|
|
|
+ <span>企业规模: <em>30-50人</em></span>
|
|
|
+ <span>办公地址: <em>杭州</em></span>
|
|
|
+ </div>
|
|
|
+ <p class="info">融资融券交易(securities margin trading)又称“证券信用交易”或保证金交易，是指投资者向具有融资融券业务资格的证券公司提供担保物融资融券交易(securities margin trading)又称“证券信用</p>
|
|
|
+ </div>
|
|
|
+ </li> -->
|
|
|
+ <li v-for="item in companyList.slice((page.currentPage-1) * page.pageSize, page.currentPage * page.pageSize)" :key="item.uid">
|
|
|
+ <img class="img" :src="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">{{ 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>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <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"
|
|
|
+ :total="page.total"
|
|
|
+ @current-change="handlePageChange">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {mapState} from "vuex"
|
|
|
+import qs from "qs"
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'company',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ baseUrl: '',
|
|
|
+ isWeixinApp: true,
|
|
|
+ page: { // 分页
|
|
|
+ total: 0,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ active: 0, // 0 全部， 19 技术服务商 18 人力外包
|
|
|
+ companyList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ page: this.page.currentPage,
|
|
|
+ pagesize: this.page.pageSize
|
|
|
+ }
|
|
|
+ this.$axios.$post('/uapi/company', data).then(res => {
|
|
|
+ const { data, info, status} = res
|
|
|
+ if(status===1){
|
|
|
+ this.companyList = data.list
|
|
|
+ this.page.total = data.count
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // this.pagination.loading = true
|
|
|
+ // this.pagination.noMore = false
|
|
|
+ },
|
|
|
+ /** 分页页码改变时 */
|
|
|
+ handlePageChange (val) {
|
|
|
+ this.page.currentPage = val
|
|
|
+ this.getCompanyList(this.active)
|
|
|
+ },
|
|
|
+ /** 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 {
|
|
|
+ li {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+}
|
|
|
+.wx-header-custom-list {
|
|
|
+ position: fixed !important;
|
|
|
+ z-index: 11 !important;
|
|
|
+}
|
|
|
+</style>
|
apeng