hlm_pl_mall_h5/pages/home/common/CommonStoreList.vue

<template>
<view style="position: absolute;top:0;right:0;left:0;bottom:0"><view style="height:100%" class="scroll-view-wrapper div common-store-list">
  <view class="div ui-storelist-filter">
    <view class="ul filter-list">
      <view class="li item"
          v-for='(item, index) in sortkey'
          v-bind:key='item.id'
          v-on:click='setActiveSortkey(item, index)'
          v-bind:class="{'sortactive': item.id == currentSortKey.id, 'sortnormal' : item.id != currentSortKey.id}">
        <text class="a" v-if='!item.isMore'>{{item.name}}</text>
        <text class="a" v-else>{{sort.name}}</text>
        <text class="span iconfont" :class="isShowMore?'active':''" v-if="item.isMore">&#xe6ea;</text>
      </view>
    </view>
    <view class="div sort-model" v-if='isShowMore' >
      <view class="div" v-for='(item, index) in childSort' v-bind:key='item.id' v-on:click='getSortChild(item)' v-bind:class="{'active': item.id == sort.id}">
        <text class="a">{{item.name}}</text>
        <text class="span iconfont" v-if="item.id == sort.id">&#xe69b;</text>
      </view>
    </view>
  </view>
  <view class="scroll-view div storelist-body show-store-list" style="position:relative">
    <!-- 无限加载滚动列表 -->
    <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view div flex-wrapper" @scrolltolower="getMore" scroll-y="true">
      <view class="div ui-product-body"
           v-for='(item, index) in storeList'
           v-bind:key='index'
      >
        <view class="div list-wrapper" v-on:click='goDetail(item.store_id)'>
          <view class="div list">
            <view class="div ui-image-wrapper">
              <image mode="aspectFit" class="img product-img" :src="item.store_avatar">
            </view>

            <view class="div flex-right">
              <view class="div product-header">
                <text class="h3 title clear-bottom">{{ item.store_name }}</text>

              </view>
              <view class="div store-info-wrapper">
                <view class="div store-info">
                  <view class="div collect-info">已有 {{item.store_collect}} 人关注</view>
                  <view class="div sub-title">
                    <uni-rate :size="18" :readonly="true" :value="parseInt(item.store_credit_percent/100*5)"/>
                  </view>
                </view>
                <view class="div">
                <view class="div btn" :class="{'active':item.is_favorate}"><text class="i iconfont">&#xe610;</text>关注</view>
                <view class="div distance" v-if="params.sort_key=='distance'">{{item.distance}}m</view>
                </view>
              </view>

            </view>
          </view>
          <view class="div goods-list" v-if="item.goods_list && item.goods_list.length">
            <view class="div goods-item" v-for="(goods,gindex) in item.goods_list" :key="gindex">
              <view class="div goods-image"><image mode="aspectFit" class="img" :src="goods.goods_image_url"></view>
              <view class="div goods-price">￥{{goods.goods_price}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="div loading-wrapper" v-if="storeList.length > 0">
        <view  class="p common-no-more" v-if='!isMore'>没有更多了</view>
        <uni-load-more status="loading" color='#e93b3d' v-if='isMore'></uni-load-more>
      </view>
      <empty-record v-if='storeList.length <= 0 && !isMore'></empty-record>
    </scroll-view>
  </view>
</view>
</view>
</template>

<script>
import { urlencode } from '@/util/common'
import EmptyRecord from '../../EmptyRecord'
import { mapState } from 'vuex'
import { getStoreList,getStoreNearbyList } from '../../../api/homesearch'
export default {
  name: 'CommonStoreList',
  props: [],
  components: {
    EmptyRecord
  },
  data(){
    return {
      dialog:{},
      query:{},
      sortkey: [
        {
          key: '',
          name: '综合排序',
          isMore: true,
          id: 0,
          child: [
            {
              key: '',
              name: '综合排序',
              isMore: false,
              id: 3
            },
            {
              key: 'distance',
              name: '距离排序',
              isMore: false,
              id: 4
            }
          ]
        },
        {
          key: 'store_sales',
          name: '销量排序',
          isMore: false,
          id: 1
        },
        {
          key: 'store_credit',
          name: '评分最高',
          isMore: false,
          id: 2
        }
      ], // 排序数据
      currentSortKey: {}, // 当前选中的排序
      childSort: [], // 综合筛选
      sort: {}, // 综合筛选子集
      isShowMore: false, // 是否显示筛选模态框
      params: {
        brand: '',
        category: '',
        is_exchange: 0,
        is_hot: 0,
        activity: null, // TODO: 确认activity的值
        sort_key: '',
        sort_value: 2,
        page: 0,
        keyword: ''
      },
      storeList: [], // 商品列表
      loading: false, // 是否加载更多
      isMore: true // 是否有更多
    }
  },
  computed: {
    ...mapState({
      member_point: state => state.member.point,
      token: state => state.member.token,
    })
  },
  mounted(){
    var pages = getCurrentPages()
    var page = pages[pages.length - 1]
    this.query = page.options

    this.params.brand=this.query.brand ? this.query.brand : ''
    this.params.category=this.query.storeclass_id ? this.query.storeclass_id : ''
    this.params.sort_key=this.query.sort_key ? this.query.sort_key : ''
    this.params.keyword=this.query.keywords ? this.query.keywords : ''
    
    this.currentSortKey = this.sortkey[0]
    this.childSort = this.currentSortKey.child
    this.sort = this.childSort[0]
    this.getMore()
  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
      uni.navigateTo({url:'/pages/home/map/Map'})
    },
    // closeFiler: 关闭下拉筛选模态框
    closeFiler () {
      this.isShowMore = false
    },
    // isShowDroupMenu: 点击显示下拉框， 并且显示模态框
    isShowDroupMenu () {
      let item = this.currentSortKey
      if (item.isMore) {
        this.isShowMore = true
      } else {
        this.isShowMore = false
      }
    },
    /**
     *  setActiveSortkey: 点击切换数据并设置选中的样式
     *  @param: item 当前选中的item
     */
    setActiveSortkey (item, index) {
      this.currentSortKey = item

      if (item.isMore) {
        this.isShowMore = !this.isShowMore
      } else {
        this.closeFiler()
        this.getValue()
      }
    },
    /**
     *  getValue: 向父级组件发送改变列表事件， 并传递当前的sort_key， sort_value
     */
    getValue () {
      let data = this.getSortValue()
      let res = data
      this.params.page = 1
      this.storeList = []
      this.loading = false
      this.setParamsByData(res)
      if(data.sort_key=='distance'){
        if(!this.member_point.lng || !this.member_point.lat){
        this.dialog={content:'我们需要先获取您的位置信息',cancelButtonText: '拒绝', confirmButtonText: '同意'}
        this.$refs.confirm.open()
        

        }else{
        this.getStoreList(false,true)
        }

      }else{
        this.getStoreList()
      }
    },
    /**
     *  getSortValue: 获取排序值
     */
    getSortValue () {
      let sort = this.currentSortKey
      let value = { 'sort_key': '', 'sort_value': '' }
      if (sort.isMore) {
        value.sort_key = this.sort.key
      } else {
        value.sort_key = sort.key
      }
      return value
    },
    /**
     *  getSortChild: 获取综合筛选的子集， 关闭父级的阴影模态框， 关闭子集， 获取列表数据
     *  @param: item 模态框的item
     */
    getSortChild (item) {
      this.sort = item
      this.isShowMore = !this.isShowMore
      this.getValue()
    },
    /*
    * getMore: 无限滚动加载
    */
    getMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getStoreList(true)
      }
    },
    /**
     * getStoreList: 获取商品列表
     * @param：  ispush ？ true ：false 是否需要向商品列表追加数据
     */
    getStoreList (ispush=false,nearby=false) {
      let data = this.params
      if(nearby){
      getStoreNearbyList(
        data.brand,
        data.category,
        data.keyword,
        this.member_point.lng,
        this.member_point.lat,
        data.sort_key,
        data.page,
        this.token
      ).then(res => {
        this.buildData(ispush, res)
      })
      }else{
      getStoreList(
        data.brand,
        data.category,
        data.keyword,
        0,
        0,
        data.sort_key,
        data.page,
        this.token
      ).then(res => {
        this.buildData(ispush, res)
      })
      }

    },
    /**
     * getList: 构建数据
     * @param: ispush 是否改变向元数据追加数据
     * @param: res 接口请求返回的数据
     */
    buildData (ispush, res) {
      if (res) {
        if (ispush) {
          this.storeList = this.storeList.concat(res.result.store_list)
        } else {
          this.storeList = res.result.store_list
        }
        this.isMore = res.result.hasmore
      }
    },
    /**
     * 根据事件传递的值来对请求列表重新赋值
     * @param data 事件传递的参数
     * @returns {params|{brand, category, is_exchange, is_hot, activity, sort_key, sort_value, page, per_page, keyword}}
     */
    setParamsByData (data) {
      let params = this.params
      for (let item in params) {
        for (let list in data) {
          if (item === list) {
            params[item] = data[list]
          }
        }
      }
      return params
    },
    goDetail (store_id) {
      uni.navigateTo({url: '/pages/home/storedetail/Storedetail'+'?'+urlencode( { 'id': store_id } )})
    }
  }
}
</script>

