yicangzongtai_app_240321/pages/government/subNVue/map - 副本.nvue

<template>
  <view class="main-container">
    <map
      id="map"
      ref="map1"
      :show-location="true"
      :style="{'height':windowHeight+'px','width':windowWidth+'px'}"
      :latitude="latitude"
      :longitude="longitude"
      :markers="covers"
      :circles="circles"
      scale="13"
      @tap="clickMap"
      @markertap="markertap"
    ></map>
    <view class="my-location" @click="backMyLocation">
      <image class="my-img" src="/static/map/my.png" mode="aspectFill"></image>
    </view>
    <view class="search-box">
      <!-- <image class="search-img" src="../../../static/home/search-icon.png" mode=""></image> -->

      <text class="search-icon iconfont_nvue">&#xe653;</text>
      <input
        class="search-input"
        type="text"
        placeholder="请输入关键字"
        v-model="keyWord"
        @input="getMapList"
      />
    </view>
    <view class="top-btn">
      <view
        class="top-btn-item"
        v-for="item,index in pageListHalf"
        :key="index"
        @click="toApp(item)"
      >
        <image class="top-img" :src="$getImgPath(item.moduleImage)" mode="aspectFill"></image>
        <text class="top-txt">{{item.moduleName}}</text>
      </view>
      <view class="top-btn-item top-btn-item-l" @click="changeShowType">
        <image class="top-img" src="/static/map/more.png" mode=""></image>
        <text class="top-txt">更多地图</text>
      </view>
    </view>
    <view class="list-box" v-if="showType == '列表'">
      <babTouchbox
        :minHeight="0.35"
        :smallHeight="0.1"
        :maxHeight="0.8"
        :touchHeight="64"
        @currentHeight="setScrollHeight"
        @maxtHeight="setScrollViewHeight"
      >
        <view class="">
          <view class="tab-list">
            <view
              :class="[isActive == index ? 'isActive' : '' ,'tab-item']"
              v-for="(item , index) in typeOptions"
              :key="`label_${index}`"
              @click="changeType(item,index)"
            >
              <text v-if="isActive == index" class="atab-txt">{{item.name}}</text>
              <text v-else class="tab-txt">{{item.name}}</text>
              <text class="aline" v-if="isActive == index"></text>
            </view>
          </view>
          <scroll-view :style="{'height':scrollViewHeight - 110 +'px'}" scroll-y="true">
            <view class="address-list" v-if="addressList.length > 0">
              <view
                class="address-item"
                v-for="(item, index) in addressList"
                :key="item.id"
                @click="toDetails(item.id,item)"
              >
                <view class="item-l">
                  <text class="txt name-txt">{{item.name}}</text>
                  <view class="add-box">
                    <image class="dwimg" src="/static/map/dw.png" mode="aspectFill"></image>
                    <text class="txt address list-address">{{item.detailedAddress}}</text>
                  </view>
                </view>
                <view class="item-r">
                  <text class="txt text-jl">距我{{(item.distance/1000).toFixed(1)}}KM</text>
                  <image class="jt" src="../../../static/home/arrow-right.png" mode=""></image>
                </view>
              </view>
            </view>
            <view v-else class="empty-box">
              <image class="empty-img" src="/static/map/empty-img.png" mode="aspectFit"></image>
              <text class="empty-text">暂无数据</text>
            </view>
          </scroll-view>
        </view>
      </babTouchbox>
    </view>
    <view class="detail-box" v-if="showType == '详情'" @click.stop="e => {return false}">
      <view class="info-top">
        <image
          class="close-img"
          src="@/static/map/close.png"
          mode="aspectFill"
          @click="showType = '列表'"
        ></image>
        <view class="top-l">
          <image
            class="map-img"
            v-if="mapInfo.icon"
            :src="$getImgPath(mapInfo.icon)"
            mode="aspectFill"
          ></image>
          <view class="none-img" v-else>
            <image class="imgnone" src="@/static/map/none.png" mode="aspectFill"></image>
          </view>
        </view>
        <view class="top-r">
          <text class="title">{{mapInfo.name}}</text>
          <text class="type-txt txt">{{getTypeName(mapInfo.classifyId)}}</text>
          <text class="distance txt">{{(mapInfo.distance/1000).toFixed(1)}}公里</text>
          <view class="top-r-b">
            <text class="sub_address txt">{{mapInfo.detailedAddress}}</text>
            <view class="to-btn" @click="toHere">
              <image class="toimg" src="@/static/map/location.png" mode="scaleToFill"></image>
              <text class="txt to-txt">去这里</text>
            </view>
          </view>
        </view>
      </view>
      <view class="info-bottom">
        <text class="remark">{{mapInfo.intro}}</text>
      </view>
      <view class="btn-box" v-if="mapInfo.modules && mapInfo.modules.length>0">
        <view
          :class="['fun-btn' , `fun-btn_${index}`]"
          v-if="index < 3"
          v-for="(item,index) in mapInfo.modules"
          :key="item.id"
          @click="toApp(item)"
        >
          <image class="funimg" :src="$getImgPath(item.icon)" mode="aspectFill"></image>
          <text class="funtxt">{{item.name}}</text>
        </view>
      </view>
    </view>
    <view class="more-box" v-if="showType == '更多'" @click.stop="e => {return false}">
      <view class="more-title-box">
        <text style="width: 30rpx"></text>
        <text class="m-title">更多地图</text>
        <image
          class="m-img"
          src="@/static/map/close.png"
          mode="aspectFill"
          @click.stop="showType = '列表'"
        ></image>
      </view>
      <view class="title-tip">
        <text class="line-tip"></text>
      </view>
      <view class="more-item">
        <view class="title-box">
          <text class="line"></text>
          <text class="more-title">地图服务</text>
        </view>
        <view class="fun-list">
          <view class="fun-item" v-for="item,index in pageList" :key="index" @click="toApp(item)">
            <image class="fun-img" :src="$getImgPath(item.moduleImage)" mode="aspectFill"></image>
            <text class="fun-txt">{{item.moduleName}}</text>
          </view>
        </view>
      </view>
      <view class="more-item">
        <view class="title-box">
          <text class="line"></text>
          <text class="more-title">人才服务</text>
        </view>
        <view class="fun-list">
          <view class="fun-item" v-for="item,index in pageList2" :key="index" @click="toApp(item)">
            <image class="fun-img" :src="$getImgPath(item.moduleImage)" mode="aspectFill"></image>
            <text class="fun-txt">{{item.moduleName}}</text>
          </view>
        </view>
      </view>
    </view>
    <view
      class="mask-box"
      v-if="showType == '更多'"
      @click.stop="e => {return false}"
      :style="{'height':windowHeight+'px','width':windowWidth+'px'}"
    ></view>
  </view>
