ycwh/miniapp/pages/yuecai/restaurant/detail/index.vue

<template>
  <view class="page-view f-30 p-40 flex-dir-column flex-x-center">
    <view class="title">{{detailVO.name}}</view>
    <view class="time" v-if="detailVO.createTime">发布时间：{{detailVO.createTime?detailVO.createTime.substring(0,10) : ''}}</view>
    <view v-if="detailVO.videos" class="width-100">
      <video class="width-100" :src="detailVO.videos"></video>
    </view>
    <view class="col-info-d t-c m-b-30">
      <u-parse style="text-align: left;"  :content="detailVO.content"></u-parse>
    </view>
    <view v-if="detailVO && detailVO.id && detailVO.latitude && detailVO.longitude" class="width-100 m-b-10"
      style="height: 250px;">
      <map id="map" class="width-100 height-100" :show-location="true" :latitude="detailVO.latitude"
        :longitude="detailVO.longitude"></map>
    </view>
    <view v-if="detailVO.address" class="time">{{detailVO.address || ''}}</view>
    <view @click="toMapAPP" class="to-map-btn">导航前往</view>
    <detailBottom type="restaurant" :articleId.sync="detailVO.id" :liked.sync="detailVO.liked"
      :collected.sync="detailVO.collected" :views.sync="detailVO.views" :likeNum.sync="detailVO.likeNum"
      :collectNum.sync="detailVO.collectNum" @doRefresh="getDetail"></detailBottom>
  </view>
</template>

<script>
  import detailBottom from '@/pages/components/detailbottom.vue'
  export default {
    components: {
      detailBottom
    },
    data() {
      return {
        detailVO: {},
        //
        mapDom: null,
      }
    },
    onReady() {},

    methods: {
      createMap() {
        this.mapDom = uni.createMapContext("map", this);

        // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
        this.mapDom.initMarkerCluster({
          enableDefaultStyle: false,
          zoomOnClick: true,
          gridSize: 60,
          complete(res) {
            console.log('initMarkerCluster', res)
          }
        });

        this.mapDom.on("markerClusterCreate", (e) => {
          console.log("markerClusterCreate", e);
        });
      },
      addMarkers(name, latitude, longitude) {
        const positions = [{
          latitude: latitude,
          longitude: longitude,
          name: name
        }]

        const markers = []

        positions.forEach((p, i) => {
          console.log(i)
          markers.push(
            Object.assign({}, {
              id: i + 1,
              // iconPath: img,
              // width: 50,
              // height: 50,
              joinCluster: true, // 指定了该参数才会参与聚合
              // label: {
              //   // width: 50,
              //   // height: 30,
              //   borderWidth: 1,
              //   borderRadius: 10,
              //   padding: 5,
              //   bgColor: '#ffffff',
              //   content: p.name
              // }
            }, p)
          )
        })
        this.mapDom.addMarkers({
          markers,
          clear: false,
          complete(res) {
            console.log('addMarkers', res)
          }
        })
      },

      toMapAPP(e = {}) {
        const latitude = Number(this.detailVO.latitude)
        const longitude = Number(this.detailVO.longitude)
        uni.openLocation({
          latitude: latitude,
          longitude: longitude,
          name: this.detailVO.address,
          scale: 12,
          success() {
            console.log('success')
          }
        })
      },
      getDetail() {
        this.$u.api.getRestaurantDetail(this.detailVO.id).then(res => {
          if (res.data.content) {
            res.data.content = decodeURIComponent(res.data.content);
          }
          this.detailVO = res.data || {}
          if (this.detailVO && this.detailVO.id && this.detailVO.latitude && this.detailVO.longitude) {
            this.createMap();
            this.addMarkers(this.detailVO.name, res.data.latitude, res.data.longitude)
          }

          //
          uni.setNavigationBarTitle({
            title: res.data.name || ''
          })
        })
      }
    },
    onLoad(options) {
      this.detailVO.id = options.id || '';
      this.getDetail();
    },
  }
</script>

<style scoped lang="scss">
  .title {
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #65371b;
    margin-bottom: 20px;
  }

  .time {
    font-size: 14px;
    color: #787878;
    font-weight: 300;
    padding-bottom: 10px;
  }

  .to-map-btn {
    text-align: center;
    width: 80%;
    padding: 5px;
    margin: auto;
    background-color: #3c9cff;
    color: white;
    letter-spacing: 2px;
    border-radius: 4rpx;
    margin-bottom: 30px;
  }
</style>