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
          v-model="keyword"
          type="text"
          placeholder="搜索内容"
          placeholder-style="color:#949494"
          @confirm="searchClick"
        >
        <image
          :src="webUrl+'/20220903142935869059.png'"
          class="icon"
          mode="scaleToFill"
          @click="searchClick"
        />
      </view>
      <swiper
        v-if="bannerList.length > 0"
        indicator-dots
        indicator-color="rgba(255,255,255,.3)"
        indicator-active-color="#fff"
        autoplay
        circular
        class="swiper-box"
      >
        <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
        v-show="tabIndex === 0"
        class="tab-box flex jc-center ai-center"
      >
        <image
          src="/static/images/v6/btn_active_left.png"
          class="active"
          @click="changeTab(0)"
        />
        <image
          src="/static/images/v6/btn_right.png"
          class="inactive"
          @click="changeTab(1)"
        />
      </view>
      <view
        v-show="tabIndex === 1"
        class="tab-box flex jc-center ai-center"
      >
        <image
          src="/static/images/v6/btn_left.png"
          class="inactive"
          @click="changeTab(0)"
        />
        <image
          src="/static/images/v6/btn_active_right.png"
          class="active"
          @click="changeTab(1)"
        />
      </view>
    </view>
    <view class="body-box">
      <view class="aside-box flex-0">
        <view
          v-for="(item, index) in asideList"
          :key="index"
          :class="index === asideIndex ? 'active' : ''"
          class="item flex jc-center ai-center"
          @click="asideTap(index)"
        >
          <text class="one-t">{{ item.label }}</text>
        </view>
      </view>
      <view class="article-box">
        <scroll-view
          v-if="dataList.length > 0"
          :style="{'height':listHeight}"
          :enable-flex="true"
          :scroll-anchoring="true"
          :scroll-y="true"
          :scroll-with-animation="true"
          :enable-back-to-top="true"
          class="list flex flex-wrap"
          @scrolltolower="onLower"
        >
          <view
            v-for="(item, index) in dataList"
            :key="index"
          >
            <view
              v-if="tabIndex === 0"
              class="item item-store"
              @click="goStore(item.id)"
            >
              <image
                :src="item.cover + (item.coverType === 2 ? '?vframe/jpg/offset/1' : '')"
                class="cover"
                mode="scaleToFill"
              />
              <view class="name one-t">{{ item.content }}</view>
              <view class="price store flex ai-center" style="width: 100%;">
                <image
                  :src="item.logo"
                  class="flex-0"
                  mode="scaleToFill"
                />
                <view class="one-t">{{ item.name }}</view>
              </view>
            </view>
            <view
              v-else
              class="item"
              @click="goGoods(item.id)"
            >
              <image
                :src="item.image"
                class="cover"
                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
            v-if="tabIndex === 0"
            :src="webUrl+'/20240106205121705480.png'"
            class="img-nodata"
            mode="scaleToFill"
          />
          <image
          v-else
          :src="webUrl+'/20240219170514226953.png'"
          class="img-nodata"
          mode="scaleToFill"
        />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 康养食材
import { fetchCity } from '@/api/wenwan'
import { wellnessFood, wellnessPlaceList } from '@/api/product'
import { getProducts } from '@/api/store'
import { pageListenMixins } from '@/mixins/pageListenMixins'
export default {
  name: 'HealthList',
  mixins: [pageListenMixins],
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      tabIndex: 0,
      keyword: '',
      page: 1,
      listHeight: 'auto',
      bannerList: [],
      asideList: [],
      asideIndex: 0,
      dataList: [],
      pageKeyId: Object.freeze('wellnessFoodIndex')
    }
  },
  onLoad() {
    this.init()
  },
  methods: {
    init() {
      wellnessFood().then(({data}) => {
        this.bannerList = data.banner
      })
      fetchCity(4).then(({data}) => {
        this.asideList = data.group
        this.searchReq()
      })
    },
    changeTab(index) {
      if (this.asideList.length === 0) return
      if (index === this.tabIndex) return
      this.page = 1
      this.dataList = []
      this.tabIndex = index
      this.searchReq()
    },
    onLower() {
      this.page++
      this.searchReq()
    },
    searchClick() {
      this.page = 1
      this.searchReq()
    },
    searchReq() {
      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) {
      const that = this
      if (this.page === 1) {
        this.dataList = []
      }
      this.dataList = this.dataList.concat(data)
      uni.getSystemInfo({
        success: function (res) {
          const len = that.dataList.length
          const {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.searchReq()
    },
    goStore(id) {
      uni.navigateTo({
        url: '/pagesInn/inn/innHome?id=' + id + '&from=wellness'
      })
    },
    goGoods(id) {
      uni.navigateTo({
        url: '/pages/shop/GoodsCon/index?id=' + id + '&from=wellness'
      })
    }
  }
}
</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>