map.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <view class="scoped-box">
  3. <view class="scoped-select">
  4. <view :class="curStoreBrand === item.val ? 'ss-op cur' : 'ss-op'" v-for="(item, index) in sbArr" @click="brandHandle(item)" :key="index">{{ item.key }}</view>
  5. </view>
  6. <map
  7. class="sb-map"
  8. longitude="115.822386"
  9. latitude="28.624076"
  10. scale="12"
  11. :markers="dataList"
  12. @callouttap="callouttapHandle"
  13. ></map>
  14. <view class="scoped-bottom" v-if="curObj.manager_phone">
  15. <view class="p1">门店:{{ curObj.store_name }}[{{curObj.clerk_num}}]</view>
  16. <view class="p1">店长:{{ curObj.store_manager }}{{ curObj.manager_phone }}[{{curObj.signing == 1 ? '已签约' : '未签约'}}]
  17. <view class="m" @click="callHandle">[打电话]</view>
  18. </view>
  19. <view class="p1">地址:{{ curObj.address }}</view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. dataList: [],
  28. sbArr: [],
  29. curStoreBrand: '',
  30. storeBrandObj: {},
  31. curObj: {},
  32. oldList: [],
  33. };
  34. },
  35. onLoad(params) {
  36. const dictObj = uni.getStorageSync('MD_dict')
  37. let sbArr = dictObj.store_brand || []
  38. let storeBrandObj = {}
  39. let nArr = []
  40. uni.api.estate.apideptstorecount().then(res => {
  41. const brandCount = res.brand_count || []
  42. brandCount.forEach(bc => {
  43. sbArr.forEach(item => {
  44. if (bc.store_brand === item.val) {
  45. nArr.push({
  46. total: bc.total,
  47. val: bc.store_brand,
  48. key: `${bc.store_brand}(${bc.total})`,
  49. })
  50. storeBrandObj[item.val] = item.option1 || '#673ab7'
  51. }
  52. })
  53. })
  54. nArr.sort( (a, b)=> {
  55. return b.total - a.total
  56. })
  57. this.sbArr = [{key: '全部', val: ''},...nArr]
  58. this.storeBrandObj = {...storeBrandObj}
  59. })
  60. this.getData()
  61. },
  62. onReachBottom() {},
  63. onPullDownRefresh() {
  64. // 防止频繁刷新
  65. },
  66. methods: {
  67. callHandle () {
  68. uni.makePhoneCall({
  69. phoneNumber: this.curObj.manager_phone
  70. })
  71. },
  72. callouttapHandle (e) {
  73. const detail = e.detail
  74. const index = detail.markerId - 10000
  75. this.curObj = this.oldList[index]
  76. },
  77. getData () {
  78. uni.api.estate.apideptstorelist({
  79. store_brand: this.curStoreBrand
  80. }).then(res => {
  81. let dataList = []
  82. const arr = res || []
  83. this.oldList = [...arr]
  84. dataList = arr.map((item, index) => {
  85. return {
  86. id: index + 10000,
  87. latitude: item.latitude,
  88. longitude: item.longitude,
  89. iconPath: 'https://icon.honglouplus.com/icon_1px.png',
  90. width: 0,
  91. height: 0,
  92. zIndex: 99,
  93. callout: {
  94. content: `${item.signing == 1 ? 'Y' : 'N'}${item.store_name}[${item.clerk_num}]`,
  95. color: '#fff',
  96. bgColor: this.storeBrandObj[item.store_brand],
  97. display: 'ALWAYS',
  98. padding: '6px 10px',
  99. textAlign: 'center',
  100. borderRadius: '10',
  101. }
  102. }
  103. })
  104. this.dataList = [...dataList]
  105. })
  106. },
  107. brandHandle (item) {
  108. this.curStoreBrand = item.val
  109. this.getData()
  110. },
  111. linkList (v) {
  112. uni.navigateTo({
  113. url: `/pages/estate/lib?v=${v}`
  114. })
  115. }
  116. }
  117. };
  118. </script>
  119. <style lang="scss">
  120. .scoped-box {
  121. height: calc(100vh);
  122. position: relative;
  123. .sb-map {
  124. position: absolute;
  125. z-index: 9;
  126. left: 0;
  127. top: 0;
  128. height: 100%;
  129. width: 100%;
  130. }
  131. .scoped-bottom {
  132. position: fixed;
  133. background: #fff;
  134. z-index: 10;
  135. left: 0;
  136. bottom: 0;
  137. height: 150rpx;
  138. width: 100%;
  139. padding: 20rpx;
  140. .p1 {
  141. color: #666;
  142. font-size: 26rpx;
  143. .m {
  144. display: inline-block;
  145. color: #2d8cf0;
  146. font-weight: bold;
  147. }
  148. }
  149. }
  150. }
  151. .scoped-select {
  152. position: relative;
  153. z-index: 10;
  154. padding-top: 20rpx;
  155. padding-left: 20rpx;
  156. background: #fff;
  157. .ss-op {
  158. color: #666;
  159. background: #e1e1e1;
  160. border-radius: 10rpx;
  161. padding: 3rpx 10rpx;
  162. margin-right: 20rpx;
  163. margin-bottom: 20rpx;
  164. display: inline-block;
  165. cursor: pointer;
  166. user-select: none;
  167. &.cur {
  168. color: #fff;
  169. background: #2d8cf0;
  170. }
  171. }
  172. }
  173. </style>