添加地图模式

src/components/dropdown/item3.vue

@@ -10,12 +10,15 @@
         :style="item.chooseState ? 'background: #F2F2F2' : ''"
       >
         <view class="item-right-list-name">{{ item.dictLabel }} </view>
-        <image
+        <div v-if="item.chooseState" class="item-right-list-img">
+          <u-icon name="checkmark" color="#4374EF"></u-icon>
+        </div>
+        <!-- <image
           v-if="item.chooseState"
           class="item-right-list-img"
           src="/static/dropDown/select.png"
         >
-        </image>
+        </image> -->
       </view>
     </scroll-view>
     <view class="btn-list">
@@ -176,6 +179,8 @@ export default {
         right: 22rpx;
         width: 80rpx;
         height: 80rpx;
+        display: flex;
+        align-items: center;
       }
     }
   }

src/pages/entryPark/index.vue

@@ -36,6 +36,7 @@
               flex-shrink: 0;
             "
             class="flex align-center"
+            @click="changeMode"
           >
             <image
               src="/static/img/icon-exchange.png"
@@ -56,29 +57,51 @@
       :top="166"
     ></dropdown-vue>
     <div style="height: 246rpx"></div>
-    <view class="tab-contant">
-      <view
-        class="media-card"
-        v-for="cardInfo in dataList"
-        :key="cardInfo.id"
-        @click="toDetail(cardInfo)"
-      >
-        <park-card-vue :key-words="keyWords" :detail="cardInfo" v-if="activeBar == 0"></park-card-vue>
-        <land-card-vue :key-words="keyword" :detail="cardInfo" v-if="activeBar == 1"></land-card-vue>
-        <carrier-card-vue :key-words="keyword" :detail="cardInfo" v-if="activeBar == 2"></carrier-card-vue>
+    <div v-if="mode === 'list'">
+      <view class="tab-contant">
+        <view
+          class="media-card"
+          v-for="cardInfo in dataList"
+          :key="cardInfo.id"
+          @click="toDetail(cardInfo)"
+        >
+          <park-card-vue :key-words="keyWords" :detail="cardInfo" v-if="activeBar == 0"></park-card-vue>
+          <land-card-vue :key-words="keyword" :detail="cardInfo" v-if="activeBar == 1"></land-card-vue>
+          <carrier-card-vue :key-words="keyword" :detail="cardInfo" v-if="activeBar == 2"></carrier-card-vue>
+        </view>
       </view>
-    </view>
-    <u-empty
-      icon="/static/img/empty_list.png"
-      v-if="dataList.length === 0"
-      width="300"
-      height="300"
-      textSize="26"
-      text="暂无查询内容"
-      textColor="#BDBDBD"
-      marginTop="120"
-    >
-    </u-empty>
+      <u-loadmore
+        v-if="dataList.length && (!haveMore || isLoading)"
+        :status="isLoading ? 'loading' : 'nomore'"
+        nomore-text="没有更多了"
+        loading-text="加载数据中"
+        marginTop="30"
+        marginBottom="30"
+        fontSize="20rpx"
+        color="#999999"
+        line
+      />
+      <u-empty
+        icon="/static/img/empty_list.png"
+        v-if="dataList.length === 0 && !isLoading"
+        width="300"
+        height="300"
+        textSize="26"
+        text="暂无查询内容"
+        textColor="#BDBDBD"
+        marginTop="120"
+      >
+      </u-empty>
+    </div>
+    <div v-else>
+      <map id="mapId" @markertap="handleMarkerClick" @callouttap="handleMarkerClick" :scale='10' style="width: 100%;height: calc(100vh - 246rpx)" latitude="31.464086" longitude="116.944909" class="map" :markers="markers">
+      </map>
+      <div v-if="activeInfo.id" :key="activeInfo.id" @click="toDetail(activeInfo)" style="position: fixed;padding: 0 30rpx;bottom: 30rpx;width: 100vw;z-index: 999;box-sizing: border-box;">
+        <park-card-vue :key="activeInfo.id" :key-words="keyWords" :detail="activeInfo" v-if="activeBar == 0"></park-card-vue>
+        <land-card-vue :key="activeInfo.id" :key-words="keyword" :detail="activeInfo" v-if="activeBar == 1"></land-card-vue>
+        <carrier-card-vue :key="activeInfo.id" :key-words="keyword" :detail="activeInfo" v-if="activeBar == 2"></carrier-card-vue>
+      </div>
+    </div>
   </view>
 </template>
 
@@ -175,7 +198,9 @@ export default {
         itemList4: [],
       },
       searchKey: '',
-      keyWords: ''
+      keyWords: '',
+      mode: 'list',
+      activeInfo: {}
     };
   },
   mounted() {
@@ -203,6 +228,7 @@ export default {
       if (!this.haveMore) return;
       this.isLoading = true;
       let searchCondition = {};
+      this.activeInfo = {};
       this.keyWords = this.searchKey;
       // this.filterChoice.map(item => {
       //   searchCondition[item.dictType] = item.dictValue;
@@ -230,6 +256,7 @@ export default {
             this.dataList.push(...res.records);
             this.haveMore =
               this.dataList.length < res.total;
+
         },
       });
     },
@@ -294,12 +321,47 @@ export default {
       this.pageNum = 1;
       this.haveMore = true;
       this.getList();
+    },
+    // 模式切换
+    changeMode() {
+      this.mode = this.mode === 'list' ? 'map' : 'list';
+      this.activeInfo = {};
+    },
+    handleMarkerClick(e) {
+      console.log('handleMarkerClick', e)
+      this.activeInfo = {}
+
+      const temp = this.dataList.filter(item => item.id === e.detail.markerId)[0];
+      console.log(temp)
+      setTimeout(() => {
+        this.$set(this, 'activeInfo', temp)
+      })
+      console.log(this.activeInfo)
     }
   },
   computed: {
     filterEnum() {
       return store.state.filterEnum;
     },
+    markers() {
+      let temp = [];
+      this.dataList.forEach(item => {
+        temp.push({
+          id: item.id,
+          latitude: item.latitude,
+          longitude: item.longitude,
+          width: 25,
+          height: 36,
+          callout: {
+            content: item.name,
+            padding: 5,
+            display: 'ALWAYS',
+            textAlign: 'center'
+          }
+        })
+      })
+      return temp || []
+    }
   },
   watch: {
     refreshCollectionPage(newVal) {
@@ -320,6 +382,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.container {
+  padding-bottom: 30rpx;
+}
 .tab_bar {
   border-bottom: 1rpx solid #fff;
   display: flex;