zx_flk_app/pages/service/service.vue

<template>
  <view class="service-main">
    <map
      class="my_app"
      id="myMap"
      :longitude="myLocation.longitude"
      :latitude="myLocation.latitude"
      :scale="14"
      show-location
      enable-3D
      show-compass
      enable-overlooking
      :enable-satellite="false"
      :markers="nearStoreOrCabinetList"
      :polyline="polylines"
      :enable-traffic="false"
      style="width: 100%; height: calc(50vh - 0rpx)"
    >
      <block  v-for="(item, index) in nearStoreOrCabinetList" :key="index">
        <cover-view
          v-if="selectType === 'cabinet'"
          slot="callout"
          :marker-id="item.id"
          class="mark blue_bg"
        >
          {{ item.available_cnt }}
        </cover-view>
      </block>
    </map>
    <!-- 地图控件 -->
    <cover-view
      :class="[
        'control-icon-view',
        'flex-row',
        isSearch ? 'flex-between' : 'flex-end',
      ]"
    >
      <cover-view v-if="isSearch" class="seach-return-view flex-row"
        ><cover-image
          class="seach-return-img"
          src="https://qiniu.bms16.com/Fjpnr3cH9ZqTQrGlw3Ywp3qbJGIG"
        ></cover-image
      ></cover-view>
      <cover-view @tap="moveToLocation" class="current-location-view flex-row"
        ><cover-image
          class="current-location-icon"
          src="https://qiniu.bms16.com/FgLe8FKDOzgt3wxi2lZt-yQGmbP3"
        ></cover-image
      ></cover-view>
    </cover-view>
    <view class="store-cabinet-block">
      <view class="block-p"></view>
      <view v-if="isSearch" class="search-view flex-row">
        <view class="search-input-view">
          <img
            class="search-icon"
            src="https://qiniu.bms16.com/FgvJrOE8Lps7tyNL86SOZKbLT1uH"
            alt=""
          />
          <input
            v-model="inputSearchValue"
            type="text"
            class="search-input"
            placeholder="请输入搜索内容"
            placeholder-class="input-placeholder"
			:focus="isFocused"
            @focus="handleFocus"
            @blur="handleBlur"
          />
          <img
            v-if="isFocused"
            @tap="clearSearch"
            class="search-close-icon"
            src="https://qiniu.bms16.com/FhKzwftEPo70kloqIVxKH7g0pD6I"
            alt="清空"
          />
        </view>
        <view
          v-if="isFocused"
		  @tap="tapSearch"
          :class="['search-btn', isFocused ? 'search-btn-i' : '']"
          >搜索</view
        >
      </view>
      <view class="flex-row flex-between" style="margin-bottom: 40rpx">
        <view class="check-type flex-row">
          <view
            @tap="tapSelectType"
            data-type="store"
            :class="[
              'store-type',
              selectType === 'store' ? 'store-type-i' : 'store-type-s',
            ]"
            >门店</view
          >
          <view
            @tap="tapSelectType"
            data-type="cabinet"
            :class="[
              'cabinet-type',
              selectType === 'cabinet' ? 'cabinet-type-i' : 'cabinet-type-s',
            ]"
            >换电柜</view
          >
        </view>
        <view class="config-view flex-row">
          <view class="seach-img" @tap="openSearch"
            ><img
              src="https://qiniu.bms16.com/FiWnFuZm5vWQ_Si3CEYLGJnVhSal"
              alt="搜索"
          /></view>
          <view @tap="openSelectType" class="screen-img"
            ><img
              :src="'https://qiniu.bms16.com/'+(shop_type!=''?'FikPWd13ENc2SWnC3q1n5F22uUDs':'FpElQHM5NbxHDjz1LrwaHYN668LR')"
              alt="筛选"
          /></view>
        </view>
      </view>
      <CarRentalList
        v-if="selectType === 'store'"
        :near_store_list="nearStoreList"
      />
      <CabinetList
        v-if="selectType === 'cabinet'"
        :near_cabinet_list="nearCabinetList"
      />
    </view>
    <leaseType
      :showLeaseType="showLeaseType"
      :selectType="selectType"
      :modelTypeList="modelTypeList"
      @closeSelectType="closeSelectType"
      @checkCabinetType="checkCabinetType"
    />
    <CustomTabbar curt-tab="service" />
  </view>
</template>

