--增加一个热门城市选择，根据拼音首字母筛选城市组件--

app.js

@@ -1,7 +1,7 @@
 //app.js
 App({
   //----------------------------------------------globalData--------------------------------------
-  evn: 1,//0:开发环境，1：测试环境，2：生产环境
+  evn: 0,//0:开发环境，1：测试环境，2：生产环境
   tmplIds: ['SUjEgwDopCv9xkkSZ4KbS0L7XbAiVQor6GmPg14K760'],
   agentMsgIds: ['kG8DErWDpyzBHCFaLlSKYMF7xVy8UpgogCwV_WSNt10', 'lOQ8Gvyy_dTk68bYGpRVnVA0M7DsYYrV81Gd39GUPBA'],
   version: 152,

app.json

@@ -19,6 +19,7 @@
     "pages/home/tab4/index",
     "pages/home/tab5/index",
     "pages/home/tab6/index",
+    "pages/home/city-test/index",
     "pages/home/attentionPaperList/index",
     "pages/home/businessLicense/index",
     "pages/shop/create/index",

components/city-change/README.md

@@ -0,0 +1,14 @@
+	<city-change styles='max-height:100%;' bindcitytap='cityTap'></city-change> wxml页面引用
+  注意：
+  1.需要引用组件的index.json中需要
+   "usingComponents": {
+    "city-change":"/components/city-change/index"
+  }
+
+  2.在index.js中可以添加以下方法以便于获取回调
+    cityTap(e){
+    console.log('fasdfsdfsdfds');
+    console.log(e);
+    const cityName=e.detail.cityname;
+    wx.navigateBack();
+  },

components/city-change/index.js

@@ -0,0 +1,106 @@
+// import qqmap from '../../utils/map.js';  //如果需要定位打开wxml和js中注释部分，替换此处map.js为实际引用
+const app = getApp()
+Component({
+  properties: {
+    styles:{//这个是可以自定义最外层的view的样式
+      type:String,
+      value:'',
+      observer: function (newval, oldval) {
+        // 监听改变
+        console.log(newval, oldval);
+      }
+    },
+    
+  },
+  data: {
+    //下面是字母排序
+    
+    letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
+    cityListId: '',
+    //下面是城市列表信息，这里只是模拟数据
+    citylist: [{ "letter": "A", "data": [{ "id": "v7", "cityName": "安徽" }] }, { "letter": "B", "data": [{ "id": "v10", "cityName": "巴中" }, { "id": "v4", "cityName": "包头" }, { "id": "v1", "cityName": "北京" }] }, { "letter": "C", "data": [{ "id": "v15", "cityName": "成都" }] }, { "letter": "D", "data": [{ "id": "v21", "cityName": "稻城" }] }, { "letter": "G", "data": [{ "id": "v17", "cityName": "广州" }, { "id": "v29", "cityName": "桂林" }] }, { "letter": "H", "data": [{ "id": "v9", "cityName": "海南" }, { "id": "v3", "cityName": "呼和浩特" }] }, { "letter": "L", "data": [{ "id": "v24", "cityName": "洛阳" }, { "id": "v20", "cityName": "拉萨" }, { "id": "v14", "cityName": "丽江" }] }, { "letter": "M", "data": [{ "id": "v13", "cityName": "眉山" }] }, { "letter": "N", "data": [{ "id": "v27", "cityName": "南京" }] }, { "letter": "S", "data": [{ "id": "v18", "cityName": "三亚" }, { "id": "v2", "cityName": "上海" }] }, { "letter": "T", "data": [{ "id": "v5", "cityName": "天津" }] }, { "letter": "W", "data": [{ "id": "v12", "cityName": "乌鲁木齐" }, { "id": "v25", "cityName": "武汉" }] }, { "letter": "X", "data": [{ "id": "v23", "cityName": "西安" }, { "id": "v28", "cityName": "香港" }, { "id": "v19", "cityName": "厦门" }] }, { "letter": "Z", "data": [{ "id": "v8", "cityName": "张家口" }] }],
+    //下面是热门城市数据，模拟数据
+    newcity: ['北京', '上海', '广州', '深圳', '成都', '杭州'],
+    // citySel: '全国',
+    locateCity: '',
+    height: app.globalData.safeFragmentHeight,
+  },
+  methods: {
+    //点击城市
+    cityTap(e) {
+      const val = e.currentTarget.dataset.val || '',
+        types = e.currentTarget.dataset.types || '',
+        Index = e.currentTarget.dataset.index || '',
+        that=this;
+      let city = this.data.citySel;
+      switch (types) {
+        case 'locate':
+          //定位内容
+          city = this.data.locateCity;
+          break;
+        case 'national':
+          //全国
+          city = '全国';
+          break;
+        case 'new':
+          //热门城市
+          city = val;
+          break;
+        case 'list':
+          //城市列表
+          city = val.cityName;
+          break;
+      }
+      if(city){
+        wx.setStorage({
+          key: 'city',
+          data: city
+        })　　　　//点击后给父组件可以通过bindcitytap事件，获取到cityname的值，这是子组件给父组件传值和触发事件的方法
+        this.triggerEvent('citytap', { cityname: city });
+      }else{
+        console.log('还没有');
+        this.getLocate();
+      }
+     
+    },
+    //点击城市字母
+    letterTap(e) {
+      const Item = e.currentTarget.dataset.item;
+      this.setData({
+        cityListId: Item
+      });
+      console.log(this.data.cityListId);
+    },
+    //调用定位
+    // getLocate(){
+    //   let that=this;
+    //   new qqmap().getLocateInfo().then(function (val) {//这个方法在另一个文件里，下面有贴出代码
+    //     console.log(val);
+    //     if (val.indexOf('市') !== -1) {//这里是去掉“市”这个字
+    //       console.log(val.indexOf('市') - 1);
+    //       val = val.slice(0, val.indexOf('市'));
+    //       console.log(val);
+    //     }
+    //     that.setData({ 
+    //       locateCity: val
+    //     });
+    //     //把获取的定位和获取的时间放到本地存储
+    //     wx.setStorageSync('locatecity', { city: val, time: new Date().getTime() });
+    //   });
+    // }
+  },
+  ready(){
+    // console.log(getApp());
+    // let that = this,
+    //     cityOrTime = wx.getStorageSync('locatecity')||{},
+    //     time = new Date().getTime(),
+    //     city='';
+    // if (!cityOrTime.time||(time - cityOrTime.time > 1800000)){//每隔30分钟请求一次定位
+    //   this.getLocate();
+    // }else{//如果未满30分钟，那么直接从本地缓存里取值
+    //   that.setData({
+    //     locateCity: cityOrTime.city
+    //   })
+    // }
+  }
+})

components/city-change/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+  }

components/city-change/index.wxml

@@ -0,0 +1,26 @@
+<view class='city_box' style='{{styles}}'>
+      <view class='city_left'>
+          <scroll-view scroll-y style='width:100%;height:85vh;' scroll-with-animation scroll-into-view="{{cityListId}}">
+              <!-- <view class='city_locate' data-types='locate' catchtap='cityTap'>
+                  <text class='city_locate_title'>自动定位</text>
+                  <text class='city_locate_text' style='{{!locateCity&&"color:#33b9ff;"}}'>{{locateCity||'点击定位'}}</text>
+              </view> -->
+              <view class='national' data-types='national' catchtap='cityTap'>全国</view>
+              <view class='new_city'>
+                  <view class='new_city_title'>热门城市</view>
+                  <view class='new_city_box'>
+                      <text class='new_city_text' wx:for='{{newcity}}' wx:key='this' data-types='new' catchtap='cityTap' data-val='{{item}}'>{{item}}</text>
+                  </view>
+              </view>
+              <view class='city_list_box'>
+                <block wx:for='{{citylist}}' wx:key='this' wx:for-item='letterItem' wx:for-index='letterIndex'>
+                  <view class='city_first_letter' id='{{letterItem.letter}}'>{{letterItem.letter}}</view>
+                  <text class='city_name' wx:for='{{letterItem.data}}' wx:key='this' data-types='list' catchtap='cityTap' data-index='{{index}}' data-val='{{item}}'>{{item.cityName}}</text>
+                </block>
+              </view>
+          </scroll-view>
+      </view>
+      <view class='city_right'>
+          <text class='letter_item' wx:for='{{letter}}' wx:key='this' catchtap='letterTap' data-item='{{item}}'>{{item}}</text>
+      </view>
+  </view>

components/city-change/index.wxss

@@ -0,0 +1,73 @@
+.city_box{
+  height:100%;
+  background: #fff;
+  display: flex;
+}
+.city_left{
+  flex: 1;
+}
+.city_right{
+  width: 60rpx;
+  margin-top: 20rpx;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.letter_item{
+  flex: 1;
+  height: 40rpx;
+  display: block;
+  font-size: 24rpx;
+  color: #33B9FF;
+  text-align: center;
+}
+.city_locate,.national{
+  height: 80rpx;
+  line-height: 80rpx;
+  border-bottom: 1px solid #efefef;
+  font-size: 28rpx;
+  color: #333;
+  padding-left: 25rpx;
+}
+.city_locate_title{
+  color: #999;
+  margin-right: 20rpx;
+}
+.new_city{
+  background: #efefef;
+  font-size: 28rpx;
+}
+.new_city_title{
+  line-height: 50rpx;
+  color: #999;
+  padding-left: 25rpx;
+  margin-bottom: 20rpx;
+}
+.new_city_box{
+  display: flex;
+  flex-wrap: wrap;
+}
+.new_city_text{
+  width: 200rpx;
+  text-align: center;
+  line-height: 70rpx;
+  background: #fff;
+  border-radius: 35rpx;
+  margin:0 0 22rpx 22rpx;
+}
+.city_first_letter{
+  line-height: 40rpx;
+  height: 40rpx;
+  padding-left: 25rpx;
+  font-size: 28rpx;
+  background: #eee;
+  color: #999;
+}
+.city_name{
+  display: block;
+  line-height: 80rpx;
+  height: 80rpx;
+  border-bottom: 1px solid #efefef;
+  font-size: 28rpx;
+  color: #333;
+  padding-left: 25rpx;
+}

pages/home/city-test/index.js

@@ -0,0 +1,71 @@
+// pages/home/city-test/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+  cityTap(e){
+    console.log('fasdfsdfsdfds');
+    console.log(e);
+    const cityName=e.detail.cityname;
+    wx.navigateBack();
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/home/city-test/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "city-change":"/components/city-change/index"
+  }
+}

