Skip to content

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

优质产品头部查询

parent 4c750b82
Show whitespace changes
Inline Side-by-side
Showing with 196 additions and 9 deletions
src/views/homepage/components/breadcrumb.vue
View file @ e1563054
......@@ -27,7 +27,7 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.showcase {
padding: 1px 15px 1px;
padding: 1px 0;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
......
src/views/homepage/product/index.vue
View file @ e1563054
......@@ -10,7 +10,75 @@
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<breadcrumb />
<div class="search-box">
<div class="search-tools">
<el-row :gutter="18">
<el-col :span="18">
<el-input v-model="query.keyword" placeholder="请输入关键字" />
</el-col>
<el-col :span="3">
<el-select v-model="query.productType" placeholder="全部产品">
<el-option v-for="item in [{value:undefined,label:'全部产品'}, ...dict.product_type]" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-col>
<el-col :span="3">
<el-button icon="el-icon-search" class="btn">搜索</el-button>
</el-col>
</el-row>
</div>
<div class="search-keyword">
<span v-for="(item, index) in keywords" :key="index" class="label" @click="keywordClick(item, 'keyword')">{{ item }}</span>
</div>
<el-row style="padding-top: 16px">
<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 areaOpts" :key="'a_'+index" class="area_item touch" :class="query.area===item.value?'active':''" @click="query.area=item">{{ item.label }}</div>
</el-col>
</el-row>
<el-row style="padding-top: 10px">
<el-col :span="2">
<div class="search-item" :class="query.type===undefined?'active':''">
<span class="touch label" @click="setQuertType()">默认排序</span>
<span v-if="query.type===undefined">
<i v-if="query.sort" class="el-icon-sort-up touch" />
<i v-else class="el-icon-sort-down touch" />
</span>
</div>
</el-col>
<el-col :span="2">
<div class="search-item" :class="query.type==='hot'?'active':''">
<span class="touch label" @click="setQuertType('hot')">人气排序</span>
<span v-if="query.type==='hot'">
<i v-if="query.sort" class="el-icon-sort-up touch" />
<i v-else class="el-icon-sort-down touch" />
</span>
</div>
</el-col>
<el-col :span="2">
<div class="search-item" :class="query.type==='time'?'active':''">
<span class="touch label" @click="setQuertType('time')">上架时间</span>
<span v-if="query.type==='time'">
<i v-if="query.sort" class="el-icon-sort-up touch" />
<i v-else class="el-icon-sort-down touch" />
</span>
</div>
</el-col>
<el-col :span="18">
<div class="search-item">
<span>产品价格区间</span>
<div style="position: absolute;top: 15px;left: 35%;">
<el-input v-model="query.minPrice" placeholder="请输入价格（元）" clearable style="width: 140px" />
~
<el-input v-model="query.maxPrice" placeholder="请输入价格（元）" clearable style="width: 140px" />
<div class="btn touch">确 定</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<div style="width:100vw;height: 100vh" />
<home-footer ref="homeFooter" />
......@@ -29,7 +97,13 @@ export default {
data() {
return {
imgSrcStart: process.env.VUE_APP_BASE_API,
query: {},
query: {
area: undefined,
type: undefined,
sort: false
},
areaOpts: [],
keywords: ['曲线记录仪', '液位控制器', '双金属温度计', '位移传感器'],
currentProductTypeObj: null,
throttle: null, // 节流器
throttleTime: 300
......@@ -37,11 +111,27 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.areaOpts = [{ value: undefined, label: '全部' }]
for (let i = 0; i < 34; i++) {
this.areaOpts.push({ value: '123', label: '山东' })
}
})
},
methods: {
onDictReady(dict) {},
onDictReady(dict) {
this.areaOpts = [{ value: undefined, label: '全部' }, ...dict.area_province]
},
keywordClick(item, type) {
},
setQuertType(type) {
if (type === this.query.type) {
this.query.sort = !this.query.sort
} else {
this.query.type = type
this.query.sort = false
}
},
// 点击询价
inquiry(item, type) {
console.log(item, type)
......@@ -91,12 +181,109 @@ export default {
}
}
.content-box {
display: flex;
justify-content: center;
margin-top: 94px;
user-select: none;
.showcase {
width: 90%;
}
.search-box {
padding-top: 12px;
width: 100%;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
user-select: none;
.search-item {
width: 100%;
height: 38px;
display: inline-block;
padding: 8px 20px;
background: #F7F7F7;
border: 1px solid rgba(0,0,0,0.12);
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
.label:hover {
font-weight: 600;
}
.btn {
width: 74px;
padding: 3px;
margin-left: 12px;
display: inline-block;
background: #1961C5;
border-radius: 6px;
color: white;
text-align: center;
opacity: 0.7;
}
.btn:hover {
opacity: 1;
}
}
.area-title {
height: 62px;
background: #F7F7F7;
border: 1px solid rgba(0,0,0,0.12);
text-align: center;
line-height: 60px;
}
.area_item {
height: 30px;
padding: 6px 12px;
display: inline-block;
}
.area_item:hover {
font-weight: 600;
}
.active {
color: #1961C5;
}
.search-tools {
width: 100%;
.btn{
width: 76%;
height: 38px;
border: 2px solid #1961C5;
border-radius: 8px;
background: #1961C5;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 21px;
color: #ffffff;
opacity: 0.7;
}
.btn:hover {
opacity: 1;
}
>>>.el-input__inner {
height: 38px;
border: 2px solid #1961C5;
border-radius: 8px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 18px;
color: #333333;
opacity: 0.7;
}
>>>.el-input__inner:hover {
opacity: 1;
}
}
.search-keyword {
padding: 5px 0;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
text-align: left;
.label {
padding: 1px 15px 1px;
color: #333333;
cursor:pointer;
user-select: none;
}
.label:hover {
color: #1961C5;
}
}
}
</style>
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