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
          v-model="keyword"
          type="text"
          placeholder="搜索商品"
          placeholder-style="color:#949494"
          @confirm="searchHandle"
        >
        <image
          class="icon"
          :src="webUrl+'/20220903142935869059.png'"
          mode="scaleToFill"
          @click="searchHandle"></image>
      </view>
    </view>
    <view class="line-location flex ai-center">
      <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
      <text class="bold">当前城市：{{ cityName }}</text>
    </view>
    <view class="body-box">
      <view class="article-box">
        <scroll-view
          :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"
            class="item"
            @click="goodItemClick(item.id)"
          >
            <image
              :src="item.image"
              class="cover"
              mode="scaleToFill"
            />
            <view class="name more-t">{{ item.storeName }}</view>
            <view class="price bold">￥{{ item.price }}</view>
          </view>
        </scroll-view>
        <image
          v-if="dataList.length === 0"
          :src="webUrl + '/20231023131208675588.png'"
          class="img-nodata"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<script>
import { fetchNormal, getCategory } from "@/api/store"
export default {
  name: 'NativeListPage',
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      keyword: '',
      dataList: [],
      cityId: null,
      cityName: '',
      page: 1,
      listHeight: 'auto',
      loading: false
    }
  },
  onLoad(option) {
    this.cityId = option.cityId
    this.init()
  },
  methods: {
    init() {
      const memCityName = uni.getStorageSync('cityName')
      if (memCityName.length) {
        this.cityName = memCityName
        uni.removeStorageSync('cityName')
      }
      this.search(1)
    },
    onLower() {
      if (this.loading) {
        return
      }
      this.page++
      this.search()
    },
    searchHandle() {
      // fix bug#1828
      this.page = 1
      this.search()
    },
    search() {
      const _this = this
      _this.loading = true
      fetchNormal({
        isGood: 1,
        page: _this.page,
        keyword: _this.keyword,
        cityName: _this.cityName
      }).then(({data}) => {
        if (_this.page === 1) {
          _this.dataList = []
        }
        _this.dataList = _this.dataList.concat(data)
        _this.loading = false
        uni.getSystemInfo({
          success: function (res) {
            const len = _this.dataList.length
            const { windowHeight } = res
            _this.listHeight = 'auto'
            if (windowHeight > 600 && len > 6) {
              _this.listHeight = '100%'
            }
            if (windowHeight <= 600 && len > 4) {
              _this.listHeight = '100%'
            }
          }
        })
      }).catch(err => {
        _this.loading = false
        uni.showToast({
          title: err + '',
          icon: 'none',
          mask: false,
          duration: 1500
        })
      })
    },
    goodItemClick(productId) {
      if (!productId) {
        return
      }
      uni.navigateTo({
        url: `/pages/shop/GoodsCon/index?id=${productId}&from=techan`
      })
    }
  }
}
</script>

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

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

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

  .line-location {
    height: 90rpx;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    background-color: #fff;

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

  .body-box {
    height: calc(100vh - 82rpx - 90rpx);
    box-sizing: border-box;

    .article-box {
      width: 100%;
      .list {
        padding: 0 0 20rpx 0;
      }
      .item {
        width: 345rpx;
        height: 465rpx;
        .cover {
          width: 345rpx;
          height: 345rpx;
        }
      }
    }
  }

  .img-nodata {
    position: relative;
    top: 200rpx;
    left: 50%;
    transform: translate(-50%, 0);
    width: 352rpx;
    height: 338rpx;
  }
}
</style>