From f5233339920a59103d53e8efadc6f3f5d0b64f31 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 08 五月 2024 14:45:37 +0800
Subject: [PATCH] 移动端

---
 src/components/leftMenu/sousuo.vue |  586 ++++++++++++++++++++++++++++++++--------------------------
 1 files changed, 326 insertions(+), 260 deletions(-)

diff --git a/src/components/leftMenu/sousuo.vue b/src/components/leftMenu/sousuo.vue
index a7740c9..9e6d294 100644
--- a/src/components/leftMenu/sousuo.vue
+++ b/src/components/leftMenu/sousuo.vue
@@ -5,7 +5,10 @@
       <span
         @click="ssjmxs"
         style="float: left; height: 100%; width: 80%; overflow: hidden"
-        ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
+        ><i
+          class="el-icon-search"
+          style="padding: 0px 15px 0px 20px; font-size: 0.15rem"
+        ></i
         >{{ syssval }}</span
       >
       <span
@@ -25,13 +28,9 @@
           right: -3px;
         "
       >
-        <img
-          src="@/assets/img/navigation/addf.png"
-          style="width: 20px"
-          @click.stop="AddFavorite"
-        />
+        <!-- <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" /> -->
       </span>
-      <span
+      <!-- <span
         v-show="syssval == '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'"
         style="float: right; height: 100%; width: 10%"
       >
@@ -40,17 +39,13 @@
           style="width: 20px"
           @click.stop="showAddFavorite"
         />
-      </span>
+      </span> -->
     </div>
     <!-- 鎼滅储鐣岄潰 -->
-    <div class="ssjm" v-show="ssjm">
-      <!-- 鎼滅储鐣岄潰椤堕儴 -->
-      <div class="menutop">
-        <div class="menutitle">鎼滅储</div>
-        <div class="menuback" @click="cancless">鍏抽棴</div>
-      </div>
+    <div class="ssjm" v-if="ssjm">
       <!-- 鎼滅储妗� -->
-      <div style="margin: 0.1rem 0">
+      <div class="search-container">
+        <div class="back" @click="cancless"></div>
         <el-input
           placeholder="杈撳叆鍏抽敭瀛楁悳绱㈠湴鍥�"
           autofocus
@@ -66,11 +61,7 @@
               :value="item.value"
             ></el-option>
           </el-select>
-          <el-button
-            slot="append"
-            icon="el-icon-search"
-            @click="search"
-          ></el-button>
+          <el-button slot="append" @click="search">鎼滅储</el-button>
         </el-input>
       </div>
       <!-- 缁撴灉鏄剧ず -->
@@ -82,17 +73,12 @@
             :key="index"
             @click="flyTo(item)"
           >
-            <div style="margin: 0.05rem 0">
-              <i class="el-icon-map-location"></i>{{ item.name }}
+          <div class="poiName" style="margin: 0.05rem 0">
+              <img src="@/assets/img/navigation/location.png" alt="" />
+              <span>{{ item.name }}</span>
             </div>
