charge_miniapp/pages/search/search.vue

<template>
	<ax-body blank="0">
		<view class="page-background"><image src="@/static/img/my-bg.svg" mode="widthFix"></image></view>
		<view class="body">
			<view class="search-box">
				<icon class="ax-iconline i-search icon"></icon>
				<input v-model="search" placeholder="输入目的地/电站名" placeholder-class="app-placeholder" class="input"/>
				<view v-if="search.length" @click="search=''" class="clear"><icon class="ax-iconblock i-cuowu"></icon></view>
				<text @click="query()" class="txt">搜索</text>
			</view>
			<!-- 搜索历史 -->
			<view v-if="histories.length" class="history">
				<view class="title">
					<text class="txt">搜索历史</text>
					<icon @click="clean()" class="ax-iconline i-delete icon"></icon>
				</view>
				<view class="list app-hide-scrollbar">
					<view class="wrap"><view v-for="(item,index) in histories" :key="index" @click="setSearch(item)" class="item">{{item}}</view></view>
				</view>
			</view>
			<!-- 搜索结果 -->
			<view class="result">
				<view class="title">
					<text class="txt">搜索结果</text>
					<text class="total">共计 {{result.length}} 条</text>
				</view>
				<view class="list">
					<view class="wrap app-hide-scrollbar">
						<view v-for="(item,index) in result" :key="index" class="site" @click="gotoSiteDetail(item)" >
							<view class="name">{{item.name}}</view>
							<!-- <view class="aux" v-html="item.parkTips"></view> -->
							<view class="aux">充电减免2小时停车费，超出时长部分计时收费</view>
							<view class="info">
								<view class="sta"><text class="txt green">快</text><text class="val">{{item.params.emptyFast}}</text><text class="unit">/{{item.params.totalFast}}</text></view>
								<view class="sta"><text class="txt blue">慢</text><text class="val">{{item.params.emptySlow}}</text><text class="unit">/{{item.params.totalSlow}}</text></view>
								<view class="sta"><text class="txt orange">距离</text><text class="val">{{item.params.rangeShow}}</text></view>
							</view>
						</view>
						<view v-if="!result.length" class="empty">
							<icon class="ax-iconblock i-meiyou icon"></icon>
							<text class="txt">暂无数据展示</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</ax-body>
</template>

<script>
	export default {
		onLoad() {
			this.histories = this.$app.storage.get('history-search') || [];
		},
		data() {
			return {
				search: "",
				histories:[],
				result:[]
			}
		},
		methods: {
			convertBdToTx(lng, lat) {
			    // 百度坐标系（BD09）转火星坐标系（GCJ-02，即腾讯地图使用的坐标系）  
			    // 这里的转换公式是基于经验公式，可能存在一定的误差  
			    let x_pi = 3.14159265358979324 * 3000.0 / 180.0;  
			    let x = lng - 0.0065;  
			    let y = lat - 0.006;  
			    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);  
			    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);  
			    let lngs = z * Math.cos(theta);  
			    let lats = z * Math.sin(theta);  
			    return { lng: lngs, lat: lats };  
			},
			gotoSiteDetail(item){
				this.$app.url.goto('/pages/site/site?item='+JSON.stringify(item));
			},
			query(){
				const history = Array.from(new Set([this.search].concat(this.histories)));
				this.histories = history;
				this.$app.storage.set('history-search',history);
				this.result = [{},{},{},{},{}];
				let location = this.$app.storage.get('USER_LOCATION')
				let lng = ""
				let lat = ""
				if(location&&location.split(",").length==2){
					lng = location.split(",")[0]
					lat = location.split(",")[1]
				}
				var key = this.search
				this.$api.base("post","/chargeApi/getStations",{order:"0",lng,lat,key},{}).then(res=>{
					res.stationList.forEach(i=>{
						var txPoint = this.convertBdToTx(i.lng,i.lat)
						i.lng = txPoint.lng
						i.lat = txPoint.lat
					})
					this.result = res.stationList
				})
			},
			setSearch(item){
				this.search = item;
				this.query();
			},
			clean(){
				this.$app.popup.confirm('确定是否删除所有历史搜索纪录?','清空历史').then(confirm=>{
					if(confirm){
						this.histories = [];
						this.$app.storage.remove('history-search');
					}
				});
			}
		}
	}
</script>

<style scoped>
@import url("search.css");
</style>