ycwh/miniapp/pages/yuecai/dish/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="false" bg-color="#e9f0f8"
          placeholder-color="#65371b"></u-search>
      </view>
    </view>
    <u-tabs ref="tabs" :list="tabList" :scrollable="false" :current="currentTab" @change="tabChange" lineColor="#65371b"
      :activeStyle="{color:'#65371b'}" inactiveStyle="{color:'#65371b'}"></u-tabs>
    <view class="search-view">
      <view class="area-selector">
        <u-list height="100%">
          <view class="area-name" :class="{'area-name-active': currentArea==item.code}"
            v-for="(item,index) in areaOptions[cuisineType]" :key="index" @click="areaChange(item.code)">
            {{item.name}}
          </view>
        </u-list>
      </view>
      <view class="search-result">
        <u-list @scrolltolower="scrolltolower" height="100%" lowerThreshold="10">
          <view class="info-list">
            <view class="info-item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
              <view class="info-pic">
                <u-image width="175rpx" height="175rpx" mode="aspectFill" :src="item.cover"></u-image>
              </view>
              <view class="info-title">
                {{item.name}}
              </view>
            </view>
          </view>
          <u-loadmore :status="page.status" :loading-text="page.loadingText" :loadmore-text="page.loadmoreText"
            :nomore-text="page.nomoreText" />
        </u-list>
      </view>
    </view>
  </view>
</template>

<script>
  import themeMixins from '@/pages/yuecai/mixins/themeMixins.js';
  export default {
    mixins: [themeMixins],
    data() {
      return {
        page: {
          current: 1,
          size: 15,
          total: 0,
          // loadmore loading nomore
          status: 'loadmore',
          loadingText: '正在加载中',
          loadmoreText: '上拉加载更多',
          nomoreText: '没有更多了'
        },
        keyword: '',
        list: [],
        tabList: [{
          name: '名店',
        }, {
          name: '名菜'
        }, {
          name: '名点',
        }],
        currentArea: '',
        cuisineType: '',
        areaOptions: {
          'guagnfu': [{
              code: "4401",
              name: "广州市"
            },
            {
              code: "4403",
              name: "深圳市"
            },
            {
              code: "4404",
              name: "珠海市"
            },
            {
              code: "4405",
              name: "汕头市"
            },
            {
              code: "4406",
              name: "佛山市"
            },
            {
              code: "4407",
              name: "江门市"
            },
            {
              code: "4408",
              name: "湛江市"
            },
            {
              code: "4409",
              name: "茂名市"
            },
            {
              code: "4412",
              name: "肇庆市"
            },
            {
              code: "4417",
              name: "阳江市"
            },
            {
              code: "4418",
              name: "清远市"
            },
            {
              code: "4419",
              name: "东莞市"
            },
            {
              code: "4420",
              name: "中山市"
            },
            {
              code: "4453",
              name: "云浮市"
            }
          ],
          'chaozhou': [{
            code: "4405",
            name: "汕头市"
          }, {
            code: "4415",
            name: "汕尾市"
          }, {
            code: "4451",
            name: "潮州市"
          }, {
            code: "4452",
            name: "揭阳市"
          }],
          'kejia': [{
            code: "4402",
            name: "韶关市"
          }, {
            code: "4413",
            name: "惠州市"
          }, {
            code: "4414",
            name: "梅州市"
          }, {
            code: "4416",
            name: "河源市"
          }]
        },
        currentTab: 0
      }
    },
    onLoad(options) {
      this.cuisineType = options.cuisineType || ''
      //
      this.currentTab = 0;
      wx.setNavigationBarTitle({
        title: '名店'
      })
      //
      // switch (options.type) {
      //   case 'restaurant':
      //     this.currentTab = 0;
      //     wx.setNavigationBarTitle({
      //       title: '名店'
      //     })
      //     break;
      //   case 'dish':
      //     this.currentTab = 1;
      //     wx.setNavigationBarTitle({
      //       title: '名菜'
      //     })
      //     break;
      //   case 'snacks':
      //     this.currentTab = 2;
      //     wx.setNavigationBarTitle({
      //       title: '名点'
      //     })
      //     break;
      //   default:
      //     this.currentTab = 0;
      //     wx.setNavigationBarTitle({
      //       title: '名店'
      //     })
      //     break;
      // }

      this.keyword = '';
      this.doRefresh();
    },
    methods: {
      areaChange(areaCode) {
        if (!areaCode) {
          return;
        }
        //
        if (this.currentArea == areaCode) {
          this.currentArea = '';
        } else {
          this.currentArea = areaCode;
        }
        this.doRefresh();
      },
      tabChange(e) {
        this.currentTab = e.index;
        switch (this.currentTab) {
          case 0:
            uni.setNavigationBarTitle({
              title: '名店'
            })
            break;
          case 1:
            uni.setNavigationBarTitle({
              title: '名菜'
            })
            break;
          case 2:
            uni.setNavigationBarTitle({
              title: '名点'
            })
            break;
          default:
            return;
            break;
        }
        this.doRefresh();
      },
      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';
        //
        let listFunc;
        switch (this.currentTab) {
          case 0:
            listFunc = this.$u.api.getRestaurantList;
            break;
          case 1:
            listFunc = this.$u.api.getDishList;
            break;
          case 2:
            listFunc = this.$u.api.getSnacksList;
            break;
          default:
            return;
            break;
        }

        //
        listFunc(this.page.current, this.page.size, {
          name: this.keyword || '',
          cuisineCode: this.cuisineType || '',
          regionId: this.currentArea || ''
        }).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'
          }
        })
      },
      toDetail(id) {
        switch (this.currentTab) {
          case 0:
            uni.navigateTo({
              url: "/pages/yuecai/restaurant/detail/index?id=" + id,
            })
            break;
          case 1:
            uni.navigateTo({
              url: "/pages/yuecai/dish/detail/index?id=" + id,
            })
            break;
          case 2:
            uni.navigateTo({
              url: "/pages/yuecai/snacks/detail/index?id=" + id,
            })
            break;
          default:
            return;
            break;
        }
      }
    },
  }
</script>

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

  .info-list {
    display: flex;
    flex-wrap: wrap;
    background-color: #f4f4f4;

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

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

      .info-title {
        word-break: break-all;
        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;
      }
    }
  }

  .search-view {
    height: calc(100% - 91px);
    display: flex;
  }

  .area-selector {
    height: 100%;
    width: 70px;

    .area-name {
      text-align: center;
      line-height: 35px;
      border-top: 1rpx solid #f0f0f0;
    }

    .area-name-active {
      color: white;
      background-color: #65371b;
      font-weight: bold;
    }
  }

  .search-result {
    width: calc(100% - 70px);
    height: 100%;
  }
</style>