| | |
| | | <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">查询</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> |
| | | <span class="right_num">220</span> |
| | | <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"> |
| | | <div :class="index === 0 ? 'cate_val_row active' : 'cate_val_row'" v-for="(item, index) in cateList" :key="index">{{item}}</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"> |
| | | <span>展开</span> |
| | | <i class="el-icon-arrow-down"></i> |
| | | <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"> |
| | | <div class="list_item" v-for="(item, index) in 6" :key="index" @click="$refs.operaDetailsAWindow.open('服务商详情')"> |
| | | <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="../../assets/images/zhuce_ic_qiye@2x.png" alt="" /> |
| | | <img :src="item.fullLog" alt="" /> |
| | | </div> |
| | | <div class="list_item_title">安徽豆米科技有限公司</div> |
| | | <div class="list_item_info">安徽豆米科技有限公司以软件开发、人工智能应用开发为核心...</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="value" |
| | | v-model="item.starLevel" |
| | | disabled |
| | | :colors="['#FF934D','#FF934D','#FF934D']" |
| | | text-color="#ff9900"> |
| | | </el-rate> |
| | | </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="currentPage" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-size="10" |
| | | :current-page="page" |
| | | :page-sizes="[12, 24, 36, 48]" |
| | | :page-size="12" |
| | | layout="total, prev, pager, next, jumper" |
| | | :total="50"> |
| | | :total="total"> |
| | | </el-pagination> |
| | | <div class="pagination_info">Copyright © 2022 - 2023 智能制造诊断综合服务平台. All Rights Reserved. 版权所有</div> |
| | | </div> |
| | |
| | | |
| | | <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: 5, |
| | | cateList: ['全部','新材料','其他','新型平板显示','生物医药','食品加工','冶金','汽车工业','轻工纺织','装备制造','化工','电子产品及软件','生产性服务业','节能环保','家具制造行业'] |
| | | value: 3, |
| | | page: 1, |
| | | cateId: '', |
| | | total: 0, |
| | | cateList: [], |
| | | list: [], |
| | | open: false |
| | | } |
| | | }, |
| | | created () { |
| | | this.getAll() |
| | | this.getList() |
| | | }, |
| | | methods: { |
| | | handleCurrentChange(e) { |
| | | console.log(e) |
| | | }, |
| | | currentPage(e) { |
| | | console.log(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 |
| | | }) |
| | | } |
| | | } |
| | | } |
| | |
| | | box-sizing: border-box; |
| | | background-image: url("../../assets/images/bg_fuwushang.png"); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | background-size: cover; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .box_head_title { |
| | |
| | | } |
| | | } |
| | | .right { |
| | | width: 173px; |
| | | height: 48px; |
| | | padding: 0 15px; |
| | | padding: 15px; |
| | | box-sizing: border-box; |
| | | background: #FFFFFF; |
| | | border-radius: 2px; |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | justify-content: space-between; |
| | | background: #FFFFFF; |
| | | border-radius: 8px; |
| | | cursor: pointer; |
| | | margin-bottom: 1%; |
| | | .list_item_image { |
| | | width: 70px; |
| | |
| | | } |
| | | .list_item_info { |
| | | width: 100%; |
| | | text-align: center; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | overflow: hidden; |
| | | .active { |
| | | background: #216EEE !important; |
| | | border-radius: 2px !important; |
| | |
| | | font-size: 12px; |
| | | color: #216EEE; |
| | | } |
| | | .el-icon-arrow-up { |
| | | color: #216EEE; |
| | | } |
| | | .el-icon-arrow-down { |
| | | color: #216EEE; |
| | | } |