H5/pages/map/model/search.vue

<template>
  <view :class="['search-content']">
    <view class="search-box">
      <view class="search-input-box">
        <svg
          t="1733904658291"
          class="search-icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5981"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            d="M174.545 465.455c0-18.619 16.291-34.91 34.91-34.91s34.909 16.291 34.909 34.91c0 121.018 100.072 221.09 221.09 221.09 18.619 0 34.91 16.291 34.91 34.91s-16.291 34.909-34.91 34.909c-160.581 0-290.909-130.328-290.909-290.91z m290.91 360.727c200.145 0 360.727-160.582 360.727-360.727S665.6 104.727 465.455 104.727 104.727 265.31 104.727 465.455 265.31 826.182 465.455 826.182z m323.49-76.8L961.164 921.6c13.963 13.964 13.963 34.91 0 48.873-13.964 13.963-34.91 13.963-48.873 0L737.745 795.927c-74.472 60.51-169.89 97.746-272.29 97.746C228.073 896 34.909 702.836 34.909 465.455S228.073 34.909 465.455 34.909 896 228.073 896 465.455c0 109.381-39.564 209.454-107.055 283.927z"
            p-id="5982"
          ></path>
        </svg>
        <input
          confirm-type="search"
          ref="searchInputRef"
          class="search-input"
          :auto-blur="true"
          type="text"
          placeholder="请输入关键字"
          v-model="locationName"
          @blur="onSearchFocus(true)"
          placeholder-class="placeholder"
        />
      </view>
      <view class="search-select">
        <view class="select-item" @click.stop="$refs.cityRef.open()">
          <text class="item-text one-row">{{
            params.codeLabel || "办理区域"
          }}</text>
          <u-icon
            name="arrow-down-fill"
            :color="downFillColor"
            size="14"
          ></u-icon>
        </view>
        <view class="select-item" @click.stop="$refs.mapTypeRef.open()">
          <text class="item-text one-row">{{
            params.typeName || "位置类型"
          }}</text>
          <u-icon
            name="arrow-down-fill"
            :color="downFillColor"
            size="14"
          ></u-icon>
        </view>
        <view v-if="mapConfig.navigationName" class="select-item" @click.stop="$refs.mapAdRef.open()">
          <text class="item-text one-row">{{mapConfig.navigationName}}</text>
          <u-icon
            name="arrow-down-fill"
            :color="downFillColor"
            size="14"
          ></u-icon>
        </view>
      </view>
    </view>

    <!-- 选择地址 -->
    <city
      ref="cityRef"
      :code.sync="params.code"
      @cityName="(e) => (params.codeLabel = e)"
    />
    <!-- 选择位置类型 -->
    <mapType
      ref="mapTypeRef"
      :mapTypeId.sync="params.mapTypeId"
      @typeName="(e) => (params.typeName = e)"
    />
    <!-- 选择高频事项指引 -->
    <mapAd
      ref="mapAdRef"
      :mapAdId.sync="params.mapAdId"
      @mapAdSelect="mapAdSelect"
    />
  </view>
</template>

