Skip to content

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

首页产品二级分类

parent cd803054
Hide 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 = {
// 产品-硬件查询列表
productGetHardwareList: function(params) {
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'
})
},
......
src/router/routers.js
View file @ 4f737c16
......@@ -62,7 +62,8 @@ export const constantRouterMap = [
hidden: true
},
{
path: '/product/hardware/:type',
path: '/product/hardware',
name: 'hardware',
meta: { title: '硬件产品', noCache: true },
component: (resolve) => {
return require(['@/views/homepage/product/hardware'], resolve)
......
src/views/backstage/contentMgt/productTabulate/index.vue
View file @ 4f737c16
......@@ -2,9 +2,9 @@
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<!-- <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-select>-->
<!-- <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-select>-->
<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-select>
......@@ -17,7 +17,7 @@
<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-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">
<template slot-scope="scope">
<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 @@
<div class="btn-o" style="padding: 10px" @click="goToDetails(null, '/publish/buyInfo/all')">我要采购</div>
</div>
<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 class="content-box">
<div class="showcase">
......@@ -172,7 +186,7 @@ import { HttpReq } from '@/api/common'
export default {
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() {
return {
color: ['#C1232B', '#27727B', '#FCCE10', '#E87C25', '#B5C334', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'],
......@@ -181,96 +195,8 @@ export default {
imgSrcStart: process.env.VUE_APP_BASE_API,
query: {},
currentProductTypeObj: null,
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: []
}
],
subTypeOpts: [],
showcaseProducts: [],
showcaseSuppliers: [],
topAreas: [],
topSuppliers: [],
......@@ -317,6 +243,7 @@ export default {
methods: {
onDictReady(dict) {
this.currentProductTypeObj = dict.product_type[0]
this.subTypeOpts = this.dict['product_type_' + this.currentProductTypeObj.value]
HttpReq.webClientApi.homePageGetProduct({
preview: false,
productType: this.currentProductTypeObj.value
......@@ -331,13 +258,14 @@ export default {
if (this.currentProductTypeObj === item) {
return
}
this.currentProductTypeObj = item
this.subTypeOpts = this.dict['product_type_' + this.currentProductTypeObj.value]
HttpReq.webClientApi.homePageGetProduct({
preview: false,
productType: this.currentProductTypeObj.value
}).then((res) => {
this.showcaseProducts = res.data.showcaseProducts
})
this.currentProductTypeObj = item
}, this.throttleTime)
},
// 点击询价
......@@ -382,7 +310,13 @@ export default {
this.$router.push({ path: `/course` })
break
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 @@
<!--查询面板-->
<div class="search-box">
<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);">
<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>
......@@ -140,7 +146,7 @@ import floatBtn from '../components/floatBtn'
export default {
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() {
return {
defaultImgProduct: default_product,
......@@ -153,9 +159,11 @@ export default {
keyword: '',
area: '',
type: '',
subType: '',
sort: false
},
areaOpts: [],
subTypeOpts: [],
keywords: ['曲线记录仪', '液位控制器', '双金属温度计', '位移传感器'],
hardwareList: [
{
......@@ -286,13 +294,14 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.query = Object.assign(this.query, this.$route.params)
})
},
methods: {
onDictReady(dict) {
this.areaOpts = [{ value: '', label: '全部' }, ...dict.area_province]
this.title = dict.product_type[this.$route.params.type - 1].label
this.subTypeOpts = [{ value: '', label: '全部' }, ...dict['product_type_' + this.query.type]]
},
keywordClick(item, type) {
this.query.keyword = item
......@@ -579,11 +588,11 @@ export default {
}
}
.area-title {
height: 62px;
background: #F7F7F7;
border: 1px solid rgba(0,0,0,0.12);
text-align: center;
line-height: 60px;
height: 32px;
line-height: 32px;
}
.area_item {
height: 30px;
......
src/views/homepage/product/index.vue
View file @ 4f737c16
......@@ -80,7 +80,7 @@
</el-row>
</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">
<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">
......@@ -120,57 +120,63 @@
<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 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 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">
<el-row :gutter="20">
<el-col :span="12">
<div style="display: flex">
<el-image :src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgProject" style="width:100%;height: 300px;margin: 1px;border-radius: 10px;" />
</div>
</el-col>
<el-col :span="12">
<div class="box-title touch" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
<div class="content ellipsis">{{ item.content }}</div>
<div class="line-btn" style="margin-top: 4px;justify-content: flex-end;">
<div class="btn-o" style="width: 140px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'project')">咨 询</div>
</div>
</el-col>
</el-row>
<div v-show="projectList.length">
<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">
<el-row :gutter="20">
<el-col :span="12">
<div style="display: flex">
<el-image :src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgProject" style="width:100%;height: 300px;margin: 1px;border-radius: 10px;" />
</div>
</el-col>
<el-col :span="12">
<div class="box-title touch" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
<div class="content ellipsis">{{ item.content }}</div>
<div class="line-btn" style="margin-top: 4px;justify-content: flex-end;">
<div class="btn-o" style="width: 140px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'project')">咨 询</div>
</div>
</el-col>
</el-row>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('project')">更多详情>></span></div>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('project')">更多详情>></span></div>
<!--系统软件-->
<div class="line-title"><div class="title-point" /><span class="title-text">系统软件</span></div>
<div style="padding-top: 6px">
<div v-for="(item,index) in softwareList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0">
<el-image
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgSoftware"
style="width:358px;height: 240px;left: -4px;top: -3px"
/>
<div class="float-title touch" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
<div class="line-btn" style="margin-top: 4px">
<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, 'software')">免费获取方案</div>
<div v-show="softwareList.length">
<div class="line-title"><div class="title-point" /><span class="title-text">系统软件</span></div>
<div style="padding-top: 6px">
<div v-for="(item,index) in softwareList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0">
<el-image
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgSoftware"
style="width:358px;height: 240px;left: -4px;top: -3px"
/>
<div class="float-title touch" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
<div class="line-btn" style="margin-top: 4px">
<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, 'software')">免费获取方案</div>
</div>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('software')">更多详情>></span></div>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('software')">更多详情>></span></div>
</div>
<!--专业培训-->
<div class="line-title"><div class="title-point" /><span class="title-text">专业培训</span></div>
<div style="padding-top: 6px">
<div v-for="(item,index) in courseList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0">
<el-image
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgSoftware"
style="width:358px;height: 240px;left: -4px;top: -3px"
/>
<div class="line-text touch" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
<div style="width: 100%;text-align: center;padding: 2px;color: #333">{{ item.subTitle }}</div>
<div class="line-btn" style="margin-top: 14px">
<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, 'course')">课程定制</div>
<div v-show="courseList.length">
<div class="line-title"><div class="title-point" /><span class="title-text">专业培训</span></div>
<div style="padding-top: 6px">
<div v-for="(item,index) in courseList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0">
<el-image
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgSoftware"
style="width:358px;height: 240px;left: -4px;top: -3px"
/>
<div class="line-text touch" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
<div style="width: 100%;text-align: center;padding: 2px;color: #333">{{ item.subTitle }}</div>
<div class="line-btn" style="margin-top: 14px">
<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, 'course')">课程定制</div>
</div>
</div>
<div style="margin-bottom: 20px;padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('course')">更多详情>></span></div>
</div>
<div style="margin-bottom: 20px;padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('course')">更多详情>></span></div>
</div>
</div>
</div>
......@@ -211,91 +217,10 @@ export default {
},
page: 1,
pageSize: 8,
total: 0,
areaOpts: [],
keywords: [],
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: []
}
],
hardwareList: [],
projectList: [
{
title: '解决方案',
......@@ -364,17 +289,16 @@ export default {
methods: {
onDictReady(dict) {
this.areaOpts = [{ value: '', label: '全部' }, ...dict.area_province]
this.search()
},
search() {
Object.keys(this.query).length !== 0 && Object.keys(this.query).forEach(item => {
if (this.query[item] === null || this.query[item] === '') this.query[item] = undefined
})
HttpReq.backstageApi.productGetHardwareList({
HttpReq.webClientApi.productGetHardwareList({
page: this.page - 1,
pageSize: this.pageSize,
...this.query
}).then((res) => {
this.hardwareList = res.data.data
this.hardwareList = res.data.hardwareList.data
this.total = res.data.hardwareList.total
})
},
keywordClick(item, type) {
......@@ -388,6 +312,7 @@ export default {
this.query.type = type
this.query.sort = false
}
this.search()
},
// 点击询价
inquiry(item, type) {
......@@ -412,13 +337,14 @@ export default {
},
// 点击更多
moreTo(type) {
if (type === 'project') {
if (type === 'product') {
this.pageSize += 4
this.search()
} else if (type === 'project') {
this.$router.push({ path: `/project` })
}
if (type === 'software') {
} else if (type === 'software') {
this.$router.push({ path: `/software` })
}
if (type === 'course') {
} else if (type === '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