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

<template>
  <view class="width-100 height-100 view-page">
    <view class="p-10 dis-flex flex-y-center flex-x-between">
      <view class="search-left-btn">
        <u-image width="35px" height="35px" mode="aspectFit" src="@/static/images/home/logo.png"></u-image>
      </view>
      <view class="width-100">
        <u-search :clearabled="true" height="35px" placeholder="请输入搜索关键字" v-model="keyword" shape="round"
          search="doSearch" @custom="doSearch" :showAction="true" bg-color="#e9f0f8"
          placeholder-color="#65371b"></u-search>
      </view>
    </view>
    <u-list @scrolltolower="scrolltolower" height="calc(100% - 47px)" lowerThreshold="10">


      <u-swiper height="185" :list="bannerList" @click="goBannerDetail" keyName="cover" :radius="0"></u-swiper>
      <view class="p-l-r-30 p-t-30 dis-flex flex-x-around nav-btns">
        <view class="nav-btn" @click="navTo('professional_style')">
          <view class="nav-btn-icon icon-circle">
            <u-image width="32px" height="32px" mode="aspectFit" src="@/static/images/home/professional.png"></u-image>
          </view>
          <view class="nav-btn-text">专业风采</view>
        </view>
        <view class="nav-btn" @click="navTo('guagnfu')">
          <view class="nav-btn-icon icon-circle">
            <view style="width: 30px;font-size: 28px;font-weight: 28px;">广</view>
            <!-- <u-image width="28px" height="28px" mode="aspectFit" src="@/static/images/home/restaurant.png"></u-image> -->
          </view>
          <view class="nav-btn-text">广府菜</view>
        </view>
        <view class="nav-btn" @click="navTo('chaozhou')">
          <view class="nav-btn-icon icon-circle">
            <view style="width: 30px;font-size: 28px;font-weight: 28px;">潮</view>
            <!-- <u-image width="28px" height="28px" mode="aspectFit" src="@/static/images/home/dish.png"></u-image> -->
          </view>
          <view class="nav-btn-text">潮州菜</view>
        </view>
        <view class="nav-btn" @click="navTo('kejia')">
          <view class="nav-btn-icon icon-circle">
            <view style="width: 30px;font-size: 28px;font-weight: 28px;">客</view>
            <!-- <u-image width="28px" height="28px" mode="aspectFit" src="@/static/images/home/snacks.png"></u-image> -->
          </view>
          <view class="nav-btn-text">客家菜</view>
        </view>

      </view>
      <view class="info-list">
        <view class="dis-flex flex-x-between info-item" v-for="(item, index) in list" :key="index"
          @click="goDetail(item.id)">
          <view class="info-pic">
            <u-image width="96px" height="96px" mode="aspectFill" :src="item.cover"></u-image>
          </view>
          <view class="info-view">
            <view class="info-title">
              {{item.title}}
            </view>
            <!-- <view class="info-subTitle" v-html="item.subTitle"></view> -->
            <text class="info-subTitle">{{item.subTitle}}</text>
            <view class="dis-flex info-bottom">
              <view style="margin-right: 20rpx;">{{item.createTime?item.createTime.substring(0,10):''}}</view>
              <u-icon name="thumb-up" color="#7f7f7f" size="18"></u-icon>
              <view style="margin-right: 20rpx;">{{item.likeNum || 0}}点赞</view>
              <u-icon name="eye" color="#7f7f7f" size="18"></u-icon>
              <view>{{item.views || 0}}阅读量</view>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore :status="page.status" :loading-text="page.loadingText" :loadmore-text="page.loadmoreText"
        :nomore-text="page.nomoreText" />
    </u-list>
  </view>
</template>

<script>
  import themeMixins from '@/pages/yuecai/mixins/themeMixins.js';
  export default {
    mixins: [themeMixins],
    data() {
      return {
        chartOption: {

        },
        bannerList: [],
        //
        page: {
          current: 1,
          size: 10,
          total: 0,
          // loadmore loading nomore
          status: 'loadmore',
          loadingText: '正在加载中',
          loadmoreText: '上拉加载更多',
          nomoreText: '没有更多了'
        },
        keyword: '',
        list: []
      }
    },
    onLoad(options) {},
    onShow() {
      this.getBanners();
      this.doRefresh();
    },
    methods: {
      navTo(type = '') {
        if (!type) {
          return;
        }
        if (type == 'professional_style') {
          uni.navigateTo({
            url: "/pages/yuecai/professional_style/index?type=" + type,
          })
        } else {
          uni.navigateTo({
            url: "/pages/yuecai/dish/index?cuisineType=" + type,
          })
        }

        // switch (type) {
        //   case 'restaurant':
        //     uni.navigateTo({
        //       url: "/pages/yuecai/restaurant/index?type=" + type,
        //     })
        //     break;
        //   case 'snacks':
        //     uni.navigateTo({
        //       url: "/pages/yuecai/snacks/index?type=" + type,
        //     })
        //     break;
        //   case 'dish':
        //     uni.navigateTo({
        //       url: "/pages/yuecai/dish/index?type=" + type,
        //     })
        //     break;
        //   default:
        //     break;
        // }
      },
      getBanners() {
        this.$u.api.getInformationList(0, 6, {}).then(res => {
          this.bannerList = res.data.records || []
        })
      },
      scrolltolower() {
        this.loadmore()
      },
      loadmore() {
        this.page.current++;
        this.getList();
      },
      doRefresh() {
        this.page.current = 1;
        this.page.status = 'loadmore'
        this.list = [];
        this.getList();
      },
      getList() {
        if (this.page.status == 'loading' || this.page.status == 'nomore') {
          // 防止重复下拉
          return;
        }
        this.page.status = 'loading';
        this.$u.api.getInformationList(this.page.current, this.page.size, {}).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'
          }
        })
      },
      goDetail(id) {
        if (id <= 0) {
          return;
        }
        uni.navigateTo({
          url: "/pages/yuecai/information/detail/index?id=" + id,
        })
      },
      goBannerDetail(index) {
        if (index < 0) {
          return;
        }
        uni.navigateTo({
          url: "/pages/yuecai/information/detail/index?id=" + this.bannerList[index].id,
        })
      },
      doSearch() {
        uni.navigateTo({
          url: "/pages/yuecai/search/index2?keyword=" + this.keyword
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .search-left-btn {
    width: 35px;
    min-width: 35px;
    height: 35px;
    margin-right: 5px;
    box-sizing: border-box;
  }

  .icon-circle {
    border-radius: 50%;
    border: 4rpx solid #65371b;
    color: #65371b;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-btns {
    border-bottom: 1rpx solid #65371b;
    margin-bottom: 20rpx;
    padding-bottom: 50rpx;

    .nav-btn {
      width: 150rpx;

      .nav-btn-icon {
        margin: auto;
        width: 110rpx;
        height: 110rpx;
      }

      .nav-btn-text {
        width: 100%;
        color: #65371b;
        margin-top: 5rpx;
        font-weight: bolder;
        text-align: center;
      }
    }
  }

  .info-list {
    .info-item {
      padding: 20rpx;

      .info-pic {
        width: 96px;
        height: 96px;
        background: bisque;
      }

      .info-view {
        width: calc(100% - 105px);

        .info-subTitle {
          height: 50px;
          word-break: break-all;
          color: #65371b;
          font-size: 24rpx;
          font-weight: 300;
          line-height: 34rpx;
          word-spacing: 2rpx;
          overflow: hidden;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          line-clamp: 3;
          -webkit-box-orient: vertical;
        }

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

        .info-bottom {
          color: #7f7f7f;
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
</style>