SelectMapNavigation.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <uni-popup ref="SelectMap" :isMaskClick='true' type="bottom" border-radius="10px 10px 0 0"
  3. maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
  4. <view class="map-list">
  5. <view class="title">请选择地图</view>
  6. <view class="map-item" @click.stop="goNavigation(item.value)" v-for="item in MapTypeList">
  7. {{item.label}}
  8. </view>
  9. <view class="map-item cancel" @click.stop="close()">
  10. 取消
  11. </view>
  12. </view>
  13. </uni-popup>
  14. </template>
  15. <script>
  16. import { MapTypeList } from "@/utils/openApp.js"
  17. import { openMap } from "@/utils/openApp.js"
  18. export default {
  19. data() {
  20. return {
  21. MapTypeList,
  22. siteInfo: undefined
  23. };
  24. },
  25. mounted() {
  26. // setTimeout(() => {
  27. // this.open()
  28. // }, 1000)
  29. },
  30. methods: {
  31. open(info) {
  32. this.siteInfo = info;
  33. this.$refs.SelectMap.open()
  34. },
  35. close() {
  36. this.$refs.SelectMap.close()
  37. },
  38. goNavigation(type) {
  39. const { areaCode, cityCode, provinceCode, provinceName, cityName, areaName, address } = this.siteInfo
  40. const name = `${provinceName}${cityName}${areaName}${address}`;
  41. const code = areaCode || cityCode || provinceCode
  42. openMap({ name, code, type, info: this.siteInfo })
  43. this.$refs.SelectMap.close()
  44. }
  45. }
  46. }
  47. </script>
  48. <style lang="scss" scoped>
  49. .map-list {
  50. width: 100%;
  51. // height: 30vh;
  52. background-color: #fff;
  53. border-radius: 20rpx 20rpx 0 0;
  54. text-align: center;
  55. .title {
  56. width: 100%;
  57. text-align: center;
  58. padding: 30rpx 20rpx 50rpx 20rpx;
  59. font-size: 28rpx;
  60. }
  61. .map-item {
  62. width: 100%;
  63. padding: 30rpx 20rpx;
  64. }
  65. .cancel {
  66. padding: 50rpx 30rpx;
  67. color: #9f9f9f;
  68. }
  69. }
  70. </style>