CommunityApp/pagesM/pages/goods_list.vue

<template>
  <view class="pageBg">
	<DtCustomBar title="商品列表" showBack="true" :color="dt_custom_bar" :background="dt_custom_bgcolor"></DtCustomBar>
    <view class="top" v-if="!hideTop">
      <view class="condition">
        <view class="item" :class="{'active':curActive==0}" @tap="tapActive(0)">
          <view>默认</view>
        </view>
        <view class="item" :class="{'active':curActive==1}" @tap="tapActive(1)">
          <view>销量</view>
          <image v-if="curActive!=1" src="http://139.9.103.171:1888/img/image/sort_arrow_icon.png"></image>
          <block v-else>
            <image v-if="typeList[curActive].v==1" src="http://139.9.103.171:1888/img/image/sort_down_arrow.png"></image>
            <image v-else src="http://139.9.103.171:1888/img/image/sort_up_arrow.png"></image>
          </block>
        </view>
        <view class="item" :class="{'active':curActive==2}" @tap="tapActive(2)">
          <view>价格</view>
          <image v-if="curActive!=2" src="http://139.9.103.171:1888/img/image/sort_arrow_icon.png"></image>
          <block v-else>
            <image v-if="typeList[curActive].v==1" src="http://139.9.103.171:1888/img/image/sort_down_arrow.png"></image>
            <image v-else src="http://139.9.103.171:1888/img/image/sort_up_arrow.png"></image>
          </block>
        </view>
      </view>
    </view>
		<image
		v-if="hideTop"
				src="http://139.9.103.171:1888/img/image/goodlist_head_bg.png" 
				mode="widthFix" 
				style="
					width: 100vw;
					position: fixed;
					top: 0;
					left: 0;
					right: 0;">
				</image>
				<view v-if="hideTop" style="margin: 0 20upx;position: relative; ">
					<image :src="path" mode="widthFix" @load="imgload" style="width: 100%;border-radius: 20upx;position: relative;"></image>
				</view>
		<scroll-view class="swiper-wrapper" scroll-y="true" :style="swiperHeight"  @scrolltolower="onReachLower">
			<view>
				<!-- <image v-if="hideTop&&theme!=1" :src="path" mode="widthFix"  style="width: 100%;"></image> -->
				<view class="search_results">
				  <view v-if="!hideTop" class="top_height"></view>
				  <view v-if="emptyType==0" class="goods_list_result">
				    <DtGoodsList v-if="!hideTop" :dataList="dataList" />
					<DtGoodsListHot v-else :dataList="dataList" :theme="theme" />
				  </view>
				  <DtNoMore v-if="isNoMore" />
				  <DtEmpty :type="emptyType" />
				</view>
			</view>
		</scroll-view>
  </view>
