jsm-mall-h5-front/src/packageMaterial/pages/apply/website.vue

<template>
  <view class="app-container">
    <map
      class="map-container"
      :class="isCloseList ? 'close' : ''"
      :latitude="center_lat"
      :longitude="center_lng"
      :markers="markers"
      :include-points="includePoints"
      @markertap="tapMarker"
    >
    </map>

    <view class="list-container" :class="isCloseList ? 'close' : ''">
      <view class="switch">
        <view class="icon" @tap="changeCloseList">
          <image src="/static/icon/right.png" mode=""></image>
        </view>
      </view>
      <view class="list">
        <scroll-view scroll-y show-scrollbar scroll-with-animation class="scroll-view">
          <view
            class="item"
            :class="'item_' + (index + 1)"
            v-for="(item, index) in dataList"
            :key="index"
            @tap="chooseWebsit(item)"
          >
            <view class="left" @tap="changeMapCenter(item)">
              <view class="name">{{ item.name }}</view>
              <view class="row">联系电话：{{ item.websitPhone || '' }}</view>
              <view class="row">联系地址：{{ item.address || '' }}</view>
            </view>
            <view class="right" @tap.stop>
              <u-button
                size="small"
                plain
                type="warning"
                :text="'距离' + (item.distance / 1000).toFixed(2) + 'km'"
                @click="nav(item)"
              ></u-button>
              <u-button
                size="small"
                type="primary"
                text="设为默认"
                :disabled="item.isDefaultWebsit"
                @click="setDefault(item)"
              ></u-button>
            </view>
          </view>
          <Loading :type="2" :loadStatus="loadStatus" :dataList="dataList" />
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      center_lat: '',
      center_lng: '',
      lat: '',
      lng: '',
      pageNum: 1,
      loadStatus: 0,
      dataList: [],
      isCloseList: false,

      markers: [],
      includePoints: []
    }
  },

  async onLoad() {
    await this.getLocation()
    this.getList()
  },

  methods: {
    // 获取位置
    async getLocation() {
      return await new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02',
          isHighAccuracy: true,
          geocode: true,
          success: res => {
            console.log(res)
            this.lat = res.latitude
            this.lng = res.longitude
            this.center_lat = res.latitude
            this.center_lng = res.longitude
            this.markers = [
              {
                id: 0,
                latitude: res.latitude,
                longitude: res.longitude,
                title: '我的位置',
                iconPath: '/static/icon/location1.png',
                width: 30,
                height: 30
              }
            ]
            resolve(res)
          },
          fail: res => {
            reject(0)
          }
        })
      })
    },

    getList() {
      this.loadStatus = 1
      this.$api
        .get('/user/apply/websit', {
          lat: this.lat,
          lng: this.lng
        })
        .then(res => {
          res.data.forEach(item => {
            item.lat = Number(item.lat)
            item.lng = Number(item.lng)
          })
          this.loadStatus = 0
          let list = res.data
          this.dataList = list
          let markers = list.map((item, index) => {
            return {
              id: index + 1,
              latitude: item.lat,
              longitude: item.lng,
              title: item.name,
              iconPath: '/static/icon/location2.png',
              width: 40,
              height: 40
            }
          })
          this.markers = this.markers.concat(markers)
          this.includePoints = this.markers.slice(0, 1).concat(markers.slice(0, 5))
        })
    },

    call(item) {
      uni.makePhoneCall({
        phoneNumber: item.linkPhone
      })
    },

    nav(item) {
      uni.openLocation({
        latitude: item.lat,
        longitude: item.lng,
        name: item.name,
        address: item.address,
        success: res => {
          console.log('success')
        }
      })
    },

    setDefault(item) {
      this.$api
        .post('/user/default/websit', {
          websitId: item.websitId
        })
        .then(res => {
          this.$successToast()
          this.getList()
        })
    },

    changeCloseList() {
      this.isCloseList = !this.isCloseList
      this.center_lat = this.lat
      this.center_lng = this.lng
    },

    changeMapCenter(item) {
      this.center_lat = item.lat
      this.center_lng = item.lng
    },

    tapMarker(e) {
      // 	uni.createSelectorQuery().select(".item_"+e.detail.markerId).boundingClientRect((res)=>{
      // 		console.log(res)
      // 　　	}).exec()
    },

    chooseWebsit(item) {
      this.crossPage.$emit('chooseMaterialApplyWebsit', item, 'H5')
      this.$navToPage(
        {
          delta: 1
        },
        'navigateBack'
      )
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  background: #f4f2f2;
}
.map-container {
  width: 100%;
  height: 45vh;
  &.close {
    height: 100vh;
  }
}
.list-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  transition: all 0.5s;
  .switch {
    display: flex;
    justify-content: center;
    .icon {
      background: #ffffff;
      padding: 10rpx 40rpx 0;
      border-radius: 20rpx 20rpx 0 0;
      image {
        width: 14rpx;
        height: 28rpx;
        display: block;
        transform: rotate(90deg);
      }
    }
  }
  &.close {
    bottom: calc(-60vh + 40rpx);
    .switch {
      image {
        transform: rotate(-90deg);
      }
    }
  }
  .list {
    padding: 40rpx 20rpx 0;
    box-sizing: border-box;
    background: #ffffff;
    height: 60vh;
    border-radius: 40rpx 40rpx 0 0;
  }
  .scroll-view {
    height: 100%;
  }
  .item {
    padding: 20rpx;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    &:first-child {
      padding-top: 0;
    }
    .left {
      flex: 1;
      .name {
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
        margin-bottom: 8rpx;
      }
      .row {
        font-size: 26rpx;
        color: #999999;
        margin-top: 12rpx;
      }
    }
    .right {
      flex-shrink: 0;
      margin-left: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      ::v-deep .u-button {
        &:first-child {
          color: #f9ae3d;
        }
        &:last-child {
          margin-top: 20rpx;
        }
      }
    }
  }
}
</style>