<script>
import { EventBus } from "@/utils/vueBus.js";
import { getLocation } from "@/utils/tool.js";
import $confog from "@/config/index.js";
import { getMapMatterDetail_Api } from "@/api/map.js";
export default {
  props: {
    mapConfig: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      locationPower: false,
      locationName: undefined,
      selfLatitude: undefined,
      selfLongitude: undefined,
      // selfLatitude: 30.482926,
      // selfLongitude: 114.414431,
      params: {
        code: undefined,
        codeLabel: undefined,

        mapTypeId: undefined,
        typeName: undefined,
      },

      LocationTimeout: null,
      SearchTimeout: null,
      type: $confog.type,
      downFillColor: "#808080",

      getLocationNum: 1,
    };
  },
  created() {
    this.type = $confog.type;
    this.downFillColor = $confog.type === "H6" ? "#808080" : "#101010";
    this.init();
  },
  mounted() {
    EventBus.$on("TianDiTuSearch", (callBack) => {
      this.handleSearch(callBack);
    }); // 确保在组件销毁前移除事件监听
  },
  beforeDestroy() {
    EventBus.$off("TianDiTuSearch");
  },
  methods: {
    init() {
      clearTimeout(this.LocationTimeout);
      this.LocationTimeout = null;
      this.LocationTimeout = setTimeout(() => {
        getLocation()
          .then((res) => {
            const { longitude, latitude } = res || {};
            if (longitude && latitude) {
              this.selfLatitude = latitude;
              this.selfLongitude = longitude;
              clearTimeout(this.LocationTimeout);
              this.LocationTimeout = null;
              this.onSearchFocus();
              this.$store.dispatch("updateUseLocation", {
                longitude,
                latitude,
              });
            } else {
              this.getLocationNum++;
              if (this.getLocationNum <= 5) {
                this.init();
              }
            }
          })
          .catch((err) => {
            this.getLocationNum++;
            if (this.getLocationNum <= 5) {
              this.init();
            }
          });
      }, 1000);
    },
    /**
     * 获取定位
     * 有callBack，着是手动定位，地图会平移调用搜索，所以无需再次搜索
     * 没有callBack，则需要手动收索
     *
     */

    handleSearch(callBack) {
      try {
        uni.showLoading({
          mask: true,
        });
        getLocation()
          .then((res) => {
            const { longitude, latitude } = res || {};
            if (longitude && latitude) {
              this.selfLatitude = latitude;
              this.selfLongitude = longitude;
            }
            callBack &&
              callBack({ longitude: res.longitude, latitude: res.latitude });
          })
          .catch((err) => {
            if (this.selfLatitude && this.selfLongitude) {
              callBack &&
                callBack({
                  longitude: this.selfLatitude,
                  latitude: this.selfLongitude,
                });
            } else {
              uni.showToast({
                title: "获取定位失败",
                icon: "none",
              });
            }
          })
          .finally(() => {
            uni.hideLoading();
          });
      } catch (error) {
        console.log(999977999, error);
        //TODO handle the exception
      }
    },
    onSearchFocus(search = false) {
      try {
        clearTimeout(this.SearchTimeout);
        this.SearchTimeout = null;
        this.SearchTimeout = setTimeout(() => {
          let pms = {};
          try {
            if (this.params.code) {
              pms.areaCode = this.params.code || undefined;
            }
            pms.mapTypeId = this.params.mapTypeId;
            pms.selfLatitude = this.selfLatitude;
            pms.selfLongitude = this.selfLongitude;
            pms.locationName = this.locationName;
            pms.search = search;
          } catch (error) {
            console.log("定位收索11 error", error);
            //TODO handle the exception
          }
          this.$emit("handleSearch", pms);
        }, 150);
      } catch (error) {
        console.log(999977999, error);
        //TODO handle the exception
      }
    },
    getVal() {
      return {};
    },
    mapAdSelect(val) {
      const { adId, jumpType, outsideAddress, resourceModelId } = val;
      switch (jumpType) {
        case 0: //图文
        case 1: //图文&视频
          uni.navigateTo({
            url: "/pages/map/model/adDetail?mapAdId=" + adId,
          });
          break;
        case 2: //内部资源
          getMapMatterDetail_Api({ id: resourceModelId }).then((result) => {
            uni.navigateTo({
              url: "/pages/map/matterDetails",
              success: function (res) {
                // 通过eventChannel向被打开页面传送数据
                res.eventChannel.emit("acceptDataFromOpenerPage", result);
              },
            });
          });
          return;
          uni.navigateTo({
            url: "/pages/pages/map/adDetail?mapAdId=" + adId,
          });
          break;
        case 3: //外部链接
          window.open(outsideAddress, "_blank");
          break;
      }
    },
    getMapList() {},
  },
  watch: {
    params: {
      handler(newV, oldV) {
        this.onSearchFocus(true);
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
$radius_: 20rpx;
$heig_: 80rpx;

.search-box {
  // padding: 20rpx 20rpx 0;
  position: fixed;
  left: 20rpx;
  top: 20rpx;
  right: 20rpx;
  z-index: 999;
  background-color: #fff;
  border-radius: $radius_;
  overflow: hidden;

  .search-input-box {
    width: 100%;
    height: $heig_;
    border-radius: $radius_;
    box-shadow: 0rpx -10rpx 30rpx #ccc;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #020202;
    font-size: 28rpx;

    .search-icon {
      width: 45rpx;
      height: 45rpx;

      path {
        fill: #666666;
      }
    }

    .search-input {
      padding-left: 10px;
    }
    .placeholder {
      color: #b3b3b3;
    }
  }

  .search-select {
    // border-top: 1rpx solid #E8E8E8;
    width: 100%;
    height: $heig_;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 0 28rpx;

    .select-item {
      // width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      padding: 0 10rpx;
      color: #1a1a1a;
      min-width: 28rpx;
      margin-right: 65rpx;

      .item-text {
        display: inline-block;
        padding-right: 14rpx;
        overflow: hidden;
      }
      &:last-child {
        margin: 0;
      }
    }
  }
}

.h6-search-content {
  .search-select {
    .item-text {
      color: #929292;
    }
  }
}
</style>