切换站点后返回首页更新对应经纬度地铁站的附近商家数据
<template>
<view style="background: white;height: 100vh;">
<view class="box">
<view class="search">
<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202305160606186019-Group%2034002%403x.png" mode=""></image>
<view class="inputCon">
<input type="search"
placeholder="输入地铁站"
v-model="searchValue"
confirm-type="search"
@confirm="search()">
</view>
<!-- <button class="" @click="clearSearch" v-show="searchValue !== ''"> -->
<view class="clear-btn" v-show="showX" @click.stop="clearSearch">
<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202305181128091966-Group%2034033%403x.png" mode=""></image>
</view>
<!-- </button> -->
</view>
<view class="list-box" v-if="showList">
<view class="item active" v-for="(item, index) in stationList" :key="index" @click="onSelectStation(item)" v-html="item.subway_name">
</view>
</view>
<view v-if="isContent">
<view style="margin-top: 50rpx;" class="pickers">
<text>选择地铁站</text>
<view style="max-width:max-content;
height: 46rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid rgba(0,139,124,0.1);
padding-top: 2rpx;
padding-bottom: 2rpx;
padding-left: 10rpx;
padding-right: 10rpx;">
<image src="https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202304231132081261-Group%2034001.png" mode=""></image>
<text style="font-size: 28rpx;
font-weight: 400;
color: #008B7C;
line-height: 33rpx;">{
{
currentStation}}</text>
</view>
<!-- <view class="picker-value">{
{
line }} - {
{
station }}</view> -->
</view>
<text class="search_txt">历史记录:</text>
<view class="search_history">
<view v-for="(item, index) in searchHistory" :key="index" @tap="onSearchHistoryTap(item)" class="search_item" @click="toIndex()">
<text>{
{
item }}</text>
</view>
</view>
</view>
</view>
<view style="border-top-left-radius: 60rpx;border-top-right-radius: 60rpx;background: #fafafa;padding-top: 20rpx;" v-if="isContent">
<view class="box1">
<view class="line-list" @scroll="onScroll">
<view class="line-item" v-for="(line, index) in lines" :key="index"
:class="{ active: line.label === currentLine }" @click="selectLine(line)">
{
{
line.label }}
</view>
</view >
<view class="station-list">
<view class="station-item" v-for="(station, index) in stations" :key="index"
:class="{ active: station.label === currentStation }" @click="selectStation(station)">
{
{
station.label }}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
sub: "",
line: "",
station: "",
lines: [],
stations: [] ,
City:[],
searchValue:'',
searchHistory:[],
stationList: [], // 下拉列表数据
showList: false ,// 判断下拉列表是否显示
timer: null ,// 定时器开关
isContent:true,//出现下拉列表时隐藏页面内容
zhanshi:"",
showX:false,currentStation:'',currentLine:'',currentId:'',scrollTop:0
};
},
watch: {
searchValue: function(val) {
if (this.timer) clearTimeout(this.timer); // 清除上个定时器
this.timer = setTimeout(() => {
if (val) {
this.search(); // 发起搜索请求
this.showList = true; // 显示下拉菜单
this.showX = true //显示删除按钮
this.isContent = false
} else {
this.stationList = []//清空上一次的下拉展示记录
this.showList = false; // 隐藏下拉菜单
this.showX = false
this.isContent = true
}
}, 500); // 设置定时器，延迟 300 毫秒后开始搜索
}
},
// 在组件挂载后获取 localcityNm 缓存值，并请求地铁线路列表
mounted() {
this.sub = uni.getStorageSync("localcityNm");
this.getSubwayLinesList();
},
// 在页面加载时获取历史搜索记录和定位标志，将定位标志设为 false
onLoad(){
const scrollPosition = uni.getStorageSync('scrollPosition')
if (scrollPosition) {
this.scrollTop = scrollPosition
wx.pageScrollTo({
scrollTop: scrollPosition,
duration: 0
})
}
this.searchHistory = uni.getStorageSync("searchHistory")
console.log(this.searchHistory+'11')
// const isDinwei = uni.getStorageSync('isDinwei')
// uni.setStorageSync('isDinwei',false)
},
onShow(){
this.selectLine()
const scrollPosition = uni.getStorageSync('scrollPosition')
if (scrollPosition) {
this.scrollTop = scrollPosition
wx.pageScrollTo({
scrollTop: scrollPosition,
duration: 0
})
}
},
methods: {
onScroll(event){
this.scrollTop = event.detail.scrollTop
uni.setStorageSync('scrollPosition', this.scrollTop)
console.log(this.scrollTop,'滚动距离')
},
// 选择地铁线路的函数
selectLine(line) {
console.log(line,'111');
// 将当前选中的地铁线路的 value 值赋值给 currentId
this.currentId = line.value;
// 将当前选中的地铁线路的 label 值赋值给 currentLine
this.currentLine = line.label;
// 将当前选中的地铁线路的 value 值存储到本地缓存中
uni.setStorageSync('localcityLineId',this.currentId);
// 将当前选中的地铁线路的 label 值存储到本地缓存中
uni.setStorageSync("localcityLine",this.currentLine);
// 将当前选中的地铁站点清空
this.currentStation = '';
console.log(line.value,'1111111');
// 如果本地缓存中没有存储过地铁线路，则调用 getSubwayStations 函数获取该地铁线路下的所有地铁站点信息
// 否则，直接使用本地缓存中存储的地铁线路 ID 调用 getSubwayStations 函数获取该地铁线路下的所有地铁站点信息
// 注释掉的代码为这部分逻辑的实现
// if(uni.getStorageSync('localcityLineId')==''){
// this.getSubwayStations(line.value, true);
// }else{
// this.getSubwayStations(uni.getStorageSync('localcityLineId'), true);
// }
this.getSubwayStations(line.value, true);
},
// 选择地铁站点的函数
selectStation(station) {
console.log(station,'wadada');
// 将当前选中的地铁站点的 label 值赋值给 currentStation
this.currentStation = station.label;
// 将当前选中的地铁站点的 label 值存储到本地缓存中
uni.setStorageSync('localcityNm', this.currentStation);
// 在 City 数组中查找与当前选中的地铁站点名称相同的对象
const currentStation = this.City.find((item) => item.subway_name === this.currentStation);
if (currentStation) {
// 如果找到了对应的对象，则将该对象的经纬度信息存储到本地缓存中，并跳转到首页
const currentStationObj = JSON.parse(JSON.stringify(currentStation));
const stations = this.stations.map(item=>{
return item;
});
console.log(stations,'');
const {
subway_latitude,
subway_longitude
} = currentStationObj;
const newObj = {
lat: subway_latitude,
lng: subway_longitude
};
uni.setStorageSync('City', newObj);
uni.setStorageSync('isDinwei',true)
this.toIndex();
}
},
//清空搜索框
clearSearch() {
this.searchValue = '';
},
// 跳转到首页
toIndex(){
uni.navigateBack(1)
},
// 点击历史搜索记录项触发的事件
onSearchHistoryTap(item) {
console.log(item,'我是点击的某一项')
// 将点击的历史搜索记录项值赋给搜索框
this.searchValue = item;
// 执行搜索方法进行搜索，并将定位标志设置为 true
this.onSelectStation();
uni.setStorageSync('localcityNm', this.searchValue);
uni.setStorageSync('isDinwei',true)
},
// 选择了某个地铁站时，更新当前页面显示的地铁站名称和存储的相关信息
onSelectStation(station) {
const newStationName = station.subway_name.replace(/<[^>]*>/g, ''); // 去除所有 HTML 标签
this.station = newStationName; // 更新当前显示的地铁站名称
uni.setStorageSync('localcityNm',newStationName); // 存储所选地铁站名称
const currentStationObj = JSON.parse(JSON.stringify(station));
const {
subway_latitude, subway_longitude } = currentStationObj;
const newCityData = {
lat: subway_latitude, lng: subway_longitude };
uni.setStorageSync('City', newCityData); // 存储所选地铁站的经纬度信息
// const isDinwei = uni.getStorageSync('isDinwei');
uni.setStorageSync('isDinwei', true);
const history = uni.getStorageSync('searchHistory') || [];
if (!history.includes(newStationName)) {
//判断搜索历史记录中是否有值，无值执行以下代码
this.searchHistory = history;
this.searchHistory.unshift(newStationName);//在历史记录数组中首位添加搜索内容
if (this.searchHistory.length > 10) {
// 保留10个值
this.searchHistory.pop()//当大于十个值时删掉数组末尾的值
}
uni.setStorageSync('searchHistory', this.searchHistory); // 存储搜索历史记录
uni.setStorageSync('isDinwei', true); // 设置已定位标志为true，避免再次进行定位操作
// history.push(newStationName);
uni.setStorageSync('localcityNm', newStationName);
this.searchValue = ''
this.toIndex(); // 跳转到首页
this.searchHistory = history;
uni.setStorageSync('searchHistory', this.searchHistory); // 存储搜索历史记录
}else{
//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
this.searchHistory = history;
let i = this.searchHistory.indexOf(newStationName);
this.searchHistory.splice(i, 1);
this.searchHistory.unshift(newStationName);
if (this.searchHistory.length > 10) {
// 保留10个值
this.searchHistory.pop()
}
uni.setStorageSync('searchHistory', this.searchHistory); // 存储搜索历史记录
// 请勿重复搜索
this.toIndex(); // 跳转到首页
uni.setStorageSync('isDinwei', true); // 设置已定位标志为true，避免再次进行定位操作
uni.setStorageSync('localcityNm', newStationName);// 设置已定位标志为true，避免再次进行定位操作
this.searchValue = ''
this.isContent = true
this.showList = false; // 关闭下拉列表
}
},
async search() {
try {
const res = await this.$request.post("subway/getSubwayStation", {
city_id: uni.getStorageSync("localcityId"),
subway_name: this.searchValue.trim()
});
const data = res.data;
// console.log(data,'数据格式')
const station = data[0];
if (station) {
this.showList = true;
this.isContent = false
//一定要是大于等于，不然匹配规则就有问题，匹配到单个不会显示
if (data.length >= 1) {
// 如果匹配到多个地铁站，则将所有信息保存到stationList中，并显示下拉列表
this.stationList = data;
wx.hideKeyboard()
this.stationList = data.map(item => {
const reg = new RegExp(this.searchValue, 'g'); // 使用正则表达式进行全局匹配
const newName = item.subway_name.replace(reg, `<span style="color:#008B7C">${
this.searchValue}</span>`); // 将匹配到的部分用<span>标签包裹，并修改文字颜色
return {
...item, subway_name: newName };
});
console.log(this.stationList,'我是处理好的数据')
}
else {
// 如果只匹配到一个地铁站，则直接定位到该地铁站
const newStationName = station.subway_name.replace(/<[^>]*>/g, '');
this.station = newStationName;
uni.setStorageSync('localcityNm', newStationName);
const currentStationObj = JSON.parse(JSON.stringify(station));
const {
subway_latitude, subway_longitude } = currentStationObj;
const newCityData = {
lat: subway_latitude, lng: subway_longitude };
uni.setStorageSync('City', newCityData);
const history = uni.getStorageSync('searchHistory') || [];
// const newStationName = station.subway_name.replace(/<[^>]*>/g, '');
//搜索完毕后关闭真机小键盘，防止点击一键清空搜索框不生效
wx.hideKeyboard()
// if (!history.includes(newStationName)) {
// const isDinwei = uni.getStorageSync('isDinwei')
// uni.setStorageSync('isDinwei',true)
// this.toIndex()
// history.push(newStationName);
// uni.setStorageSync('localcityNm', newStationName);
// this.searchHistory=history;
// uni.setStorageSync('searchHistory', this.searchHistory);
// }
}
}else{
uni.showToast({
title: '未找到该地铁站点',
icon: 'none'
});
wx.hideKeyboard()
}
} catch (error) {
console.log(error);
}
},
// 请求地铁线路列表
async getSubwayLinesList() {
try {
const res = await this.$request.post("subway/getSubwayLinesList", {
city_id: uni.getStorageSync("localcityId")
});
const data = res.data;
const lines = data;
console.log(lines)
// 将 S1 线移到数字线路的末尾
const s1LineIndex = lines.findIndex(item => item.id === 15);
if (s1LineIndex !== -1) {
const s1Line = lines.splice(s1LineIndex, 1)[0];
lines.push(s1Line);
}
// 对地铁线路按照数字顺序进行排序，并将带汉字的线路排到数字线路后面
lines.sort((a, b) => {
const numA = a.lines.match(/\d+/g) ? parseInt(a.lines.match(/\d+/g), 10) : Infinity;
const numB = b.lines.match(/\d+/g) ? parseInt(b.lines.match(/\d+/g), 10) : Infinity;
if (numA !== numB) {
return numA - numB;
} else {
// 如果两个线路的数字相同，则按照名称进行排序
if (a.lines < b.lines) {
return -1;
} else if (a.lines > b.lines) {
return 1;
} else {
return 0;
}
}
});
// 格式化地铁线路名称列表数据，并存储到当前组件实例的 lines 属性中
this.lines = lines.map(item => ({
label: item.lines,
value: item.id
}));
// 获取本地存储中选中站点所属的线路 ID，并从地铁线路列表数据中找到该 ID 对应的线路对象
if (uni.getStorageSync("localcityLine")!='') {
// this.currentLine = lines[0].lines;
this.currentLine = uni.getStorageSync("localcityLine");
} else {
this.currentLine = lines[0].lines;
}
this.getSubwayStations(this.currentLine); // 获取第一个地铁线路的站点列表
} catch (error) {
console.log(error);
}
},
// 请求指定地铁线路的站点列表
async getSubwayStations(lineId) {
try {
// 调用后端API获取数据
if(uni.getStorageSync('localcityLineId')==''){
const res = await this.$request.post("subway/getSubwayStationList", {
lines_id:lineId
});
const data = res.data;
// 将数据存储到stations变量中
const stations = data;
this.currentStation = stations[0].subway_name;
// 将每个站点的名称和id转换为label和value，存储到this.stations数组中
this.stations = stations.map(item => ({
label: item.subway_name,
value: item.id,
subway_latitude:item.subway_latitude,
subway_longitude:item.subway_longitude
})); // 存储地铁站点名称列表到 data 中
// 将data中的所有数据存储到City变量中
const City = data
this.City = City
// 如果用户没有选择站点，则默认选择距离用户最近的站点
if (!this.currentStation) {
// 如果用户还没有选择站点，则将其设为本地存储中的城市名localcityNm
this.currentStation = uni.getStorageSync('localcityNm')
}else{
this.currentStation = uni.getStorageSync('localcityNm')
}
}else{
const res = await this.$request.post("subway/getSubwayStationList", {
lines_id:uni.getStorageSync('localcityLineId')
});
const data = res.data;
// 将数据存储到stations变量中
const stations = data;
this.currentStation = stations[0].subway_name;
// 将每个站点的名称和id转换为label和value，存储到this.stations数组中
this.stations = stations.map(item => ({
label: item.subway_name,
value: item.id,
subway_latitude:item.subway_latitude,
subway_longitude:item.subway_longitude
})); // 存储地铁站点名称列表到 data 中
// 将data中的所有数据存储到City变量中
const City = data
this.City = City
// 如果用户没有选择站点，则默认选择距离用户最近的站点
if (!this.currentStation) {
// 如果用户还没有选择站点，则将其设为本地存储中的城市名localcityNm
this.currentStation = uni.getStorageSync('localcityNm')
}else{
this.currentStation = uni.getStorageSync('localcityNm')
}
}
} catch (error) {
console.log(error);
}
},
}
};
</script>
<style lang="less" scoped>
.box1 {
display: flex;
width: 100%;
height: 65vh;
margin-top: 20rpx;
.line-list {
// display: flex;
width: 50%;
border-right: 1rpx solid #f5f5f5;
overflow-y: scroll;
white-space: nowrap;
.line-item {
font-size: 28rpx;
padding: 10rpx 20rpx;
margin-bottom: 40rpx;
color: #666;
cursor: pointer;
text-align: center;
transition: all 0.3s ease-in-out;
&.active {
color: #008B7C;
font-weight: bold;
}
}
.line-scroll {
flex: 1;
}
}
.station-list {
width: 50%;
// display: flex;
overflow-y: scroll;
white-space: nowrap;
.station-item {
text-align: center;
font-size: 28rpx;
padding: 10rpx 20rpx;
margin-bottom: 40rpx;
color: #666;
cursor: pointer;
transition: all 0.3s ease-in-out;
&.active {
color: #008B7C;
font-weight: bold;
}
}
.station-scroll {
flex: 1;
}
}
}
.header {
background-color: #f5f5f5;
padding: 20rpx;
text-align: center;
.title {
font-size: 32rpx;
color: #333;
}
}
.box{
padding-left:24rpx;
padding-right: 20rpx;
background: white;
// height: 45vh;
margin-bottom: 30rpx;
.search_history{
width: 100%;
display: flex;
flex-wrap: wrap;
.search_item{
width: max-content;
height: 56rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
border: 2rpx solid rgba(0,0,0,0.1);
margin-right:20rpx ;
padding-left: 10rpx;
padding-right: 10rpx;
margin-bottom: 20rpx;
text{
font-size: 28rpx;
font-weight: 400;
line-height: 56rpx;
text-align: center;
color: #666666;
}
}
}
.picker {
font-size: 16px;
color: #000;
line-height: 40px;
text-align: center;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
margin-top: 20px;
}
.pickers{
text{
font-size: 24rpx;
font-weight: 400;
color: #666666;
line-height: 68rpx;
}
image{
width: 24rpx;
height: 28rpx;
vertical-align: middle;margin-right: 6rpx;
}
}
.search_txt{
display: block;
font-size: 24rpx;
font-weight: 400;
color: #666666;
margin-top: 20rpx;
line-height: 78rpx;
}
.search {
/* // flex: 1; */
width: 100%;
padding-left: 42rpx;
padding-right: 32rpx;
height: 80rpx;
position: relative;
top: 32rpx;
// bottom: -0rpx;
border-radius: 300rpx;
image {
position: absolute;
width: 28rpx;
height: 28rpx;
top: 26rpx;
left: 22rpx;
z-index: 999;
}
input {
background: #F5F5F5;
height: 80rpx;
width: 82%;
position: absolute;
left: 0;
top: 0;
margin: 0 auto;
// border: none;
border-radius: 300rpx;
padding: 0;
margin: 0;
padding-left: 60rpx;
color: #666666;
font-size: 24rpx;
}
.clear-btn{
width: 16rpx;
height: 16rpx;
position: absolute;
right: 140rpx;
top: 2rpx;
z-index: 999;
}
}
.dinwei{
font-size: 24rpx;
font-weight: 400;
color: #666666;
line-height: 28rpx;
}
}
.list-box{
padding: 22rpx;
margin-top: 20rpx;
.item{
width: 100%;
padding-bottom: 20rpx;
padding-top: 20rpx;
border-bottom: 1rpx solid rgba(0,0,0,0.02);
color: #666666 ;
font-size: 30rpx;
}
.item:hover .active{
color: #000;
}
}
</style>