chelvc-custom/src/pages/client/clientPackage/storeList.vue

<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="sellerListParams.keyword" />
        </view>
        <view class="search-right" @click='handlerSearch'>搜索</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>{{ sortCondition }}</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" :key="index"
                  @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" :key="item">
                  <view class="menu-right-title">洗车</view>
                  <view class="menu-right-contentbox">
                    <span class="menu-item" v-for="item of 7" :key="item">测试</span>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
          <view class="filter2" v-show="filterType == 2">
            <view @tap="sellerListFillter(1)">离我最近</view>
            <view @tap="sellerListFillter(2)">好评优先</view>
            <view @tap="sellerListFillter(3)">销量优先</view>
          </view>
        </view>
      </view>
    </view>

    <view class="content-box">
      <view class="content-item" v-for="(item, index) in sellerList" :key="index" @tap="goSellerDetail(item.id)">
        <view class="item-left">
          <image class="img" :src="item.logo" mode="aspectFit"></image>
          <!-- <image class="img" :src="error || !loaded ? 'https://cdn.uviewui.com/uview/album/10.jpg' : item.logo"
            mode="scaleToFill"></image> -->
        </view>
        <view class="item-right">
          <view>
            <view class="item-title">
              <view class="tag">常去</view>
              <view class="title">{{ `${item.name}(${item.address})` }}</view>
            </view>
            <view class="str-box">
              <view class="srt-left">
                <u-rate activeColor="#fc8400" :value="item.score" readonly></u-rate>
                <text>{{ item.score }}</text>
              </view>
              <view class="border"></view>
              <!-- <view class="srt-right">{{ item.sale }}单</view> -->
              <view class="srt-right"></view>
            </view>
          </view>

          <view class="bottom-textbox">
            <view class="bottom-left">宝安中心区美容洗车</view>
            <view class="bottom-right">{{ (item.distance / 1000).toFixed(2) }}KM</view>
          </view>
        </view>
      </view>
      <u-empty v-if="sellerList.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
    </view>
  </view>
</template>

<script>
  import { getSellerList } from '@/api/client/business.js';
  import { getCurrentLocation } from '@/api/client/home.js';
  import { mapGetters } from 'vuex';
  export default {
    data() {
      return {
        filterShow: false,
        filterType: 0,
        sortCondition: '综合排序',
        current: 0,
        menuList: [{
            name: '汽车',
          },
          {
            name: '汽车2',
          },
          {
            name: '汽车3',
          },
          {
            name: '汽车4',
          },
        ],
        sellerList: [],
        sellerListParams: {
          longitude: '',
          latitude: '',
          sort: 'SYNTHESE',
          size: 10,
          region: '', //地区编码
          keyword: '', //关键字
          categoryId: '', //分类ID
        },
      };
    },
    onLoad(option) {
      if(option.id){
        this.sellerListParams.categoryId = option.id;
      }
	  if(option.keyword){
		  this.sellerListParams.keyword = option.keyword;
	  }
    },
	mounted() {
	  let { latitude , longitude , region } = this.location
	  this.sellerListParams.latitude = latitude
	  this.sellerListParams.longitude = longitude
	  this.sellerListParams.region = region
	  this.getData();
	},
	computed:{
		  ...mapGetters(['location'])
	},
    methods: {
      // 点击综合排序
      handlerSelectAllFilter(e) {
        this.filterShow = true;
        this.filterType = 2;
      },
      // 排序条件
      sellerListFillter(e) {
        switch (e) {
          case 1:
            this.sortCondition = '离我最近';
            this.sellerListParams.sort = 'NEAREST';
            break;
          case 2:
            this.sortCondition = '好评优先';
            this.sellerListParams.sort = 'FAVORITE';
            break;
          case 3:
            this.sortCondition = '销量优先';
            this.sellerListParams.sort = 'BESTSELLING';
            break;
          default:
            break;
        }
        this.getData();
      },
      // 获取初始化列表
      getData() {
        getSellerList(this.sellerListParams)
          .then(res => {
            this.sellerList = res.data;
          })
          .catch(err => {});
      },
      // 点击进入详情
      goSellerDetail(id) {
        uni.navigateTo({
          url: `/pages/client/clientPackage/storeDetail?id=${id}`,
        });
      },
      //
      handlerSelectMenu(e) {
        this.filterShow = true;
        this.filterType = 1;
      },
      // 选择左侧菜单
      handlerSelectLMenu(item, index) {
        this.current = index;
      },
      scroll() {},
      lower() {},
      upper() {},
      // 搜索
      handlerSearch(){
        this.getData()
      }
    },
  };
</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: 35rpx;
              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 {
              width: 85%;
              font-size: 30rpx;
              color: #000;
              font-weight: bold;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }

          .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>