xdd-uniapp-new/pkg_product/views/nativeList.vue

<template>
  <view class="pkg-product-list">
    <view class="top-box">
      <view class="search-box flex jc-between ai-center">
        <input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494"
               @confirm="search">
        <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill"
               @click="search"></image>
      </view>

      <u-tabs :list="tabList" keyName="cateName" lineColor="#D30808"
              :activeStyle="{color:'#FFFFFF',fontWeight:'bold'}"
              :inactiveStyle="{color:'rgba(255,255,255,.6)'}"
              lineWidth="120rpx" @click="tabsTap"></u-tabs>
    </view>

    <view class="body-box">
      <view class="aside-box flex-0">
        <view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
              v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
          <text class="one-t">{{ item.cateName }}</text>
        </view>
      </view>

      <view class="article-box">
        <view class="line-location flex ai-center">
          <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
          <text class="bold" @click="goCity">当前城市：{{ cityName }}</text>
        </view>

        <scroll-view class="list flex flex-wrap" :style="{'height':listHeight}" :enable-flex="true"
                     :scroll-anchoring="true"
                     :scroll-y="true"
                     :scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="onLower">
          <view class="item" @click="$global.navToGoods(item.id)" v-for="(item, index) in dataList"
                :key="index">
            <image class="cover" :src="item.image" mode="scaleToFill"/>
            <view class="name more-t">{{ item.storeName }}</view>
            <view class="price bold">￥{{ item.price }}</view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import {fetchNormal, getCategory} from "@/api/store";

export default {
  name: "nativeList",
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      keyword: "",
      asideList: [],
      asideIndex: 0,
      dataList: [], // 列表数据
      tabList: [],
      cityId: null,
      cityName: "桂林市",
      page: 1,
      listHeight: "auto"
    }
  },
  onLoad(option) {
    this.cityId = option.cityId;
    this.init();
  },
  methods: {
    goCity() {
      uni.redirectTo({
        url: `/components/chose-city/chose-city?type=0&city=${this.cityName}`
      })
    },
    init() {
      getCategory(0, 35, this.cityId, true).then(({data}) => {
        this.tabList = data;
        this.asideList = data[0].children;
        let memCityName = uni.getStorageSync("cityName")
        if (memCityName.length) {
          this.cityName = memCityName;
          uni.removeStorageSync("cityName")
        }
        this.search();
      });
    },
    onLower() {
      this.page++;
      this.search();
    },
    search() {
      let that = this;
      let param = {
        isGood: 1,
        page: this.page,
        keyword: this.keyword,
        cityName: this.cityName,
        sid: this.asideList[this.asideIndex].id
      };

      fetchNormal(param).then(({data}) => {
        if (this.page === 1) {
          this.dataList = [];
        }
        this.dataList = this.dataList.concat(data);
        uni.getSystemInfo({
          success: function (res) {
            let len = that.dataList.length;
            let {windowHeight} = res;
            that.listHeight = "auto";
            if (windowHeight > 600 && len > 6) {
              that.listHeight = "100%";
            }
            if (windowHeight <= 600 && len > 4) {
              that.listHeight = "100%";
            }
          }
        });
      }).catch(err => {
        uni.showToast({
          title: err + '',
          icon: 'none',
          mask: false,
          duration: 1500
        });
      })
    },
    tabsTap(item) {
      this.asideList = item.children;
      this.asideIndex = 0;
      this.page = 1;
      this.search();
    },
    asideTap(index) {
      this.asideIndex = index;
      this.page = 1;
      this.search();
    }
  }
}
</script>

<style scoped lang="less">
@import "@/assets/css/product.less";

.pkg-product-list {
  height: 100vh;
  overflow-y: hidden;

  .top-box {
    height: 142rpx;
    background: #FF564A;
  }

  .line-location {
    padding: 20rpx;
    font-size: 28rpx;

    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 4rpx;
    }
  }

  .body-box {
    height: calc(100vh - 142rpx);

    .article-box {
      .item {
        height: 362rpx;
      }
    }
  }
}
</style>