float-list.vue

<template>
  <div class="mapList" :style="{ height: listVisible ? '500px' : 'auto' }">
    <div class="list-search-wrapper">
      <div class="list-search">
        <el-input
          v-model="listVal"
          class="list-input"
          :placeholder="$t('pholder.shopSearch')"
          @focus="listVisibleChange(true)"
          @keyup.enter.native="mallSearch"
        >
          <i slot="suffix" class="el-input__icon el-icon-search" @click="mallSearch" />
        </el-input>
      </div>
      <!-- <el-button v-if="!noMapVisible" class="primary-btn show-list-btn" type="primary" @click="mallSearch">
        {{ $t('button.search') }}
      </el-button> -->
    </div>
    <el-scrollbar
      v-show="listVisible"
      class="float-list-scrollbar"
      wrap-class="list-scrollbar"
      :native="false"
      style="height:100%;"
      :style="{ 'max-height': noMapVisible ? '445px' : '434px', position: 'relative', 'z-index': listVisible ? 1 : -99999 }"
    >
      <div class="mall-list-box" :class="noMapVisible ? 'fl-list-wrapper' : ''">
        <template v-if="!noMapVisible">
          <span class="el-icon-close list-close-btn" @click="listVisibleChange(false)"></span>
        </template>
        <div class="list-wrapper" v-show="JSON.stringify(cityMallList1) !== '{}'">
          <div class="mallBox" v-for="(items,key,index) in cityMallList1" :key="index">
            <p v-if="key ? true : false">
              <span>{{ key }}</span>
            </p>
            <div class="mallListBox">
              <p
                v-for="(item) in items"
                :key="item.id"
                @click="mallRouteHandle(item)"
                :title="item.name"
              >{{ item.name }}</p>
            </div>
          </div>
        </div>
        <div class="list-wrapper" v-show="JSON.stringify(cityMallList2) !== '{}'">
          <div class="mallBox" v-for="(items,key,index) in cityMallList2" :key="index">
            <p v-if="key ? true : false">
              <span>{{ key }}</span>
            </p>
            <div class="mallListBox">
              <p
                v-for="(item) in items"
                :key="item.id"
                @click="mallRouteHandle(item)"
                :title="item.name"
              >{{ item.name }}</p>
            </div>
          </div>
        </div>
        <span
          v-show="JSON.stringify(cityMallList1)=== '{}' && JSON.stringify(cityMallList2) === '{}'"
          style="color: #666;"
        >{{ i18n(noListText) }}</span>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "FloatList",
  props: {
    cityMallList: {
      type: Array,
      default: () => []
    },
    noMapVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      listVal: "",
      cityMallList1: {},
      cityMallList2: {},
      noListText: "",
      listVisible: false
    };
  },
  watch: {
    cityMallList: {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal)
        if (newVal.length) {
          this.buildData(newVal);
        } else {
          this.cityMallList1 = {};
          this.cityMallList2 = {};
          this.noListText = "loading";
        }
      },
      deep: true
    }
  },
  created() {
    this.noListText = "loading";
  },
  mounted() {
    this.listVisible = this.noMapVisible
  },
  methods: {
    buildData(sourceData) {
      this.cityMallList1 = {};
      this.cityMallList2 = {};
      let cityList = {},
        cityMap = JSON.parse(window.sessionStorage.getItem("cityMap")),
        list1 = {},
        list2 = {};
      sourceData.forEach(item => {
        item.cityName = cityMap[item.cityId] || "";
        if (!cityList[item.cityName]) {
          cityList[item.cityName] = [];
        }
        cityList[item.cityName].push(item);
      });
      Object.keys(cityList).forEach(key => {
        let length1 = 0,
          length2 = 0;
        Object.keys(list1).forEach(key1 => {
          length1 += list1[key1].length;
          length1 += 1;
        });
        Object.keys(list2).forEach(key2 => {
          length2 += list2[key2].length;
          length2 += 1;
        });
        if (length1 > length2) {
          list2[key] = cityList[key];
        } else {
          list1[key] = cityList[key];
        }
      });
      setTimeout(() => {
        this.cityMallList1 = list1;
        this.cityMallList2 = list2;
        if (
          JSON.stringify(this.cityMallList1) === "{}" &&
          JSON.stringify(this.cityMallList2) === "{}"
        ) {
          this.noListText = "noData";
        }
      }, 500);
    },
    mallSearch() {
      this.listVisible = true
      this.noListText = "loading";
      this.$api.base
        .mall({
          accountId: this.$cookie.get("accountId"),
          name_like: "%" + this.listVal.replace(/\s+/g, "") + "%",
          status: 1
        })
        .then(res => {
          let result = res.data;
          if (result.code == 200) {
            this.buildData(result.data);
          }
        })
        .catch(err => {
          this.cityMallList1 = {};
          this.cityMallList2 = {};
        });
    },
    i18n(title) {
      if (title) {
        let languageTitle = "echartsTitle." + title;
        return this.$t(languageTitle);
      }
    },
    listVisibleChange(isVisible) {
      this.listVisible = this.noMapVisible || isVisible
    },
    mallRouteHandle(item) {
      this.setSessionLocal("path", "/mall");
      this.$emit("setMall", item);
    }
  }
};
</script>

<style>
.list-input.el-input.is-active .el-input__inner, .list-input .el-input__inner:focus {
  box-shadow: none;
  border-color: #dcdcdc;
}
.float-list-scrollbar {
  max-height: 414px;
  padding-top: 20px;
  background: #fff;
}
</style>

<style scoped>
.show-list-btn {
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 2px;
}
.list-close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}
.list-close-btn:hover {
  color: #66b1ff;
}
</style>