ycwh/miniapp/pages/yuecai/collection/index.vue

<template>
  <view class="width-100 height-100 view-page">
    <u-tabs ref="tabs" :list="tabList" :scrollable="false" :current="currentTab" @change="tabChange" lineColor="#65371b"
      :activeStyle="{color:'#65371b'}" inactiveStyle="{color:'#65371b'}"></u-tabs>
    <view class="info-list">
      <view class="info-item" v-for="(item, index) in 10" :key="index">
        <view class="info-pic"></view>
        <view class="info-title">
          标题标题标题标
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import themeMixins from '@/pages/yuecai/mixins/themeMixins.js';
  export default {
    mixins: [themeMixins],
    data() {
      return {
        page: {
          loading: false,
          current: 1,
          size: 10,
          total: 0,
          // loadmore loading nomore
          status: 'loadmore',
          loadingText: '正在加载中',
          loadmoreText: '上拉加载更多',
          nomoreText: '没有更多了'
        },
        keyword: '',
        list: [],
        tabList: [{
          name: '名菜'
        }, {
          name: '名店',
        }, {
          name: '名点',
        }],
        currentTab: 0
      }
    },
    onLoad(options) {
      this.collectionType = options.type || '';
    },
    onShow() {
      this.keyword = '';
      this.doRefresh();
    },
    methods: {
      scrolltolower() {
        this.loadmore()
      },
      loadmore() {
        this.page.current++;
        this.getCollectionList();
      },
      doRefresh() {
        this.page.current = 1;
        this.page.status = 'loadmore'
        this.list = [];
        this.getCollectionList();
      },
      getCollectionList() {
        if (this.page.status == 'loading' || this.page.status == 'nomore') {
          // 防止重复下拉
          return;
        }
        this.page.status = 'loading';
        //
        this.$u.api.getCollectionList(this.page.current, this.page.size, {
          collectType: this.collectionType || ''
        }).then(res => {
          if (res.data.records && res.data.records.length > 0) {
            this.list.push(...res.data.records)
          }
          this.page.total = res.data.total || 0;
          if (this.page.size * this.page.current >= res.data.total) {
            this.page.status = 'nomore'
          } else {
            this.page.status = 'loadmore'
          }
        }).catch(e => {
          this.page.status = 'loadmore'
        })
      },
      toDetail(id) {
        if (this.collectionType == 'dish') {
          uni.navigateTo({
            url: "/pages/yuecai/dish/detail/index?id=" + id,
          })
        } else if (this.collectionType == 'snacks') {
          uni.navigateTo({
            url: "/pages/yuecai/snacks/detail/index?id=" + id,
          })
        } else if (this.collectionType == 'restaurant') {
          uni.navigateTo({
            url: "/pages/yuecai/restaurant/detail/index?id=" + id,
          })
        }
      },
      deleteCollection(id, index) {
        if (this.loading) {
          return;
        }
        this.loading = true;
        this.$u.api.deleteCollection(id).then(res => {
          this.list.splice(index, 1);
          this.loading = false;
        }).catch(e => {
          this.loading = false;
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .view-page {
    overflow: hidden;
  }

  .info-list {
    display: flex;
    flex-wrap: wrap;

    .info-item {
      padding: 20rpx;
      width: 33%;
      box-sizing: border-box;

      .info-pic {
        margin: auto;
        width: 175rpx;
        height: 175rpx;
        background: bisque;
      }

      .info-title {
        color: #65371b;
        font-size: 24rpx;
        font-weight: 300;
        line-height: 47rpx;
        word-spacing: 2rpx;
        overflow: hidden;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }

  .info-list {
    display: flex;
    flex-wrap: wrap;

    .info-item {
      padding: 20rpx;
      width: 33%;
      box-sizing: border-box;

      .info-pic {
        margin: auto;
        width: 175rpx;
        height: 175rpx;
        background: bisque;
      }

      .info-title {
        text-align: center;
        color: #65371b;
        font-size: 24rpx;
        font-weight: 300;
        line-height: 47rpx;
        word-spacing: 2rpx;
        overflow: hidden;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
</style>