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.stationName }}</view>
							<!-- <view class="aux" v-html="item.parkTips"></view> -->
							<view class="aux">{{ item.tips }}</view>
							<view class="info">
								<view class="sta"><text class="txt green">快</text><text class="val">{{
									item.fastIdleCount }}</text><text class="unit">/{{ item.fastTotalCount
										}}</text></view>
								<view class="sta"><text class="txt blue">慢</text><text class="val">{{
									item.slowIdleCount }}</text><text class="unit">/{{ item.slowTotalCount
										}}</text></view>
								<view class="sta"><text class="txt orange">距离</text><text class="val">{{
									item.distance }}km</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/new-site/new-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("get", "/applet/v1/station/search", { longitude: lng, latitude: lat, keyword: 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.data
			})
		},
		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>