|
|
@@ -0,0 +1,347 @@
|
|
|
+<template>
|
|
|
+ <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 " >
|
|
|
+ <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" @tap.stop="handlerSelectMenu(1)">
|
|
|
+ <span>筛选</span>
|
|
|
+ <u-icon name="arrow-down-fill"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <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="filter2" v-show="filterType == 2">
|
|
|
+ <view class="">离我最近</view>
|
|
|
+ <view class="">好评优先</view>
|
|
|
+ <view class="">离我有点远</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="content-item" v-for="item of 10">
|
|
|
+ <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="bottom-textbox">
|
|
|
+ <view class="bottom-left">宝安中心区美容洗车</view>
|
|
|
+ <view class="bottom-right">2.7km</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ 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 {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .search-left {
|
|
|
+ width: 80%;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-right {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-box {
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .filter-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .fiter1,
|
|
|
+ .fiter2 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-l {
|
|
|
+ width: 200rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fiter1 {
|
|
|
+ color: #808080;
|
|
|
+ font-size: 24rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ .fiter2 {}
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-drapdown {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ // height: 300rpx;
|
|
|
+ z-index: 999;
|
|
|
+ box-shadow: 0 10rpx 20rpx -5rpx rgba(0, 0, 0, 0.2);
|
|
|
+ .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 {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .item-left {
|
|
|
+ margin-right: 10rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-right {
|
|
|
+ height: 200rpx;
|
|
|
+ align-content: space-between;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ // line-height: 50rpx;
|
|
|
+ padding: 4rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f6e7d4;
|
|
|
+ color: #f99a47;
|
|
|
+ border: 2rpx solid #f99a47;
|
|
|
+ text-align: center;
|
|
|
+ // align-items: center;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .str-box {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10rpx;
|
|
|
+
|
|
|
+ .srt-left {
|
|
|
+ display: flex;
|
|
|
+ color: #fc8400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border {
|
|
|
+ border-left: 2rpx solid #cfcfcf;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .srt-right {}
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .bottom-textbox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ .bottom-left {
|
|
|
+ color: #c7c7c7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
