616 lines
12 KiB
Vue
616 lines
12 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
|
||
|
|
<u-navbar>
|
||
|
|
<view class="slot-wrap">
|
||
|
|
<image class="icon" src="@/static/images/sousuohui@3.png" mode=""></image>
|
||
|
|
<input type="text" v-model="value" placeholder="输入中文/拼音/首字母"
|
||
|
|
placeholder-style="color:#999999;font-size:28rpx" @confirm="choseAddress(value)" />
|
||
|
|
</view>
|
||
|
|
</u-navbar>
|
||
|
|
<view class="container modal" v-if="cityList.length>0">
|
||
|
|
<view class="list-cell u-border-bottom" v-for="(item1, index) in cityList" :key="index"
|
||
|
|
@click="choseAddress2(item1)">
|
||
|
|
{{ item1.station_name}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="container" v-else>
|
||
|
|
<!-- <view class="citynow" :style="{ display: data.length <= 0 ? 'none' : '' }">
|
||
|
|
<view class="lable">当前/历史</view>
|
||
|
|
<view class="city-ul">
|
||
|
|
<view class="city-li" v-for="(item, index) in data" :key="index"
|
||
|
|
@click="choseAddress(item.station)">
|
||
|
|
<u-icon v-if="index == 0" name="map-fill" color="#2979ff" size="28"></u-icon>
|
||
|
|
{{ item.station }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
|
||
|
|
<!-- <view class="cityhot" v-if="status">
|
||
|
|
<view class="lable">
|
||
|
|
热门城
|
||
|
|
</view>
|
||
|
|
<view class="city-ul">
|
||
|
|
<view class="city-li" v-for="(item,index) in gleam" :key='index' @click="choseAddress(item.name)">
|
||
|
|
{{item.name}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
|
||
|
|
<view class="cityIndex" v-if="status">
|
||
|
|
<u-index-list :scrollTop="scrollTop" :index-list="indexList">
|
||
|
|
<view v-for="(item, index) in list" :key="index">
|
||
|
|
<u-index-anchor :index="item.letter" />
|
||
|
|
<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index"
|
||
|
|
@click="choseAddress(item1)">
|
||
|
|
{{ item1 }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-index-list>
|
||
|
|
</view>
|
||
|
|
<view class="cityBox" v-else>
|
||
|
|
<view class="box-ul">
|
||
|
|
<view class="box-li" v-if="searchList" @click="choseAddress(searchList)">
|
||
|
|
{{ searchList }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-back-top :scroll-top="scrollTop"></u-back-top>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const {
|
||
|
|
globalData
|
||
|
|
} = getApp();
|
||
|
|
import oRequest from '@/api/admin.js';
|
||
|
|
// import my from '@/api/my';
|
||
|
|
// import railway from '@/api/railway.js';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
type: '',
|
||
|
|
data: [],
|
||
|
|
gleam: [{
|
||
|
|
name: '北京'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '上海'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '深圳'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '广州'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
status: true,
|
||
|
|
indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W',
|
||
|
|
'X', 'Y', 'Z'
|
||
|
|
],
|
||
|
|
scrollTop: 0,
|
||
|
|
searchList: '',
|
||
|
|
value: '',
|
||
|
|
cityList: [],
|
||
|
|
//lists:_stations,
|
||
|
|
list: [{
|
||
|
|
letter: 'A',
|
||
|
|
data: ['阿拉善盟', '鞍山', '安庆', '安阳', '阿坝', '安顺', '阿里', '安康', '阿克苏', '阿勒泰']
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'B',
|
||
|
|
data: [
|
||
|
|
'北京','保定','包头','巴彦淖尔','本溪','白山','白城','蚌埠','亳州','滨州','北海','百色','巴中','毕节','保山','宝鸡','白银','博尔塔拉','巴音郭楞'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'C',
|
||
|
|
data: [
|
||
|
|
'承德','沧州','长治','赤峰','长春','常州','滁州','池州','长沙','常德','郴州','潮州','崇左','重庆','成都','楚雄','昌都','昌吉'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'D',
|
||
|
|
data: [
|
||
|
|
'大同','大连','丹东','大庆','大兴安岭','东营','德州','东莞','东沙群岛','德阳','达州','大理','德宏','迪庆','定西'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'E',
|
||
|
|
data: ['鄂尔多斯', '鄂州', '恩施']
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'F',
|
||
|
|
data: ['抚顺', '阜新', '阜阳', '福州', '抚州', '佛山', '防城港']
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'G',
|
||
|
|
data: ['赣州', '广州', '桂林', '贵港', '广元', '广安', '甘孜', '贵阳', '甘南', '果洛', '固原',
|
||
|
|
'高雄'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'H',
|
||
|
|
data: [
|
||
|
|
'邯郸','衡水','呼和浩特','呼伦贝尔','葫芦岛','哈尔滨','鹤岗','黑河','淮安','杭州','湖州','合肥','淮南','淮北','黄山','菏泽','鹤壁','黄石','黄冈','衡阳','怀化','惠州','河源','贺州','河池','海口','红河','汉中','海东','海北','黄南','海南','海西','哈密','和田','花莲县','海外'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'J',
|
||
|
|
data: [
|
||
|
|
'晋城',
|
||
|
|
'晋中',
|
||
|
|
'锦州',
|
||
|
|
'吉林',
|
||
|
|
'鸡西',
|
||
|
|
'佳木斯',
|
||
|
|
'嘉兴',
|
||
|
|
'金华',
|
||
|
|
'景德镇',
|
||
|
|
'九江',
|
||
|
|
'吉安',
|
||
|
|
'济南',
|
||
|
|
'济宁',
|
||
|
|
'焦作',
|
||
|
|
'荆门',
|
||
|
|
'荆州',
|
||
|
|
'江门',
|
||
|
|
'揭阳',
|
||
|
|
'嘉峪关',
|
||
|
|
'金昌',
|
||
|
|
'酒泉',
|
||
|
|
'金门县',
|
||
|
|
'基隆',
|
||
|
|
'嘉义',
|
||
|
|
'嘉义县',
|
||
|
|
'九龙'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'K',
|
||
|
|
data: ['开封', '昆明', '克拉玛依', '克孜勒苏柯尔克孜', '喀什', '可克达拉']
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'L',
|
||
|
|
data: [
|
||
|
|
'廊坊',
|
||
|
|
'临汾',
|
||
|
|
'吕梁',
|
||
|
|
'辽阳',
|
||
|
|
'辽源',
|
||
|
|
'连云港',
|
||
|
|
'丽水',
|
||
|
|
'六安',
|
||
|
|
'龙岩',
|
||
|
|
'莱芜',
|
||
|
|
'临沂',
|
||
|
|
'聊城',
|
||
|
|
'洛阳',
|
||
|
|
'娄底',
|
||
|
|
'柳州',
|
||
|
|
'来宾',
|
||
|
|
'泸州',
|
||
|
|
'乐山',
|
||
|
|
'凉山',
|
||
|
|
'六盘水',
|
||
|
|
'丽江',
|
||
|
|
'临沧',
|
||
|
|
'拉萨',
|
||
|
|
'林芝',
|
||
|
|
'兰州',
|
||
|
|
'陇南',
|
||
|
|
'临夏',
|
||
|
|
'连江县',
|
||
|
|
'离岛'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'M',
|
||
|
|
data: ['牡丹江', '马鞍山', '茂名', '梅州', '绵阳', '眉山', '苗栗县']
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'N',
|
||
|
|
data: ['南京', '南通', '宁波', '南平', '宁德', '南昌', '南阳', '南宁', '内江', '南充', '怒江', '那曲',
|
||
|
|
'南投县'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'P',
|
||
|
|
data: ['盘锦', '莆田', '萍乡', '平顶山', '濮阳', '攀枝花', '普洱', '平凉', '屏东县', '澎湖县']
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'Q',
|
||
|
|
data: [
|
||
|
|
'秦皇岛',
|
||
|
|
'齐齐哈尔',
|
||
|
|
'七台河',
|
||
|
|
'衢州',
|
||
|
|
'泉州',
|
||
|
|
'青岛',
|
||
|
|
'清远',
|
||
|
|
'钦州',
|
||
|
|
'黔西南',
|
||
|
|
'黔东南',
|
||
|
|
'黔南布',
|
||
|
|
'曲靖',
|
||
|
|
'庆阳'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'R',
|
||
|
|
data: ['日照', '日喀则']
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'S',
|
||
|
|
data: [
|
||
|
|
'石家庄',
|
||
|
|
'朔州',
|
||
|
|
'沈阳',
|
||
|
|
'四平',
|
||
|
|
'松原',
|
||
|
|
'双鸭山',
|
||
|
|
'绥化',
|
||
|
|
'上海',
|
||
|
|
'苏州',
|
||
|
|
'宿迁',
|
||
|
|
'绍兴',
|
||
|
|
'宿州',
|
||
|
|
'三明',
|
||
|
|
'上饶',
|
||
|
|
'三门峡',
|
||
|
|
'商丘',
|
||
|
|
'十堰',
|
||
|
|
'随州',
|
||
|
|
'邵阳',
|
||
|
|
'韶关',
|
||
|
|
'深圳',
|
||
|
|
'汕头',
|
||
|
|
'汕尾',
|
||
|
|
'三亚',
|
||
|
|
'三沙',
|
||
|
|
'遂宁',
|
||
|
|
'山南',
|
||
|
|
'商洛',
|
||
|
|
'石嘴山'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'T',
|
||
|
|
data: [
|
||
|
|
'天津',
|
||
|
|
'唐山',
|
||
|
|
'太原',
|
||
|
|
'通辽',
|
||
|
|
'铁岭',
|
||
|
|
'通化',
|
||
|
|
'泰州',
|
||
|
|
'台州',
|
||
|
|
'铜陵',
|
||
|
|
'泰安',
|
||
|
|
'漯河',
|
||
|
|
'铜仁',
|
||
|
|
'铜川',
|
||
|
|
'天水',
|
||
|
|
'吐鲁番',
|
||
|
|
'塔城',
|
||
|
|
'台北',
|
||
|
|
'台南',
|
||
|
|
'台中',
|
||
|
|
'桃园',
|
||
|
|
'台东县'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'W',
|
||
|
|
data: [
|
||
|
|
'乌海',
|
||
|
|
'乌兰察布',
|
||
|
|
'无锡',
|
||
|
|
'温州',
|
||
|
|
'芜湖',
|
||
|
|
'潍坊',
|
||
|
|
'威海',
|
||
|
|
'武汉',
|
||
|
|
'梧州',
|
||
|
|
'文山',
|
||
|
|
'渭南',
|
||
|
|
'武威',
|
||
|
|
'吴忠',
|
||
|
|
'乌鲁木齐'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'X',
|
||
|
|
data: [
|
||
|
|
'邢台',
|
||
|
|
'忻州',
|
||
|
|
'兴安盟',
|
||
|
|
'锡林郭勒盟',
|
||
|
|
'徐州',
|
||
|
|
'宣城',
|
||
|
|
'厦门',
|
||
|
|
'新余',
|
||
|
|
'新乡',
|
||
|
|
'许昌',
|
||
|
|
'信阳',
|
||
|
|
'襄阳',
|
||
|
|
'孝感',
|
||
|
|
'咸宁',
|
||
|
|
'湘潭',
|
||
|
|
'湘西',
|
||
|
|
'西双版纳',
|
||
|
|
'西安',
|
||
|
|
'咸阳',
|
||
|
|
'西宁',
|
||
|
|
'新竹',
|
||
|
|
'新北',
|
||
|
|
'新竹县',
|
||
|
|
'香港岛',
|
||
|
|
'新界'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'Y',
|
||
|
|
data: [
|
||
|
|
'阳泉',
|
||
|
|
'运城',
|
||
|
|
'营口',
|
||
|
|
'延边',
|
||
|
|
'伊春',
|
||
|
|
'盐城',
|
||
|
|
'扬州',
|
||
|
|
'鹰潭',
|
||
|
|
'宜春',
|
||
|
|
'烟台',
|
||
|
|
'宜昌',
|
||
|
|
'岳阳',
|
||
|
|
'益阳',
|
||
|
|
'永州',
|
||
|
|
'阳江',
|
||
|
|
'云浮',
|
||
|
|
'玉林',
|
||
|
|
'宜宾',
|
||
|
|
'雅安',
|
||
|
|
'玉溪',
|
||
|
|
'延安',
|
||
|
|
'榆林',
|
||
|
|
'玉树',
|
||
|
|
'银川',
|
||
|
|
'伊犁',
|
||
|
|
'宜兰县',
|
||
|
|
'云林县'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
letter: 'Z',
|
||
|
|
data: [
|
||
|
|
'张家口',
|
||
|
|
'朝阳',
|
||
|
|
'镇江',
|
||
|
|
'舟山',
|
||
|
|
'漳州',
|
||
|
|
'淄博',
|
||
|
|
'枣庄',
|
||
|
|
'郑州',
|
||
|
|
'周口',
|
||
|
|
'驻马店',
|
||
|
|
'株洲',
|
||
|
|
'张家界',
|
||
|
|
'珠海',
|
||
|
|
'湛江',
|
||
|
|
'肇庆',
|
||
|
|
'中山',
|
||
|
|
'自贡',
|
||
|
|
'资阳',
|
||
|
|
'遵义',
|
||
|
|
'昭通',
|
||
|
|
'张掖',
|
||
|
|
'中卫',
|
||
|
|
'彰化县'
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value(newName, oldName) {
|
||
|
|
if (!this.value) {
|
||
|
|
this.cityList = [];
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.list.forEach((item, index, arr) => {
|
||
|
|
const fin = item.data.find((items) => {
|
||
|
|
return newName == items;
|
||
|
|
});
|
||
|
|
if (typeof fin == 'string') {
|
||
|
|
this.searchList = fin;
|
||
|
|
//console.log(this.searchList)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.type = options.type;
|
||
|
|
// this.railways()
|
||
|
|
// this.getStation()
|
||
|
|
},
|
||
|
|
onPageScroll(e) {
|
||
|
|
this.scrollTop = e.scrollTop;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// async getStation() {
|
||
|
|
// const _this = this;
|
||
|
|
// let res = await railway.getStationList();
|
||
|
|
// if (res.status) {
|
||
|
|
// _this.indexList.forEach((val, key) => {
|
||
|
|
// _this.lists[key] = {
|
||
|
|
// letter: val,
|
||
|
|
// data: []
|
||
|
|
// };
|
||
|
|
// res.data.list.forEach((item) => {
|
||
|
|
// if (item.pinyin1 === val) {
|
||
|
|
// _this.lists[key].data.push(item.name);
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
// });
|
||
|
|
// console.log(_this.lists);
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// async railways() {
|
||
|
|
// const {
|
||
|
|
// data
|
||
|
|
// } = await railway.history({
|
||
|
|
// type: '',
|
||
|
|
// size: 10
|
||
|
|
// });
|
||
|
|
// this.data = data;
|
||
|
|
// },
|
||
|
|
choseAddress2(val) {
|
||
|
|
let geoAddress = val
|
||
|
|
let params = {
|
||
|
|
address: {
|
||
|
|
city: geoAddress.station_name,
|
||
|
|
poiName: ''
|
||
|
|
},
|
||
|
|
name: geoAddress.station_name,
|
||
|
|
city_code: geoAddress.station_code,
|
||
|
|
}
|
||
|
|
if (this.type == 1) {
|
||
|
|
uni.setStorageSync('hccity', params);
|
||
|
|
} else if (this.type == 2) {
|
||
|
|
uni.setStorageSync('hcscity', params);
|
||
|
|
}
|
||
|
|
|
||
|
|
uni.setStorageSync('locationCity', params);
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: 1
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async choseAddress(val) {
|
||
|
|
|
||
|
|
this.value = val;
|
||
|
|
console.log(val)
|
||
|
|
let cityCode = ''
|
||
|
|
let res = await oRequest.getTrainAllInfo({
|
||
|
|
name: val,
|
||
|
|
hot: 0
|
||
|
|
});
|
||
|
|
if (res[globalData.status] == globalData.ERR_OK) {
|
||
|
|
cityCode = res.data.id
|
||
|
|
this.cityList = res.data;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.body {}
|
||
|
|
|
||
|
|
.cityBox {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
background-color: #ffffff;
|
||
|
|
|
||
|
|
.box-ul {
|
||
|
|
padding: 0 20rpx;
|
||
|
|
|
||
|
|
.box-li {
|
||
|
|
width: 100%;
|
||
|
|
height: 88rpx;
|
||
|
|
line-height: 88rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.slot-wrap {
|
||
|
|
width: 624rpx;
|
||
|
|
height: 64rpx;
|
||
|
|
background: #f4f4f4;
|
||
|
|
border-radius: 40rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 32rpx;
|
||
|
|
height: 32rpx;
|
||
|
|
margin-left: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333333;
|
||
|
|
text-indent: 22rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
|
||
|
|
.citynow,
|
||
|
|
.cityhot {
|
||
|
|
padding: 24rpx 28rpx 0;
|
||
|
|
|
||
|
|
.lable {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-family: Segoe UI;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.city-ul {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-top: 18rpx;
|
||
|
|
|
||
|
|
.city-li {
|
||
|
|
width: 210rpx;
|
||
|
|
height: 66rpx;
|
||
|
|
background: #f8f8f8;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 66rpx;
|
||
|
|
margin-bottom: 16rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 28rpx;
|
||
|
|
height: 28rpx;
|
||
|
|
margin-right: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(3n-1) {
|
||
|
|
margin-left: 32rpx;
|
||
|
|
margin-right: 32rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.modal {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: fixed;
|
||
|
|
background-color: white;
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cityIndex {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-cell {
|
||
|
|
display: flex;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px 24rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
color: #323233;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 24px;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|