You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
208 lines
5.5 KiB
208 lines
5.5 KiB
<template>
|
|
<view>
|
|
<view class="width100 backcorfff">
|
|
<image mode="widthFix" class=" flleft sear mart15" src="../../../static/img/btjy.png"></image>
|
|
<uSearchBar @confirm="search" @input="input"></uSearchBar>
|
|
</view>
|
|
<slFilter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList"
|
|
@result="result"></slFilter>
|
|
<view class="width90 height100p backcorfff border-r mart10">
|
|
<image mode="widthFix" src="../../../static/img/noorder.png" class="recontleft flleft mart10 border-r"></image>
|
|
<view class="recontright">
|
|
<view class="text1 width100 font15 fontwig6 paddtop10">贵州花冠中石油燃气加油站</view>
|
|
<view class="width100 mart10 height22">
|
|
<view class="width70 flleft text1 font13 fcor999">
|
|
花冠路贵惠大道桐荫26号
|
|
</view>
|
|
<view class="width30 flright font13 fcor666 fotct">
|
|
<image mode="widthFix" src="../../../static/img/dh.png" style="width: 10px;"></image>1.9km
|
|
</view>
|
|
</view>
|
|
<view class="font14 width100 fcoreb5 mart5 height22">
|
|
<text class="font18 fontwig6">6.40</text>起<text class="fcor999 margle">油站价￥6.88</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="width90 height100p backcorfff border-r mart10">
|
|
<image mode="widthFix" src="../../../static/img/noorder.png" class="recontleft flleft mart10 border-r"></image>
|
|
<view class="recontright">
|
|
<view class="text1 width100 font15 fontwig6 paddtop10">贵州花冠中石油燃气加油站</view>
|
|
<view class="width100 mart10 height22">
|
|
<view class="width70 flleft text1 font13 fcor999">
|
|
花冠路贵惠大道桐荫26号
|
|
</view>
|
|
<view class="width30 flright font13 fcor666 fotct">
|
|
<image mode="widthFix" src="../../../static/img/dh.png" style="width: 10px;"></image>1.9km
|
|
</view>
|
|
</view>
|
|
<view class="font14 width100 fcoreb5 mart5 height22">
|
|
<text class="font18 fontwig6">6.40</text>起<text class="fcor999 margle">油站价￥6.88</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="width90 height100p backcorfff border-r mart10">
|
|
<image mode="widthFix" src="../../../static/img/noorder.png" class="recontleft flleft mart10 border-r"></image>
|
|
<view class="recontright">
|
|
<view class="text1 width100 font15 fontwig6 paddtop10">贵州花冠中石油燃气加油站</view>
|
|
<view class="width100 mart10 height22">
|
|
<view class="width70 flleft text1 font13 fcor999">
|
|
花冠路贵惠大道桐荫26号
|
|
</view>
|
|
<view class="width30 flright font13 fcor666 fotct">
|
|
<image mode="widthFix" src="../../../static/img/dh.png" style="width: 10px;"></image>1.9km
|
|
</view>
|
|
</view>
|
|
<view class="font14 width100 fcoreb5 mart5 height22">
|
|
<text class="font18 fontwig6">6.40</text>起<text class="fcor999 margle">油站价￥6.88</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import slFilter from '@/components/sl-filter/sl-filter.vue';
|
|
import uSearchBar from '../../../components/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
|
|
export default {
|
|
components: {
|
|
slFilter,
|
|
uSearchBar
|
|
},
|
|
data() {
|
|
return {
|
|
themeColor: '#089bf5',
|
|
titleColor: '#666666',
|
|
filterResult: '',
|
|
menuList: [{
|
|
'title': '品牌',
|
|
'key': 'single',
|
|
'isMutiple': false,
|
|
'detailTitle': '请选择（单选）',
|
|
'reflexTitle': true,
|
|
'defaultSelectedIndex': 0,
|
|
'detailList': [{
|
|
'title': '全部品牌',
|
|
'value': '全部品牌'
|
|
}, {
|
|
'title': '中石化',
|
|
'value': '中石化'
|
|
}, {
|
|
'title': '中石油',
|
|
'value': '中石油'
|
|
}, {
|
|
'title': '亮牌',
|
|
'value': '亮牌'
|
|
}, {
|
|
'title': '其他',
|
|
'value': '其他'
|
|
},
|
|
|
|
]
|
|
|
|
},
|
|
{
|
|
'title': '距离',
|
|
'key': 'single',
|
|
'isMutiple': false,
|
|
'detailTitle': '请选择（单选）',
|
|
'reflexTitle': true,
|
|
'defaultSelectedIndex': 0,
|
|
'detailList': [{
|
|
'title': '距离最近',
|
|
'value': '距离最近'
|
|
}]
|
|
|
|
},
|
|
{
|
|
'title': '油号',
|
|
'key': 'single',
|
|
'isMutiple': false,
|
|
'detailTitle': '请选择（单选）',
|
|
'reflexTitle': true,
|
|
'defaultSelectedIndex': 0,
|
|
'detailList': [{
|
|
'title': '89#',
|
|
'value': '89#'
|
|
}, {
|
|
'title': '92#',
|
|
'value': '92#'
|
|
}, {
|
|
'title': '95#',
|
|
'value': '92#'
|
|
}, {
|
|
'title': '98#',
|
|
'value': '98#'
|
|
}, ]
|
|
},
|
|
{
|
|
'title': '距离',
|
|
'key': 'single',
|
|
'isMutiple': false,
|
|
'detailTitle': '请选择（单选）',
|
|
'reflexTitle': true,
|
|
'defaultSelectedIndex': 0,
|
|
'detailList': [{
|
|
'title': '默认排序',
|
|
'value': ''
|
|
},
|
|
{
|
|
'title': '发布时间',
|
|
'value': 'add_time'
|
|
},
|
|
{
|
|
'title': '薪资最高',
|
|
'value': 'wages_up'
|
|
},
|
|
{
|
|
'title': '离我最近',
|
|
'value': 'location'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
result(val) {
|
|
console.log('filter_result:' + JSON.stringify(val));
|
|
this.filterResult = JSON.stringify(val, null, 2)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
.sear {
|
|
margin-left: 10px;
|
|
width: 50px;
|
|
}
|
|
|
|
.searImg {
|
|
margin-left: 55px;
|
|
}
|
|
|
|
.recontleft {
|
|
width: 80px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.recontright {
|
|
margin-left: 95px;
|
|
}
|
|
|
|
.text {
|
|
margin-top: 50px;
|
|
margin-left: 20px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|