From ad054c369ed1ee164024f47d38b10824d41f9a9c Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期一, 22 九月 2025 17:42:26 +0800
Subject: [PATCH] 优化
---
frontWuhu/src/views/business/serviceProviderResources.vue | 115 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 87 insertions(+), 28 deletions(-)
diff --git a/frontWuhu/src/views/business/serviceProviderResources.vue b/frontWuhu/src/views/business/serviceProviderResources.vue
index 53d9c11..d371552 100644
--- a/frontWuhu/src/views/business/serviceProviderResources.vue
+++ b/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;
}
--
Gitblit v1.9.3