|
|
@@ -1,175 +1,289 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="top-box">
|
|
|
- <view class="search-box">
|
|
|
- <view class="search-left">
|
|
|
- <u-search
|
|
|
- placeholder="请输入搜索内容"
|
|
|
- :showAction="false"
|
|
|
- v-model="keyword"
|
|
|
- />
|
|
|
+ <view class="container" @click="filterShow = false">
|
|
|
+ <view class="top-box">
|
|
|
+ <view class="search-box">
|
|
|
+ <view class="search-left">
|
|
|
+ <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword" />
|
|
|
+ </view>
|
|
|
+ <view class="search-right">取消</view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-box">
|
|
|
+ <view class="filter-item">
|
|
|
+ <view class="fiter1 " @tap.stop="handlerSelectMenu(1)">
|
|
|
+ <u-icon name="map"></u-icon>
|
|
|
+ <span class="filter-l">贵阳市青少年人才社区</span>
|
|
|
+ <u-icon name="arrow-down-fill"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="fiter2" @tap.stop="handlerSelectAllFilter(2)">
|
|
|
+ <span>综合排序</span>
|
|
|
+ <u-icon name="arrow-down-fill"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="fiter1">
|
|
|
+ <span>筛选</span>
|
|
|
+ <u-icon name="arrow-down-fill"></u-icon>
|
|
|
</view>
|
|
|
- <view class="search-right">取消</view>
|
|
|
</view>
|
|
|
- <view class="filter-box">
|
|
|
- <view class="filter-item">
|
|
|
- <view class="fiter1 ">
|
|
|
- <u-icon name="map"></u-icon>
|
|
|
- <span class="filter-l">贵阳市青少年人才社区</span>
|
|
|
- <u-icon name="arrow-down-fill"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="fiter2" @tap="handlerSelectAllFilter">
|
|
|
- <span>综合排序</span>
|
|
|
- <u-icon name="arrow-down-fill"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="fiter1">
|
|
|
- <span>筛选</span>
|
|
|
- <u-icon name="arrow-down-fill"></u-icon>
|
|
|
+ <view class="filter-drapdown" v-show="filterShow">
|
|
|
+ <view class="filter1" v-show="filterType == 1">
|
|
|
+ <view class="scroll-box">
|
|
|
+ <scroll-view :scroll-top="scrollTop" scroll-y="true" class="filter-menu-left scroll-Y" @scrolltoupper="upper"
|
|
|
+ @scrolltolower="lower" @scroll="scroll">
|
|
|
+ <view id="demo1" class="scroll-view-item uni-bg-red menu-item"
|
|
|
+ :class="current == index ? 'act-left-menu' : ''"
|
|
|
+ v-for="(item,index) of menuList"
|
|
|
+ @click.stop='handlerSelectLMenu(item,index)'>{{ item.name }}
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <scroll-view :scroll-top="scrollTop" scroll-y="true" class="filter-menu-right scroll-Y" @scrolltoupper="upper"
|
|
|
+ @scrolltolower="lower" @scroll="scroll">
|
|
|
+ <view id="demo1" class="scroll-view-item uni-bg-red" v-for="item of 15">
|
|
|
+ <view class="menu-right-title">洗车</view>
|
|
|
+ <view class="menu-right-contentbox" >
|
|
|
+ <span class="menu-item" v-for="item of 7">测试</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="filter-drapdown" v-show="filterShow">
|
|
|
- <view class="">离我最近</view>
|
|
|
- <view class="">好评优先</view>
|
|
|
- <view class="">离我有点远</view>
|
|
|
+ <view class="filter2" v-show="filterType == 2">
|
|
|
+ <view class="">离我最近</view>
|
|
|
+ <view class="">好评优先</view>
|
|
|
+ <view class="">离我有点远</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
<view class="content-box">
|
|
|
- <view class="content-item" v-for="item of 5">
|
|
|
- <view class="item-left">
|
|
|
- <image class="img" src="../../../static/logo.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="item-right">
|
|
|
-
|
|
|
- <view class="">
|
|
|
- <view class="item-title">
|
|
|
- <view class="tag">常去 </view>
|
|
|
- <view class="title">途虎养车洗车机（贵州省贵阳市云岩区）</view>
|
|
|
- </view>
|
|
|
- <view class="str-box">
|
|
|
- <view class="srt-left">
|
|
|
- <u-rate activeColor="#fc8400" :value="3.7" readonly></u-rate>
|
|
|
- <text>5.0</text>
|
|
|
- </view>
|
|
|
- <view class="border"></view>
|
|
|
- <view class="srt-right">998单</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="content-item" v-for="item of 5">
|
|
|
+ <view class="item-left">
|
|
|
+ <image class="img" src="../../../static/logo.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-right">
|
|
|
|
|
|
- <view class="bottom-textbox">
|
|
|
- <view class="bottom-left">宝安中心区美容洗车</view>
|
|
|
- <view class="bottom-right">2.7km</view>
|
|
|
+ <view class="">
|
|
|
+ <view class="item-title">
|
|
|
+ <view class="tag">常去 </view>
|
|
|
+ <view class="title">途虎养车洗车机（贵州省贵阳市云岩区）</view>
|
|
|
+ </view>
|
|
|
+ <view class="str-box">
|
|
|
+ <view class="srt-left">
|
|
|
+ <u-rate activeColor="#fc8400" :value="3.7" readonly></u-rate>
|
|
|
+ <text>5.0</text>
|
|
|
</view>
|
|
|
+ <view class="border"></view>
|
|
|
+ <view class="srt-right">998单</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bottom-textbox">
|
|
|
+ <view class="bottom-left">宝安中心区美容洗车</view>
|
|
|
+ <view class="bottom-right">2.7km</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- keyword:null,
|
|
|
- filterShow:false
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 点击综合排序
|
|
|
- handlerSelectAllFilter(){
|
|
|
- this.filterShow = !this.filterShow
|
|
|
- console.log('123123');
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ keyword: null,
|
|
|
+ filterShow: false,
|
|
|
+ filterType: 0,
|
|
|
+
|
|
|
+ current:0,
|
|
|
+
|
|
|
+ menuList:[
|
|
|
+ {name:'汽车'},
|
|
|
+ {name:'汽车2'},
|
|
|
+ {name:'汽车3'},
|
|
|
+ {name:'汽车4'},
|
|
|
+ ]
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 点击综合排序
|
|
|
+ handlerSelectAllFilter(e) {
|
|
|
+ this.filterShow = true
|
|
|
+ this.filterType = 2
|
|
|
+ },
|
|
|
+ //
|
|
|
+ handlerSelectMenu(e){
|
|
|
+ this.filterShow = true
|
|
|
+ this.filterType = 1
|
|
|
+ },
|
|
|
+ // 选择左侧菜单
|
|
|
+ handlerSelectLMenu(item,index){
|
|
|
+ this.current = index
|
|
|
+ },
|
|
|
+ scroll(){
|
|
|
+
|
|
|
+ },
|
|
|
+ lower(){},
|
|
|
+ upper(){},
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
min-height: 100vh;
|
|
|
background-color: #efefef;
|
|
|
- .top-box{
|
|
|
+
|
|
|
+ .top-box {
|
|
|
width: 100%;
|
|
|
background-color: #fff;
|
|
|
padding: 10rpx 20rpx;
|
|
|
box-sizing: border-box;
|
|
|
- .search-box{
|
|
|
+
|
|
|
+ .search-box {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- .search-left{
|
|
|
+
|
|
|
+ .search-left {
|
|
|
width: 80%;
|
|
|
|
|
|
}
|
|
|
- .search-right{
|
|
|
+
|
|
|
+ .search-right {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .filter-box{
|
|
|
+ .filter-box {
|
|
|
margin-top: 20rpx;
|
|
|
- .filter-item{
|
|
|
+
|
|
|
+ .filter-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- .fiter1,.fiter2{
|
|
|
+
|
|
|
+ .fiter1,
|
|
|
+ .fiter2 {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
- .filter-l{
|
|
|
+
|
|
|
+ .filter-l {
|
|
|
width: 200rpx;
|
|
|
overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
- .fiter1{
|
|
|
+
|
|
|
+ .fiter1 {
|
|
|
color: #808080;
|
|
|
font-size: 24rpx
|
|
|
}
|
|
|
- .fiter2{
|
|
|
|
|
|
- }
|
|
|
+ .fiter2 {}
|
|
|
}
|
|
|
|
|
|
- .filter-drapdown{
|
|
|
+ .filter-drapdown {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
background-color: #fff;
|
|
|
- height: 300rpx;
|
|
|
+ // height: 300rpx;
|
|
|
z-index: 999;
|
|
|
box-shadow: 0 10rpx 20rpx -5rpx rgba(0, 0, 0, 0.2);
|
|
|
- view{
|
|
|
- margin: 30rpx 50rpx;
|
|
|
+ .filter1{
|
|
|
+ .scroll-box {
|
|
|
+ display: flex;
|
|
|
+ max-height: 1200rpx;
|
|
|
+ .filter-menu-left{
|
|
|
+ width: 30%;
|
|
|
+ background-color: #ebebeb;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .menu-item{
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ background-color: #ebebeb;
|
|
|
+ color: #5a5a5a;
|
|
|
+ }
|
|
|
+ .act-left-menu{
|
|
|
+ background-color: #fff;
|
|
|
+ color: #5992bb;
|
|
|
+ border-right: 8rpx solid #5992bb !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .filter-menu-right{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 70%;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .menu-right-title{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+ .menu-right-contentbox{
|
|
|
+ padding: 0 0 0 30rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .menu-item{
|
|
|
+ // width: 100rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: #cccccc;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .filter2 {
|
|
|
+ padding: 20rpx 50rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ view {
|
|
|
+ margin: 30rpx 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
- .content-box{
|
|
|
+ .content-box {
|
|
|
width: 100%;
|
|
|
- .content-item{
|
|
|
+
|
|
|
+ .content-item {
|
|
|
background-color: #fff;
|
|
|
padding: 10rpx 20rpx;
|
|
|
box-sizing: border-box;
|
|
|
margin: 10rpx 0;
|
|
|
display: flex;
|
|
|
- .item-left{
|
|
|
+
|
|
|
+ .item-left {
|
|
|
margin-right: 10rpx;
|
|
|
- .img{
|
|
|
+
|
|
|
+ .img {
|
|
|
width: 200rpx;
|
|
|
height: 200rpx;
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
- .item-right{
|
|
|
+
|
|
|
+ .item-right {
|
|
|
height: 200rpx;
|
|
|
align-content: space-between;
|
|
|
- .item-title{
|
|
|
+
|
|
|
+ .item-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .tag{
|
|
|
+
|
|
|
+ .tag {
|
|
|
width: 80rpx;
|
|
|
height: 46rpx;
|
|
|
// line-height: 50rpx;
|
|
|
@@ -183,39 +297,44 @@
|
|
|
// align-items: center;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
- .title{
|
|
|
- font-size: 30rpx;
|
|
|
- color: #000;
|
|
|
- font-weight: bold;
|
|
|
- flex-wrap: wrap;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .str-box{
|
|
|
+ .str-box {
|
|
|
display: flex;
|
|
|
margin-top: 10rpx;
|
|
|
- .srt-left{
|
|
|
+
|
|
|
+ .srt-left {
|
|
|
display: flex;
|
|
|
color: #fc8400;
|
|
|
}
|
|
|
- .border{
|
|
|
+
|
|
|
+ .border {
|
|
|
border-left: 2rpx solid #cfcfcf;
|
|
|
margin: 0 20rpx;
|
|
|
}
|
|
|
- .srt-right{
|
|
|
- }
|
|
|
+
|
|
|
+ .srt-right {}
|
|
|
}
|
|
|
|
|
|
|
|
|
- .bottom-textbox{
|
|
|
+ .bottom-textbox {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
font-size: 26rpx;
|
|
|
margin-top: 40rpx;
|
|
|
- .bottom-left{
|
|
|
+
|
|
|
+ .bottom-left {
|
|
|
color: #c7c7c7;
|
|
|
}
|
|
|
- .bottom-right{
|
|
|
+
|
|
|
+ .bottom-right {
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
@@ -223,4 +342,6 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
</style>
|
