切换地图搜索效果优化

src/views/homesteadSurvey/list.vue

@@ -388,18 +388,44 @@
       </van-search>-->
       <div id="mapWrapAll" style="width: 100%;height: 100vh"></div>
       <div id="info" style="display: none"></div>
+      <van-overlay :show="showSearch" @click="closeSearchBox" />
       <!--搜索栏目-->
-      <div class="searchBar_wrap">
-        <div class="searchBar_area">
-          <div class="bar_icon"></div>
-          <div class="bar_ipt">
-            <input
-              type="text"
-              v-model="seachText"
-              placeholder="请输入宗地或权利人信息"
-            />
-          </div>
-          <div id="query" class="bar_text">搜索</div>
+      <div class="searchBar_wrap" :style="{bottom : bottomHeight}">
+        <van-search
+          v-model="seachText"
+          show-action
+          placeholder="请输入宗地或权利人信息"
+        >
+          <template #action>
+            <div id="query">搜索</div>
+          </template>
+        </van-search>
+        <div class="searchBox">
+          <van-cell center >
+            <template #title>
+              <p><van-icon name="manager" /><span>刘茂强</span><span style="background: rgba(122, 201, 67, 0.4);color:#7ac943">已核查</span></p>
+            </template>
+            <template #default>
+              <p style="border: 1px solid #7ac943;color:#7ac943;">查看详情</p>
+            </template>
+            <template #label>
+              <p style="font-size: 0.25rem;color: #666666;">宅基地代码 230381199705255117</p>
+              <p style="font-size: 0.25rem;color: #666666;">宗地面积 113.87㎡</p>
+            </template>
+          </van-cell>
+
+          <van-cell center >
+            <template #title>
+              <p><van-icon name="manager" /><span>刘茂强</span><span style="background: rgba(122, 201, 67, 0.4);color:#7ac943">已核查</span></p>
+            </template>
+            <template #default>
+              <p style="border: 1px solid #7ac943;color:#7ac943;">查看详情</p>
+            </template>
+            <template #label>
+              <p style="font-size: 0.25rem;color: #666666;">宅基地代码 230381199705255117</p>
+              <p style="font-size: 0.25rem;color: #666666;">宗地面积 113.87㎡</p>
+            </template>
+          </van-cell>
         </div>
       </div>
       <!--点击房地-显示的搜索--->
@@ -1057,6 +1083,7 @@
       name: "homesteadList",
       data() {
         return {
+          showSearch:false,
           showhncycybz:false,
           showhncyzjlx:false,
           showhncyyhzgx:false,
@@ -1167,6 +1194,8 @@
           searchBarOperVisbile: false,
           //搜索---end
           //地图使用 --end
+
+          bottomHeight:'0px',
         };
       },
       mounted(){
@@ -1209,6 +1238,18 @@
         this.getZjdList();
       },
       methods: {
+        closeSearchBox(){
+          this.showSearch = false ;
+          var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
+          document.styleSheets[0].insertRule(
+            "@keyframes test2" +
+            "{" +
+            "0%{bottom: 0px}" +
+            "100%{bottom: -" + height + "px;}" +
+            "}"
+          )
+          $('.searchBar_wrap').css({'animation':'test2 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test2 0.5s ease-in-out 0s 1 alternate forwards'});
+        } ,
         // 与户主关系翻译
         yhzgxfy(value){
           let label
@@ -1696,6 +1737,12 @@
         setTimeout(() => {
           this.GetMapsInit();
         }, 300);
+          var that = this;
+          setTimeout(function () {
+          var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
+            console.log($('.searchBox').outerHeight(true)+'px')
+            that.bottomHeight = -height+'px'
+          },500)
         },
         //地图加载 -----start
         GetMapsInit() {
@@ -2351,7 +2398,7 @@
              */
             var val = that.seachText;
             if (val == "") {
-              alert("请填写查询条件在查询");
+              that.$toast("请填写查询信息");
             } else {
               //分类查询查询农地、农房
               var difang;
@@ -2359,7 +2406,8 @@
               var cql_filter;
 
               console.log(this.$cookies);
-              //var cun = _this.villageDataObj.deptName;
+              // var cun = that.villageDataObj.deptName;
+              var cun = '';
 
               difang = ["zjd_dc:t_house_survey_zjdzd", "zjd_dc:t_house_survey_zrz","zjd_dc:t_house_survey_fsss"];
               var tach = 0;
@@ -2553,6 +2601,17 @@
                   });
                 map.addLayer(delete_map[i]);
               }
+              console.log($(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true))
+              that.showSearch = true ;
+              var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)
+              document.styleSheets[0].insertRule(
+                "@keyframes test" +
+                "{" +
+                "0%{bottom: -" + height + "px;}" +
+                "100%{bottom: 0px;}" +
+                "}"
+              )
+              $('.searchBar_wrap').css({'animation':'test 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test 0.5s ease-in-out 0s 1 alternate forwards'});
             }
           });
           //按照查询  定位地图-----------------end
@@ -3812,10 +3871,6 @@
 </script>
 
 <style scoped lang="scss">
-
-  .closeIcon{
-
-  }
   .bannerBg{
     width: 100%;
     color:#fff;
@@ -3849,12 +3904,12 @@
     margin:0 10px;
     box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
   }
-  .van-cell__label{
-    color: #969799;
-    font-size: 12px;
-    line-height: 20px;
-    margin:0
-  }
+  /*.van-cell__label{*/
+  /*  color: #969799;*/
+  /*  font-size: 12px;*/
+  /*  line-height: 20px;*/
+  /*  margin:0*/
+  /*}*/
   .map_area {
     width: 50vw;
     height: 50vh;
@@ -4124,15 +4179,56 @@
 
   .searchBar_wrap {
     // display: none;
-    display: flex;
     position: fixed;
-    bottom: 0%;
     left: 0;
+    bottom: 0;
     width: 100%;
-    padding: 28px 16px 28px 13px;
+    padding: 0px 16px 0px 13px;
     background: #fff;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
+    z-index: 9;
+
+    .searchBox{
+      .van-cell{
+        /*&:first-child{*/
+        /*  box-shadow: none;*/
+        /*  margin:0;*/
+        /*}*/
+        box-shadow: 0px 0px 5px #cccccc;
+        border-radius: 15PX;
+        margin-bottom: 0.35rem;
+      }
+      .van-cell__title{
+        flex: 0.8;
+        p{
+          color: rgb(34, 183, 242);
+          .van-icon{
+            vertical-align: middle;
+          }
+          span{
+            vertical-align: middle;
+            &:nth-child(3){
+              font-size: 0.25rem;
+              border-radius: 5PX;
+              padding: 5PX 15PX;
+              margin-left: 50%;
+            }
+          }
+        }
+      }
+      .van-cell__value{
+        flex: 0.2;
+        p{
+          font-size: 0.25rem;
+          display: inline-block;
+          border-radius: 1rem;
+          line-height: 1;
+          padding: 15PX 20PX;
+        }
+      }
+    }
+
     .actionBar_wrap {
       display: flex;
       position: absolute;
@@ -4140,7 +4236,6 @@
       left: 0;
       width: 100%;
       height: 100%;
-
       background: #fff;
       border-top-left-radius: 15px;
       border-top-right-radius: 15px;