跳转导航

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

@@ -1,18 +1,20 @@
 <template>
   <view class="page-view f-30 p-40 flex-dir-column flex-x-center">
     <view class="title">{{detailVO.name}}</view>
-    <view class="time">发布时间：{{detailVO.createTime?detailVO.createTime.substring(0,10) : ''}}</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 :content="detailVO.content"></u-parse>
     </view>
-    <view v-if="detailVO && detailVO.id && detailVO.latitude && detailVO.longitude" class="width-100 m-b-20"
+    <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>
@@ -90,6 +92,20 @@
           }
         })
       },
+
+      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) {
@@ -130,4 +146,16 @@
     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>