-            <div style="font-size: 0.12rem; color: black">
-              <!-- <span>鍦板潃:{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span><br />
-              <span>鐢佃瘽:{{ item.telphone ? item.telphone : "鏆傛棤鑱旂郴鏂瑰紡" }}</span> -->
-              <!-- <span>鍖哄煙:{{ item.area ? item.area : "鏆傛棤鍖哄煙淇℃伅" }}</span> -->
-              <!-- <br /> -->
-              <span
-                >鍦板潃:{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span
-              >
+            <div class="addressBox">
+              <span>{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span>
             </div>
           </div>
         </div>
@@ -104,25 +90,19 @@
   </div>
 </template>
 <style scoped>
-/* 鎼滅储鎸夐挳鐨勬牱寮� */
-.iszd {
-  position: absolute;
-  left: 0.2rem;
-  top: 0.3rem;
-}
 
 /* 鎼滅储妗嗙殑鏍峰紡 */
 .ssk {
   position: absolute;
   /* text-align: center; */
   left: 2.5%;
-  bottom: 0.2rem;
+  top: 0.15rem;
   width: 95%;
   border: 1px solid white;
   height: 0.4rem;
   line-height: 0.4rem;
   background: #fff;
-  border-radius: 0.2rem;
+  border-radius: 0.14rem;
   color: black;
   font-size: 0.14rem;
 }
@@ -135,31 +115,109 @@
   width: 100%;
   height: 100%;
   top: 0;
+  left: 0;
   background-color: #f3f3f3;
-  z-index: 99;
+  z-index: 1099;
+}
+.search-container {
+  /* background-color: #fff; */
+  background-color: #fff;
+  display: flex;
+  height: 52px;
+  align-items: center;
+}
+.back {
+  background: url("~@/assets/img/search/back.png") center center no-repeat;
+  background-size: 10px 17px;
+  height: 40px;
+  width: 50px;
+}
+
+.el-input {
+  width: 85%;
+  background-color: #eee;
+  border-radius: 13px;
+}
+.el-input /deep/ .el-input-group__append,
+.el-input /deep/ .el-input-group__prepend {
+  background-color: transparent;
+  border: none;
+}
+
+.el-input /deep/ .el-input__inner {
+  border: none;
+  font-weight: 500;
+  font-size: 0.14rem;
+  color: #3e3d3d;
 }
 .el-select {
-  width: 80px;
+  width: 0.8rem;
+  position: relative;
+  font-size: 0.14rem;
+}
+.el-select:after {
+  content: "";
+  position: absolute;
+  right: 0;
+  height: 24px;
+  border-left: 1px solid #dcdcdc;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.el-input /deep/ .el-input-group__append {
+  width: 50px;
+  padding-right: 25px;
+}
+.el-input /deep/ .el-input-group__append .el-button {
+  font-size: 0.14rem;
+  color: #ffffff;
+  background: #2477ff;
+  border-radius: 13px;
+  padding: 10px;
 }
 
-/* 姣忔潯鎼滅储缁撴灉 */
-.everyinfo {
-  color: #409eff;
-  padding: 0.05rem;
-  font-size: 0.16rem;
-  border-bottom: 1px solid lightgray;
+.el-scrollbar .hover {
+  background: none;
 }
 
+/* 
+  鎼滅储缁撴灉 
+*/
 .ssjg {
   overflow-x: hidden;
   overflow-y: scroll;
   /* max-height: 4rem; */
-  max-height: 80vh;
+  max-height: calc(98vh - 50px);
   background: white;
   padding: 0.2rem;
   border-radius: 0.05rem;
 }
 
+.ssjg .everyinfo {
+  color: #409eff;
+  padding: 0.05rem;
+  font-size: 0.16rem;
+  border-bottom: 1px solid lightgray;
+}
+.ssjg .poiName {
+  display: flex;
+  align-items: center;
+  height: 20px;
+}
+.ssjg .poiName img {
+  width: 20px;
+}
+.ssjg .poiName span {
+  margin-left: 7px;
+  line-height: 20px;
+}
+.ssjg .addressBox {
+  margin-left: 27px;
+  margin-top: 5px;
+  color: #000;
+  font-weight: 500;
+  font-size: 13px;
+}
 .ssjg::-webkit-scrollbar {
   /*婊氬姩鏉℃暣浣撴牱寮�*/
   width: 8px;
@@ -184,7 +242,6 @@
 }
 </style>
 
-
 <script>
 let timers = null;
 import axios from "axios";
@@ -206,7 +263,7 @@
       showList: false,
       total: 0,
       poiList: [],
-      select: "鍏ㄩ儴",
+      select: "POI",
       options: [
         {
           label: "鍏ㄩ儴",
@@ -282,6 +339,100 @@
       rectangle.maxy > 31.182515322 && (rectangle.maxy = 31.182515322);
       return `RECT(${rectangle.minx} ${rectangle.miny},${rectangle.maxx} ${rectangle.maxy})`;
     },
+    getGdPoi() {
+      axios
+        .get(common.poiserve, {
+          params: {
+            request: "GdPoi",
+            keywords: this.poi_text,
+            output: "json",
+            coord: "cgcs2000",
+            offset: 20,
+            page: 1,
+          },
+        })
+        .then((res) => {
+          // 楂樺痉
+          if (res.data.status == 1) {
+            res.data.pois &&
+              res.data.pois
+                .filter((item) => {
+                  var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
+                  return (
+                    item.pname.includes("鍖椾含") &&
+                    item.name.includes(this.poi_text) &&
+                    !reg.test(item.typecode)
+                  );
+                })
+                .forEach((val) => {
+                  let poiarr = val.location.split(",");
+                  let poi = {
+                    lon: parseFloat(poiarr[0]),
+                    lat: parseFloat(poiarr[1]),
+                  };
+                  let obj = {
+                    adcode: val.adcode,
+                    address: val.address,
+                    adname: val.area,
+                    citycode: val.citycode,
+                    cityname: val.cityname,
+                    id: val.uid,
+                    lat: poi.lat,
+                    lng: poi.lon,
+                    name: val.name,
+                    pcode: val.pcode,
+                    pname: val.province,
+                    type: val.type,
+                    typecode: val.typecode,
+                  };
+                  Allresults.push(obj);
+                });
+          }
+          this.total = Allresults.length;
+          this.poiList = Allresults;
+          this.showList = true;
+        });
+    },
+    getData() {
+      axios
+        .post(common.poiserve2, {
+          adcode: "110115",
+          address: {
+            name: "",
+            type: "",
+          },
+          adname: "澶у叴鍖�",
+          cityname: "鍖椾含甯�",
+          name: {
+            name: this.poi_text,
+            type: "",
+          },
+          page: 1,
+          perPageCount: 20,
+          pcode: "110000",
+          pname: "",
+          resType: "",
+        })
+        .then((res) => {
+          if (res.status == 200) {
+            res.data.data.res &&
+              res.data.data.res
+                .filter((item) => {
+                  // 鍒ゆ柇鍦板潡鏄惁鏈夋眽瀛�
+                  var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
+                  return (
+                    item.name.includes(this.poi_text) && reg.test(item.typecode)
+                  );
+                })
+                .forEach((val) => {
+                  Allresults.push(val);
+                });
+          }
+          this.total = Allresults.length;
+          this.poiList = Allresults;
+          this.showList = true;
+        });
+    },
     search() {
       if (this.poi_text === "") {
         this.poiList = [];
@@ -292,221 +443,136 @@
         this.poiList = [];
         switch (this.select) {
           case "鍏ㄩ儴":
-            axios
-              .all([
-                // 115鎺ュ彛锛堝彲鏌ュ湴鍧楀悕锛�
-                axios.post(common.poiserve2, {
-                  adcode: "110115",
-                  address: {
-                    name: "",
-                    type: "",
-                  },
-                  adname: "澶у叴鍖�",
-                  cityname: "鍖椾含甯�",
-                  name: {
-                    name: this.poi_text,
-                    type: "",
-                  },
-                  page: 1,
-                  perPageCount: 20,
-                  pcode: "110000",
-                  pname: "",
-                  resType: "",
-                }),
-                // // 甯傜骇骞冲彴锛堢櫨搴︼細浼氭煡鍒板鍦帮級
-                // axios.get(common.poiserve, {
-                //   params: {
-                //     request: "bdPoi",
-                //     query: this.poi_text,
-                //     output: "json",
-                //     coord: "cgcs2000",
-                //     page_num: 0,
-                //     page_size: 20,
-                //   },
-                // }),
-                //  甯傜骇骞冲彴锛堥珮寰凤級
-                axios.get(common.poiserve, {
-                  params: {
-                    request: "GdPoi",
-                    keywords: this.poi_text,
-                    output: "json",
-                    coord: "cgcs2000",
-                    offset: 20,
-                    page: 1,
-                  },
-                }),
-              ])
-              .then(
-                (data) => {
-                  // this.total = data.data.pois.length;
-                  // this.poiList =
-                  //   data.data && data.data.pois;
-                  //115鎺ュ彛
-                  if (data[0].status == 200) {
-                    data[0].data.data.res &&
-                      data[0].data.data.res
-                        .filter((item) => {
-                          return item.name.includes(this.poi_text);
-                        })
-                        .forEach((val) => {
-                          Allresults.push(val);
-                        });
-                  }
-                  // 甯傜骇骞冲彴
-                  // // 鐧惧害
-                  // if (data[1].data.status == 0) {
-                  //   data[1].data.results.forEach((val) => {
-                  //     let obj = {
-                  //       address: val.address,
-                  //       adname: val.area,
-                  //       cityname: val.city,
-                  //       id: val.uid,
-                  //       lat: val.location.lat,
-                  //       lng: val.location.lng,
-                  //       name: val.name,
-                  //       pname: val.province,
-                  //     };
-                  //     Allresults.push(obj);
-                  //   });
-                  // }
-                  // 楂樺痉
-                  if (data[1].data.status == 1) {
-                    data[1].data.pois &&
-                      data[1].data.pois
-                        .filter((item) => {
-                          return (
-                            item.pname.includes("鍖椾含") &&
-                            item.name.includes(this.poi_text)
-                          );
-                        })
-                        .forEach((val) => {
-                          let poiarr = val.location.split(",");
-                          let poi = {
-                            lon: parseFloat(poiarr[0]),
-                            lat: parseFloat(poiarr[1]),
-                          };
-                          let obj = {
-                            adcode: val.adcode,
-                            address: val.address,
-                            adname: val.area,
-                            citycode: val.citycode,
-                            cityname: val.cityname,
-                            id: val.uid,
-                            lat: poi.lat,
-                            lng: poi.lon,
-                            name: val.name,
-                            pcode: val.pcode,
-                            pname: val.province,
-                            type: val.type,
-                            typecode: val.typecode,
-                          };
-                          Allresults.push(obj);
-                        });
-                  }
-                  this.total = Allresults.length;
-                  this.poiList = Allresults;
-                  this.showList = true;
-                  console.log(Allresults);
-                },
-                (response) => {
-                  console.log("error");
-                }
-              );
+            this.getGdPoi();
+            this.getData();
+            // axios
+            //   .all([
+            //     // 115鎺ュ彛锛堝彲鏌ュ湴鍧楀悕锛�
+            //     axios.post(common.poiserve2, {
+            //       adcode: "110115",
+            //       address: {
+            //         name: "",
+            //         type: "",
+            //       },
+            //       adname: "澶у叴鍖�",
+            //       cityname: "鍖椾含甯�",
+            //       name: {
+            //         name: this.poi_text,
+            //         type: "",
+            //       },
+            //       page: 1,
+            //       perPageCount: 20,
+            //       pcode: "110000",
+            //       pname: "",
+            //       resType: "",
+            //     }),
+            //     // // 甯傜骇骞冲彴锛堢櫨搴︼細浼氭煡鍒板鍦帮級
+            //     // axios.get(common.poiserve, {
+            //     //   params: {
+            //     //     request: "bdPoi",
+            //     //     query: this.poi_text,
+            //     //     output: "json",
+            //     //     coord: "cgcs2000",
+            //     //     page_num: 0,
+            //     //     page_size: 20,
+            //     //   },
+            //     // }),
+            //     //  甯傜骇骞冲彴锛堥珮寰凤級
+            //     axios.get(common.poiserve, {
+            //       params: {
+            //         request: "GdPoi",
+            //         keywords: this.poi_text,
+            //         output: "json",
+            //         coord: "cgcs2000",
+            //         offset: 20,
+            //         page: 1,
+            //       },
+            //     }),
+            //   ])
+            //   .then(
+            //     (data) => {
+            //       // this.total = data.data.pois.length;
+            //       // this.poiList =
+            //       //   data.data && data.data.pois;
+            //       //115鎺ュ彛
+            //       if (data[0].status == 200) {
+            //         data[0].data.data.res &&
+            //           data[0].data.data.res
+            //             .filter((item) => {
+            //               return item.name.includes(this.poi_text);
+            //             })
+            //             .forEach((val) => {
+            //               Allresults.push(val);
+            //             });
+            //       }
+            //       // 甯傜骇骞冲彴
+            //       // // 鐧惧害
+            //       // if (data[1].data.status == 0) {
+            //       //   data[1].data.results.forEach((val) => {
+            //       //     let obj = {
+            //       //       address: val.address,
+            //       //       adname: val.area,
+            //       //       cityname: val.city,
+            //       //       id: val.uid,
+            //       //       lat: val.location.lat,
+            //       //       lng: val.location.lng,
+            //       //       name: val.name,
+            //       //       pname: val.province,
+            //       //     };
+            //       //     Allresults.push(obj);
+            //       //   });
+            //       // }
+            //       // 楂樺痉
+
+            //       console.log(data, "鏁版嵁");
+            //       if (data[0].data.status == 1) {
+            //         data[0].data.pois &&
+            //           data[0].data.pois
+            //             .filter((item) => {
+            //               return (
+            //                 item.pname.includes("鍖椾含") &&
+            //                 item.name.includes(this.poi_text)
+            //               );
+            //             })
+            //             .forEach((val) => {
+            //               let poiarr = val.location.split(",");
+            //               let poi = {
+            //                 lon: parseFloat(poiarr[0]),
+            //                 lat: parseFloat(poiarr[1]),
+            //               };
+            //               let obj = {
+            //                 adcode: val.adcode,
+            //                 address: val.address,
+            //                 adname: val.area,
+            //                 citycode: val.citycode,
+            //                 cityname: val.cityname,
+            //                 id: val.uid,
+            //                 lat: poi.lat,
+            //                 lng: poi.lon,
+            //                 name: val.name,
+            //                 pcode: val.pcode,
+            //                 pname: val.province,
+            //                 type: val.type,
+            //                 typecode: val.typecode,
+            //               };
+            //               Allresults.push(obj);
+            //             });
+            //       }
+            //       this.total = Allresults.length;
+            //       this.poiList = Allresults;
+            //       this.showList = true;
+            //       console.log(Allresults);
+            //     },
+            //     (response) => {
+            //       console.log("error");
+            //     }
+            //   );
             break;
           case "POI":
-            axios
-              .get(common.poiserve, {
-                params: {
-                  request: "GdPoi",
-                  keywords: this.poi_text,
-                  output: "json",
-                  coord: "cgcs2000",
-                  offset: 20,
-                  page: 1,
-                },
-              })
-              .then((res) => {
-                // 楂樺痉
-                if (res.data.status == 1) {
-                  res.data.pois &&
-                    res.data.pois
-                      .filter((item) => {
-                        var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
-                        return (
-                          item.pname.includes("鍖椾含") &&
-                          item.name.includes(this.poi_text) &&
-                          !reg.test(item.typecode)
-                        );
-                      })
-                      .forEach((val) => {
-                        let poiarr = val.location.split(",");
-                        let poi = {
-                          lon: parseFloat(poiarr[0]),
-                          lat: parseFloat(poiarr[1]),
-                        };
-                        let obj = {
-                          adcode: val.adcode,
-                          address: val.address,
-                          adname: val.area,
-                          citycode: val.citycode,
-                          cityname: val.cityname,
-                          id: val.uid,
-                          lat: poi.lat,
-                          lng: poi.lon,
-                          name: val.name,
-                          pcode: val.pcode,
-                          pname: val.province,
-                          type: val.type,
-                          typecode: val.typecode,
-                        };
-                        Allresults.push(obj);
-                      });
-                }
-                this.total = Allresults.length;
-                this.poiList = Allresults;
-                this.showList = true;
-              });
+            this.getGdPoi();
             break;
           case "鍦板潡":
-            axios
-              .post(common.poiserve2, {
-                adcode: "110115",
-                address: {
-                  name: "",
-                  type: "",
-                },
-                adname: "澶у叴鍖�",
-                cityname: "鍖椾含甯�",
-                name: {
-                  name: this.poi_text,
-                  type: "",
-                },
-                page: 1,
-                perPageCount: 20,
-                pcode: "110000",
-                pname: "",
-                resType: "",
-              })
-              .then((res) => {
-                if (res.status == 200) {
-                  res.data.data.res &&
-                    res.data.data.res
-                      .filter((item) => {
-                        // 鍒ゆ柇鍦板潡鏄惁鏈夋眽瀛�
-                        var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
-                        return (
-                          item.name.includes(this.poi_text) &&
-                          reg.test(item.typecode)
-                        );
-                      })
-                      .forEach((val) => {
-                        Allresults.push(val);
-                      });
-                }
-                this.total = Allresults.length;
-                this.poiList = Allresults;
-                this.showList = true;
-              });
+            this.getData();
             break;
         }
       }

--
Gitblit v1.9.3