mall_client/zyhs_app_java/zyhs3_uniapp/pages/home/goodsArea.vue

<style lang="scss" scoped>
.center {
  width: 80%;
  margin-left: 30px;
}

.filter_box {
  height: 80rpx;
  border-top: 1rpx solid #e6e6e6;

  .filter_item {
    &.active {
      color: red;
    }
  }

  .sort {
    margin-left: 4rpx;

    .angle_top {
      width: 0;
      height: 0;
      border-bottom: 10rpx solid #000;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
      margin-bottom: 4rpx;
    }

    .angle_bottom {
      width: 0;
      height: 0;
      border-top: 10rpx solid #000;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
    }
  }
}

.scroll_view {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 20rpx;

  .list {
    flex-wrap: wrap;
  }
}

.searchClass {
  margin-left: 15px;
}

.flex-between {
 justify-content: space-around;
}
</style>
<template>
  <view>
    <view id="navBar">
      <u-navbar title="个人中心" :autoBack="true" :placeholder="true">
        <view class="center" slot="center">
          <u-search class="searchClass" style="margin-left: 10px;" @search="handlerSearch" :action-style="actionStyle"
            @custom="handlerSearch" placeholder="搜索宝贝" v-model="keyword" :showAction="true"></u-search>
        </view>
      </u-navbar>
      <view class="filter_box flex flex-between font28 bg-w">
        <view :class="[filterIndex == index ? 'active' : '']" class="filter_item flex flex-center flex-1"
          v-for="(item, index) in filterList" :key="index" @click="handlerFilter(index, item.filter)">
          <view v-if="index < 3" class="flex flex-align-center">
            {{ item.name }}
            <view v-if="index == 1 && sortSales != null" class="flex flex-column flex-between sort">
              <text :style="{ borderBottomColor: sortSales == 1 ? 'red' : '#000' }" class="angle_top"></text>
              <text :style="{ borderTopColor: sortSales == 2 ? 'red' : '#000' }" class="angle_bottom"></text>
            </view>
            <view v-if="index == 2 && sortPrice != null" class="flex flex-column flex-between sort">
              <text :style="{ borderBottomColor: sortPrice == 1 ? 'red' : '#000' }" class="angle_top"></text>
              <text :style="{ borderTopColor: sortPrice == 2 ? 'red' : '#000' }" class="angle_bottom"></text>
            </view>
          </view>
          <view v-if="index == 3" class="zyhs" :class="[listStyle == 'class' ? 'zyhs-liebiao' : 'zyhs-fenlei']"></view>
          <!-- <text v-if="index == 4" class="f-b flex flex-align-center">
						筛选<text class="zyhs zyhs-shaixuan"></text>
					</text> -->
        </view>
      </view>
    </view>
    <scroll-view @scrolltolower="handlerLoad" scroll-y="true" class="scroll_view" :style="{ top: scrollTop + 'px' }">
      <view class="list flex flex-between">
        <GoodsItem :greenPrice="greenPrice" :goodsType="type" :listStyle="listStyle" listType="area" :dataItem="goods"
          v-for="(goods, index) in goodsList"></GoodsItem>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import url from "@/common/http/url.js";
import GoodsItem from './modules/goodsItem.vue';
export default {
  components: { GoodsItem },
  data () {
    return {
      actionStyle: {
        color: '#FA5151',
        fontWeight: '600'
      },
      filterList: [
        { name: '综合', filter: '' },
        { name: '销量', filter: 'sortSales' },
        { name: '价格', filter: 'sortPrice' },
        { name: '列表样式', filter: 'list' }
      ],
      filterIndex: 0,
      type: null,
      pageNum: 1,
      isLoad: false,
      goodsList: [],
      keyword: '',
      scrollTop: 0,
      sortSales: null,
      sortPrice: null,
      listStyle: 'class',
      greenPrice: 0
    };
  },
  async onLoad (e) {
    this.type = e.type || null;
    await this.$http("GET", url.order.getGreenPrice).then(res => {
      if (res.data) {
        this.greenPrice = res.data
      }
    })
    await this.getGoodsList();
    let query = uni.createSelectorQuery().in(this);
    setTimeout(() => {
      query.select('#navBar').boundingClientRect(data => {
        console.log('=============', data);
        this.scrollTop = data.height;

      }).exec();
    }, 200)
  },

  methods: {
    async init () {
      this.pageNum = 1;
      this.goodsList = [];

      this.getGoodsList();
      // 获取绿色积分价格

    },
    handlerLoad () {
      this.pageNum++;
      this.getGoodsList()
    },
    handlerSearch () {
      this.init()

    },
    handlerFilter (index, type) {
      if (type == "list") {
        this.listStyle = this.listStyle == 'list' ? 'class' : 'list';
        return;
      };
      this.filterIndex = index;
      let { sortSales, sortPrice } = this.$data;
      if (type == 'sortSales') {
        if (sortSales == null) this.sortSales = 1;
        else this.sortSales == 1 ? this.sortSales = 2 : this.sortSales = 1;
      }
      if (type == 'sortPrice') {
        if (sortPrice == null) this.sortPrice = 1;
        else this.sortPrice == 1 ? this.sortPrice = 2 : this.sortPrice = 1;
      }
      this.init()
    },
    async getGoodsList () {
      let { sortSales, sortPrice, keyword, filterIndex } = this.$data;
      let params = {
        sortComprehensive: filterIndex == 0 ? 1 : -1,
        qvYu: this.type,
        pageSize: this.pageNum
      }

      if (sortSales != null) params.sortSales = sortSales;

      if (sortPrice != null) params.sortPrice = sortPrice;

      if (keyword) params.goodsName = keyword;
      await this.$http("GET", url.goods.getGoodsList, params).then(res => {
        let { code, data: { records } } = res;
        console.log('res', res)
        if (code == 200) {
          this.goodsList = [...this.goodsList, ...records]
        }
      })
    }
  }
}
</script>