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