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 @click="goShoppingCart()"  class="item animated bounceIn">
        <view class="iconfont icon-gouwuche1">
          <text class="num bg-color-lightred" v-if="CartCount > 0">{{ CartCount > 99 ? '99+' : CartCount }}</text>
        </view>
      </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 class="price-wrap">
              <view >
                <view class="v12-primary-text v12-font-bold">￥{{ item.price }}</view>
              </view>
              <view class="btn" @click.stop="addToCart(item)">
                <image
                  :src="webUrl + '/home/icon-cart.png'"
                  class="img"
                />
              </view>
            </view>
          </view>
        </scroll-view>
        <image
          v-if="dataList.length === 0"
          :src="webUrl + '/20231023131208675588.png'"
          class="img-nodata"
          mode="scaleToFill"
        />
      </view>
    </view>
    <ProductWindow
      ref="attrWindow"
      :attr="attr"
      :cartNum="cart_num"
      :showOk="true"
      @changeFun="changeFun"
      @ok="handleOk"
      paddingBottom="200rpx"
    />
  </view>
</template>

<script>
// 特产-城市商品列表
import { fetchNormal, getCategory } from "@/api/store"
import { pageListenMixins } from '@/mixins/pageListenMixins'
import ProductWindow from '@/components/ProductWindow'
import goCartMixin from '@/mixins/goCartMixins'
import { mapGetters } from 'vuex'
import {
  getCartCount,
} from '@/api/store'
export default {
  name: 'NativeListPage',
  components: {
    ProductWindow
  },
  mixins: [pageListenMixins, goCartMixin],
  data() {
    return {
      CartCount:  0,
      webUrl: this.$VUE_APP_RESOURCES_URL,
      keyword: '',
      dataList: [],
      cityId: null,
      cityName: '',
      page: 1,
      listHeight: 'auto',
      loading: false,
      pageKeyId: ''
    }
  },
  computed: mapGetters(['isLogin', 'location', 'userInfo']),
  onLoad(option) {
    const cityId = option.cityId
    this.cityId = cityId
    this.pageKeyId = `goodsProductList_cityId_${cityId}`
    this.init()
    this.getCartCount()
  },
  methods: {
    // 获取购物车数量
    getCartCount () {
      const isLogin = this.isLogin
      if (isLogin) {
        getCartCount({
          numType: 0
        }).then(res => {
          this.CartCount = res.data.count
        })
      }
    },
    goShoppingCart() {
      this.$yrouter.switchTab('/pages/cart')
    },
    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";
.iconfont{
  position: relative;
}
.item .iconfont.icon-gouwuche1 .num {
  right: -15rpx !important;
  top: -15rpx!important;
  font-size: 20rpx;
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  background: #C52733 !important;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  padding: 2rpx;
}
.pkg-product-list {
  height: 100vh;
  overflow-y: hidden;

  .top-box {
    height: 82rpx;
    background: #fff;
    display: flex;
    align-items: center;
    background-color: #fff;
    box-sizing: border-box;
  }

  .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 40rpx 0;
      }
      .item {
        width: 345rpx;
        height: auto;
        .cover {
          width: 345rpx;
          height: 345rpx;
        }
      }
    }
  }

  .img-nodata {
    position: relative;
    top: 200rpx;
    left: 50%;
    transform: translate(-50%, 0);
    width: 352rpx;
    height: 338rpx;
  }
}
.price-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10rpx 0 0 0;
  .price {
    font-size: 24rpx;
    line-height: 40rpx;
    .price-txt {
      font-size: 40rpx;
      font-weight: bold;
    }
  }
  .price-red {
    margin: 0 10rpx 0 0;
    color: #C52733;
  }
  .price-grey {
    color: #C4C4C4;
  }
  .btn {
    .img {
      display: block;
      width: 48rpx;
      height: 48rpx;
    }
  }
}
</style>