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>
    <!-- <u-swiper height="185" :list="bannerList" @click="clickInfo" keyName="cover"></u-swiper> -->
    <view style="width: 100%;height: 250px;">
      <qiun-data-charts type="map" :opts="mapOpts" :chartData="mapDataColumn" @getIndex="clickMap" />
    </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="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';

  import mapdata from '@/mockdata/mapdata.json';
  export default {
    mixins: [themeMixins],
    data() {
      return {
        mapOpts: {
          timing: "easeOut",
          duration: 1000,
          rotate: false,
          rotateLock: false,
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [0, 0, 0, 0],
          fontSize: 13,
          fontColor: "#666666",
          dataLabel: false,
          dataPointShape: true,
          dataPointShapeType: "solid",
          touchMoveLimit: 60,
          enableScroll: false,
          enableMarkLine: false,
          extra: {
            map: {
              border: true,
              borderWidth: 1,
              borderColor: "#666666",
              fillOpacity: 0.6,
              activeBorderColor: "#F04864",
              activeFillColor: "#FACC14",
              activeFillOpacity: 1,
              mercator: false,
              active: true,
              activeTextColor: "#FFFFFF"
            },
            tooltip: {
              showBox: true,
              showArrow: true,
              showCategory: false,
              borderWidth: 0,
              borderRadius: 0,
              borderColor: "#000000",
              borderOpacity: 0.7,
              bgColor: "#000000",
              bgOpacity: 0.7,
              gridType: "solid",
              dashLength: 4,
              gridColor: "#CCCCCC",
              boxPadding: 3,
              fontSize: 13,
              lineHeight: 20,
              fontColor: "#FFFFFF",
              legendShow: true,
              legendShape: "auto",
              splitLine: true,
              horizentalLine: false,
              xAxisLabel: false,
              yAxisLabel: false,
              labelBgColor: "#FFFFFF",
              labelBgOpacity: 0.7,
              labelFontColor: "#666666"
            }
          }
        },
        mapDataColumn: {},
        //
        chartOption: {

        },
        keyword: '',
        bannerList: [],
        page: {},
        list: [],
        tabList: [{
          name: '专业风采'
        }, {
          name: '名菜'
        }, {
          name: '名店',
        }, {
          name: '名点',
        }],
        currentTab: 0
      }
    },
    onReady() {

      setTimeout(() => {
        let md = {
          visualMap: {
            min: 800,
            max: 50000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: mapdata.features
        };
        this.mapDataColumn = JSON.parse(JSON.stringify(md));
      }, 5000);
    },
    onLoad(options) {},
    onShow() {
      this.getBanners()
    },
    methods: {
      clickMap(e) {
        debugger
      },
      tabChange(index) {
        this.current = index;
      },
      getBanners() {
        this.$u.api.getInformationList(0, 6, {}).then(res => {
          this.bannerList = res.data.records || []
        })
      },
      clickInfo(index) {
        if (index < 0) {
          return;
        }
        uni.navigateTo({
          url: "/pages/yuecai/information/detail/index?id=" + this.bannerList[index].id,
        })
      },
      doSearch() {

      }
    },
  }
</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;
  }

  .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 {
        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>