<style lang='scss' scoped>
  .scroll-view-wrapper{display: flex;flex-direction: column;}
  .scroll-view{flex:1}
  .ui-storelist-filter {
    width: auto;
    background: #fff;
  .ul.filter-list{
    display: flex;
    width: auto;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    border: 0;
    border-top: 1px solid #E8EAED;
    border-bottom: 1px solid #E8EAED;
  .li{
    font-size:$subFontSize;
    color: #333;
    border-bottom: 0.1rem solid transparent;
    position: relative;
    flex-basis: 5rem;
    text-align: center;
    height: 2.1rem;
    padding: 0;
    line-height: 2.1rem;
  .a {
    height: 2.1rem;
    display: inline-block;
  }
  .img {
    height: 0.2rem;
    width: 0.4rem;
    vertical-align: middle;
  }
    .iconfont{display: inline-block}
  }
  .li.sortactive {
    border-bottom-color:$primaryColor;
  .a {
    color:$primaryColor;
  }
    .iconfont{color:$primaryColor;}
    .iconfont.active{transform: rotate(180deg);}
  }
  .li.sortnormal {
    border-bottom-color: transparent;
  .a {
    color: #333;
  }
  }
  .arrow-icon {
    width: 0.6rem;
    height: 0.6rem;
  }
  }
  .sort-model {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10;
  .div {
    color: #333;
    padding: 0.75rem;
    font-size:$fontSize;
    background-color: #fff;
    margin: 0;
    border-bottom: 1px solid #E8EAED;
    cursor: pointer;
    display: flex;
    width: auto;
    justify-content: space-between;
    align-content: center;
    align-items: center;
  .img {
    float: right;
    width: 0.8rem;
    height: 0.8rem;
  }
  &.active {
     color: $primaryColor;
   }
  }
  }
  }
  .ui-product-body {

    .goods-list{padding:.8rem .5rem;border-top:1px dashed #eee;overflow: hidden;background:#fff;
      .goods-item{float:left;width:25%;text-align: center;
        .goods-image {margin-bottom:.2rem;
          .img{width:3.5rem;height: 3.5rem;border-radius:.3rem;}
        }
        .goods-price{color:$primaryColor;font-size:$subFontSize;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;width:100%}
      }
    }
    .list-wrapper{margin-bottom:.5rem;}
  .list {
    display: flex;
    width: auto;
    align-items: center;
    justify-content: space-between;
    padding:0.5rem;
    position: relative;
    background:#fff;

  .div.ui-image-wrapper {
    width: 3rem;
    height: 3rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-basis: 3rem;
    flex-shrink: 0;

    background-position:center center!important;
    background-size:5rem 5rem;
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

  .img.product-img{
    width: 3rem;
    height: 3rem;
    flex-basis: 3rem;
    flex-shrink: 0;
    border-radius:.3rem;
  }


  .span {
    position: absolute;
    height:1rem;
    background:rgba(243,244,245,1);
    line-height: 1rem;
    text-align: center;
    font-size:$subFontSize;
    color:$primaryColor;
    width: 5.5rem;
    bottom: 0;
    left: 0;
  }
  }
  .flex-right {
    padding-top:.5rem;
    padding-left: 0.7rem;
    width: 100%;
    position:relative;
  .title {
    color: #333;
    font-size:$subFontSize;
    font-weight: normal;

    display:-moz-box;
    display:-webkit-box;

    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;

    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;

    overflow: hidden;
    margin-bottom: 0.4rem;
  &.clear-bottom {
     margin-bottom: 0;
   }
  }
.store-info-wrapper{display: flex;
  .store-info{flex:1}
  .btn{float:right;width:3rem;font-size:$subFontSize;color:#e1e1e1;text-align: center;border:1px solid #e1e1e1;border-radius:1rem;height: 1rem;line-height: 1rem;}
  .btn.active{border-color:$primaryColor;background:$primaryColor;color:#fff}
  .distance{font-size:$subFontSize;color:#999}
}
  .product-header {
    display: flex;
    align-items: center;
  }
    .collect-info{font-size:$fontSize;color:#999}
  .sub-title {
    color: #55595F;
    font-size:$subFontSize;

    display:-moz-box;
    display:-webkit-box;

    -webkit-line-clamp: 1;
    -moz-line-clamp: 1;

    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;

    overflow: hidden;
    margin-bottom: 0.4rem;
  }
  .price {
    margin-bottom: 0.4rem;
  .span {
  &:first-child {
     color: $primaryColor;
     font-size:$h2;
   }
  &:last-child {
     color: #A4AAB3;
     font-size:$fontSize;
     text-decoration: line-through;
   }
  }
  }
  .sendway {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size:$fontSize;
    font-weight: 'Regular';
  .span{
    color: #7C7F88;
  &.self-support {
     font-size:$h6;
     color: $primaryColor;
     border: 1px solid $primaryColor;
     border-radius: 0.1rem;
     width: 1.6rem;
     height: 0.8rem;
     line-height: 0.8rem;
     text-align: center;
   }
  }
  }
  }
  }
  }
</style>