<script>
var app = getApp();
var config = require("@/common/config.js");
var common = require("@/common/common.js");
var http = require("@/common/http.js");
var storage = require("@/common/storage.js");
import LeaseType from "./components/leaseType/leaseType";
import CarRentalList from "./components/carRentalList/carRentalList";
import CabinetList from "./components/cabinetList/cabinetList";
import CustomTabbar from "@/component/customTabbar/index";
import {LEASE_TYPE_ARR} from '@/common/constant.js'
export default {
  data() {
    return {
      myLocation: {
        latitude: 23.099994,
        longitude: 113.324004,
      },
      selectType: "store",
      nearStoreList: [],
      nearCabinetList: [],

      polylines: [],
      mapContext: null, // map上下文
      isSearch: false, //是否处于搜索状态
      inputSearchValue: "123",
      isFocused: false,
      showLeaseType: false,
      modelTypeList:[],
	  shop_type:''
    };
  },
  components: {
    LeaseType,
    CarRentalList,
    CabinetList,
    CustomTabbar,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.loadCarRentalList();
    this.loadModelType();
  },
  methods: {
    tapSelectType(e) {
      const { type } = e.currentTarget.dataset;
      this.setData({
        selectType: type,
      });
      if (type === "store") {
        this.loadCarRentalList();
      } else {
        this.loadNearCabinetList();
      }
      
    },
    //附近门店列表
    loadCarRentalList(name='',shop_type='') {
      const pData = {
        limit: 10,
        longitude: this.myLocation.longitude,
        latitude: this.myLocation.latitude,
		name,
		shop_type
      };
      const me = this;
      var nearCabinetList = [];
      const CABINET_ICON_URL =
        "https://zxappfile.bms16.com/zx_client/shop_mark.png";
      http.postApi(config.API_NEAR_SHOP_LIST, pData, (resp) => {
        if (resp.data.code === 200) {
          nearCabinetList = resp.data.data.list || [];
          if (nearCabinetList.length != 0) {
            nearCabinetList.forEach((store, index) => {
              store.width = 50;
              store.height = 52;
              store.available_cnt = 2;
              store.id = 100000 + (store.id - 0);
              store.type = "SHOP";
              store.iconPath = CABINET_ICON_URL;
            });
          }
          this.getLocationPostion(this.myLocation, nearCabinetList);
          console.log(nearCabinetList, "nearCabinetList");
          me.setData({
            nearStoreList: nearCabinetList,
          });
        } else {
          common.simpleToast(resp.data.msg);
        }
      });
    },
    //附近机柜列表
    loadNearCabinetList(name='') {
      const pData = {
        limit: 10,
        longitude: this.myLocation.longitude,
        latitude: this.myLocation.latitude,
		name
      };
      const CABINET_ICON_URL =
        "https://qiniu.bms16.com/FktjmQ4rGZqYVj6taEtjown-_k5x";
      const me = this;
      var nearCabinetList = [];
      http.postApi(config.API_NEAR_CABINET_LIST, pData, (resp) => {
        if (resp.data.code === 200) {
          nearCabinetList = resp.data.data.cabinetList || [];
          if (nearCabinetList.length !== 0) {
            nearCabinetList.forEach((cabinet, index) => {
              cabinet.width = 50;
              cabinet.height = 52;
              cabinet.available_cnt = 2;
              cabinet.id = 100000 + (cabinet.cabinet_id - 0);
              cabinet.type = "SHOP";
              cabinet.iconPath = CABINET_ICON_URL;
            });
          }
          this.getLocationPostion(this.myLocation, nearCabinetList);
          me.setData({
            nearCabinetList: nearCabinetList,
          });
        } else {
          common.simpleToast(resp.data.msg);
        }
      });
    },
    getLocationPostion(centerLocation, nearCabinetList) {
      const locationData = {
        longitude: centerLocation.longitude,
        latitude: centerLocation.latitude,
        width: 22,
        height: 40,
        id: 50000,
        iconPath: "https://zxappfile.bms16.com/zx_client/location_n.png",
        model_list: [],
      };
      nearCabinetList.push(locationData);
    },
    moveToLocation() {
      // 将marker移动至中心点
      const mapContext = uni.createMapContext("myMap", this);
      this.mapContext = mapContext;
      this.mapContext.moveToLocation({
        longitude: this.myLocation.longitude,
        latitude: this.myLocation.latitude,
        success: (res) => {
          console.log("marker已移动至中心点");
        },
      });
    },
    handleFocus() {
      this.isFocused = true;
    },
    handleBlur() {
      this.isFocused = false;
    },
    clearSearch() {
      this.setData({
        inputSearchValue: "",
      });
    },
    openSearch() {
      this.isSearch = true;
      this.isFocused = true;
    },
    openSelectType() {
      this.setData({
        showLeaseType: true,
      });
    },
    closeSelectType() {
      this.setData({
        showLeaseType: false,
      });
    },
	tapSearch(){
		if(this.selectType==='store'){
			this.loadCarRentalList(this.inputSearchValue)
		}else{
			this.loadNearCabinetList(this.inputSearchValue)
		}	
	},
    checkCabinetType(e) {
      console.log(e, "e");
		  const  obj = LEASE_TYPE_ARR.find(v => v.value == e)
		  const shop_type= (e==100) ? '' : obj.type
		  this.setData({
		  	showLeaseType: false,
			shop_type
		  });
		  this.loadCarRentalList('',shop_type)
    },
    loadModelType() {
      const me=this
      http.postApi(config.API_NEAR_BATTERY_TYPE_LIST, {}, (resp) => {
        if (resp.data.code === 200) {
          me.setData({
            modelTypeList:resp.data.data.list
          })
        } else {
          common.simpleToast(resp.data.msg);
        }
      });
    },
  },
};
</script>
<style>
@import "./service.css";
</style>