novelQuick/src/pages/tools/wangLuoXinXi/index.ux

<import name="add-desktop" src="/src/components/addDesktop"></import>

<template>
  <div class="content">
    <add-desktop></add-desktop>

    <div class="box">
			<div class="item" style="justify-content: space-between;">
				<text>国家</text>
				<text>{{ info.country }}</text>
			</div>
			<div class="item">
				<text>省份</text>
				<text>{{ info.province }}</text>
			</div>
			<div class="item">
				<text>城市</text>
				<text>{{ info.city }}</text>
			</div>
			<div class="item">
				<text>地区</text>
				<text>{{ info.district }}</text>
			</div>
			<div class="item">
				<text>运营商</text>
				<text>未知</text>
			</div>
			<div class="item">
				<text>经纬度</text>
				<text>{{ location.longitude  }}--{{ location.latitude }}</text>
			</div>
			<div class="item">
				<text>国家识别码</text>
				<text>CN</text>
			</div>
			<div class="item">
				<text>IP地址</text>
				<text>--</text>
			</div>
		</div>
  </div>
</template>

<script>
import network from '@system.network'
import device from '@system.device' 
import telecom from '@system.telecom'
import geolocation from '@system.geolocation'
import fetch from '@system.fetch'
export default {
  private: {
    title: '欢迎体验快应用开发',
    location:{longitude: 114.060682, latitude: 22.5606468},
    info:{
      country: "中国",
      province: "福建省",
      city: "厦门市",
      district:'湖里区',
    }
  },

  onInit() {
    device.getInfo({
      success: function(ret) {
        console.log(`handling success， brand = ${JSON.stringify(ret)}`)
      }
    })
    var that = this
    geolocation.getLocation({
      success: function(data) {
        console.log(
          `handling success: longitude = ${data.longitude}, latitude = ${
            data.latitude
          }`
        )
        var key = '948b7da20bd04112e259c809fca83671' // 个人高德web服务 key
        fetch.fetch({
          url: `https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${data.longitude},${data.latitude}&key=${key}&extensions=base`,
          header:{
            'Content-Type':'application/json',
          },
          success: function(response) {
            const info = JSON.parse(response.data)
            that.info = info.regeocode.addressComponent // info.regeocode.formatted_address
            console.log('info',info.regeocode)
          },
          fail: function(data, code) {
            console.log(`handling fail, errMsg = ${data}`)
          }
        })
        console.log('data',data)
        
      },
      fail: function(data, code) {
        console.log(`handling fail, code = ${code}, errorMsg=${data}`)
      }
    })
  }
}
</script>

<style lang="less">
  .content {
    padding: 28px;
    background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
    flex-direction: column;
    align-items: center;
  }
  .box{
    width: 100%;
    flex-direction: column;
		background-color: #fff;
		border-radius: 30px;
		min-height: 1000px;
		padding: 30px 28px;
	}
  .item{
    justify-content: space-between;
    padding: 20px 0;
  }
</style>