pages/home/city-test/index.wxml

@@ -0,0 +1,5 @@
+<!--pages/home/city-test/index.wxml-->
+<cu-custom bgColor="bg-white" isBack="{{true}}">
+	<view slot="content" class="text-black text-xl">城市选择</view>
+</cu-custom>
+<city-change styles='max-height:100%;' bindcitytap='cityTap'></city-change>

pages/home/city-test/index.wxss

@@ -0,0 +1 @@
+/* pages/home/city-test/index.wxss */

pages/home/index/index.js

@@ -158,6 +158,10 @@ Component({
         wx.navigateTo({
           url: '/pages/agent/order/index?status=&tabIndex=0'
         })
+      }else if (e.currentTarget.id == 'cscs') {
+        wx.navigateTo({
+          url: '/pages/home/city-test/index'
+        })
       }
     },
     toUserInfo: function () {

pages/home/index/index.wxml

@@ -193,12 +193,17 @@
 						</view>
 						<view class="dmArea4text">千鸟物流</view>
 					</view>
-					<view class="dmArea4Content">
+					<view class="dmArea4Content"  style="margin-top:12rpx">
 						<view class="dmArea4ImgView">
 							<image class="dmArea4Img" src="/assets/myinfo/fxztb.png"></image>
 						</view>
 						<button open-type="share" title="快来看看你的纸通宝吧！" hover-class="none" class="fxztb">分享纸通宝</button>
-
+					</view>
+					<view class="dmArea4Content"  style="margin-top:20rpx">
+						<view class="dmArea4ImgView" id="cscs" is-link bindtap="toPage">
+							<image class="dmArea4Img" src="/assets/myinfo/qnwl.png"></image>
+						</view>
+						<view class="dmArea4text">城市测试</view>
 					</view>
 				</view>
 			</view>

pages/home/index/index.wxss

@@ -464,9 +464,10 @@
 }
 
 .fxztb {
-  font-size: 26rpx;
+  font-size: 28rpx;
   padding: 0;
   background-color: #fff;
+  color:#4a4141
 }
 .fxztb::after{
   border: none;