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

<template>
  <view class="pkg-product-list">
    <view class="first-half">
      <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>

      <swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
              autoplay circular v-if="bannerList.length>0">
        <swiper-item v-for="(item,index) in bannerList" :key="index">
          <image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
        </swiper-item>
      </swiper>

      <view class="tab-box flex jc-center ai-center" v-show="tabIndex===0">
        <image class="active" src="/static/images/v6/btn_active_left.png" @click="changeTab(0)"/>
        <image class="inactive" src="/static/images/v6/btn_right.png" @click="changeTab(1)"/>
      </view>
      <view class="tab-box flex jc-center ai-center" v-show="tabIndex===1">
        <image class="inactive" src="/static/images/v6/btn_left.png" @click="changeTab(0)"/>
        <image class="active" src="/static/images/v6/btn_active_right.png" @click="changeTab(1)"/>
      </view>
    </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.label }}</text>
        </view>
      </view>

      <view class="article-box">
        <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"
                     v-if="dataList.length>0">
          <view v-for="(item, index) in dataList" :key="index">
            <view class="item item-store" @click="goStore(item.id)" v-if="tabIndex===0">
              <image class="cover" :src="item.cover" mode="scaleToFill"/>
              <view class="name one-t">{{ item.content }}</view>
              <view class="price store flex ai-center" style="width: 100%;">
                <image class="flex-0" :src="item.logo" mode="scaleToFill"/>
                <view class="one-t">{{ item.name }}</view>
              </view>
            </view>

            <view class="item" @click="goGoods(item.id)" v-else>
              <image class="cover" :src="item.image" mode="scaleToFill"/>
              <view class="name more-t">{{ item.storeName }}</view>
              <view class="price">￥{{ item.price }}</view>
            </view>
          </view>
        </scroll-view>

        <view class="tc" v-else>
          <image class="img-nodata" :src="webUrl+'/20240106205121705480.png'" mode="scaleToFill"
                 v-if="tabIndex===0"/>
          <image class="img-nodata" :src="webUrl+'/20240106205115520933.png'" mode="scaleToFill" v-else/>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {fetchCity} from "@/api/wenwan";
import {wellnessFood, wellnessPlaceList} from "@/api/product";
import {getProducts} from "@/api/store";

export default {
  name: "healthList",
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      tabIndex: 0,
      keyword: "",
      page: 1,
      listHeight: "auto",

      bannerList: [],
      asideList: [],
      asideIndex: 0,
      dataList: [], // 列表数据
    }
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      wellnessFood().then(({data}) => {
        this.bannerList = data.banner
      });
      fetchCity(4).then(({data}) => {
        this.asideList = data.group;
        this.search();
      });
    },
    changeTab(index) {
      if (this.asideList.length === 0) return;
      if (index === this.tabIndex) return;
      this.page = 1;
      this.dataList = [];
      this.tabIndex = index;
      this.search();
    },
    onLower() {
      this.page++;
      this.search();
    },
    search() {
      let param = {
        page: this.page,
        limit: 10,
        keyword: this.keyword,
        provinceId: this.asideList.length > 0 ? this.asideList[this.asideIndex].provinceId : ""
      }
      if (this.tabIndex === 0) {
        wellnessPlaceList(param).then(({data}) => {
          this.handleData(data);
        });
      } else {
        param.isWellnessFood = 1;
        getProducts(param).then(({data}) => {
          this.handleData(data);
        });
      }
    },
    handleData(data) {
      let that = this;
      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 > 4) {
            that.listHeight = "100%";
          }
          if (windowHeight <= 600 && len > 2) {
            that.listHeight = "100%";
          }
        }
      });
    },
    asideTap(index) {
      this.asideIndex = index;
      this.page = 1;
      this.dataList = [];
      this.search();
    },
    goStore(id) {
      uni.navigateTo({
        url: "/pagesInn/inn/innHome?id=" + id
      })
    },
    goGoods(id) {
      uni.navigateTo({
        url: "/pages/shop/GoodsCon/index?id=" + id
      })
    }
  }
}
</script>

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

.pkg-product-list {
  height: 100vh;
  overflow-y: hidden;
  box-sizing: border-box;
  padding-top: 16rpx;
  background: #fff;

  .first-half {
    height: 612rpx;
    z-index: 20;
  }

  .search-box {
    margin-bottom: 32rpx;
  }

  .swiper-box {
    margin-bottom: 32rpx;
  }

  .tab-box {
    margin: 0 32rpx;
    padding-bottom: 32rpx;

    .active {
      width: 342rpx;
      height: 96rpx;
    }

    .inactive {
      width: 342rpx;
      height: 80rpx;
      border-radius: 10rpx;
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, .1);
    }
  }

  .body-box {
    position: relative;
    height: calc(100vh - 612rpx);
    z-index: 10;

    .store {
      image {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 20rpx;
      }

      view {
        color: #333;
      }
    }

    .article-box {
      padding-bottom: 20rpx;
    }

    .img-nodata {
      width: 360rpx;
      height: 360rpx;
      vertical-align: middle;
      margin-top: 60rpx;
    }
  }
}
</style>