rk
2025-09-22 f34f5322ffa898b42ce4467af9916c9e73deb4f9
frontWuhu/src/views/business/serviceProviderResources.vue
@@ -9,37 +9,43 @@
                        <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>
@@ -47,14 +53,18 @@
                <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>
@@ -66,25 +76,60 @@
<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
        })
      }
    }
  }
@@ -100,7 +145,7 @@
            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 {
@@ -170,9 +215,7 @@
                    }
                }
                .right {
                    width: 173px;
                    height: 48px;
                    padding: 0 15px;
                    padding: 15px;
                    box-sizing: border-box;
                    background: #FFFFFF;
                    border-radius: 2px;
@@ -180,10 +223,13 @@
                    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;
@@ -210,6 +256,13 @@
                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;
@@ -225,6 +278,7 @@
                    justify-content: space-between;
                    background: #FFFFFF;
                    border-radius: 8px;
                    cursor: pointer;
                    margin-bottom: 1%;
                    .list_item_image {
                        width: 70px;
@@ -244,6 +298,7 @@
                    }
                    .list_item_info {
                        width: 100%;
                        text-align: center;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
@@ -273,6 +328,7 @@
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    overflow: hidden;
                    .active {
                        background: #216EEE !important;
                        border-radius: 2px !important;
@@ -297,6 +353,9 @@
                        font-size: 12px;
                        color: #216EEE;
                    }
                    .el-icon-arrow-up {
                        color: #216EEE;
                    }
                    .el-icon-arrow-down {
                        color: #216EEE;
                    }