uniApp搜索页面

 

 

 

<template>
	<view class="introScroll">
		<u-navbar title="" :is-back="false" :border-bottom="false" :title-bold="true">
			<!-- 城市搜索输入框 -->
			<view class="serchView">
				<image @tap="goBack" style="width: 48rpx; height: 48rpx; margin-left: 30rpx" src="@/static/images/busTicket/go_back.png" mode=""></image>
				<view class="serch">
					<image class="serchIconImage" src="/static/app-plus/image/center/centertool/shopRecruit/img_search_logo.png"></image>
					<input @input="cityInputListener" v-model="value" adjust-position="false" class="serchInput" placeholder="输入城市名称进行搜索" type="text" />
				</view>
			</view>
		</u-navbar>
		<view class="topView">
			<!-- 定位城市-标题 -->
			<!-- <view class="nowCityTextTipsView">
				<text class="nowLocationCity">当前定位城市</text>
			</view> -->
			<!-- 定位城市-内容 -->
			<!-- <view class="againLocationView">
				<text class="loactionText">{
  { nowCity }}</text>
				<text class="loactionStatusText">{
  { locationStatus }}</text>
				<image :animation="animation" @click="locationImageClick" class="refreshImage" src="/static/app-plus/image/index/refreshIcon.png"></image>
			</view> -->
		</view>
		<!-- 右侧字母 -->
		<view class="city_right">
			<text class="letter_item" v-for="(item, index) in letter" :key="index" @tap.stop="letterTap(index)">{
  { item }}</text>
		</view>
		<scroll-view scroll-with-animation="true" class="cityListView" scroll-y="true" :scroll-into-view="scrollId">
			<view style="display: flex; justify-content: space-between; align-items: center">
				<!-- 历史城市 -->
				<text class="hotCityTips">历史</text>
				<button @click="empty" style="height: 50rpx; display: flex; margin-right: 20rpx; align-items: center">
					<!-- <van-icon class="icon" name="delete-o" /> -->
					<text style="font-size: 24rpx">清除记录</text>
				</button>
			</view>

			<view class="new_city_box">
				<text class="new_city_text" v-for="(item, index) in historyCityList" :key="index" @tap.stop="cityHistory(index)">
					{
  { item }}
				</text>
			</view>
			<image
				class="historyMore"
				v-if="historyArrowShow.length > 4"
				@tap="getMoreHistory"
				:class="{ arrowTransform: !flag, arrowTransformReturn: flag }"
				src="@/static/images/busTicket/bottom_icon.png"
			></image>
			<view v-if="historyCityList.length == 0" style="margin-left: 100rpx; margin-bottom: 30rpx">
				<text style="color: #999999">暂无历史搜索记录</text>
			</view>
			<!-- <p v-else style="text-align: center; margin: 0 auto; font-size: 16px; margin-top: 20px">暂无搜索记录</p> -->
			<!-- 热门城市 -->
			<text class="hotCityTips" :id="'re'">热门</text>
			<view class="new_city_box">
				<text class="new_city_text" v-for="(item, index) in hotCityList" :key="index" @tap.stop="cityTap(index)">{
  { item.city }}</text>
			</view>
			<!-- 城市列表 -->
			<view class="forCityView">
				<view class="forCityItem" v-for="(item, index) in allCityList" :key="index">
					<view v-if="item.show" :id="item.letter" class="letterItemFirst">{
  { item.letter }}</view>
					<text @click="cityItemClick(index)" class="itemCityContent">{
  { item.city }}</text>
					<view v-if="!item.last" class="line"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			nowCity: '',
			value: '',
			locationStatus: '定位成功',
			letter: ['热', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			//热门城市
			hotCityList: [],
			//全部城市
			allCityList: [],
			//滑动到指定位置
			scrollId: '',
			//动画
			animation: {},
			//接口请求的数据
			cityList: [],
			receiveId: null,
			historyCityList: [],
			flag: false,
			historyArrowShow: []
		};
	},

	onLoad(options) {
		//设置title标题
		this.nowCity = '北京';
		this.hotCityList = this.returnHotCity();
		uni.setNavigationBarTitle({
			title: '当前城市-' + this.nowCity
		});
		//获取全国城市
		this.getCityList();
		this.receiveId = options.id;
	},
	created() {},
	mounted() {
		// 历史列表
		if (JSON.parse(localStorage.getItem('historyCityList'))) {
			this.historyArrowShow = JSON.parse(localStorage.getItem('historyCityList'));
			this.historyCityList = JSON.parse(localStorage.getItem('historyCityList')).splice(0, 4);
		}
	},
	methods: {
		//拼音点击事件
		letterTap(index) {
			console.log(index);
			if (this.letter[index] == '热') {
				this.scrollId = 're';
			} else {
				this.scrollId = this.letter[index];
			}
		},
		// 清空历史搜索记录
		empty() {
			// this.$notify({ type: 'success', message: '清空历史搜索成功' })
			localStorage.removeItem('historyCityList');
			this.historyCityList = [];
			this.historyArrowShow = [];
		},
		//搜索
		cityInputListener(e) {
			let value = e.detail.value;
			// console.log('22', value);
			let cityAll = this.allCityList;
			let newArray = [];
			for (let i = 0; i < cityAll.length; i++) {
				if (cityAll[i].city == value || cityAll[i].letter == value.toUpperCase()) {
					newArray.push(cityAll[i]);
				}
			}
			if (value == '') {
				this.formatCityData(this.cityList);
			} else {
				this.formatCityData(newArray);
			}
			// if (value == '') {
			// 	// this.$toast("请输入搜索内容");
			// 	// this.$notify({ type: 'primary', message: '请输入搜索内容' });
			// 	return false;
			// } else {
			// 	if (!this.historyCityList.includes(value)) {
			// 		// this.historyCityList.unshift({ city: value });
			// 		this.historyCityList.unshift(value);
			// 		localStorage.setItem('historyCityList', JSON.stringify(this.historyCityList));
			// 	} else {
			// 		const i = this.historyCityList.indexOf(value);
			// 		this.historyCityList.splice(i, 1);
			// 		this.historyCityList.unshift({ city: value });
			// 		localStorage.setItem('historyCityList', JSON.stringify(this.historyCityList));
			// 	}
			/