This commit is contained in:
木瓜一块八 2025-08-01 16:17:33 +08:00
parent 3eedb6f8b4
commit c3e268c640
2 changed files with 95 additions and 67 deletions

View File

@ -267,7 +267,7 @@ export default {
}, },
methods: { methods: {
init_company_category() { init_company_category() {
reqCompanyCategorySearch({ userid: '9KVhsVCJsW_29q3hRhMAr' }).then(res => { reqCompanyCategorySearch({url_link:window.location.href}).then(res => {
if (res.status) { if (res.status) {
this.company_category_list = [] this.company_category_list = []
for (let item of res.data) { for (let item of res.data) {
@ -292,7 +292,7 @@ export default {
}, },
init_product_category() { init_product_category() {
reqGetProductCategorySearch({ userid: '9KVhsVCJsW_29q3hRhMAr' }).then(res => { reqGetProductCategorySearch({ url_link: window.location.href,to_page: 'publish' }).then(res => {
if (res.status) { if (res.status) {
this.typeList = buildCaTree(res.data) this.typeList = buildCaTree(res.data)
console.log("2@@", this.typeList); console.log("2@@", this.typeList);

View File

@ -13,24 +13,24 @@
<span class="rightText"> 广场</span></span> <span class="rightText"> 广场</span></span>
</div> </div>
<div style="width: 1400px;"> <div style="width: 1400px;">
<div class="category-filter"> <div class="category-filter">
<!-- 新增的需求和商品radio按钮组 --> <!-- 新增的需求和商品radio按钮组 -->
<div class="radio-group-container"> <div class="radio-group-container">
<div class="radio-group"> <div class="radio-group">
<label class="radio-item" :class="{ active: selectedType === 'product' }"> <label class="radio-item" style="margin-right: 0px;" :class="{ active: selectedType === 'product' }">
<input type="radio" v-model="selectedType" value="product" @change="handleTypeChange"> <input type="radio" v-model="selectedType" value="product" @change="handleTypeChange">
<span class="radio-text">企业商品</span> <span class="radio-text">企业商品</span>
</label> </label>
<label class="radio-item" :class="{ active: selectedType === 'demand' }"> <label class="radio-item" :class="{ active: selectedType === 'demand' }">
<input type="radio" v-model="selectedType" value="demand" @change="handleTypeChange"> <input type="radio" v-model="selectedType" value="demand" @change="handleTypeChange">
<span class="radio-text">企业需求</span> <span class="radio-text">企业需求</span>
</label> </label>
</div> </div>
</div> </div>
<!-- 所属类别 --> <!-- 所属类别 -->
<div class="category-section"> <div class="category-section">
<div class="category-title">所属类别</div> <div class="category-title">所属类别</div>
@ -48,9 +48,9 @@
<div class="category-title">公司类别</div> <div class="category-title">公司类别</div>
<div class="category-tags"> <div class="category-tags">
<span v-for="company in companies" :key="company.id" <span v-for="company in companies" :key="company.id"
:class="['category-tag', { active: selectedCompany === company.id }]" :class="['category-tag', { active: selectedCompanies.includes(company.value) }]"
@click="selectCompany(company.id)"> @click="selectCompany(company.value)">
{{ company.name }} {{ company.label }}
</span> </span>
</div> </div>
</div> </div>
@ -66,7 +66,8 @@
</div> </div>
<!-- 返回 --> <!-- 返回 -->
<div class="back-btn" @click="$router.push('/ncmatchHome/index')"> <div class="back-btn" @click="$router.push('/ncmatchHome/index')">
<span><返回</span> <span>
返回 </span>
</div> </div>
</div> </div>
</div> </div>
@ -74,7 +75,7 @@
</template> </template>
<script> <script>
import { reqGetProductCategorySearch, reqGetSupplyAndDemandSquareList } from '@/api/ncmatch' import { reqGetProductCategorySearch, reqGetSupplyAndDemandSquareList, reqCompanyCategorySearch } from '@/api/ncmatch'
export default { export default {
name: 'supplyAndDemandSquare', name: 'supplyAndDemandSquare',
components: { components: {
@ -82,58 +83,65 @@ export default {
}, },
data() { data() {
return { return {
typeList:[], page_size: 8,
current_page: 1,
typeList: [],
selectedType: 'product', // selectedType: 'product', //
selectedCategory: '', // selectedCategory: '', //
selectedCompany: 'company1', // selectedCompanies: [], //
categories: [ categories: [],
{ id: 'category1', name: '云' }, companies: [],
{ id: 'category2', name: '国产算力' },
{ id: 'category3', name: 'NVIDIA' },
{ id: 'category4', name: '网络服务' },
{ id: 'category5', name: '一体机' },
{ id: 'category6', name: '硬件' },
{ id: 'category7', name: 'AI应用' },
{ id: 'category8', name: '其他' }
],
companies: [
{ id: 'company1', name: '龙头企业' },
{ id: 'company2', name: '骨干企业' },
{ id: 'company3', name: '科技型企业' },
{ id: 'company4', name: '专精特新企业' },
{ id: 'company5', name: '高新技术企业' },
{ id: 'company6', name: '科技小巨人领军企业' },
{ id: 'company7', name: '其他' }
],
productList: [] productList: []
} }
}, },
created() { created() {
this.init_product_category() this.initAllData()
}, },
methods: { methods: {
initAllData() {
Promise.all([
this.init_product_category(),
this.init_company_category()
]).then(() => {
this.initData(this.selectedCategory)
})
},
init_company_category() {
reqCompanyCategorySearch({ url_link: window.location.href }).then(res => {
if (res.status) {
this.company_category_list = []
for (let item of res.data) {
this.company_category_list.push({
label: item.company_category,
value: item.company_category
})
}
this.companies = this.company_category_list
}
})
},
selectCategory(categoryId) { selectCategory(categoryId) {
if(categoryId===this.selectedCategory) return; if (categoryId === this.selectedCategory) return;
this.selectedCategory = categoryId this.selectedCategory = categoryId
this.initData(this.selectedCategory) this.initData(this.selectedCategory)
}, },
init_product_category(product_category) { init_product_category(product_category) {
reqGetProductCategorySearch({ userid: '9KVhsVCJsW_29q3hRhMAr' }).then(res => { reqGetProductCategorySearch({ url_link: window.location.href, to_page: 'publish' }).then(res => {
if (res.status) { if (res.status) {
let list = [] let list = []
for(let item of res.data){ for (let item of res.data) {
if(item.parentid === null){ if (item.parentid === null) {
list.push({ list.push({
label:item.product_category, label: item.product_category,
value:item.id value: item.id
}) })
} }
} }
this.selectedCategory = list[0].value // this.selectedCategory = list[0].value
this.typeList = list this.typeList = list
this.initData(this.selectedCategory)
console.log("2@@", this.typeList);
} }
}) })
@ -143,21 +151,38 @@ export default {
console.log('切换到:', this.selectedType) console.log('切换到:', this.selectedType)
// //
}, },
initData(product_category) { initData() {
reqGetSupplyAndDemandSquareList({product_category,to_page:"square",url_link:window.location.href}).then(res => { let ploay = {
product_category: this.selectedCategory,
to_page: "square",
url_link: window.location.href,
page_size: this.page_size,
current_page: this.current_page,
company_type: this.selectedCompanies.length > 0 ? this.selectedCompanies.join(",") : ""
}
reqGetSupplyAndDemandSquareList(ploay).then(res => {
if (res.status) { if (res.status) {
if(res.data.length===0){ if (res.data.length === 0) {
this.productList = [] this.productList = []
}else{ } else {
this.productList = res.data[0].product_list this.productList = res.data[0].product_list
} }
} }
}) })
}, },
selectCompany(companyId) { selectCompany(companyId) {
this.selectedCompany = companyId const index = this.selectedCompanies.indexOf(companyId)
if (index > -1) {
//
this.selectedCompanies.splice(index, 1)
} else {
//
this.selectedCompanies.push(companyId)
}
console.log("this.selectedCompanies", this.selectedCompanies);
this.initData()
}, },
getProductList() { getProductList() {
this.productList = [ this.productList = [
@ -219,7 +244,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.back-btn{ .back-btn {
width: 100%; width: 100%;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
@ -229,14 +254,16 @@ export default {
margin-top: 20px; margin-top: 20px;
font-size: 16px; font-size: 16px;
color: #666; color: #666;
&:hover{
&:hover {
cursor: pointer; cursor: pointer;
color: #275AFF; color: #275AFF;
} }
} }
/* 新增的radio按钮组样式 */ /* 新增的radio按钮组样式 */
.radio-group-container { .radio-group-container {
width: 100%!important; width: 100% !important;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
// margin: 20px 0; // margin: 20px 0;
@ -299,7 +326,7 @@ export default {
} }
.title { .title {
color: #666!important; color: #666 !important;
font-size: 36px; font-size: 36px;
margin: 25px; margin: 25px;
@ -423,7 +450,8 @@ export default {
} }
} }
} }
.no-data{
.no-data {
min-height: 500px; min-height: 500px;
display: flex; display: flex;
justify-content: center; justify-content: center;