EveryLike/pages/API/open-location/open-location.uvue

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-common-mt">
      <form @submit="openLocation">
        <view class="uni-list">
          <view class="uni-list-cell">
            <view class="uni-list-cell-left">
              <view class="uni-label">经度</view>
            </view>
            <view class="uni-list-cell-db">
              <input v-model.number="longitude" class="uni-input" type="text" :disabled="true" />
            </view>
          </view>
          <view class="uni-list-cell">
            <view class="uni-list-cell-left">
              <view class="uni-label">纬度</view>
            </view>
            <view class="uni-list-cell-db">
              <input v-model.number="latitude" class="uni-input" type="text" :disabled="true" />
            </view>
          </view>
          <view class="uni-list-cell">
            <view class="uni-list-cell-left">
              <view class="uni-label">位置名称</view>
            </view>
            <view class="uni-list-cell-db">
              <input v-model="name" class="uni-input" type="text" :disabled="true" />
            </view>
          </view>
          <view class="uni-list-cell">
            <view class="uni-list-cell-left">
              <view class="uni-label">详细位置</view>
            </view>
            <view class="uni-list-cell-db">
              <input v-model="address" class="uni-input" type="text" :disabled="true" />
            </view>
          </view>
        </view>
        <view class="uni-padding-wrap">
          <view class="tips">注意：需要正确配置地图服务商的Key才能正常显示位置</view>
          <view class="uni-btn-v uni-common-mt">
            <button type="primary" formType="submit">查看位置</button>
          </view>
        </view>
      </form>
    </view>
  </view>
</template>
<script lang="uts">
  import {
    state,
    setLifeCycleNum
  } from '@/store/index.uts'

  export default {
    data() {
      return {
        title: 'openLocation',
        longitude: 116.39747,
        latitude: 39.9085,
        name: '天安门',
        address: '北京市东城区东长安街',
        // 自动化测试
        dialogPagesNum: -1,
      }
    },
    onShow() {
      console.log("Page Show");
      // 自动化测试
      setLifeCycleNum(state.lifeCycleNum + 1)
    },
    onHide() {
      console.log("Page Hide");
      // 自动化测试
      setLifeCycleNum(state.lifeCycleNum - 1)
    },
    methods: {
      openLocation: function () {
        uni.openLocation({
          longitude: this.longitude,
          latitude: this.latitude,
          name: this.name,
          address: this.address
        })
        // 自动化测试
        setTimeout(() => {
          this.test()
        }, 500)
      },
      // 自动化测试
      test() {
        const pages = getCurrentPages()
        const page = pages[pages.length - 1]
        // #ifdef APP || WEB
        const dialogPages = page.getDialogPages()
        this.dialogPagesNum = dialogPages.length
        // #endif
      },
      // 自动化测试
      setLifeCycleNum(value : number) {
        setLifeCycleNum(value)
      },
      // 自动化测试
      getLifeCycleNum() : number {
        return state.lifeCycleNum
      },
    }
  }
</script>

<style>
  .uni-list-cell-left {
    padding: 0 15px;
  }

  .tips {
    font-size: 12px;
    margin-top: 15px;
    opacity: .8;
  }
</style>