miniprogram / match-west-road · 提交

转到一个项目

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

添加国际城市页

内嵌 并排对比
正在显示 8 个修改的文件 包含 386 行增加 和 95 行删除
@@ -24,7 +24,8 @@ @@ -24,7 +24,8 @@
24 "pages/meal/detail/detail", 24 "pages/meal/detail/detail",
25 "pages/order/complain/complain", 25 "pages/order/complain/complain",
26 "pages/order/order-detail/order-detail", 26 "pages/order/order-detail/order-detail",
27 - "pages/comment/comment" 27 + "pages/comment/comment",
  28 + "pages/index/city-list/city-list"
28 ], 29 ],
29 "window": { 30 "window": {
30 "backgroundTextStyle": "light", 31 "backgroundTextStyle": "light",
  1 +// pages/index/city-list/city-list.js
  2 +const app = getApp();
  3 +Page({
  4 +
  5 + /**
  6 + * 页面的初始数据
  7 + */
  8 + data: {
  9 + current: 0,
  10 + list:[],
  11 + status:0,
  12 + },
  13 + //tab点击事件
  14 + chargeTab(e) {
  15 + const current = +e.currentTarget.dataset.current;
  16 + this.setData({
  17 + current: current,
  18 + });
  19 + if(current === 0) {
  20 + this.getCityList()
  21 + }else if(current === 1) {
  22 + this.getAbroadList()
  23 + }
  24 + // this.getList();
  25 + },
  26 + //获取国内城市列表
  27 + getCityList() {
  28 + const self = this;
  29 + let url = '/portal/Index/cityList';
  30 + app.post(url, {}, {}).then((res) => {
  31 + console.log('获取城市列表', res);
  32 + if (+res.code === 1) {
  33 + const arr = [];
  34 + res.data.list.forEach((item) => {
  35 + arr.push(item.title)
  36 + });
  37 + self.setData({
  38 + city_picker_list: arr,
  39 + cityList:res.data.list,
  40 + });
  41 + }
  42 + })
  43 + },
  44 + //获取国外名
  45 + getAbroadList() {
  46 + const self = this;
  47 + let url = '/portal/Index/addr';
  48 + let params = {
  49 + token: wx.getStorageSync('token'),
  50 + };
  51 + app.post(url, params, {}).then((res) => {
  52 + console.log('获取国外列表', res);
  53 + if (+res.code === 1) {
  54 + const arr = [];
  55 + res.data.forEach((item) => {
  56 + arr.push(item.title)
  57 + });
  58 + self.setData({
  59 + city_picker_list: arr,
  60 + cityList:res.data,
  61 + });
  62 + }
  63 + })
  64 + },
  65 + //选择国内城市
  66 + chooseDomesticCity(e) {
  67 + const current = e.currentTarget.dataset.index;
  68 + wx.showLoading({title:'加载中',mask:true});
  69 + this.setData({is_show_city:false});
  70 + const lat = this.data.cityList[current].latng.split(',')[1];
  71 + const lng = this.data.cityList[current].latng.split(',')[0];
  72 + this.setData({lat: lat, lng: lng,addr:this.data.cityList[current].title});
  73 + // console.log('lat', 'lng',lat,lng);
  74 + // this.getIndex();
  75 + },
  76 + //选择国外城市
  77 + chooseAbroadCity(e) {
  78 + const current = e.currentTarget.dataset.index;
  79 + wx.showLoading({title:'加载中',mask:true});
  80 + this.setData({
  81 + // current_city: e.detail.value,
  82 + is_city_change: true,
  83 + is_show_city:false
  84 + });
  85 + const lat = this.data.AbroadCityList[current].latng.split(',')[1];
  86 + const lng = this.data.AbroadCityList[current].latng.split(',')[0];
  87 + this.setData({lat: lat, lng: lng,addr:this.data.AbroadCityList[current].title});
  88 + console.log('lat', 'lng',lat,lng);
  89 + // this.getIndex();
  90 + },
  91 + chooseCity(e) {
  92 + wx.showLoading({title:'加载中',mask:true});
  93 + const current = e.currentTarget.dataset.index;
  94 + const lat = this.data.cityList[current].latng.split(',')[1];
  95 + const lng = this.data.cityList[current].latng.split(',')[0];
  96 + const addr = this.data.cityList[current].title;
  97 + console.log('addr', addr);
  98 + this.setData({current_city:current});
  99 + wx.setStorageSync('lat',lat);
  100 + wx.setStorageSync('lng',lng);
  101 + wx.setStorageSync('addr',addr);
  102 + setTimeout(function () {
  103 + wx.hideLoading();
  104 + wx.navigateBack({delta:1})
  105 + }, 1000)
  106 + },
  107 + /**
  108 + * 生命周期函数--监听页面加载
  109 + */
  110 + onLoad: function (options) {
  111 + this.getCityList();
  112 + },
  113 +
  114 + /**
  115 + * 生命周期函数--监听页面初次渲染完成
  116 + */
  117 + onReady: function () {
  118 +
  119 + },
  120 +
  121 + /**
  122 + * 生命周期函数--监听页面显示
  123 + */
  124 + onShow: function () {
  125 +
  126 + },
  127 +
  128 + /**
  129 + * 生命周期函数--监听页面隐藏
  130 + */
  131 + onHide: function () {
  132 +
  133 + },
  134 +
  135 + /**
  136 + * 生命周期函数--监听页面卸载
  137 + */
  138 + onUnload: function () {
  139 +
  140 + },
  141 +
  142 + /**
  143 + * 页面相关事件处理函数--监听用户下拉动作
  144 + */
  145 + onPullDownRefresh: function () {
  146 +
  147 + },
  148 +
  149 + /**
  150 + * 页面上拉触底事件的处理函数
  151 + */
  152 + onReachBottom: function () {
  153 +
  154 + },
  155 +
  156 + /**
  157 + * 用户点击右上角分享
  158 + */
  159 + onShareAppMessage: function () {
  160 +
  161 + }
  162 +})
  1 +{
  2 + "navigationBarTitleText": "选择国家或城市",
  3 + "usingComponents": {}
  4 +}
  1 +<!--pages/index/city-list/city-list.wxml-->
  2 +<view class="content">
  3 + <view class='tab_box'>
  4 + <view class="tab_item {{current==0?'active':''}}" data-current='{{0}}' bindtap='chargeTab'>国内</view>
  5 + <view class="tab_item {{current==1?'active':''}}" data-current='{{1}}' bindtap='chargeTab'>国际</view>
  6 + </view>
  7 + <view class="city-box">
  8 + <view wx:for="{{city_picker_list}}" wx:key="index">
  9 + <view class="city-item {{current_city === index?'change-bg':''}}" bindtap="chooseCity" data-index="{{index}}">{{item}}</view>
  10 + </view>
  11 + </view>
  12 +</view>
  1 +/* pages/index/city-list/city-list.wxss */
  2 +page {
  3 + height: 100%;
  4 + background-color: #f5f6f8;
  5 +}
  6 +.content {
  7 + height: 100%;
  8 + background-color: #f5f6f8;
  9 +}
  10 +.tab_box {
  11 + width: 100%;
  12 + /* padding: 0 70rpx; */
  13 + height: 90rpx;
  14 + line-height: 90rpx;
  15 + display: flex;
  16 + align-items: center;
  17 + justify-content: center;
  18 + /* border-bottom: 20rpx solid #f5f5f5; */
  19 + overflow: hidden;
  20 + white-space: nowrap;
  21 + flex-wrap: nowrap;
  22 + position: fixed;
  23 + top:0;
  24 + left:0;
  25 + -webkit-box-sizing: border-box;
  26 + -moz-box-sizing: border-box;
  27 + box-sizing: border-box;
  28 + background-color: #fff;
  29 +}
  30 +.tab_item {
  31 + width:50%;
  32 + display: inline-block;
  33 + /* width: 160rpx; */
  34 + font-size: 30rpx;
  35 + color: #333333;
  36 + position: relative;
  37 + text-align: center;
  38 + border-bottom: 4rpx solid transparent;
  39 + /* border: 1rpx solid red; */
  40 +}
  41 +.tab_box .active {
  42 + border-bottom: 4rpx solid #DB4E2A;
  43 + /*font-weight: bold;*/
  44 + /*color: #0E050A;*/
  45 +}
  46 +
  47 +/*.tab_box .active::after {*/
  48 + /*content: "";*/
  49 + /*!*border: 2rpx solid #DB4E2A;*!*/
  50 + /*position: absolute;*/
  51 + /*bottom: 0rpx;*/
  52 + /*left: 50%;*/
  53 + /*transform: translateX(-50%);*/
  54 + /*width: 250rpx;*/
  55 + /*height: 3rpx;*/
  56 + /*background: #2C82E6;*/
  57 +/*}*/
  58 +.city-box {
  59 + margin-top: 104rpx;
  60 + display: flex;
  61 + flex-wrap: wrap;
  62 + align-items: flex-start;
  63 + padding: 10rpx 30rpx;
  64 + -webkit-box-sizing: border-box;
  65 + -moz-box-sizing: border-box;
  66 + box-sizing: border-box;
  67 +}
  68 +.city-item {
  69 + padding: 10rpx 40rpx;
  70 + font-size: 28rpx;
  71 + color: #666666;
  72 + border-radius: 6rpx;
  73 + margin-top: 20rpx;
  74 + margin-right: 20rpx;
  75 + border:1rpx solid #e8e8e8;
  76 + background-color: #fff;
  77 +}
  78 +.change-bg {
  79 + background-color: #DB4E2A;
  80 + color: #ffffff;
  81 +}
@@ -45,75 +45,6 @@ Page({ @@ -45,75 +45,6 @@ Page({
45 // Do something when catch error 45 // Do something when catch error
46 } 46 }
47 }, 47 },
48 - //获取国内城市列表  
49 - getCityList() {  
50 - const self = this;  
51 - let url = '/portal/Index/cityList';  
52 - app.post(url, {}, {}).then((res) => {  
53 - console.log('获取城市列表', res);  
54 - if (+res.code === 1) {  
55 - const arr = [];  
56 - res.data.list.forEach((item) => {  
57 - arr.push(item.title)  
58 - });  
59 - self.setData({  
60 - city_picker_list: arr,  
61 - cityList:res.data.list,  
62 - });  
63 - }  
64 - })  
65 - },  
66 - //获取国外名  
67 - getAbroadList() {  
68 - const self = this;  
69 - let url = '/portal/Index/addr';  
70 - let params = {  
71 - token: wx.getStorageSync('token'),  
72 - };  
73 - app.post(url, params, {}).then((res) => {  
74 - console.log('获取国外列表', res);  
75 - if (+res.code === 1) {  
76 - const arr = [];  
77 - res.data.list.forEach((item) => {  
78 - arr.push(item.title)  
79 - });  
80 - self.setData({  
81 - Abroad_city_picker_list: arr,  
82 - AbroadCityList:res.data.list,  
83 - });  
84 - }  
85 - })  
86 - },  
87 - chooseCity() {  
88 - this.setData({is_show_city:!this.data.is_show_city})  
89 - },  
90 - chooseDomesticCity(e) {  
91 - this.setData({is_show_city:false});  
92 - },  
93 - chooseAbroadCity(e) {  
94 - this.setData({  
95 - current_city: e.detail.value,  
96 - is_city_change: true,  
97 - is_show_city:false  
98 - });  
99 - const lat = this.data.cityList[e.detail.value].latng.split(',')[1];  
100 - const lng = this.data.cityList[e.detail.value].latng.split(',')[0];  
101 - this.setData({lat: lat, lng: lng,addr:this.data.cityList[e.detail.value].title});  
102 - // console.log('lat', 'lng',lat,lng);  
103 - this.getIndex();  
104 - },  
105 - //切换城市  
106 - cityPickerChange(e) {  
107 - this.setData({  
108 - current_city: e.detail.value,  
109 - is_city_change: true  
110 - });  
111 - const lat = this.data.cityList[e.detail.value].latng.split(',')[1];  
112 - const lng = this.data.cityList[e.detail.value].latng.split(',')[0];  
113 - this.setData({lat: lat, lng: lng,addr:this.data.cityList[e.detail.value].title});  
114 - // console.log('lat', 'lng',lat,lng);  
115 - this.getIndex();  
116 - },  
117 swiperChange(e) { 48 swiperChange(e) {
118 this.setData({current_swiper: e.detail.current}) 49 this.setData({current_swiper: e.detail.current})
119 }, 50 },
@@ -176,7 +107,8 @@ Page({ @@ -176,7 +107,8 @@ Page({
176 let city = null; 107 let city = null;
177 if(this.data.is_city_change) { 108 if(this.data.is_city_change) {
178 city = JSON.stringify({ 109 city = JSON.stringify({
179 - name:this.data.cityList[this.data.current_city].title, 110 + // name:this.data.cityList[this.data.current_city].title,
  111 + name:this.data.addr,
180 lat: this.data.lat, 112 lat: this.data.lat,
181 lng: this.data.lng, 113 lng: this.data.lng,
182 }) 114 })
@@ -344,25 +276,111 @@ Page({ @@ -344,25 +276,111 @@ Page({
344 }) 276 })
345 } 277 }
346 }, 278 },
347 - //获取经纬度  
348 - getLat() { 279 + //获取国内城市列表
  280 + getCityList() {
349 const self = this; 281 const self = this;
350 - wx.getLocation({ //获取当前经纬度  
351 - type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  
352 - success: function (res) {  
353 - console.log('获取当前经纬度', res);  
354 - self.setData({lat: res.latitude, lng: res.longitude});  
355 - // app.loginCallback();  
356 - // app.loginCallback = res => {  
357 - // console.log('show-callback-res', res);  
358 - app.getLogin().then(function (res) {  
359 - console.log('res', res);  
360 - self.getIndex(res.token);//获取首页  
361 - self.getIsWrite(); //判断是否已填写个人信息 282 + let url = '/portal/Index/cityList';
  283 + app.post(url, {}, {}).then((res) => {
  284 + console.log('获取城市列表', res);
  285 + if (+res.code === 1) {
  286 + const arr = [];
  287 + res.data.list.forEach((item) => {
  288 + arr.push(item.title)
  289 + });
  290 + self.setData({
  291 + city_picker_list: arr,
  292 + cityList:res.data.list,
  293 + });
  294 + }
  295 + })
  296 + },
  297 + //获取国外名
  298 + getAbroadList() {
  299 + const self = this;
  300 + let url = '/portal/Index/addr';
  301 + let params = {
  302 + token: wx.getStorageSync('token'),
  303 + };
  304 + app.post(url, params, {}).then((res) => {
  305 + console.log('获取国外列表', res);
  306 + if (+res.code === 1) {
  307 + const arr = [];
  308 + res.data.forEach((item) => {
  309 + arr.push(item.title)
  310 + });
  311 + self.setData({
  312 + Abroad_city_picker_list: arr,
  313 + AbroadCityList:res.data,
362 }); 314 });
363 - // };  
364 } 315 }
  316 + })
  317 + },
  318 + //打开城市列表
  319 + chooseCity() {
  320 + // this.setData({is_show_city:!this.data.is_show_city})
  321 + wx.navigateTo({url:'/pages/index/city-list/city-list'})
  322 + },
  323 + //选择国内城市
  324 + chooseDomesticCity(e) {
  325 + const current = e.currentTarget.dataset.index;
  326 + wx.showLoading({title:'加载中',mask:true});
  327 + this.setData({is_show_city:false});
  328 + const lat = this.data.cityList[current].latng.split(',')[1];
  329 + const lng = this.data.cityList[current].latng.split(',')[0];
  330 + this.setData({lat: lat, lng: lng,addr:this.data.cityList[current].title});
  331 + // console.log('lat', 'lng',lat,lng);
  332 + this.getIndex();
  333 + },
  334 + //选择国外城市
  335 + chooseAbroadCity(e) {
  336 + const current = e.currentTarget.dataset.index;
  337 + wx.showLoading({title:'加载中',mask:true});
  338 + this.setData({
  339 + // current_city: e.detail.value,
  340 + is_city_change: true,
  341 + is_show_city:false
365 }); 342 });
  343 + const lat = this.data.AbroadCityList[current].latng.split(',')[1];
  344 + const lng = this.data.AbroadCityList[current].latng.split(',')[0];
  345 + this.setData({lat: lat, lng: lng,addr:this.data.AbroadCityList[current].title});
  346 + console.log('lat', 'lng',lat,lng);
  347 + this.getIndex();
  348 + },
  349 + //切换城市
  350 + // cityPickerChange(e) {
  351 + // this.setData({
  352 + // current_city: e.detail.value,
  353 + // is_city_change: true
  354 + // });
  355 + // const lat = this.data.cityList[e.detail.value].latng.split(',')[1];
  356 + // const lng = this.data.cityList[e.detail.value].latng.split(',')[0];
  357 + // this.setData({lat: lat, lng: lng,addr:this.data.cityList[e.detail.value].title});
  358 + // // console.log('lat', 'lng',lat,lng);
  359 + // this.getIndex();
  360 + // },
  361 + //获取经纬度
  362 + getLat() {
  363 + const self = this;
  364 + if(wx.getStorageSync('lat') === '' &&
  365 + wx.getStorageSync('lng') === '' &&
  366 + wx.getStorageSync('addr') === '') {
  367 + wx.getLocation({ //获取当前经纬度
  368 + type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
  369 + success: function (res) {
  370 + console.log('获取当前经纬度', res);
  371 + self.setData({lat: res.latitude, lng: res.longitude});
  372 + // app.loginCallback();
  373 + // app.loginCallback = res => {
  374 + // console.log('show-callback-res', res);
  375 + app.getLogin().then(function (res) {
  376 + console.log('res', res);
  377 + self.getIndex(res.token);//获取首页
  378 + self.getIsWrite(); //判断是否已填写个人信息
  379 + });
  380 + // };
  381 + }
  382 + });
  383 + }
366 // wx.setStorageSync('score',30); 384 // wx.setStorageSync('score',30);
367 console.log('score',wx.getStorageSync('score')); 385 console.log('score',wx.getStorageSync('score'));
368 if(wx.getStorageSync('score') !== '' && wx.getStorageSync('score')>=80) { 386 if(wx.getStorageSync('score') !== '' && wx.getStorageSync('score')>=80) {
@@ -389,10 +407,11 @@ Page({ @@ -389,10 +407,11 @@ Page({
389 app.post(url, params, {}).then((res) => { 407 app.post(url, params, {}).then((res) => {
390 console.log('获取首页', res); 408 console.log('获取首页', res);
391 if (+res.code === 1) { 409 if (+res.code === 1) {
  410 + wx.hideLoading();
392 self.setData({ 411 self.setData({
393 slide: res.data.banner, 412 slide: res.data.banner,
394 cate: res.data.cate, 413 cate: res.data.cate,
395 - china_city: res.data.city.city, 414 + city: res.data.city,
396 noticeList: res.data.extra, 415 noticeList: res.data.extra,
397 meal_banner: res.data.meal, 416 meal_banner: res.data.meal,
398 items: res.data.active, 417 items: res.data.active,
@@ -428,14 +447,26 @@ Page({ @@ -428,14 +447,26 @@ Page({
428 }) 447 })
429 }, 448 },
430 onLoad: function () { 449 onLoad: function () {
431 - this.getCityList();  
432 - this.getAbroadList(); 450 + // this.getCityList();
  451 + // this.getAbroadList();
433 this._doRefreshMasonry(this.data.items) 452 this._doRefreshMasonry(this.data.items)
434 }, 453 },
435 onShow() { 454 onShow() {
436 if(wx.getStorageSync('isLogin') === true) { 455 if(wx.getStorageSync('isLogin') === true) {
437 this.getLat();//获取经纬度 456 this.getLat();//获取经纬度
438 } 457 }
  458 + if(wx.getStorageSync('lat') !== '' &&
  459 + wx.getStorageSync('lng') !== '' &&
  460 + wx.getStorageSync('addr') !== '') {
  461 + console.log('已选择城市');
  462 + this.setData({
  463 + is_city_change:true,
  464 + lat:wx.getStorageSync('lat'),
  465 + lng: wx.getStorageSync('lng'),
  466 + addr:wx.getStorageSync('addr'),
  467 + });
  468 + this.getIndex()
  469 + }
439 // wx.chooseLocation({ 470 // wx.chooseLocation({
440 // success(res) { 471 // success(res) {
441 // console.log(res); 472 // console.log(res);
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 class="picker"> 14 class="picker">
15 <view class="left"> 15 <view class="left">
16 <view class="iconfont icon-location"></view> 16 <view class="iconfont icon-location"></view>
17 - <text>{{city_picker_list[current_city] || china_city}}</text> 17 + <text>{{city}}</text>
18 <view class="iconfont icon-arrow-down"></view> 18 <view class="iconfont icon-arrow-down"></view>
19 </view> 19 </view>
20 </view> 20 </view>
@@ -23,14 +23,14 @@ @@ -23,14 +23,14 @@
23 bottom:0; 23 bottom:0;
24 left:0; 24 left:0;
25 width: 100%; 25 width: 100%;
26 - height: 354rpx; 26 + height: 409rpx;
27 z-index:100; 27 z-index:100;
28 } 28 }
29 .area_box { 29 .area_box {
30 width: 50%; 30 width: 50%;
31 - height: 354rpx; 31 + height: 409rpx;
32 background-color: #fff; 32 background-color: #fff;
33 - padding: 30rpx 0; 33 + padding: 50rpx 0;
34 -webkit-box-sizing: border-box; 34 -webkit-box-sizing: border-box;
35 -moz-box-sizing: border-box; 35 -moz-box-sizing: border-box;
36 box-sizing: border-box; 36 box-sizing: border-box;
@@ -46,8 +46,8 @@ @@ -46,8 +46,8 @@
46 } 46 }
47 .area { 47 .area {
48 width: 100%; 48 width: 100%;
49 - height: 60rpx;  
50 - line-height: 60rpx; 49 + height: 80rpx;
  50 + line-height: 80rpx;
51 /* background-color: #D5F0FF; */ 51 /* background-color: #D5F0FF; */
52 font-size: 32rpx; 52 font-size: 32rpx;
53 color: #000000; 53 color: #000000;