</template>
<script>
import DtGoodsList from '../comps/dt_goods_list.vue'
import DtEmpty from '../comps/dt_empty.vue'
import DtNoMore from '../comps/dt_no_more.vue'
import DtCustomBar from '../comps/dt_custom_bar.vue'
import DtGoodsListHot from "../comps/dt_goods_list_hot.vue"
export default {
  components: {
    DtGoodsList,
    DtEmpty,
    DtNoMore,
	DtCustomBar,
	DtGoodsListHot
  },
  data() {
    return {
		path:'',
		theme:1,
		hideTop:false,
      memberId: '',
      productCategoryId: '',
      paramsList: [],
      dataList: [],
      curActive: 0,
      typeList: {
        0: null,
        1: {
          k: 'sales',
          t: 3,
          v: 1
        },
        2: {
          k: 'price',
          t: 3,
          v: 1
        }
      },
	  dt_custom_bar:'#000000',
	  dt_custom_bgcolor:'transparent',
	  winHeight:''
    }
  },
  onReady() {
  	//swiper高度自适应
  	this.getElementHeight('.swiper-wrapper')
  },
  computed: {
    swiperHeight() {
      return "height:" + this.winHeight + "px;";
    }
  },
  methods: {
	  onReachLower(ev) {
	    this.onReachBottomPage();
	  },
	  imgload(){
	  	this.getElementHeight('.swiper-wrapper')
	  },
	  getElementHeight(element) {
	  	let windowHeight = 0;
	  	uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
	  		success(res) { //成功回调函数
	  			windowHeight=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
	  		}
	  	});
	  	setTimeout(()=>{
	  		// let query = uni.createSelectorQuery().in(this);
	  		// query.select(element).boundingClientRect();
	  		// query.exec((res) => {
	  		// 	if (!res) {//如果没获取到，再调一次
	  		// 		this.getElementHeight();
	  		// 	}else {
	  		// 		this.swiperHeight = (windowHeight-res[0][0].top)+'px';
	  		// 		console.log(res[0][0].top,res)
	  				
	  		// 	}
	  			
	  		// })
	  		
	  		const query = uni.createSelectorQuery().in(this);
	  		query.selectAll(element).boundingClientRect();
	  			query.exec((res) => {
	  				if (!res) {//如果没获取到，再调一次
	  					this.getElementHeight();
	  				}else {
	  					this.winHeight = windowHeight - res[0][0].top;
	  				}
	  			})
	  		
	  	},20)
	  },
    // async getSearchProductFilter() {
    //   let data = {};
    //   data.productCategoryId = this.productCategoryId;
    //   let res = await this.$api.getSearchProductFilter(data);
    //   console.log(res);
    // },
	
    tapActive(idx) {
      this.curActive = idx
      if (idx == 1 || idx == 2) {
        let typeList = this.typeList
        if (typeList[idx].v == 1) {
          typeList[idx].v = -1
        } else {
          typeList[idx].v = 1
        }
        this.typeList = typeList
      }
      this.isNoMore = false
      this.pageIndex = 0
      this.dataList.length = 0
      this.queryDataList()
    },

    getParams() {
      let param = this.typeList[this.curActive]
      let paramsList = this.paramsList.slice(0)
      console.log(96, paramsList)
      if (this.productCategoryId) {
        paramsList.unshift({
          k: 'productCategoryId',
          t: 1,
          v: this.productCategoryId
        })
      }
      console.log(104, paramsList, param)
      if (param) {
        paramsList.unshift(param)
      }
      console.log(108, paramsList)
      return paramsList
    },
    // 搜索
    async queryDataList() {
      let params = this.getParams()
      console.log(112, params)
      let resp = await this.$api.searchProduct({
        _isShowLoading: true,
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
        memberId: this.memberId,
        params: params
      })
      let list = this.getDataList(resp)
      this.dataList = this.dataList.concat(list)
    },

    onLoadPage(options) {
	  wx.hideShareMenu();
      console.log(options);
      if (this.isLoad) {
        this.memberId = this.$auth.getMemberId()
        this.paramsList = options.params ? JSON.parse(options.params) : [];
        this.productCategoryId = options.id ? options.id : '';
        // this.getSearchProductFilter();
        if (options.name) {
          uni.setNavigationBarTitle({
            title: options.name
          })
        }
		if(options.hideTop){
			this.hideTop = options.hideTop;
			// if(options.theme==1){
				// uni.setNavigationBarColor({
				// 	frontColor: '#ffffff',
				// 	backgroundColor:'#ff1104'
				// })
				this.dt_custom_bar = '#ffffff'
			// }
		}else{
			this.dt_custom_bgcolor= "#ffffff"
		}
		if(options.theme){
			this.theme = options.theme;
		}
		if(options.path){
			this.path = options.path;
		}
      }
      this.queryDataList();
    },
  },
  onReachBottom() {
    this.onReachBottomPage()
  },
}
</script>

<style lang="scss" scoped>
.top {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 100;
  .condition {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60upx;
    justify-content: space-around;
    border-bottom: 1upx solid rgb(238, 238, 238);
    background: #fff;
    .item {
      font-size: 28upx;
      color: #333333;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex: 1;
      justify-content: center;
      height: 100%;
      image {
        width: 11upx;
        height: 15upx;
        margin-left: 10upx;
      }
    }
    .active {
      color: $dt-color-primary;
    }
  }
}

.search_results {
	
  .top_height {
    height: 60upx;
  }
  .goods_list_result {
    background: #fff;
  }
  .no_data_wrap {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>