Skip to content

S
sensorConsult
Commit 4f737c16 authored by zhanglw's avatar zhanglw
Browse files
Options

首页产品二级分类

parent cd803054
Show whitespace changes
Inline Side-by-side
Showing with 110 additions and 240 deletions
src/api/common.js
View file @ 4f737c16
...@@ -461,7 +461,7 @@ export const HttpReq = { ...@@ -461,7 +461,7 @@ export const HttpReq = {
// 产品-硬件查询列表 // 产品-硬件查询列表
productGetHardwareList: function(params) { productGetHardwareList: function(params) {
return request({ return request({
url: '/api/bsw/bigScreen/highQualityProducts/productList?' + qs.stringify(params, { indices: false }), url: '/api/bsw/bigScreen/highQualityProducts?' + qs.stringify(params, { indices: false }),
method: 'get' method: 'get'
}) })
}, },
......
src/router/routers.js
View file @ 4f737c16
...@@ -62,7 +62,8 @@ export const constantRouterMap = [ ...@@ -62,7 +62,8 @@ export const constantRouterMap = [
hidden: true hidden: true
}, },
{ {
path: '/product/hardware/:type', path: '/product/hardware',
name: 'hardware',
meta: { title: '硬件产品', noCache: true }, meta: { title: '硬件产品', noCache: true },
component: (resolve) => { component: (resolve) => {
return require(['@/views/homepage/product/hardware'], resolve) return require(['@/views/homepage/product/hardware'], resolve)
......
src/views/backstage/contentMgt/productTabulate/index.vue
View file @ 4f737c16
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<!-- <el-select v-model="query.productType" clearable placeholder="请选择产品类型" style="width: 150px">--> <!-- <el-select v-model="query.productType" clearable placeholder="请选择产品类型" style="width: 150px">-->
<!-- <el-option v-for="item in dict.product_type" :key="item.value" :label="item.label" :value="item.value" />--> <!-- <el-option v-for="item in dict.product_type" :key="item.value" :label="item.label" :value="item.value" />-->
<!-- </el-select>--> <!-- </el-select>-->
<el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px"> <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
<el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in dict.issue_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div class="content"> <div class="content">
<el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh"> <el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh">
<el-table-column type="index" width="55" label="序号" :index="indexMethod" /> <el-table-column type="index" width="55" label="序号" :index="indexMethod" />
<el-table-column prop="productType" label="产品类型名称"/> <el-table-column prop="productType" label="产品类型名称" />
<el-table-column label="状态" width="100"> <el-table-column label="状态" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<div :style="'color:'+textColors[scope.row.status]">{{ dict.label.issue_status[scope.row.status] }}</div> <div :style="'color:'+textColors[scope.row.status]">{{ dict.label.issue_status[scope.row.status] }}</div>
......
src/views/homepage/index.vue
View file @ 4f737c16
...@@ -16,7 +16,21 @@ ...@@ -16,7 +16,21 @@
<div class="btn-o" style="padding: 10px" @click="goToDetails(null, '/publish/buyInfo/all')">我要采购</div> <div class="btn-o" style="padding: 10px" @click="goToDetails(null, '/publish/buyInfo/all')">我要采购</div>
</div> </div>
<div class="line-btn" style="padding-top: 30px"> <div class="line-btn" style="padding-top: 30px">
<div v-for="(item,index) in dict.product_type" :key="index" class="btn-b" :class="currentProductTypeObj===item?'active':''" @mouseenter="changeProductPush(item)">{{ item.label }}</div> <div v-for="(item,index) in dict.product_type" :key="index" @mouseenter="changeProductPush(item)">
<div v-if="index<4">
<el-dropdown placement="bottom">
<div class="btn-b" :class="currentProductTypeObj===item?'active':''">{{ item.label }}</div>
<el-dropdown-menu slot="dropdown" style="width: 170px;text-align: center;">
<router-link v-for="(t,i) in subTypeOpts" :key="'st_'+i" :to="{'name':'hardware',params:{'type':currentProductTypeObj.value,'subType':t.value}}">
<el-dropdown-item style="font-size: 16px;padding: 5px;font-weight: bold;">
{{ t.label }}
</el-dropdown-item>
</router-link>
</el-dropdown-menu>
</el-dropdown>
</div>
<div v-else class="btn-b" :class="currentProductTypeObj===item?'active':''">{{ item.label }}</div>
</div>
</div> </div>
<div class="content-box"> <div class="content-box">
<div class="showcase"> <div class="showcase">
...@@ -172,7 +186,7 @@ import { HttpReq } from '@/api/common' ...@@ -172,7 +186,7 @@ import { HttpReq } from '@/api/common'
export default { export default {
components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter, inquiryView }, components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter, inquiryView },
dicts: ['product_type', 'area_province'], dicts: ['product_type', 'product_type_1', 'product_type_2', 'product_type_3', 'product_type_4', 'product_type_5', 'product_type_6', 'product_type_7', 'area_province'],
data() { data() {
return { return {
color: ['#C1232B', '#27727B', '#FCCE10', '#E87C25', '#B5C334', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'], color: ['#C1232B', '#27727B', '#FCCE10', '#E87C25', '#B5C334', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'],
...@@ -181,96 +195,8 @@ export default { ...@@ -181,96 +195,8 @@ export default {
imgSrcStart: process.env.VUE_APP_BASE_API, imgSrcStart: process.env.VUE_APP_BASE_API,
query: {}, query: {},
currentProductTypeObj: null, currentProductTypeObj: null,
showcaseProducts: [ subTypeOpts: [],
{ showcaseProducts: [],
isGood: true,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: true,
isHot: true,
isStore: true,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: true,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: false,
isStore: true,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: true,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: true,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}
],
showcaseSuppliers: [], showcaseSuppliers: [],
topAreas: [], topAreas: [],
topSuppliers: [], topSuppliers: [],
...@@ -317,6 +243,7 @@ export default { ...@@ -317,6 +243,7 @@ export default {
methods: { methods: {
onDictReady(dict) { onDictReady(dict) {
this.currentProductTypeObj = dict.product_type[0] this.currentProductTypeObj = dict.product_type[0]
this.subTypeOpts = this.dict['product_type_' + this.currentProductTypeObj.value]
HttpReq.webClientApi.homePageGetProduct({ HttpReq.webClientApi.homePageGetProduct({
preview: false, preview: false,
productType: this.currentProductTypeObj.value productType: this.currentProductTypeObj.value
...@@ -331,13 +258,14 @@ export default { ...@@ -331,13 +258,14 @@ export default {
if (this.currentProductTypeObj === item) { if (this.currentProductTypeObj === item) {
return return
} }
this.currentProductTypeObj = item
this.subTypeOpts = this.dict['product_type_' + this.currentProductTypeObj.value]
HttpReq.webClientApi.homePageGetProduct({ HttpReq.webClientApi.homePageGetProduct({
preview: false, preview: false,
productType: this.currentProductTypeObj.value productType: this.currentProductTypeObj.value
}).then((res) => { }).then((res) => {
this.showcaseProducts = res.data.showcaseProducts this.showcaseProducts = res.data.showcaseProducts
}) })
this.currentProductTypeObj = item
}, this.throttleTime) }, this.throttleTime)
}, },
// 点击询价 // 点击询价
...@@ -382,7 +310,13 @@ export default { ...@@ -382,7 +310,13 @@ export default {
this.$router.push({ path: `/course` }) this.$router.push({ path: `/course` })
break break
default: default:
this.$router.push({ path: `/product/hardware/${this.currentProductTypeObj.value}` }) this.$router.push({
name: 'hardware',
params: {
type: this.currentProductTypeObj.value,
subType: ''
}
})
} }
} }
}, },
......
src/views/homepage/product/hardware.vue
View file @ 4f737c16
...@@ -21,7 +21,13 @@ ...@@ -21,7 +21,13 @@
<!--查询面板--> <!--查询面板-->
<div class="search-box"> <div class="search-box">
<el-row style="padding-top: 16px"> <el-row style="padding-top: 16px">
<el-col :span="2"><div class="area-title">地区选择</div></el-col> <el-col :span="2"><div class="area-title">分类</div></el-col>
<el-col :span="22" style="border: 1px solid rgba(0,0,0,0.12);">
<div v-for="(item,index) in subTypeOpts" :key="'st_'+index" class="area_item touch" :class="query.subType===item.value?'active':''" @click="query.subType=item.value">{{ item.label }}</div>
</el-col>
</el-row>
<el-row>
<el-col :span="2"><div class="area-title" style="height: 62px;line-height: 60px;">地区选择</div></el-col>
<el-col :span="22" style="border: 1px solid rgba(0,0,0,0.12);"> <el-col :span="22" style="border: 1px solid rgba(0,0,0,0.12);">
<div v-for="(item,index) in areaOpts" :key="'a_'+index" class="area_item touch" :class="query.area===item.value?'active':''" @click="query.area=item.value">{{ item.label }}</div> <div v-for="(item,index) in areaOpts" :key="'a_'+index" class="area_item touch" :class="query.area===item.value?'active':''" @click="query.area=item.value">{{ item.label }}</div>
</el-col> </el-col>
...@@ -140,7 +146,7 @@ import floatBtn from '../components/floatBtn' ...@@ -140,7 +146,7 @@ import floatBtn from '../components/floatBtn'
export default { export default {
components: { titleMenus, userLogin, languageSetting, homeFooter, inquiryView, floatBtn }, components: { titleMenus, userLogin, languageSetting, homeFooter, inquiryView, floatBtn },
dicts: ['product_type', 'area_province'], dicts: ['product_type', 'product_type_1', 'product_type_2', 'product_type_3', 'product_type_4', 'product_type_5', 'product_type_6', 'product_type_7', 'area_province'],
data() { data() {
return { return {
defaultImgProduct: default_product, defaultImgProduct: default_product,
...@@ -153,9 +159,11 @@ export default { ...@@ -153,9 +159,11 @@ export default {
keyword: '', keyword: '',
area: '', area: '',
type: '', type: '',
subType: '',
sort: false sort: false
}, },
areaOpts: [], areaOpts: [],
subTypeOpts: [],
keywords: ['曲线记录仪', '液位控制器', '双金属温度计', '位移传感器'], keywords: ['曲线记录仪', '液位控制器', '双金属温度计', '位移传感器'],
hardwareList: [ hardwareList: [
{ {
...@@ -286,13 +294,14 @@ export default { ...@@ -286,13 +294,14 @@ export default {
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.query = Object.assign(this.query, this.$route.params)
}) })
}, },
methods: { methods: {
onDictReady(dict) { onDictReady(dict) {
this.areaOpts = [{ value: '', label: '全部' }, ...dict.area_province] this.areaOpts = [{ value: '', label: '全部' }, ...dict.area_province]
this.title = dict.product_type[this.$route.params.type - 1].label this.title = dict.product_type[this.$route.params.type - 1].label
this.subTypeOpts = [{ value: '', label: '全部' }, ...dict['product_type_' + this.query.type]]
}, },
keywordClick(item, type) { keywordClick(item, type) {
this.query.keyword = item this.query.keyword = item
...@@ -579,11 +588,11 @@ export default { ...@@ -579,11 +588,11 @@ export default {
} }
} }
.area-title { .area-title {
height: 62px;
background: #F7F7F7; background: #F7F7F7;
border: 1px solid rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.12);
text-align: center; text-align: center;
line-height: 60px; height: 32px;
line-height: 32px;
} }
.area_item { .area_item {
height: 30px; height: 30px;
......
src/views/homepage/product/index.vue
View file @ 4f737c16
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
</el-row> </el-row>
</div> </div>
<!--硬件产品展柜--> <!--硬件产品展柜-->
<div style="padding-top: 6px"> <div v-show="hardwareList.length" style="padding-top: 6px">
<div v-for="(item,index) in hardwareList" :key="'p_'+index" class="box-card"> <div v-for="(item,index) in hardwareList" :key="'p_'+index" class="box-card">
<img v-if="item.isGood" src="@/assets/home_images/recommend.png" class="stamp" title="推荐" style="top: 10px;right: 8px"> <img v-if="item.isGood" src="@/assets/home_images/recommend.png" class="stamp" title="推荐" style="top: 10px;right: 8px">
<img v-if="item.isHot" src="@/assets/home_images/hot.png" class="stamp" title="热门" style="top: 0;left: 0"> <img v-if="item.isHot" src="@/assets/home_images/hot.png" class="stamp" title="热门" style="top: 0;left: 0">
...@@ -120,9 +120,10 @@ ...@@ -120,9 +120,10 @@
<div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'product')">询 价</div> <div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'product')">询 价</div>
</div> </div>
</div> </div>
<div style="padding: 15px 50px;text-align: center"><span class="more touch" title="点击查看更多..." @click="moreTo('product')">更多展开<i class="el-icon-arrow-down" /></span></div> <div style="padding: 15px 50px;text-align: center"><span v-show="page*pageSize<=total" class="more touch" title="点击查看更多..." @click="moreTo('product')">更多展开<i class="el-icon-arrow-down" /></span></div>
</div> </div>
<!--解决方案展柜--> <!--解决方案展柜-->
<div v-show="projectList.length">
<div class="line-title"><div class="title-point" /><span class="title-text">方案概述</span></div> <div class="line-title"><div class="title-point" /><span class="title-text">方案概述</span></div>
<div v-for="(item,index) in projectList" :key="'pj_'+index" class="box-block"> <div v-for="(item,index) in projectList" :key="'pj_'+index" class="box-block">
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -141,7 +142,9 @@ ...@@ -141,7 +142,9 @@
</el-row> </el-row>
</div> </div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('project')">更多详情>></span></div> <div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('project')">更多详情>></span></div>
</div>
<!--系统软件--> <!--系统软件-->
<div v-show="softwareList.length">
<div class="line-title"><div class="title-point" /><span class="title-text">系统软件</span></div> <div class="line-title"><div class="title-point" /><span class="title-text">系统软件</span></div>
<div style="padding-top: 6px"> <div style="padding-top: 6px">
<div v-for="(item,index) in softwareList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0"> <div v-for="(item,index) in softwareList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0">
...@@ -156,7 +159,9 @@ ...@@ -156,7 +159,9 @@
</div> </div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('software')">更多详情>></span></div> <div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('software')">更多详情>></span></div>
</div> </div>
</div>
<!--专业培训--> <!--专业培训-->
<div v-show="courseList.length">
<div class="line-title"><div class="title-point" /><span class="title-text">专业培训</span></div> <div class="line-title"><div class="title-point" /><span class="title-text">专业培训</span></div>
<div style="padding-top: 6px"> <div style="padding-top: 6px">
<div v-for="(item,index) in courseList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0"> <div v-for="(item,index) in courseList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0">
...@@ -174,6 +179,7 @@ ...@@ -174,6 +179,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<home-footer ref="homeFooter" /> <home-footer ref="homeFooter" />
<inquiry-view ref="inquiryView" /> <inquiry-view ref="inquiryView" />
<el-backtop /> <el-backtop />
...@@ -211,91 +217,10 @@ export default { ...@@ -211,91 +217,10 @@ export default {
}, },
page: 1, page: 1,
pageSize: 8, pageSize: 8,
total: 0,
areaOpts: [], areaOpts: [],
keywords: [], keywords: [],
hardwareList: [ hardwareList: [],
{
isGood: true,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: true,
isHot: true,
isStore: true,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: true,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: false,
isStore: true,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: true,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: true,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}
],
projectList: [ projectList: [
{ {
title: '解决方案', title: '解决方案',
...@@ -364,17 +289,16 @@ export default { ...@@ -364,17 +289,16 @@ export default {
methods: { methods: {
onDictReady(dict) { onDictReady(dict) {
this.areaOpts = [{ value: '', label: '全部' }, ...dict.area_province] this.areaOpts = [{ value: '', label: '全部' }, ...dict.area_province]
this.search()
}, },
search() { search() {
Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => { HttpReq.webClientApi.productGetHardwareList({
if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined
})
HttpReq.backstageApi.productGetHardwareList({
page: this.page - 1, page: this.page - 1,
pageSize: this.pageSize, pageSize: this.pageSize,
...this.query ...this.query
}).then((res) => { }).then((res) => {
this.hardwareList = res.data.data this.hardwareList = res.data.hardwareList.data
this.total = res.data.hardwareList.total
}) })
}, },
keywordClick(item, type) { keywordClick(item, type) {
...@@ -388,6 +312,7 @@ export default { ...@@ -388,6 +312,7 @@ export default {
this.query.type = type this.query.type = type
this.query.sort = false this.query.sort = false
} }
this.search()
}, },
// 点击询价 // 点击询价
inquiry(item, type) { inquiry(item, type) {
...@@ -412,13 +337,14 @@ export default { ...@@ -412,13 +337,14 @@ export default {
}, },
// 点击更多 // 点击更多
moreTo(type) { moreTo(type) {
if (type === 'project') { if (type === 'product') {
this.pageSize += 4
this.search()
} else if (type === 'project') {
this.$router.push({ path: `/project` }) this.$router.push({ path: `/project` })
} } else if (type === 'software') {
if (type === 'software') {
this.$router.push({ path: `/software` }) this.$router.push({ path: `/software` })
} } else if (type === 'course') {
if (type === 'course') {
this.$router.push({ path: `/course` }) this.$router.push({ path: `/course` })
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment