car-wash-front/src/pages/map/index.vue

<template>
  <view class="content">
    <map style="width: 100%; height: 400px;"
         id="wash_map"
         :latitude="state.latitude"
         :longitude="state.longitude"
         :markers="state.covers"
         min-scale="1"
         :scale="12"
         :show-compass="false"
         @regionchange="handleMapRegionChange"
         @updated="handleMapUpdated"
         @labeltap="handleMapTapMarker"
         @markertap="handleMapTapMarker">

      <view class="content_reset-btn" @click="resetLocation">
        <uv-icon name="empty-address" size="28" color="#000" icon="/static/map-re-location.png"></uv-icon>
      </view>
    </map>


    <view class="w100 content_search mt10">
      <uv-search :showAction="true" actionText="搜索" placeholder="请输入站点名称搜索" :animation="true" @search="handleSearchStation"></uv-search>
    </view>

    <!--    站点清单  start-->
    <view class="w100 content_station">
      <view class="station_item" v-for="item in state.stationList" :key="item.id">
        <view class="station_item-title">
          <text class="font13">{{ item.name }}</text>
        </view>

        <view class="station_item-status">
          <text class="station_item-status-text">营业中</text>
        </view>

        <view class="station_item-content">
          <view class="station_item-content-left">
            <view class="station_item-content-left-label">
              <view class="font12 station_item-content-left-label-left">
                <text class="station_item-content-left-label-left_idle">空闲</text>
                <text class="station_item-content-left-label-left_count">{{ item.idle }}/{{ item.total }}</text>
              </view>
              <!--              <uv-tags size="small" class="station_item-content-left-label_tag" text="洗车机" plain shape="circle"></uv-tags>-->
              <view class="station_item-content-left-label_func">{{ item.funs?.join(" | ") }}</view>
            </view>
            <view class="station_item-content-left-position">
              <uv-icon name="empty-address" size="20" color="#aaa"></uv-icon>
              <text>{{ item.address }}</text>
            </view>
          </view>
          <view class="station_item-content-right">
            <uv-button circle type="primary" size="mini" plain @click="handleNavStation(item)">去洗车</uv-button>
          </view>
        </view>

        <view class="station_item-distance">
          <uv-text type="primary" :text="item.tips" size="12"></uv-text>
        </view>
      </view>
    </view>
    <!--    站点清单  end-->

  </view>
</template>


<script setup lang="ts">
import {reactive, ref} from 'vue'
import {onHide, onShow} from "@dcloudio/uni-app";

const mapCtx = ref(); // 地图上下文

const initState = () => ({
  latitude: 23.098994,
  longitude: 113.32252,
  covers: [] as any[],
  markers: [] as any[],
  isIgnoreChangeLocation: false,
  loading: false,
  stationList: [
    {
      id: 1,
      name: '河源路洗车场',
      status: 1,
      total: 7,
      idle: 2,
      funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
      address: '深圳市宝安区河源路12345号',
      tips: '半小时内免停车费，超时领取停车券免费',
    },
    {
      id: 1,
      name: '河源路洗车场2222',
      status: 1,
      total: 17,
      idle: 2,
      funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
      address: '深圳市宝安区河源路12345号',
      tips: '半小时内免停车费，超时领取停车券免费',
    }
  ] as any[]
})

const state = reactive(initState())

onShow(() => {
  let gd = getApp<any>().globalData;
  if (!gd.token) {
    console.error(gd)
    return;
  }
  mapCtx.value = uni.createMapContext("wash_map");
  // refreshCouponList();
});

onHide(() => {
  Object.assign(state, initState());
})

const handleMapRegionChange = (e: any) => {
  if (state.isIgnoreChangeLocation) {
    return;
  }
  if (e.type === "end" && state.markers.length) {
    // console.log("map change end", {
    //   ...e.detail.centerLocation,
    // });
    const current = e.target.centerLocation;
    const {latitude, longitude} = current;
    relocation(longitude, latitude);
    // stationPage.value.page = 1;
    // refreshStation({
    //   latitude,
    //   longitude,
    // });
  }
}


const relocation = (longitude: number, latitude: number) => {
  mapCtx.value?.moveToLocation({
    latitude,
    longitude,
  });
}

//重置地图定位
const resetLocation = () => {
  // if (state.loading) {
  //   return;
  // }
  console.log("reset location")
  uni.getLocation({
    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
    success: res=>{
      const latitude = res.latitude;
      const longitude = res.longitude;
      console.log("reset location",res)
      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        success: function () {
          console.log('success');
        }
      });
    }
  });
  // eslint-disable-next-line promise/catch-or-return
  // fetchLocation().then((res: any) => {
  //   const { latitude, longitude } = res;
  //   mapCtx.value?.moveToLocation({
  //     latitude,
  //     longitude,
  //   });
  // });
};

const handleMapUpdated = (e: any) => {
  setTimeout(() => {
    state.isIgnoreChangeLocation = false;
  }, 500);
}


const handleMapTapMarker = (e: any) => {
  if (e.detail.markerId === -1) {
    return;
  }
  let chooseMarker = state.stationList.find((k: any) => k.id == e.detail.markerId);
  if (chooseMarker) {
    // _changeMarker(findIndex);
  }
}

const handleSearchStation = (e: any) => {
  console.log("search>>>", e)
  // const { value } = e.detail;
  // if (!value) {
  //   return;
  // }
}

const handleNavStation = (station: any) => {

}
</script>


<style lang="scss" scoped>
.content {
  width: 100%;
  //background: #efeffe;

  &_reset-btn {
    position: absolute;
    right: 10rpx;
    bottom: 10rpx;
  }

  &_search {

  }

  &_station {
    height: calc(100vh - 480px);
  }
}

.station_item {
  display: flex;
  flex-direction: column;
  border-radius: 10rpx;
  margin-top: 20rpx;
  padding: 15rpx;
  background: #fafafa;
  position: relative;

  &-title {
    display: inline-flex;
    padding-left: 5px;
  }

  &-status {
    position: absolute;
    right: 0;
    top: 0;

    &-text {
      background: $uni-color-primary;
      padding: 6rpx;
      color: white;
      font-size: 12px;
    }
  }

  &-content {
    display: flex;
    justify-content: space-between;
    width: 100%;

    &-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 5rpx;

      &-label {
        padding: 4rpx 8rpx;
        display: inline-flex;
        margin-top: 8rpx;
        //justify-content: space-between;

        &-left {
          //border: 1px solid $uni-color-primary;
          border-radius: 4rpx;

          &_idle {
            background: $uni-color-primary;
            padding: 6rpx;
            color: white;
            border-radius: 4rpx;
          }

          &_count {
            //border-radius: 4rpx;
            margin-left: 10px;
            color: $uni-color-primary;
            font-size: 13px;
          }

          &_tag {
            width: 30rpx;
          }

        }


        &_func {
          padding-left: 50rpx;
          font-size: 24rpx;
          color: #aaa;
        }
      }

      &-position {
        display: inline-flex;
        font-size: 24rpx;
        margin-top: 8rpx;
      }
    }

    &-right {
      width: 120rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }
  }

  &-distance {
    font-size: 24rpx;
    padding-left: 5px;
    margin-top: 8rpx;
  }
}
</style>