miniprogram / match-west-road · 提交

转到一个项目

作者 wumengyu
提交 80093918ac2513a9e3c313fb6e140712876e7532 1 个父辈 1e0cde01

添加国际城市页

内嵌 并排对比
正在显示 8 个修改的文件 包含 371 行增加 和 80 行删除
... ... @@ -24,7 +24,8 @@
"pages/meal/detail/detail",
"pages/order/complain/complain",
"pages/order/order-detail/order-detail",
"pages/comment/comment"
"pages/comment/comment",
"pages/index/city-list/city-list"
],
"window": {
"backgroundTextStyle": "light",
... ...
// pages/index/city-list/city-list.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
current: 0,
list:[],
status:0,
},
//tab点击事件
chargeTab(e) {
const current = +e.currentTarget.dataset.current;
this.setData({
current: current,
});
if(current === 0) {
this.getCityList()
}else if(current === 1) {
this.getAbroadList()
}
// this.getList();
},
//获取国内城市列表
getCityList() {
const self = this;
let url = '/portal/Index/cityList';
app.post(url, {}, {}).then((res) => {
console.log('获取城市列表', res);
if (+res.code === 1) {
const arr = [];
res.data.list.forEach((item) => {
arr.push(item.title)
});
self.setData({
city_picker_list: arr,
cityList:res.data.list,
});
}
})
},
//获取国外名
getAbroadList() {
const self = this;
let url = '/portal/Index/addr';
let params = {
token: wx.getStorageSync('token'),
};
app.post(url, params, {}).then((res) => {
console.log('获取国外列表', res);
if (+res.code === 1) {
const arr = [];
res.data.forEach((item) => {
arr.push(item.title)
});
self.setData({
city_picker_list: arr,
cityList:res.data,
});
}
})
},
//选择国内城市
chooseDomesticCity(e) {
const current = e.currentTarget.dataset.index;
wx.showLoading({title:'加载中',mask:true});
this.setData({is_show_city:false});
const lat = this.data.cityList[current].latng.split(',')[1];
const lng = this.data.cityList[current].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.cityList[current].title});
// console.log('lat', 'lng',lat,lng);
// this.getIndex();
},
//选择国外城市
chooseAbroadCity(e) {
const current = e.currentTarget.dataset.index;
wx.showLoading({title:'加载中',mask:true});
this.setData({
// current_city: e.detail.value,
is_city_change: true,
is_show_city:false
});
const lat = this.data.AbroadCityList[current].latng.split(',')[1];
const lng = this.data.AbroadCityList[current].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.AbroadCityList[current].title});
console.log('lat', 'lng',lat,lng);
// this.getIndex();
},
chooseCity(e) {
wx.showLoading({title:'加载中',mask:true});
const current = e.currentTarget.dataset.index;
const lat = this.data.cityList[current].latng.split(',')[1];
const lng = this.data.cityList[current].latng.split(',')[0];
const addr = this.data.cityList[current].title;
console.log('addr', addr);
this.setData({current_city:current});
wx.setStorageSync('lat',lat);
wx.setStorageSync('lng',lng);
wx.setStorageSync('addr',addr);
setTimeout(function () {
wx.hideLoading();
wx.navigateBack({delta:1})
}, 1000)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getCityList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"navigationBarTitleText": "选择国家或城市",
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--pages/index/city-list/city-list.wxml-->
<view class="content">
<view class='tab_box'>
<view class="tab_item {{current==0?'active':''}}" data-current='{{0}}' bindtap='chargeTab'>国内</view>
<view class="tab_item {{current==1?'active':''}}" data-current='{{1}}' bindtap='chargeTab'>国际</view>
</view>
<view class="city-box">
<view wx:for="{{city_picker_list}}" wx:key="index">
<view class="city-item {{current_city === index?'change-bg':''}}" bindtap="chooseCity" data-index="{{index}}">{{item}}</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/index/city-list/city-list.wxss */
page {
height: 100%;
background-color: #f5f6f8;
}
.content {
height: 100%;
background-color: #f5f6f8;
}
.tab_box {
width: 100%;
/* padding: 0 70rpx; */
height: 90rpx;
line-height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
/* border-bottom: 20rpx solid #f5f5f5; */
overflow: hidden;
white-space: nowrap;
flex-wrap: nowrap;
position: fixed;
top:0;
left:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
}
.tab_item {
width:50%;
display: inline-block;
/* width: 160rpx; */
font-size: 30rpx;
color: #333333;
position: relative;
text-align: center;
border-bottom: 4rpx solid transparent;
/* border: 1rpx solid red; */
}
.tab_box .active {
border-bottom: 4rpx solid #DB4E2A;
/*font-weight: bold;*/
/*color: #0E050A;*/
}
/*.tab_box .active::after {*/
/*content: "";*/
/*!*border: 2rpx solid #DB4E2A;*!*/
/*position: absolute;*/
/*bottom: 0rpx;*/
/*left: 50%;*/
/*transform: translateX(-50%);*/
/*width: 250rpx;*/
/*height: 3rpx;*/
/*background: #2C82E6;*/
/*}*/
.city-box {
margin-top: 104rpx;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: 10rpx 30rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.city-item {
padding: 10rpx 40rpx;
font-size: 28rpx;
color: #666666;
border-radius: 6rpx;
margin-top: 20rpx;
margin-right: 20rpx;
border:1rpx solid #e8e8e8;
background-color: #fff;
}
.change-bg {
background-color: #DB4E2A;
color: #ffffff;
}
\ No newline at end of file
... ...
... ... @@ -45,75 +45,6 @@ Page({
// Do something when catch error
}
},
//获取国内城市列表
getCityList() {
const self = this;
let url = '/portal/Index/cityList';
app.post(url, {}, {}).then((res) => {
console.log('获取城市列表', res);
if (+res.code === 1) {
const arr = [];
res.data.list.forEach((item) => {
arr.push(item.title)
});
self.setData({
city_picker_list: arr,
cityList:res.data.list,
});
}
})
},
//获取国外名
getAbroadList() {
const self = this;
let url = '/portal/Index/addr';
let params = {
token: wx.getStorageSync('token'),
};
app.post(url, params, {}).then((res) => {
console.log('获取国外列表', res);
if (+res.code === 1) {
const arr = [];
res.data.list.forEach((item) => {
arr.push(item.title)
});
self.setData({
Abroad_city_picker_list: arr,
AbroadCityList:res.data.list,
});
}
})
},
chooseCity() {
this.setData({is_show_city:!this.data.is_show_city})
},
chooseDomesticCity(e) {
this.setData({is_show_city:false});
},
chooseAbroadCity(e) {
this.setData({
current_city: e.detail.value,
is_city_change: true,
is_show_city:false
});
const lat = this.data.cityList[e.detail.value].latng.split(',')[1];
const lng = this.data.cityList[e.detail.value].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.cityList[e.detail.value].title});
// console.log('lat', 'lng',lat,lng);
this.getIndex();
},
//切换城市
cityPickerChange(e) {
this.setData({
current_city: e.detail.value,
is_city_change: true
});
const lat = this.data.cityList[e.detail.value].latng.split(',')[1];
const lng = this.data.cityList[e.detail.value].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.cityList[e.detail.value].title});
// console.log('lat', 'lng',lat,lng);
this.getIndex();
},
swiperChange(e) {
this.setData({current_swiper: e.detail.current})
},
... ... @@ -176,7 +107,8 @@ Page({
let city = null;
if(this.data.is_city_change) {
city = JSON.stringify({
name:this.data.cityList[this.data.current_city].title,
// name:this.data.cityList[this.data.current_city].title,
name:this.data.addr,
lat: this.data.lat,
lng: this.data.lng,
})
... ... @@ -344,9 +276,94 @@ Page({
})
}
},
//获取国内城市列表
getCityList() {
const self = this;
let url = '/portal/Index/cityList';
app.post(url, {}, {}).then((res) => {
console.log('获取城市列表', res);
if (+res.code === 1) {
const arr = [];
res.data.list.forEach((item) => {
arr.push(item.title)
});
self.setData({
city_picker_list: arr,
cityList:res.data.list,
});
}
})
},
//获取国外名
getAbroadList() {
const self = this;
let url = '/portal/Index/addr';
let params = {
token: wx.getStorageSync('token'),
};
app.post(url, params, {}).then((res) => {
console.log('获取国外列表', res);
if (+res.code === 1) {
const arr = [];
res.data.forEach((item) => {
arr.push(item.title)
});
self.setData({
Abroad_city_picker_list: arr,
AbroadCityList:res.data,
});
}
})
},
//打开城市列表
chooseCity() {
// this.setData({is_show_city:!this.data.is_show_city})
wx.navigateTo({url:'/pages/index/city-list/city-list'})
},
//选择国内城市
chooseDomesticCity(e) {
const current = e.currentTarget.dataset.index;
wx.showLoading({title:'加载中',mask:true});
this.setData({is_show_city:false});
const lat = this.data.cityList[current].latng.split(',')[1];
const lng = this.data.cityList[current].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.cityList[current].title});
// console.log('lat', 'lng',lat,lng);
this.getIndex();
},
//选择国外城市
chooseAbroadCity(e) {
const current = e.currentTarget.dataset.index;
wx.showLoading({title:'加载中',mask:true});
this.setData({
// current_city: e.detail.value,
is_city_change: true,
is_show_city:false
});
const lat = this.data.AbroadCityList[current].latng.split(',')[1];
const lng = this.data.AbroadCityList[current].latng.split(',')[0];
this.setData({lat: lat, lng: lng,addr:this.data.AbroadCityList[current].title});
console.log('lat', 'lng',lat,lng);
this.getIndex();
},
//切换城市
// cityPickerChange(e) {
// this.setData({
// current_city: e.detail.value,
// is_city_change: true
// });
// const lat = this.data.cityList[e.detail.value].latng.split(',')[1];
// const lng = this.data.cityList[e.detail.value].latng.split(',')[0];
// this.setData({lat: lat, lng: lng,addr:this.data.cityList[e.detail.value].title});
// // console.log('lat', 'lng',lat,lng);
// this.getIndex();
// },
//获取经纬度
getLat() {
const self = this;
if(wx.getStorageSync('lat') === '' &&
wx.getStorageSync('lng') === '' &&
wx.getStorageSync('addr') === '') {
wx.getLocation({ //获取当前经纬度
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
success: function (res) {
... ... @@ -363,6 +380,7 @@ Page({
// };
}
});
}
// wx.setStorageSync('score',30);
console.log('score',wx.getStorageSync('score'));
if(wx.getStorageSync('score') !== '' && wx.getStorageSync('score')>=80) {
... ... @@ -389,10 +407,11 @@ Page({
app.post(url, params, {}).then((res) => {
console.log('获取首页', res);
if (+res.code === 1) {
wx.hideLoading();
self.setData({
slide: res.data.banner,
cate: res.data.cate,
china_city: res.data.city.city,
city: res.data.city,
noticeList: res.data.extra,
meal_banner: res.data.meal,
items: res.data.active,
... ... @@ -428,14 +447,26 @@ Page({
})
},
onLoad: function () {
this.getCityList();
this.getAbroadList();
// this.getCityList();
// this.getAbroadList();
this._doRefreshMasonry(this.data.items)
},
onShow() {
if(wx.getStorageSync('isLogin') === true) {
this.getLat();//获取经纬度
}
if(wx.getStorageSync('lat') !== '' &&
wx.getStorageSync('lng') !== '' &&
wx.getStorageSync('addr') !== '') {
console.log('已选择城市');
this.setData({
is_city_change:true,
lat:wx.getStorageSync('lat'),
lng: wx.getStorageSync('lng'),
addr:wx.getStorageSync('addr'),
});
this.getIndex()
}
// wx.chooseLocation({
// success(res) {
// console.log(res);
... ...
... ... @@ -14,7 +14,7 @@
class="picker">
<view class="left">
<view class="iconfont icon-location"></view>
<text>{{city_picker_list[current_city] || china_city}}</text>
<text>{{city}}</text>
<view class="iconfont icon-arrow-down"></view>
</view>
</view>
... ...
... ... @@ -23,14 +23,14 @@
bottom:0;
left:0;
width: 100%;
height: 354rpx;
height: 409rpx;
z-index:100;
}
.area_box {
width: 50%;
height: 354rpx;
height: 409rpx;
background-color: #fff;
padding: 30rpx 0;
padding: 50rpx 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
... ... @@ -46,8 +46,8 @@
}
.area {
width: 100%;
height: 60rpx;
line-height: 60rpx;
height: 80rpx;
line-height: 80rpx;
/* background-color: #D5F0FF; */
font-size: 32rpx;
color: #000000;
... ...