nyx weapp: 功能更新 & 页面更新

1. 添加city选择函数
2. 添加最近访问城市清单（最多3个）
3. 从城市选择页面回到activity.wxml页面，数据自动刷新; onUpdateData()

增值产品-小程序及app/nyx-master/app.js

-//app.js
+//app.js
@@ -52,6 +52,9 @@ App({
     //activity-submit跳转后需要带上category的index
     switchId : "",
 
+    defaultCity: '上海',
+    defaultCounty: '静安区'
+
   },
 
   onLaunch: function () {

增值产品-小程序及app/nyx-master/app.json

-{
+{
@@ -12,6 +12,7 @@
     "pages/activity/quiz-result/quiz-result",
     "pages/activity/quiz-info/quiz-info",
     "pages/activity/activity-info/activity-info",
+    "pages/switchcity/switchcity",
 	  "pages/my/my",
     "pages/key/matchTest/matchTest",
     "pages/my/my-points/my-points",

增值产品-小程序及app/nyx-master/locale/commonMessageZhCn.js

+export const commonMessage = {
+export const commonMessage = {
+  'location.getting': '定位中',
+  'location.city.getting': '正在定位城市',
+  'location.county.getting': '正在获取区县',
+
+  'location.city.fail': '定位失败，请重试',
+  'location.county.fail': '请求区县失败，请重试',
+}

增值产品-小程序及app/nyx-master/pages/activity/activity-list/activity-list.js

-// pages/member/activity-post/activity-edit/activity-edit.js
+// pages/member/activity-post/activity-edit/activity-edit.js
@@ -79,7 +79,7 @@ Page({
       title: '活动列表',
     })      
 
-    //初始载入四个推荐的竞答活动
+    //初始载入四个推荐的活动
     if(_this.__data__.product_listData.length == 0)
     {
       var curDate = getCurDate()

增值产品-小程序及app/nyx-master/pages/activity/activity.js

-// pages/activity/activity.js
+// pages/activity/activity.js
@@ -4,12 +4,18 @@ var config = wx.getStorageSync("config");
 var util  = require('./../../utils/util.js')
 var event = require('./../../utils/event.js')
 
+const { globalData: { defaultCity, defaultCounty } } = app
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+
+    city: defaultCity,
+    county: defaultCounty,
+
     category: [       // 导航栏内容数据    
       { name: '点赞', order : 'like' },
       { name: '价格', order : 'price' },
@@ -36,9 +42,6 @@ Page({
     noteTop: 0,
     noteHeight: 0,
 
-    //城市模块
-    city: "上海",
-
     //搜索模块
     inputShowed: false,  //初始文本框不显示内容
     strSearch : "", //搜索的字串
@@ -190,6 +193,15 @@ Page({
    */
   onShow: function () {
     var _this = this;
+
+    const { globalData: { defaultCity, defaultCounty } } = app
+    console.log("===city, "+defaultCity)
+    console.log("===county, "+defaultCounty)
+    this.setData({
+      city: defaultCity,
+      county: defaultCounty
+    })
+
     var likeDictSub = _this.__data__.likeDictSub;
     var activities  = _this.__data__.activities;
     if(likeDictSub.hasOwnProperty('index_id'))
@@ -535,6 +547,17 @@ Page({
     })
   },
 
+  // 刷新页面数据
+  onUpdateData: function(){
+    var _this = this;
+    
+    var strCity     = app.globalData.defaultCity
+    var curIndex    = _this.__data__.curIndex
+    var strCategory = _this.__data__.category[curIndex].order
+    var strSearch   = _this.__data__.strSearch
+    _this.getActivities(0, 1, 4, strCity, strCategory, strSearch);
+
+  }
 
 
 

增值产品-小程序及app/nyx-master/pages/activity/activity.wxml

-<wxs module="tutil" src="./../../utils/date.wxs"></wxs>
+<wxs module="tutil" src="./../../utils/date.wxs"></wxs>
@@ -7,8 +7,10 @@
   <!-- refer https://www.jb51.net/article/158292.htm -->
   <!-- refer https://github.com/cinoliu/-selectCity -->
   <view class="weui-search-bar">
+    <navigator url="../switchcity/switchcity?city={{city}}">
     <text>{{city}}</text>
     <image src='../../icon/down.png' style='width: 32rpx;height: 32rpx;' class='selecrtImg'></image>
+    </navigator>
     <view class="weui-search-bar__form">
         <view class="weui-search-bar__box">
             <icon class="weui-icon-search_in-box" type="search" size="16"></icon>

增值产品-小程序及app/nyx-master/pages/switchcity/switchcity.js

+import { LETTERS, HOT_CITY_LIST } from '../../locale/citydata'
+import { LETTERS, HOT_CITY_LIST } from '../../locale/citydata'
+import { commonMessage } from '../../locale/commonMessageZhCn'
+import { AutoPredictor } from '../../utils/autoPredictor'
+import utils from '../../utils/utils'
+
+const {
+  isNotEmpty,
+  safeGet,
+  getCityListSortedByInitialLetter,
+  getLocationUrl,
+  getCountyListUrl,
+  getIndexUrl,
+  onFail,
+} = utils;
+const appInstance = getApp();
+
+Page({
+  data: {
+    sideBarLetterList: [],
+    winHeight: 0,
+    cityList: [],
+    hotCityList: HOT_CITY_LIST,
+    showChosenLetterToast: false,
+    scrollTop: 0,//置顶高度
+    scrollTopId: '',//置顶id
+    city: commonMessage['location.getting'],
+    currentCityCode: '',
+    inputName: '',
+    completeList: [],
+    city: '',
+    county: '',
+    showCountyPicker: false,
+    auto: true, // 自动手动定位开关
+
+    LatestCityList: [{ cityCode: 310000, city: '上海' }, { cityCode: 110000, city: '北京' }],
+  },
+
+  onLoad: function (options) {
+    // 生命周期函数--监听页面加载
+    const cityListSortedByInitialLetter = getCityListSortedByInitialLetter();
+    const sysInfo = wx.getSystemInfoSync();
+    const winHeight = sysInfo.windowHeight;
+    const sideBarLetterList = LETTERS.map(letter => ({ name: letter }));
+    var city = ""
+    if (options.city != "") 
+    {
+      city = options.city;
+    }    
+    this.setData({
+      winHeight,
+      sideBarLetterList,
+      cityList: cityListSortedByInitialLetter,
+      city: city,
+    });
+    // 定位
+    // this.getLocation();
+
+  },
+
+  onShow: function() {
+    var _this = this;
+    // 获取历史搜索
+    _this.getRecentCity();
+
+  },
+
+  touchSideBarLetter: function (e) {
+    const chosenLetter = safeGet(['currentTarget', 'dataset', 'letter'], e)
+    this.setData({
+      toastShowLetter: chosenLetter,
+      showChosenLetterToast: true,
+      scrollTopId: chosenLetter,
+    })
+    // close toast of chosenLetter
+    setTimeout(() => { this.setData({ showChosenLetterToast: false }) }, 500)
+  },
+  //选择城市
+  chooseCity: function (e) {
+    const { city, code } = safeGet(['currentTarget', 'dataset'], e)
+    this.setData({
+      auto: false,
+      showCountyPicker: false,
+      city,
+      currentCityCode: code,
+      scrollTop: 0,
+      completeList: [],
+      county: ''
+    })
+    //无须再选择county
+    //this.getCountyList()
+
+    appInstance.globalData.defaultCity = city
+    appInstance.globalData.defaultCounty = ''
+
+    // start 记录最近访问
+    let LatestCityList = wx.getStorageSync('LatestCityList') || [];
+    var item = { cityCode: code, city: city }
+    LatestCityList.unshift(item);
+    var list   = []
+    var result = {}
+    for(var i=0; i< LatestCityList.length && list.length != 3; i++)
+    {
+        var key = LatestCityList[i]['cityCode']
+        if(!result.hasOwnProperty(key))
+        {
+          result[key] = 1
+          list.push(LatestCityList[i])
+        }
+    }
+    wx.setStorageSync('LatestCityList', list)
+    result = {}
+    // end of 最近访问 去重
+
+    // 返回首页
+    var url = getIndexUrl()
+    wx.switchTab({ 
+      url: getIndexUrl(),
+      success: function (e) {  
+        var page = getCurrentPages().pop(); 
+        if (page == undefined || page == null) return; 
+        page.onUpdateData();
+      }  
+    })   
+  },
+
+  chooseCounty: function (e) {
+    const county = safeGet(['currentTarget', 'dataset', 'city'], e)
+    this.setData({ county })
+    appInstance.globalData.defaultCounty = county
+    // 返回首页
+    wx.switchTab({ url: getIndexUrl() })
+  },
+
+  //点击热门城市回到顶部
+  hotCity: function () {
+    this.setData({ scrollTop: 0 })
+  },
+  bindScroll: function (e) {
+    // console.log(e.detail)
+  },
+  getCountyList: function () {
+    console.log(commonMessage['location.county.getting']);
+    const code = this.data.currentCityCode
+
+    wx.request({
+      url: getCountyListUrl(code),
+      success: res => this.setCountyList(res),
+      fail: onFail(commonMessage['location.county.fail']),
+    })
+  },
+
+  setCountyList: function (res) {
+    const resultArray = safeGet(['data', 'result'], res)
+    const countyList = isNotEmpty(resultArray) ? resultArray[0] : []
+    this.setData({ countyList })
+  },
+
+  getLocation: function () {
+    //console.log(commonMessage['location.city.getting'])
+
+    this.setData({ county: '' })
+    wx.getLocation({
+      type: 'wgs84',
+      success: res => this.getLocationFromGeoCoord(res),
+      fail: onFail(commonMessage['location.city.fail']),
+    })
+  },
+
+  getLocationFromGeoCoord: function (geoCoord) {
+    const { latitude, longitude } = geoCoord
+    wx.request({
+      url: getLocationUrl(latitude, longitude),
+      success: location => this.setCityCounty(location)
+    })
+  },
+
+  setCityCounty: function (location) {
+    const { city, adcode, district } = safeGet(['data', 'result', 'ad_info'], location)
+    if (this.data.auto) { // 如果开始手动选择，以手动为准
+      this.setData({
+        city,
+        currentCityCode: adcode,
+        county: district
+      })
+      appInstance.globalData.defaultCity = city
+      // this.getCountyList();
+    }
+  },
+
+  // method2: from wxml
+  reGetLocation: function () {
+    const { city, county } = this.data
+    appInstance.globalData.defaultCity = city
+    appInstance.globalData.defaultCounty = county
+    console.log(appInstance.globalData.defaultCity);
+    //返回首页, 同时刷新首页数据
+    wx.switchTab({ 
+      url: getIndexUrl(),
+      success: function (e) {  
+        var page = getCurrentPages().pop(); 
+        if (page == undefined || page == null) return; 
+        page.onUpdateData();
+      }  
+    })
+  },
+  // 失焦时清空输入框
+  bindBlur: function (e) {
+    this.setData({
+      inputName: '',
+      completeList: []
+    })
+  },
+  // 输入框输入时
+  bindKeyInput: function (e) {
+    let inputName = e.detail.value.trim()
+    this.setData({ inputName })
+    if (!inputName) {
+      this.setData({ completeList: [] })
+    }
+    this.useAutoPredictor(inputName)
+  },
+  // 输入框自动联想搜索
+  useAutoPredictor: function (content) {
+    let autoPredictor = new AutoPredictor(content)
+    let completeList = autoPredictor.associativeSearch()
+    this.setData({ completeList })
+  },
+
+  /*
+    与switchcity无关的自定义函数
+  */
+  /**
+   * 获取历史搜索
+   */
+
+  getRecentCity: function () {
+    var _this = this;
+    var LatestCityList = wx.getStorageSync('LatestCityList');
+    _this.setData({ LatestCityList });
+
+  },
+
+})

增值产品-小程序及app/nyx-master/pages/switchcity/switchcity.json

+{
+{
+    "navigationBarTitleText": "选择城市"
+}

增值产品-小程序及app/nyx-master/pages/switchcity/switchcity.wxml

+<view class="input">
+<view class="input">
+  <input bindinput="bindKeyInput" bindblur="bindBlur" placeholder="输入城市名或拼音查询" placeholder-style="font-size: 30rpx" value="{{inputName}}"></input>
+</view>
+
+<view class="container-inner">
+  <view class="side-bar-letter-list touch-class">
+    <view class="side-bar-hot-city" bindtap="hotCity">
+      <view style="margin-top:0;">当前</view>
+      <view style="margin-top:0;">热门</view>
+    </view>
+    <view wx:for="{{sideBarLetterList}}" style="color:#8BC34A;font-size:20rpx;" wx:key="*this" data-letter="{{item.name}}" catchtouchend="touchSideBarLetter">{{item.name}}</view>
+  </view>
+  <view class="container">
+
+    <block wx:if="{{showChosenLetterToast}}">
+      <view class="show-chosen-letter">
+        {{toastShowLetter}}
+      </view>
+    </block>
+
+    <scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}">
+
+      <ul class="ul">
+        <li wx:for="{{completeList}}" wx:key="*this" bindtap="chooseCity" data-city="{{item.city}}" data-code="{{item.code}}" class="li">{{item.city}}</li>
+      </ul>
+
+      <view class="city-picker">
+        <view class="hotcity-common">当前: {{city}}</view>
+
+        <!-- start 最近访问 -->
+        <view class="hotcity-common">最近访问</view>
+        
+        <view class="hot-city"  wx:key="initial">
+          <view wx:for="{{LatestCityList}}" wx:key="cityCode">
+            <view class="weui-grid" data-code="{{item.cityCode}}" data-city="{{item.city}}" bindtap="chooseCity">
+              <view class="weui-grid-label">{{item.city}}</view>
+            </view>
+          </view>
+        </view>
+        <!-- end 最近访问 -->
+
+        <!-- start 热门城市 -->
+        <view class="hotcity-common">热门城市</view>
+        
+        <view class="hot-city"  wx:key="initial">
+          <view wx:for="{{hotCityList}}" wx:key="cityCode">
+            <view class="weui-grid" data-code="{{item.cityCode}}" data-city="{{item.city}}" bindtap="chooseCity">
+              <view class="weui-grid-label">{{item.city}}</view>
+            </view>
+          </view>
+        </view>
+        <!-- end 热门城市 -->
+        
+      </view>
+
+      <view class="selection" wx:for="{{cityList}}" wx:key="initial">
+        <view class="item-letter" id="{{item.initial}}">{{item.initial}}</view>
+        <view class="item-city" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="id" data-code="{{ct.code}}" data-city="{{ct.city}}" bindtap="chooseCity">
+          {{ct.city}}
+        </view>
+      </view>
+
+    </scroll-view>
+  </view>
+</view>

增值产品-小程序及app/nyx-master/pages/switchcity/switchcity.wxss

+.container-inner {
+.container-inner {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 10rpx;
+}
+
+input {
+  text-align: center;
+  font-size: 32rpx;
+  padding: 5px;
+}
+
+scroll-view {
+  padding-left:16rpx;
+}
+
+
+.side-bar-letter-list {
+  flex-shrink: 0;
+  width: 80rpx;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  color: #666;
+}
+
+.side-bar-letter-list view {
+  margin-top: 20rpx;
+}
+
+.touch-class {
+  background-color: #fff;
+  color: #fff;
+  padding-top: 16rpx;
+  padding-bottom: 16rpx;
+}
+
+.show-chosen-letter {
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin: -100rpx;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 20rpx;
+  font-size: 52rpx;
+  z-index: 1;
+}
+
+.selection {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-top: 10rpx;
+}
+
+.city-picker {
+  padding: 16rpx 0 16rpx 16rpx;
+  background-color: #f5f5f5;
+  margin-bottom: -10rpx;
+}
+.county-picker {
+  padding-left: 20rpx;
+  margin-bottom: 10rpx;
+}
+.county-picker-title {
+  font-size: 24rpx;
+  color: #666;
+  padding-bottom: 0;
+  margin: 8rpx 0;
+  padding-left:4px;
+}
+.hot-city {
+  background-color: #f5f5f5;
+  margin-bottom: -10rpx;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.item-letter {
+  display: flex;
+  background-color: #f5f5f5;
+  height: 40rpx;
+  padding-left: 34rpx;
+  align-items: center;
+  font-size: 24rpx;
+  color: #666;
+}
+
+.item-city {
+  display: flex;
+  background-color: #fff;
+  height: 100rpx;
+  padding-left: 34rpx;
+  align-items: center;
+  border-bottom: 1rpx solid #ededed;
+  font-size: 24rpx;
+  color: #666;
+}
+
+.hotcity-common {
+  font-size: 24rpx;
+  color: #666;
+  padding-bottom: 0;
+  margin: 8rpx 0;
+  margin-left: 16rpx;
+}
+
+.county-picker-list {
+  padding-right: 50rpx;
+  margin: auto;
+}
+
+.current-city {
+  display: inline-block;
+  border: 1rpx solid #8BC34A;
+  border-radius: 8rpx;
+  padding: 10rpx;
+  font-size: 24rpx;
+  color: #8BC34A;
+  text-align: center;
+  min-width: 149.5rpx;
+  margin: 16rpx;
+}
+
+.side-bar-hot-city {
+  color: #8BC34A;
+  font-size: 20rpx;
+  margin: 0 !important;
+}
+
+.slectCity {
+  border-color: #8BC34A !important;
+}
+
+.slectCity view {
+  color: #8BC34A !important;
+}
+
+.weui-grid {
+  padding: 10rpx 0;
+  width: 200rpx;
+  box-sizing: border-box;
+  border: 1rpx solid #ececec;
+  border-radius: 8rpx;
+  background-color: white;
+  margin: 8rpx 0 8rpx 8rpx;
+}
+
+.weui-grids {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.weui-grid-label {
+  display: block;
+  text-align: center;
+  color: #333;
+  font-size: 24rpx;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ul {
+  display: block;
+  color: grey;
+  margin-left: 20rpx;
+}
+
+.li {
+  display: block;
+  font-weight: 100;
+  font-size: 28rpx;
+  padding: 16rpx 0;
+}
+
+input {
+  background-color: #eee;
+}
+
+.input {
+  padding: 16rpx;
+  border-bottom: 1rpx solid #f1f1f1;
+}
+
+.county {
+  display: flex;
+  flex-wrap: wrap;
+  
+}

增值产品-小程序及app/nyx-master/utils/autoPredictor.js

+import { CITY_LIST, CITY_NOT_FOUND } from '../locale/citydata'
+import { CITY_LIST, CITY_NOT_FOUND } from '../locale/citydata'
+import utils from 'utils'
+
+const { isNotEmpty, isChinese, getSlicedName } = utils;
+
+/*
+* AutoPredictor 实例一定有两个对外的接口：
+* 1. 接收 输入框输入的值
+* 2. 返回 最终匹配到的数组
+*/
+export class AutoPredictor {
+  constructor(inputContent) {
+    this.content = inputContent.toLowerCase()
+  }
+
+  // 输入框自动联想搜索
+  associativeSearch() {
+    // search
+    let tempList = this.searchList(this.content)
+    // get final list to show
+    let resultList = this.showList(tempList)
+    return resultList
+  }
+
+  searchList(str) {
+    let targetCity
+    return CITY_LIST.filter(
+      city => {
+        targetCity = this.getTargetCity(str, city)
+        return (targetCity && targetCity == str)
+      }
+    )
+  }
+
+  getTargetCity(str, cityObj) {
+    if (isChinese(str)) {
+      const slicedChineseName = getSlicedName(cityObj, 'city', str.length)
+      return slicedChineseName
+    } else {
+      const slicedPinyinName = getSlicedName(cityObj, 'short', str.length).toLowerCase()
+      return slicedPinyinName
+    }
+    // 在城市数据中，添加简拼到“shorter”属性，就可以实现简拼搜索
+    // getSlicedName(cityObj, 'shorter', str.length).toLowerCase()
+  }
+
+  showList(array) {
+    return isNotEmpty(array) ? array.map(item => ({ city: item.city, code: item.code })) : CITY_NOT_FOUND
+  }
+}
\ No newline at end of file

增值产品-小程序及app/nyx-master/utils/config.js

+//应写入腾讯地图的key，并改文件名为config.js
+//应写入腾讯地图的key，并改文件名为config.js
+module.exports = {
+  key: "xxxxxxxxxxx",
+}

增值产品-小程序及app/nyx-master/utils/utils.js

+import { LETTERS, CITY_LIST } from '../locale/citydata'
+import { LETTERS, CITY_LIST } from '../locale/citydata'
+import config from 'config'
+
+// API
+const getLocationUrl = (latitude, longitude) => (`https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${config.key}`)
+const getCountyListUrl = code => (`https://apis.map.qq.com/ws/district/v1/getchildren?&id=${code}&key=${config.key}`)
+const getIndexUrl = () => ('../activity/activity')
+
+/**
+ * 安全地在深层嵌套对象中取值
+ * get deeply nested data from an object safely, return null if not found
+ * @param {Array} keyList an Array of keys
+ * @param {Object} obj 
+ */
+const safeGet = (keyList, obj) => keyList.reduce((preValue, curKey) => ((preValue && preValue[curKey]) ? preValue[curKey] : null), obj)
+
+const isNotEmpty = array => (Array.isArray(array) && array.length > 0)
+
+const isChinese = str => (/^[\u4e00-\u9fa5]+$/.test(str))
+
+// 城市名按首字母分组
+const getCityListSortedByInitialLetter = () => (
+  LETTERS.map(
+    letter => ({
+      initial: letter,
+      cityInfo: CITY_LIST.filter(city => city.initial == letter)
+    })
+  )
+)
+
+const getSlicedName = (cityObj, key, sliceLen) => (cityObj[key] && cityObj[key].slice(0, sliceLen))
+
+const onFail = (err) => { console.log(err) } // add your logic here e.g. show a toast
+
+export default {
+  getLocationUrl,
+  getCountyListUrl,
+  getIndexUrl,
+  safeGet,
+  isNotEmpty,
+  isChinese,
+  getCityListSortedByInitialLetter,
+  getSlicedName,
+  onFail,
+}