<template>
|
<div class="box">
|
<div class="box_head">
|
<div class="box_head_title">服务商资源</div>
|
<div class="box_head_info">有需求、找资源、寻合作，平台致力于为供、需双方提供一个流畅、专业的需求对接交互平台</div>
|
<div class="box_head_search">
|
<div class="left">
|
<div class="box_head_search_input">
|
<input type="text" v-model="name" placeholder="输入服务商名称搜索">
|
<img src="../../assets/images/ic_clear@2x.png" v-if="name" @click="clearText" />
|
</div>
|
<div class="box_head_search_btn" @click="search">查询</div>
|
</div>
|
<div class="right">
|
<img src="../../assets/images/ic_fuwushang@2x.png" alt="" />
|
<span class="right_name">服务商总数：<span class="right_num">{{total}}</span></span>
|
</div>
|
</div>
|
</div>
|
<div class="box_cate">
|
<div class="cate">
|
<div class="cate_label">行业分类：</div>
|
<div class="cate_val" :style="{ height: open ? 'auto' : '30px' }">
|
<div :class="cateId === item.id ? 'cate_val_row active' : 'cate_val_row'" v-for="(item, index) in cateList" :key="index" @click="select(item.id)">{{item.name}}</div>
|
</div>
|
<div class="cate_dwon" @click="open = !open">
|
<template v-if="open">
|
<span>收起</span>
|
<i class="el-icon-arrow-up"></i>
|
</template>
|
<template v-else>
|
<span>展开</span>
|
<i class="el-icon-arrow-down"></i>
|
</template>
|
</div>
|
</div>
|
<div class="list" v-if="list.length > 0">
|
<div class="list_item" v-for="(item, index) in list" :key="index" @click="$refs.operaDetailsAWindow.open('服务商详情', item.id)">
|
<div class="list_item_image">
|
<img :src="item.fullLog" alt="" />
|
</div>
|
<div class="list_item_title">{{item.name}}</div>
|
<div class="list_item_info">{{item.introduction}}</div>
|
<div class="list_item_divide">
|
<el-rate
|
v-model="item.starLevel"
|
disabled
|
:colors="['#FF934D','#FF934D','#FF934D']"
|
text-color="#ff9900">
|
</el-rate>
|
</div>
|
</div>
|
<div class="list_zw"></div>
|
<div class="list_zw"></div>
|
</div>
|
<div class="list" v-else>
|
<div class="list_wu">无数据</div>
|
</div>
|
<div class="pagination">
|
<el-pagination
|
v-if="list.length > 0"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[12, 24, 36, 48]"
|
:page-size="12"
|
layout="total, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
<div class="pagination_info">Copyright © 2022 - 2023 智能制造诊断综合服务平台. All Rights Reserved. 版权所有</div>
|
</div>
|
</div>
|
<!-- 详情 -->
|
<OperaDetailsAWindow ref="operaDetailsAWindow" @success="" />
|
</div>
|
</template>
|
|
<script>
|
import OperaDetailsAWindow from '@/components/business/OperaDetailsAWindow'
|
import { list } from '@/api/business/labels'
|
import { fetchList } from '@/api/business/serverProvider'
|
export default {
|
name: 'serviceProviderResources',
|
components: { OperaDetailsAWindow },
|
data() {
|
return {
|
name: '',
|
value: 3,
|
page: 1,
|
cateId: '',
|
total: 0,
|
cateList: [],
|
list: [],
|
open: false
|
}
|
},
|
created () {
|
this.getAll()
|
this.getList()
|
},
|
methods: {
|
handleCurrentChange(e) {
|
this.page = e
|
this.getList()
|
},
|
clearText() {
|
this.name = ''
|
},
|
async getAll() {
|
this.cateList = await list({ type: 1, isdeleted: 0 })
|
this.cateList.unshift({ name: '全部', id: '' })
|
},
|
select(id) {
|
this.cateId = id
|
this.page = 1
|
this.getList()
|
},
|
search() {
|
this.page = 1
|
this.getList()
|
},
|
getList() {
|
fetchList({
|
capacity: 12,
|
page: this.page,
|
model: {
|
industryId: this.cateId,
|
name: this.name
|
}
|
}).then(res => {
|
this.list = res.records
|
this.total = res.total
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.box_head {
|
width: 100%;
|
height: 264px;
|
padding: 36px 50px;
|
box-sizing: border-box;
|
background-image: url("../../assets/images/bg_fuwushang.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
display: flex;
|
flex-direction: column;
|
.box_head_title {
|
font-weight: 600;
|
font-size: 40px;
|
color: #216EEE;
|
}
|
.box_head_info {
|
font-weight: 400;
|
font-size: 16px;
|
color: #333333;
|
margin-top: 14px;
|
}
|
.box_head_search {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 36px;
|
.left {
|
display: flex;
|
align-items: center;
|
.box_head_search_input {
|
width: 360px;
|
height: 48px;
|
padding: 0 15px;
|
box-sizing: border-box;
|
background: rgba(255,255,255,0.72);
|
border-radius: 2px;
|
margin-right: 10px;
|
display: flex;
|
align-items: center;
|
img {
|
width: 20px;
|
height: 20px;
|
flex-shrink: 0;
|
cursor: pointer;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
margin-right: 15px;
|
font-weight: 400;
|
font-size: 14px;
|
color: #222222;
|
border: none;
|
outline: none;
|
background: rgba(0,0,0,0);
|
&::-webkit-input-placeholder {
|
color: #999999;
|
font-size: 14px;
|
font-weight: 400;
|
}
|
}
|
}
|
.box_head_search_btn {
|
width: 68px;
|
height: 48px;
|
line-height: 48px;
|
text-align: center;
|
background: #216EEE;
|
border-radius: 2px;
|
font-weight: 600;
|
font-size: 15px;
|
color: #FFFFFF;
|
cursor: pointer;
|
}
|
}
|
.right {
|
padding: 15px;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 2px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
img {
|
flex-shrink: 0;
|
width: 16px;
|
height: 16px;
|
margin-right: 6px;
|
}
|
.right_name {
|
flex: 1;
|
font-weight: 400;
|
font-size: 15px;
|
color: #333333;
|
}
|
.right_num {
|
font-weight: 600;
|
font-size: 17px;
|
color: #216EEE;
|
}
|
}
|
}
|
}
|
.box_cate {
|
width: 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
position: relative;
|
top: -30px;
|
left: 0;
|
z-index: 9;
|
.list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.list_wu {
|
width: 100%;
|
text-align: center;
|
margin: 50px 0;
|
font-size: 14px;
|
color: #666666;
|
}
|
.list_zw {
|
width: 24%;
|
height: 0;
|
}
|
.list_item {
|
width: 24%;
|
height: 208px;
|
padding: 20px 30px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
background: #FFFFFF;
|
border-radius: 8px;
|
cursor: pointer;
|
margin-bottom: 1%;
|
.list_item_image {
|
width: 70px;
|
height: 70px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
img {
|
width: 100%;
|
}
|
}
|
.list_item_title {
|
font-weight: 600;
|
font-size: 18px;
|
color: #222222;
|
}
|
.list_item_info {
|
width: 100%;
|
text-align: center;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-weight: 400;
|
font-size: 12px;
|
color: #999999;
|
}
|
}
|
}
|
.cate {
|
width: 100%;
|
padding: 20px 30px;
|
margin-bottom: 20px;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 8px;
|
display: flex;
|
justify-content: space-between;
|
.cate_label {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 14px;
|
color: #666666;
|
}
|
.cate_val {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
overflow: hidden;
|
.active {
|
background: #216EEE !important;
|
border-radius: 2px !important;
|
color: #FFFFFF !important;
|
}
|
.cate_val_row {
|
padding: 4px 12px;
|
box-sizing: border-box;
|
font-weight: 400;
|
font-size: 14px;
|
color: #666666;
|
margin-right: 18px;
|
cursor: pointer;
|
}
|
}
|
.cate_dwon {
|
display: flex;
|
flex-shrink: 0;
|
cursor: pointer;
|
span {
|
font-weight: 400;
|
font-size: 12px;
|
color: #216EEE;
|
}
|
.el-icon-arrow-up {
|
color: #216EEE;
|
}
|
.el-icon-arrow-down {
|
color: #216EEE;
|
}
|
}
|
}
|
.pagination {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: center;
|
margin-top: 20px;
|
.pagination_info {
|
width: 100%;
|
text-align: center;
|
font-weight: 400;
|
font-size: 12px;
|
color: #828D9E;
|
margin-top: 30px;
|
}
|
}
|
}
|
}
|
</style>
|
