index.ux 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <div class="content">
  3. <div class="box">
  4. <div class="item" style="justify-content: space-between;">
  5. <text>国家</text>
  6. <text>{{ info.country }}</text>
  7. </div>
  8. <div class="item">
  9. <text>省份</text>
  10. <text>{{ info.province }}</text>
  11. </div>
  12. <div class="item">
  13. <text>城市</text>
  14. <text>{{ info.city }}</text>
  15. </div>
  16. <div class="item">
  17. <text>地区</text>
  18. <text>{{ info.district }}</text>
  19. </div>
  20. <div class="item">
  21. <text>运营商</text>
  22. <text>未知</text>
  23. </div>
  24. <div class="item">
  25. <text>经纬度</text>
  26. <text>{{ location.longitude }}--{{ location.latitude }}</text>
  27. </div>
  28. <div class="item">
  29. <text>国家识别码</text>
  30. <text>CN</text>
  31. </div>
  32. <div class="item">
  33. <text>IP地址</text>
  34. <text>--</text>
  35. </div>
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. import network from '@system.network'
  41. import device from '@system.device'
  42. import telecom from '@system.telecom'
  43. import geolocation from '@system.geolocation'
  44. import fetch from '@system.fetch'
  45. export default {
  46. private: {
  47. title: '欢迎体验快应用开发',
  48. location:{longitude: 114.060682, latitude: 22.5606468},
  49. info:{
  50. country: "中国",
  51. province: "福建省",
  52. city: "厦门市",
  53. district:'湖里区',
  54. }
  55. },
  56. onInit() {
  57. device.getInfo({
  58. success: function(ret) {
  59. console.log(`handling success, brand = ${JSON.stringify(ret)}`)
  60. }
  61. })
  62. var that = this
  63. geolocation.getLocation({
  64. success: function(data) {
  65. console.log(
  66. `handling success: longitude = ${data.longitude}, latitude = ${
  67. data.latitude
  68. }`
  69. )
  70. var key = '948b7da20bd04112e259c809fca83671' // 个人高德web服务 key
  71. fetch.fetch({
  72. url: `https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${data.longitude},${data.latitude}&key=${key}&extensions=base`,
  73. header:{
  74. 'Content-Type':'application/json',
  75. },
  76. success: function(response) {
  77. const info = JSON.parse(response.data)
  78. that.info = info.regeocode.addressComponent // info.regeocode.formatted_address
  79. console.log('info',info.regeocode)
  80. },
  81. fail: function(data, code) {
  82. console.log(`handling fail, errMsg = ${data}`)
  83. }
  84. })
  85. console.log('data',data)
  86. },
  87. fail: function(data, code) {
  88. console.log(`handling fail, code = ${code}, errorMsg=${data}`)
  89. }
  90. })
  91. }
  92. }
  93. </script>
  94. <style lang="less">
  95. .content {
  96. padding: 28px;
  97. background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
  98. flex-direction: column;
  99. align-items: center;
  100. }
  101. .box{
  102. width: 100%;
  103. flex-direction: column;
  104. background-color: #fff;
  105. border-radius: 30px;
  106. min-height: 1000px;
  107. padding: 30px 28px;
  108. }
  109. .item{
  110. justify-content: space-between;
  111. padding: 20px 0;
  112. }
  113. </style>