Huanyuyuehui/pages/shop/location/index.vue

610 lines
12 KiB
Vue
Raw Normal View History

2024-03-28 11:10:52 +08:00
<template>
<view>
2024-03-28 17:54:55 +08:00
<view class="tab-nav" :style="`padding-top:`+navtop">
<view class="back">
<view class="iconfont icon-zuo" @click="backNav">
</view>
</view>
2024-03-28 11:10:52 +08:00
<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>
2024-03-28 17:54:55 +08:00
</view>
<view class="container modal" v-if="cityList.length>0" >
2024-03-28 11:10:52 +08:00
<view class="list-cell u-border-bottom" v-for="(item1, index) in cityList" :key="index"
2024-03-28 17:54:55 +08:00
@click="choseAddress2(item1)" style="display: flex;flex-direction: column;">
{{ item1.name}}
<text style="color: #999;font-size: 10px;border-bottom:solid 1px #f2f2f2;">{{item1.district}}</text>
2024-03-28 11:10:52 +08:00
</view>
</view>
<view class="container" v-else>
<view class="cityIndex" v-if="status">
<view v-for="(item, index) in list" :key="index">
<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index"
@click="choseAddress(item1)">
{{ item1 }}
</view>
</view>
</view>
<view class="cityBox" v-else>
<view class="box-ul">
<view class="box-li" v-if="searchList" @click="choseAddress(searchList)">
{{ searchList }}
</view>
</view>
</view>
2024-03-28 17:54:55 +08:00
<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
2024-03-28 11:10:52 +08:00
</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: [],
2024-03-28 17:54:55 +08:00
navtop:0,
2024-03-28 11:10:52 +08:00
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;
},
2024-03-28 17:54:55 +08:00
created() {
let statusBarHeight= uni.getSystemInfoSync().statusBarHeight+"px";
this.navtop=statusBarHeight;
},
2024-03-28 11:10:52 +08:00
methods: {
2024-03-28 17:54:55 +08:00
backNav(){
uni.navigateBack({
delta:1
})
},
2024-03-28 11:10:52 +08:00
choseAddress2(val) {
let params = {
2024-03-28 17:54:55 +08:00
lon:'',
lat:'',
city:'',
city_code:'',
2024-03-28 11:10:52 +08:00
}
2024-03-28 17:54:55 +08:00
const url = 'https://restapi.amap.com/v3/geocode/geo?output=JSON&address='+val.name+'&city='+val.adcode+'&key=19895fce8682f17dd1436b98275ebb72'
return new Promise(function (resolve,reject){
uni.request({url:url}).then(result=>{
if(result[1].data.status === '1'){
let l=result[1].data.geocodes[0];
if(l.location){
params.lat=l.location.split(',')[1];
params.lon=l.location.split(',')[0];
}
params.city=l.formatted_address;
params.city_code=l.adcode;
uni.setStorageSync('locationCity', params);
uni.switchTab({
url:'/pages/shop/index'
})
resolve(result[1].data)
}
}).catch(error=>{
reject(error)
})
})
2024-03-28 11:10:52 +08:00
},
async choseAddress(val) {
2024-03-28 17:54:55 +08:00
let that=this;
2024-03-28 11:10:52 +08:00
this.value = val;
let cityCode = ''
2024-03-28 17:54:55 +08:00
const url = 'https://restapi.amap.com/v3/assistant/inputtips?output=JSON&keywords='+val+'&key=19895fce8682f17dd1436b98275ebb72'
return new Promise(function (resolve,reject){
uni.request({url:url}).then(result=>{
if(result[1].data.status === '1'){
that.cityList=result[1].data.tips;
resolve(result[1].data)
}
}).catch(error=>{
reject(error)
})
})
// let res = await oRequest.getTrainAllInfo({
// name: val,
// hot: 0
// });
// if (res[globalData.status] == globalData.ERR_OK) {
// cityCode = res.data.id
// this.cityList = res.data;
// }
2024-03-28 11:10:52 +08:00
}
}
};
</script>
<style lang="scss" scoped>
.body {}
2024-03-28 17:54:55 +08:00
.tab-nav{
display: flex;
align-items: center;
padding: 20rpx;
background-color: white;
.slot-wrap {
width: 624rpx;
height: 64rpx;
background: #f4f4f4;
border-radius: 40rpx;
display: flex;
align-items: center;
margin-left: 24rpx;
.icon {
width: 32rpx;
height: 32rpx;
margin-left: 28rpx;
}
input {
font-size: 28rpx;
color: #333333;
text-indent: 22rpx;
}
}
}
2024-03-28 11:10:52 +08:00
.cityBox {
width: 100%;
height: auto;
background-color: #ffffff;
.box-ul {
padding: 0 20rpx;
.box-li {
width: 100%;
height: 88rpx;
line-height: 88rpx;
}
}
}
2024-03-28 17:54:55 +08:00
2024-03-28 11:10:52 +08:00
.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;
2024-03-28 17:54:55 +08:00
padding-bottom: 160rpx;
2024-03-28 11:10:52 +08:00
}
.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>