search.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <view>
  3. <view class="plr-36 mt-20">
  4. <u-search v-model="addr" placeholder="请输入地址" @change="bindInput"></u-search>
  5. </view>
  6. <view class="plr-46 ptb-20 bb" @click="search(item)" v-for="(item,i) in list" :key="i" v-if="item&&item.name&&(item.latitude||item.location.length)">
  7. <view class="">
  8. {{item.name}}
  9. </view>
  10. <view class="size-26 gray-2" v-if="item&&item.address">
  11. {{item.id?item.district:''}}{{item.address.length==0?'':item.address}}
  12. </view>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. import {mapState} from 'vuex'
  18. import amapFile from '../../libs/amap-wx.js'
  19. export default {
  20. data() {
  21. return {
  22. addr: '',
  23. list: [],
  24. type:'' //1 起点 2终点
  25. }
  26. },
  27. computed:{
  28. ...mapState(['address'])
  29. },
  30. onLoad(option) {
  31. console.log(this.address);
  32. this.list = this.address
  33. this.type = option.type
  34. },
  35. methods: {
  36. bindInput: function(e) {
  37. console.log(e);
  38. var that = this;
  39. var keywords = e;
  40. var key = 'bb6f4ed802756f963b37c184ce4e9766';
  41. var myAmapFun = new amapFile.AMapWX({
  42. key: key
  43. });
  44. myAmapFun.getInputtips({
  45. keywords: keywords,
  46. location: '',
  47. success: function(data) {
  48. console.log(data);
  49. if (data && data.tips) {
  50. that.list = data.tips
  51. }
  52. }
  53. })
  54. },
  55. search(res) {
  56. // {
  57. // "id": "B01730K2X2",
  58. // "name": "郑州站",
  59. // "district": "河南省郑州市二七区",
  60. // "adcode": "410103",
  61. // "location": "113.658097,34.745795",
  62. // "address": "二马路82号",
  63. // "typecode": "150200",
  64. // "city": []
  65. // }
  66. if(res.id){
  67. let city;
  68. // 第一部:判断有没有市
  69. if(res.district.indexOf('市') != -1){
  70. // 第二部:获取第一个市的索引
  71. let num = res.district.indexOf('市')
  72. // 第三部:判断有没有第二个市
  73. if (res.district.indexOf('市', num + 1) == -1) {
  74. if (!res.district.includes('县')) {
  75. if (res.district.split('市')[0].includes('省')) {
  76. //搜索到区
  77. city = res.district.split('市')[0].split('省')[1] + '市'
  78. } else {
  79. city = res.district.split('市')[0] + '市'
  80. }
  81. } else {
  82. //搜索到县
  83. city = res.district.split('市')[1].split('县')[0] + '县'
  84. }
  85. } else {
  86. // 搜索到(县级市)
  87. city = res.district.split('市')[1] + '市'
  88. }
  89. }else{
  90. // 搜索到(直辖县)
  91. city = res.district.split('省')[1]
  92. }
  93. let address = {
  94. district: res.district,
  95. address: res.address,
  96. latitude: res.location.length>0 ? res.location.split(',')[1] : '',
  97. longitude: res.location.length>0 ? res.location.split(',')[0] : '',
  98. name: res.name,
  99. city: city
  100. }
  101. console.log(address);
  102. if(this.type==1){
  103. this.$store.commit('getStart', address)
  104. }else if(this.type==2){
  105. this.$store.commit('getEnd', address)
  106. }
  107. }else{
  108. if(this.type==1){
  109. this.$store.commit('getStart', res)
  110. }else if(this.type==2){
  111. this.$store.commit('getEnd', res)
  112. }
  113. }
  114. uni.navigateBack({
  115. })
  116. }
  117. }
  118. }
  119. </script>
  120. <style lang="scss" scoped>
  121. </style>