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.
128 lines
3.0 KiB
128 lines
3.0 KiB
<template> |
|
<view class="my-bg"> |
|
<cu-custom class="main-topbar bg-main-oil" isBack bgColor="bg-main-oil"> |
|
<block slot="content">附近加油站</block> |
|
<block slot="backText">返回</block> |
|
</cu-custom> |
|
<view class="cu-bar search bg-white"> |
|
<view class="search-form round"> |
|
<text class="cuIcon-search"></text> |
|
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="加油站名称" confirm-type="search"></input> |
|
</view> |
|
<view class="action" @tap="toMap"> |
|
<image class="icon shadow-blur round icon-gasstation" src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png" |
|
mode=""></image> |
|
</view> |
|
</view> |
|
<view class=" solids-bottom shadow "> |
|
<dropdownMenu> |
|
<dropdownItem :title="title1" v-model="val1" :list="typeList" @input="typeSelect" @close="show = false" /> |
|
<dropdownItem :title="title2" v-model="val2" :list="nameLsit" @input="nameSelect" @close="show = false" /> |
|
<dropdownItem :title="title3" :list="option3" v-model="val3" @input="optionSelect" @close="show = false" /> |
|
</dropdownMenu> |
|
</view> |
|
<view class="" @tap="toDetail"> |
|
<StationItem /> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import StationItem from './components/StationItem.vue' |
|
import dropdownItem from '@/components/ms-dropdown/dropdown-item.vue' |
|
import dropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue' |
|
|
|
export default { |
|
components: { |
|
StationItem, |
|
dropdownItem, |
|
dropdownMenu |
|
}, |
|
data() { |
|
return { |
|
val3: 'distance', |
|
val1: 'distance', |
|
val2: 'distance', |
|
title1: "0#", |
|
title2: "距离最近", |
|
title3: "综合排序", |
|
typeList: [{ |
|
text: '距离最近', |
|
value: 'distance' |
|
}, |
|
{ |
|
text: '价格最低', |
|
value: 'price' |
|
} |
|
], |
|
nameLsit: [{ |
|
text: '全部品牌', |
|
value: 0 |
|
}, |
|
{ |
|
text: '距离最近', |
|
value: 'distance' |
|
}, |
|
{ |
|
text: '价格最低', |
|
value: 'price' |
|
} |
|
], |
|
option3: [{ |
|
text: '距离最近', |
|
value: 'distance' |
|
}, |
|
{ |
|
text: '价格最低', |
|
value: 'price' |
|
} |
|
], |
|
InputBottom: 0, |
|
chooseList: ['1', '2'], |
|
arr: ['出', '入'], |
|
show: false |
|
} |
|
}, |
|
methods: { |
|
toDetail(){ |
|
uni.navigateTo({ |
|
url: './stationDetail/stationDetail', |
|
}) |
|
}, |
|
nameSelect(value, item) { |
|
this.title2 = item.text |
|
console.log(item) |
|
}, |
|
typeSelect(value, item) { |
|
console.log(item) |
|
this.title1 = item.text |
|
}, |
|
optionSelect(value, item) { |
|
console.log(item) |
|
this.title3 = item.text |
|
}, |
|
toMap() { |
|
uni.navigateTo({ |
|
url: '../index/index', |
|
}) |
|
}, |
|
InputFocus(e) { |
|
this.InputBottom = e.detail.height |
|
console.log(e.detail) |
|
console.log(this.InputBottom) |
|
}, |
|
InputBlur(e) { |
|
this.InputBottom = 0 |
|
console.log(this.InputBottom) |
|
console.log(e.detail) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.icon-gasstation { |
|
width: 1.2rem; |
|
height: 1.2rem; |
|
} |
|
</style>
|
|
|