ycwh/miniapp/pages/yuecai/search/index1.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>
    <view v-show="currentTab != 3">
      <view style="width: 100%;height: 150px;">
        <l-echart class="width-100 height-100" ref="chart" @finished="init"></l-echart>
      </view>
      <view class="area-title">
        <u-icon name="map-fill" color="#65371b"></u-icon>
        <view class="area-title-text">{{currentAreaName || '广东省'}}</view>
      </view>
    </view>
    <u-tabs ref="tabs" :list="tabList" :scrollable="false" :current="currentTab" @change="tabChange" lineColor="#65371b"
      :activeStyle="{color:'#65371b'}" inactiveStyle="{color:'#65371b'}"></u-tabs>
    <u-list @scrolltolower="scrolltolower" :height="currentTab != 3?'calc(100% - 283px)':'calc(100% - 59px)'"
      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 || item.title}}
          </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 * as echarts from '@/static/echarts.min'

  import * as mapJson from '@/mockdata/mapdata.json'; /*echart.min.js为在线定制*/
  let myChart;
  export default {
    data() {
      return {
        option: {
          title: {
            show: false,
            text: '',
            subtext: '',
            sublink: '',
            left: 'right'
          },
          tooltip: {
            show: false,
            trigger: 'item',
            formatter: '{b}'
          },
          toolbox: {
            show: false,
          },
          visualMap: {
            show: false,
            min: 1,
            max: 3,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#91abd7', '#e57e80', '#ad9a92']
            }
          },
          series: [{
            name: 'GD',
            type: 'map',
            roam: true,
            //
            // 缩放范围限制
            scaleLimit: {
              min: 2,
              max: 5
            },
            map: 'GD',
            data: [{
              name: '汕尾市',
              value: 3,
            }, {
              name: '云浮市',
              value: 1
            }, {
              name: '河源市',
              value: 2
            }, {
              name: '梅州市',
              value: 2
            }, {
              name: '韶关市',
              value: 2
            }, {
              name: '阳江市',
              value: 1
            }, {
              name: '肇庆市',
              value: 1
            }, {
              name: '清远市',
              value: 1
            }, {
              name: '茂名市',
              value: 1
            }, {
              name: '潮州市',
              value: 3
            }, {
              name: '揭阳市',
              value: 3
            }, {
              name: '湛江市',
              value: 1
            }, {
              name: '江门市',
              value: 1
            }, {
              name: '珠海市',
              value: 1
            }, {
              name: '汕头市',
              value: 3
            }, {
              name: '惠州市',
              value: 2
            }, {
              name: '中山市',
              value: 1
            }, {
              name: '佛山市',
              value: 1
            }, {
              name: '东莞市',
              value: 1
            }, {
              name: '广州市',
              value: 1
            }, {
              name: '深圳市',
              value: 1
            }],
            emphasis: {
              label: {
                show: true
              }
            },
          }],
        },

        //
        page: {
          current: 1,
          size: 15,
          total: 0,
          // loadmore loading nomore
          status: 'loadmore',
          loadingText: '正在加载中',
          loadmoreText: '上拉加载更多',
          nomoreText: '没有更多了'
        },
        keyword: '',
        areaCode: '',
        currentAreaName: '',
        list: [],
        tabList: [{
          name: '名店',
        }, {
          name: '名菜'
        }, {
          name: '名点',
        }, {
          name: '专业风采'
        }],
        currentTab: 0
      }
    },
    onLoad(options) {
      uni.hideLoading()
      this.doRefresh()
    },
    onShow() {},
    methods: {
      async init() {
        // chart 图表实例不能存在data里
        echarts.registerMap('GD', mapJson, {});
        const chart = await this.$refs.chart.init(echarts);
        chart.setOption(this.option)
        chart.on('click', this.clickMap);
        myChart = chart;
      },

      clickMap(e) {
        let currentAcode = '',
          currentAreaName = '';
        if (e.data && e.data.name) {
          /** 通过名称匹配 */
          for (let i = 0; i < mapJson.features.length; i++) {
            let p = mapJson.features[i].properties;
            if (p.name == e.data.name) {
              currentAcode = p.adcode.toString().substring(0, 4);
              currentAreaName = p.name;
              break;
            }
          }
        }
        if (this.currentTab != 3 && this.areaCode != currentAcode) {
          this.areaCode = currentAcode;
          this.currentAreaName = currentAreaName;
          this.areaSearch();
        } else if (this.currentTab != 3 && this.areaCode == currentAcode) {
          this.areaCode = '';
          this.currentAreaName = ''
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: e.seriesIndex
          })
          this.areaSearch();
        }
      },
      tabChange(e) {
        this.currentTab = e.index;
        this.areaSearch();
      },
      scrolltolower() {
        this.loadmore()
      },
      loadmore() {
        this.page.current++;
        this.getList();
      },
      areaSearch() {
        this.page.current = 1;
        this.page.status = 'loadmore';
        this.list = [];
        this.getList();
      },
      doRefresh() {
        this.page.current = 1;
        this.page.status = 'loadmore';
        this.areaCode = '';
        this.list = [];
        this.getList();
      },
      getList() {
        if (this.page.status == 'loading' || this.page.status == 'nomore') {
          // 防止重复下拉
          return;
        }
        this.page.status = 'loading';
        //
        let listFunc, params = {};
        switch (this.currentTab) {
          case 0:
            listFunc = this.$u.api.getRestaurantList;
            params.name = this.keyword || '';
            params.regionId = this.areaCode || '';
            break;
          case 1:
            listFunc = this.$u.api.getDishList;
            params.name = this.keyword || '';
            params.regionId = this.areaCode || '';
            break;
          case 2:
            listFunc = this.$u.api.getSnacksList;
            params.name = this.keyword || '';
            params.regionId = this.areaCode || '';
            break;
          case 3:
            listFunc = this.$u.api.getProfessionalStyleList;
            params.title = this.keyword || '';
            break;
          default:
            return;
            break;
        }
        //
        listFunc(this.page.current, this.page.size, params).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;
          case 3:
            uni.navigateTo({
              url: "/pages/yuecai/professional_style/detail/index?id=" + id,
            })
            break;
          default:
            return;
            break;
        }

      }
    },
  }
</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;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .area-title {
    width: calc(100% - 40px);
    margin: auto;
    display: flex;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 2rpx solid #65371b;

    .area-title-text {
      margin-left: 10px;
      color: #65371b;
    }
  }

  .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 {
    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 {
        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;
      }
    }
  }
</style>