kxmall-ui/kxmall-app-ui/pages/dishFood/dishFood.vue

<template>
  <view class="container">
    <!-- 空白页 -->
    <view style="padding: 150rpx 0rpx;" v-if="loadingType === 'nomore' && tlist.length === 0">
      <missing v-if="loadingType === 'nomore' && tlist.length === 0"
               :imgUrl="'http://qiniuoss.nauzone.cn/%E7%BB%84%203%20%E6%8B%B7%E8%B4%9D@3x.png'" :desc="'暂时没有菜品哦！'"></missing>
    </view>
    <view class="favorite-list">
      <block v-for="(item, index) in tlist" :key="index">
        <navigator class="favorite-item" :class="{'b-b': index!==tlist.length-1}"
                   :url="`../dishFood/dishDetail?id=${item.id}`">
          <view class="image-wrapper">
            <image :src="JSON.parse(item.img)[0].url" :class="[item.loaded]" mode="aspectFill" lazy-load
                   @load="onImageLoad('tlist', index)" @error="onImageError('tlist', index)"></image>
          </view>
          <view class="item-right">
            <text class="clamp title">{{item.title}}</text>
            <text class="attr">{{item.detail}}</text>
            <view class="pro-box">
              <view class="price-box">
                <text class="price" style="color: #fa436a; font-size: 36upx;">评分：{{item.score ? item.score : 0.0}}</text>
                <text style="color: #6B6B6B; font-size: 28upx; margin-top: 10upx;">{{item.sales}}人做过</text>
              </view>
            </view>
          </view>
        </navigator>
      </block>
    </view>
  </view>
</template>

<script>
import missing from '@/components/missing.vue'

export default {
  components: {
    missing
  },
  data() {
    return {
      tlist: [],
      pageNum: 1,
      loadingType: 'more'
    };
  },
  onLoad() {
    this.loadData();
  },
  //下拉刷新
  onPullDownRefresh() {
    this.loadData('refresh');
  },
  //加载更多
  onReachBottom() {
    this.loadData();
  },
  methods: {
    //获取菜品列表
    loadData(type) {
      const that = this;
      if (type === 'refresh') {
        that.pageNum = 1;
        that.tlist = [];
        that.loadingType = 'more';
      }
      if (that.loadingType === 'more') {
        that.loadingType = 'loading';
        that.$api.request('get','dish/composition/app/list', {
          storageId: this.$store.state.storageId,
          pageNum: that.pageNum,
          pageSize: 10
        }).then(res => {
          that.loadingType = that.pageNum < res.total / 10 + (res.total % 10 === 0 ? 0 : 1) ? 'more' : 'nomore';
          that.pageNum++;
          res.rows.forEach(item => {
            that.tlist.push(item);
          });
          if (type === 'refresh') {
            uni.stopPullDownRefresh();
          }
        }).catch(err => {
          that.$api.msg('请求失败，请稍后再试1');
        });
      }
    },
    //监听image加载完成
    onImageLoad(key, index) {
      this.$set(this[key][index], 'loaded', 'loaded');
    },
    //监听image加载失败
    onImageError(key, index) {
      this[key][index].img = '/static/errorImage.jpg';
    }
  }
};
</script>

<style lang="scss">
.container {
  padding-bottom: 134upx;
}

.price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 菜品列表项 */
.favorite-item {
  display: flex;
  position: relative;
  padding: 30upx 40upx;

  .image-wrapper {
    width: 230upx;
    height: 230upx;
    flex-shrink: 0;
    position: relative;

    image {
      border-radius: 8upx;
    }
  }

  .item-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    position: relative;
    padding-left: 30upx;

    .title {
      font-size: $font-base + 2upx;
      color: $font-color-dark;
      height: 40upx;
      line-height: 40upx;
    }

    .attr {
      font-size: $font-sm + 2upx;
      color: $font-color-light;
      height: 50upx;
      line-height: 50upx;
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示为... */
      max-width: 100%; /* 限制最大宽度 */
    }

    .pro-box {
      display: flex;
      align-items: center;
      margin-top: 10upx;
      font-size: $font-sm;
      color: $font-base;
      padding-right: 10upx;

      .price {
        height: 60upx;
        line-height: 60upx;
      }
    }
  }
}
</style>