From 065669d31914a2f65c48d351417f48e49bd79c0c Mon Sep 17 00:00:00 2001 From: lixuliang <lixuliang_hd@126.com> Date: 星期三, 13 三月 2024 11:30:46 +0800 Subject: [PATCH] Merge branch 'master' of http://103.135.160.14:9034/r/PM20221203225_MobileWeb --- src/components/leftMenu/sousuo2.vue | 235 ++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 155 insertions(+), 80 deletions(-) diff --git a/src/components/leftMenu/sousuo2.vue b/src/components/leftMenu/sousuo2.vue index 0186aeb..9686f35 100644 --- a/src/components/leftMenu/sousuo2.vue +++ b/src/components/leftMenu/sousuo2.vue @@ -1,54 +1,74 @@ <template> <div id="sousuo" class="sousuo"> <!-- 鎼滅储妗� --> - <div class="ssk" v-show="ssk.show"> - <span @click="ssjmxs" style="float: left; height: 100%; width: 80%; overflow: hidden"><i class="el-icon-search" - style="padding: 0px 15px 0px 20px"></i>{{ syssval }}</span> - <span v-show="syssval !== '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'" @click="clearval" style="float: right; height: 100%; width: 20%"><i - class="el-icon-circle-close"></i></span> - <span v-show="syssval !== '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'" style=" + <div class="ssk" v-if="ssk.show"> + <span + @click="ssjmxs" + style="float: left; height: 100%; width: 80%; overflow: hidden" + ><i class="el-icon-search" style="padding: 0px 15px 0px 20px;font-size: 0.15rem;"></i + >{{ syssval }}</span + > + <span + v-show="syssval !== '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'" + @click="clearval" + style="float: right; height: 100%; width: 20%" + ><i class="el-icon-circle-close"></i + ></span> + <span + v-show="syssval !== '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'" + style=" float: right; height: 100%; width: 10%; position: absolute; top: -1px; 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 v-show="syssval == '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'" style="float: right; height: 100%; width: 10%"> + <!-- <span v-show="syssval == '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'" style="float: right; height: 100%; width: 10%"> <img src="@/assets/img/navigation/addf.png" 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"> - <el-input placeholder="杈撳叆鍏抽敭瀛楁悳绱㈠湴鍥�" autofocus v-model="poi_text" @input="changeInput" clearable> + <div class="search-container"> + <div class="back" @click="cancless"></div> + <el-input + placeholder="杈撳叆鍏抽敭瀛楁悳绱㈠湴鍥�" + autofocus + v-model="poi_text" + @input="changeInput" + clearable + > <el-select v-model="select" slot="prepend" placeholder="璇烽�夋嫨"> - <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option> + <el-option + v-for="(item, index) in options" + :key="index" + :label="item.label" + :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> <!-- 缁撴灉鏄剧ず --> <div v-if="total != 0"> <div class="ssjg" v-show="ssjgxs"> - <div class="everyinfo" v-for="(item, index) in poiList" :key="index" @click="flyTo(item)"> - <div style="margin: 0.05rem 0"> - <i class="el-icon-map-location"></i>{{ item.name }} + <div + class="everyinfo" + v-for="(item, index) in poiList" + :key="index" + @click="flyTo(item)" + > + <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> @@ -72,13 +92,13 @@ 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; } @@ -91,38 +111,110 @@ width: 100%; height: 100%; top: 0; + left: 0; background-color: #f3f3f3; z-index: 99; } - -.el-select { - width: 80px; +.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: 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; +} .el-scrollbar .hover { background: none; } - -/* 姣忔潯鎼滅储缁撴灉 */ -.everyinfo { - color: #409eff; - padding: 0.05rem; - font-size: 0.16rem; - border-bottom: 1px solid lightgray; -} - +/* + 鎼滅储缁撴灉 +*/ .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 { + text-indent: 27px; + margin-top: 5px; + color: #000; + font-weight: 500; + font-size: 13px; +} .ssjg::-webkit-scrollbar { /*婊氬姩鏉℃暣浣撴牱寮�*/ width: 8px; @@ -153,7 +245,7 @@ import axios from "axios"; import store from "@/utils/store2.js"; import common from "@/components/common"; -import { createPointMarker, flyToPoint } from '@/utils/map2.js' +import { createPointMarker, flyToPoint } from "@/utils/map2.js"; window.flyPoint = null; window.flyLine = null; let Allresults = []; @@ -196,10 +288,10 @@ this.poi_text = ""; this.ssjgxs = false; if (window.pointArr && window.pointArr.length > 0) { - window.pointArr.forEach(item => { - window.mapapi.removeLayer(item) - }) - window.pointArr = [] + window.pointArr.forEach((item) => { + window.mapapi.removeLayer(item); + }); + window.pointArr = []; } }, changeInput() { @@ -224,10 +316,10 @@ cancless() { this.ssjm = false; if (window.pointArr && window.pointArr.length > 0) { - window.pointArr.forEach(item => { - window.mapapi.removeLayer(item) - }) - window.pointArr = [] + window.pointArr.forEach((item) => { + window.mapapi.removeLayer(item); + }); + window.pointArr = []; } }, getArea() { @@ -275,14 +367,14 @@ 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) - // ); - // }) + .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 = { @@ -504,27 +596,10 @@ this.ssjm = false; this.syssval = item.name; //椋炶瀹氫綅 - flyToPoint([item.lng, item.lat]) + flyToPoint([item.lng, item.lat]); //鍒涘缓鐐逛綅 let layer = createPointMarker([item.lng, item.lat], item); - window.mapapi.addLayer(layer) - - - - - - - - - - - - - - - - - + window.mapapi.addLayer(layer); // let that = this; // let degrees = item.location.split(','); -- Gitblit v1.9.3