</template>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=bde3903093d0eff03b0052192a67e1c0"></script>
<script>
  let app = getApp();
  import babTouchbox from '@/components/bab-Touchbox/bab-Touchbox';
  export default {
    components: {
      babTouchbox,
    },
    data() {
      return {
        currentHeight: 0, // 滑动组件当前高度
        scrollViewHeight: 0, //用于计算滚动区域高度
        map: null,
        // 屏幕高度
        screenHeight: '',
        latitude: 30.480535,
        longitude: 114.42001,
        isActive: 0,
        typeOptions: [
          {
            id: -1,
            name: '全部',
          },
        ],
        addressList: [],
        // 标记的点位
        covers: [],
        circles: [],
        mapInfo: {},
        keyWord: '',
        acticeId: '',
        pageList: [],
        pageListHalf: [],
        pageList2: [],
        showType: '列表',
      };
    },
    watch: {},
    created() {
      // #ifdef APP-NVUE
      try {
        var domModule = weex.requireModule('dom');
        domModule.addRule('fontFace', {
          fontFamily: 'iconfont_nvue',
          src: "url('../../../static/font/yige/iconfont.ttf')",
        });
      } catch (e) {
        console.log('iconfont_nvue = ', e);
        //TODO handle the exception
      }
      // #endif

      let _this = this;
      this.getPages('map001');
      this.getPages('map002');
      uni.getLocation({
        type: 'gcj02',
        isHighAccuracy: true, //高精度
        geocode: true, //将位置解析成地址
        success: function (res) {
          _this.latitude = res.latitude;
          _this.longitude = res.longitude;

          _this.getTypeOptions();
        },
        fail: function (res) {
          reject();
        },
      });
      uni.$on('initPop', (data) => {
        if (data.init) {
          this.getTypeOptions();
        }
      });
    },
    beforeDestroy() {
      uni.$off('initPop');
    },
    computed: {
      windowHeight() {
        const { statusBarHeight, screenHeight, navHeight } = app.globalData;
        // 屏幕高度 - 状态栏高度 - 标题高度
        return screenHeight - statusBarHeight;
      },
      windowWidth() {
        return uni.getSystemInfoSync().windowWidth;
      },
    },
    onReady() {
      // this.map = plus.maps.create('map', {});
      this.map = uni.createMapContext('map', this);
      plus.key.addEventListener('backbutton', function () {
        console.log('backbutton');
      });
      plus.webview.currentWebview().setStyle({
        popGesture: 'none',
      });
    },

    methods: {
      // clickEvent() {
      //   console.log('默认行为已被阻止');
      // },
      $getImgPath(path = '', str = 'http') {
        if (path.startsWith(str)) {
          return path;
        }
        return app.$mConfig.imgURL + path;
      },
      //查询聚合页 -
      getPages(code) {
        uni.request({
          url: app.$yghttp.config.baseUrl + '/themeModule/list/' + code,
          method: 'GET',
          success: (res) => {
            if (res.data.code === 200) {
              let data = res.data.data;
              if (code == 'map001') {
                this.pageList = data.themeModuleVoList;
                this.pageListHalf.push(data.themeModuleVoList[0]);
                this.pageListHalf.push(data.themeModuleVoList[1]);
              } else {
                this.pageList2 = data.themeModuleVoList;
              }
            }
          },
          fail: (err) => {
            console.log(err);
          },
        });
      },

      //获取地图类型
      getTypeOptions() {
        uni.request({
          url: app.$yghttp.config.baseUrl + '/location/map/classify/select',
          method: 'GET',
          success: (res) => {
            if (res.data.code === 200) {
              this.typeOptions = [
                {
                  id: -1,
                  name: '全部',
                },
              ];
              let data = res.data.data;
              data.forEach((e) => {
                this.typeOptions.push(e);
              });
              this.getMapList();
            }
          },
          fail: (err) => {
            console.log(err);
          },
        });
      },

      clickMap() {
        this.showType = '列表';
      },

      getTypeName(id) {
        let item = this.typeOptions.filter((i) => {
          return i.id === id;
        })[0];
        if (item && item.name) {
          return item.name;
        }
      },

      getTypeIcon(id) {
        let item = this.typeOptions.filter((i) => {
          return i.id === id;
        })[0];
        if (item && item.icon) {
          return item.icon;
        }
      },

      //获取地图列表
      getMapList(type) {
        let that = this;
        uni.request({
          url: app.$yghttp.config.baseUrl + '/location/map/nearbyList',
          method: 'GET',
          data: {
            latitude: that.latitude,
            longitude: that.longitude,
            classifyId: that.acticeId,
            name: that.keyWord,
          },
          success: function (res) {
            if (res.data.code === 200) {
              let data = res.data.data;
              that.addressList = data;
              data.forEach((e) => {
                e.width = '60rpx';
                e.height = '60rpx';
                e.locationType = 'zx';
                // e.label = {
                //   content: e.name,
                //   color: '#1a1a1a',
                //   textAlign: 'center',
                //   padding: 2,
                //   borderRadius: 5,
                //   anchorX: -20,
                // };
                e.iconPath = that.$getImgPath(that.getTypeIcon(e.classifyId));
                // e.iconPath = e.icon;
              });
              that.$nextTick(() => {
                that.covers = data;
              });
              if (type) {
                that.getNearbyList(type);
              }
            }
          },
        });
      },

      markertap(e) {
        let item = this.covers.filter((a) => a.id == e.detail.markerId)[0];
        this.$refs.map1.moveToLocation({
          longitude: item.longitude,
          latitude: item.latitude,
        });
        if (item.locationType == 'gd') {
          this.mapInfo = item;
          this.showType = '详情';
        } else {
          this.toDetails(e.detail.markerId);
        }
      },

      toApp(PageInfo) {
        uni.$emit('mapJump', PageInfo);
      },

      changeType(item, index) {
        this.isActive = index;
        if (index != 0) {
          this.acticeId = item.id;
          this.circles = [
            {
              latitude: this.latitude,
              longitude: this.longitude,
              fillColor: 'rgba(156,207,209,0.5)',
              radius: 3000,
              color: 'transparent',
              strokeWidth: 2
            },
          ];
          this.getMapList(item.name);
        } else {
          this.circles = [];
          this.acticeId = '';
          this.getMapList();
        }
      },

      //周边搜索
      getNearbyList(type) {
        let that = this;
        uni.request({
          url: app.$yghttp.config.baseUrl + '/location/map/placeAround',
          method: 'GET',
          data: {
            keywords: type,
            location: that.longitude + ',' + that.latitude,
            pageNum: 1,
            pageSize: 20,
            radius: 3000,
          },
          success: function (res) {
            console.log('dasdad', res);
            if (res.data.code === 200) {
              let data = res.data.data;
              let covers = JSON.parse(JSON.stringify(that.covers));
              data.forEach((e) => {
                e.width = '60rpx';
                e.height = '60rpx';
                e.classifyId = that.acticeId;
                e.longitude = e.location.split(',')[0];
                e.latitude = e.location.split(',')[1];
                e.locationType = 'gd';
                e.detailedAddress = e.address;
                e.intro = e.type;
                e.id = that.covers.length + 101;
                covers.push(e);
                that.addressList.push(e);
                e.iconPath = that.$getImgPath(that.getTypeIcon(e.classifyId));
                // e.iconPath = '';
              });
              that.$nextTick(() => {
                data.forEach((e) => {
                  that.covers = covers;
                });
              });
              // that.covers = [
              //   {
              //     longitude: '114.435545',
              //     latitude: '30.477182',
              //     id: 1,
              //   },
              // ];
              console.log('covers', that.covers);
            }
          },
        });
      },
      //查看详情
      toDetails(id, item) {
        let that = this;
        if (item && item.locationType == 'gd') {
          that.$refs.map1.moveToLocation({
            longitude: item.longitude,
            latitude: item.latitude,
          });
          that.mapInfo = item;
          that.showType = '详情';
        } else {
          uni.request({
            url:
              app.$yghttp.config.baseUrl +
              '/location/map/info/' +
              id +
              '?latitude=' +
              that.latitude +
              '&longitude=' +
              that.longitude,
            method: 'GET',
            success: (res) => {
              if (res.data.code === 200) {
                let data = res.data.data;
                that.$refs.map1.moveToLocation({
                  longitude: data.longitude,
                  latitude: data.latitude,
                });
                that.mapInfo = data;
                that.showType = '详情';
              }
            },
            fail: (err) => {
              console.log(err);
              uni.showToast({
                icon: 'none',
                title: '查询失败',
                duration: 2000,
              });
            },
          });
        }
        // console.log('toDetails  = ', item )
        // that.latitude = item.latitude
        // that.longitude = item.longitude
        // that.covers = [item]
        // const id = item.id;
      },

      toHere() {
        uni.openLocation({
          latitude: parseFloat(this.mapInfo.latitude), // 要去的地址经度，浮点数
          longitude: parseFloat(this.mapInfo.longitude), // 要去的地址纬度，浮点数
          name: this.mapInfo.name, // 位置名
          address: this.mapInfo.detailedAddress, // 要去的地址详情说明
          scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
        });
      },

      changeShowType() {
        this.showType = '更多';
      },

      backMyLocation() {
        this.$refs.map1.moveToLocation();
      },

      setScrollHeight(val) {
        // 实时返回的滑动组件高度
        this.currentHeight = val;
      },

      setScrollViewHeight(val) {
        //最大高度
        this.scrollViewHeight = val;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .main-container {
    position: relative;
  }
  .iconfont_nvue {
    font-family: iconfont_nvue;
  }

  .top-btn {
    position: absolute;
    top: 200rpx;
    right: 20rpx;
    flex-direction: column;
    padding: 20rpx 10rpx;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0 0 20rpx #ccc;
  }

  .top-btn-item {
    flex-direction: column;
    align-items: center;
    margin-bottom: 15rpx;
  }

  .top-btn-item-l {
    margin-bottom: 0;
  }

  .top-img {
    width: 60rpx;
    height: 60rpx;
  }

  .top-txt {
    font-size: 20rpx;
    margin-top: 3rpx;
  }

  .my-location {
    position: absolute;
    align-items: center;
    justify-content: center;
    right: 20rpx;
    top: 800rpx;
    width: 90rpx;
    height: 90rpx;
    border-radius: 22rpx;
    background-color: #fff;
  }

  .my-img {
    width: 54rpx;
    height: 54rpx;
  }

  .search-box {
    position: absolute;
    top: 70rpx;
    left: 20rpx;
    right: 20rpx;
    flex-direction: row;
    align-items: center;
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 40rpx;
    height: 80rpx;

    .search-icon {
      font-size: 40rpx;
      color: #666666;
    }
  }

  .search-img {
    width: 30rpx;
    height: 30rpx;
  }

  .search-input {
    flex: 1;
    font-size: 28rpx;
    margin-left: 10rpx;
  }

  .tab-list {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    margin: 10rpx 0;
  }

  .tab-item {
    padding: 20rpx 20rpx 10rpx;
  }

  .tab-txt {
    position: relative;
    z-index: 4;
    font-size: 30rpx;
  }

  .atab-txt {
    position: relative;
    z-index: 1;
    font-size: 36rpx;
    font-weight: bold;
  }

  .aline {
    position: absolute;
    bottom: 8rpx;
    left: 20rpx;
    right: 0;
    z-index: -1;
    width: 74rpx;
    height: 20rpx;
    // background-image: linear-gradient(134deg,#3DBAD3,#44C6D4);
    background-color: #44c6d4;
    border-radius: 10rpx;
    opacity: 0.5;
  }

  .address {
    width: 450rpx;
  }

  .list-address {
    // line-height: 1;
    margin-left: 10rpx;
    color: #808080;
  }

  .add-box {
    margin-top: 10rpx;
    flex-direction: row;
    align-items: center;
    font-size: 22rpx;
  }

  .dwimg {
    width: 21.5rpx;
    height: 26rpx;
  }

  .address-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 10rpx;
    color: #808080;
    border-bottom-width: 1rpx;
    border-bottom-style: solid;
    border-bottom-color: #ededed;
  }

  .item-r {
    flex-direction: row;
    align-items: center;
  }

  .jt {
    width: 30rpx;
    height: 30rpx;
  }

  .name-txt {
    width: 500rpx;
  }

  .txt {
    font-size: 26rpx;
  }

  .text-jl {
    font-size: 22rpx;
    color: #808080;
  }

  .detail-box {
    position: fixed;
    bottom: 100rpx;
    left: 0;
    right: 0;
    // height: 800rpx;
    padding: 30rpx;
    margin: 20rpx;
    background-color: #fff;
    overflow: hidden;
    border-radius: 30rpx;
  }

  .info-top {
    position: relative;
    flex-direction: row;
    align-items: center;
  }

  .map-img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 20rpx;
  }

  .none-img {
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 200rpx;
    background-color: #e6e6e6;
    border-radius: 10rpx;
  }

  .imgnone {
    width: 150rpx;
    height: 150rpx;
  }

  .title {
    font-size: 30rpx;
    font-weight: bold;
  }

  .toimg {
    width: 30rpx;
    height: 30rpx;
  }

  .top-r {
    margin-left: 20rpx;
    align-items: flex-start;
    flex: 1;
  }

  .top-r-b {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .to-btn {
    padding: 10rpx;
    border-radius: 30rpx;
    flex-direction: row;
    align-items: center;
    background-image: linear-gradient(90deg, #45c7d5, #3cb7d1);
  }

  .to-txt {
    color: #fff;
  }

  .type-txt {
    margin: 5rpx 0;
    padding: 5rpx 20rpx;
    border-top-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    background-color: #e3fcfc;
    color: #43bdd6;
    font-size: 24rpx;
  }

  .info-bottom {
    padding: 20rpx 0;
  }

  .remark {
    font-size: 28rpx;
  }

  .btn-box {
    padding-top: 20rpx;
    border-top: 1rpx solid #e6e6e6;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .fun-btn {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    padding: 20rpx;
    border-radius: 20rpx;
    border-width: 1rpx;
    border-color: #ccc;
    border-style: solid;

    // height: 77rpx;
    // border-radius: 15rpx;

    .funtxt {
      font-size: 28rpx;
      margin-left: 10rpx;
    }

    &_0 {
      border: 1px solid #215dd9;
      background: #e6edfa;
      .funtxt {
        color: #215dd9;
      }
    }
    &_1 {
      border: 1px solid #3fb9d4;
      background: #edfdfd;
      .funtxt {
        color: #3fb9d4;
      }
    }
    &_2 {
      border: 1px solid #76bcb1;
      background: #e8f4f6;
      .funtxt {
        color: #76bcb1;
      }
    }
  }

 

  .sub_address {
    width: 280rpx;
  }

  .mask-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .more-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 700rpx;
    padding: 40rpx;
    background-color: #fff;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
  }

  .more-item {
    margin-bottom: 30rpx;
  }

  .title-box {
    flex-direction: row;
    align-items: center;
  }

  .line {
    width: 5rpx;
    height: 30rpx;
    background-color: #44c6d4;
    border-radius: 10rpx;
  }

  .more-title {
    position: relative;
    padding-left: 15rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

  .fun-list {
    flex-direction: row;
    margin: 20rpx 0;
    padding: 0 20rpx;
  }

  .fun-item {
    flex-direction: column;
    align-items: center;
    margin-right: 40rpx;
  }

  .fun-img {
    width: 86rpx;
    height: 86rpx;
  }

  .fun-txt {
    margin-top: 5rpx;
    font-size: 26rpx;
  }

  .empty-box {
    margin-top: 20rpx;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .empty-img {
    width: 204rpx;
    height: 193rpx;
  }

  .empty-text {
    padding: 32rpx;
    opacity: 0.59;
    color: #999999;
    font-size: 30rpx;
    font-weight: 400;
  }
  .more-title-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx 10rpx;
  }
  .m-title {
    font-size: 36rpx;
    font-weight: bold;
  }
  .m-img {
    width: 30rpx;
    height: 30rpx;
  }
  .title-tip {
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10rpx;
  }
  .line-tip {
    width: 64rpx;
    height: 8rpx;
    background-color: #cccccc;
    border-radius: 10rpx;
  }
  
  .close-img{
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 30rpx;
      height: 30rpx;
  }
</style>