微信小程序 仿京东 省市县地址选择

效果图

因为是外包项目，代码以实现功能为要求而已，轻喷。

小程序部分代码

wxml

<view class="page">
<view class="content">
    <view class="perosn item">
        <text>收货人 :</text>
        <input bindinput="inputName" value="{
  {formData.name}}"  placeholder="请填写收货人姓名"/>
    </view>
    <view class="phone  item">
        <text>手机号码:</text>
        <input  bindinput="inputPhone" value="{
  {formData.phone}}" placeholder="请填写收货人手机号"/>
    </view>
    <view class="area item"  bindtap="handleArea">
        <text>所在地区:</text>
        <input  bindinput="inputArea" value="{
  {formData.area}}"  disabled="true"
         unselectable='on'
         placeholder="请选择省市区"  />
    </view>
    <view class="detail item">
        <text>详细地址:</text>
        <input bindinput="inputDetail" value="{
  {formData.detail}}"  placeholder="街道、楼牌号详细地址"/>
    </view>
    <view class="tag">
        <text>标签</text>
    </view>
    <view class="is-default">
        <view>
            <text>设置默认地址</text>
            <text>提醒: 每次下单会默认推荐使用地址</text>
        </view>
        <view>
            <switch checked="{
  {switchChecked}}" bindchange="switchChange"/>
        </view>
    </view>

</view>
<view class="bottom">
    <view class="add-address" bindtap="saveAndUse">保存并使用</view>
</view>
<view class="province-city-area" wx:if="{
  {isShowActoion}}">
  <view class="content-field {
  {isShowActoion?'show-animation':''}}" >
      <view class="content" >
        <view class="header" >
          <text class="title">请选择所在地区</text>
          <view class="close" bindtap="toClose">x</view>
        </view>
      <view class="country">中国大陆</view>
      <view class="select-province-city-area">
          <view  class="options" wx:for="{
  {options}}" wx:key="index">
              <view bindtap="optionChange"  data-index="{
  {index}}"  class="{
  { item.isSelect?'selected': '' }}">{
  {item.name}}</view>
          </view>
      </view>
      <view class="province-field-select" wx:if="{
  {navIndex==1}}">
          <view class="hot-city">
            <view class="title">热门城市</view>
            <view class="hot-city-area">
                <view class="city" 
                    wx:for="{
  {hotCity}}" 
                    wx:key="index"
                    data-index="{
  {index}}"
                    bindtap="hotCitySelect"
                    >{
  {item.shortName}}</view>
            </view>
         </view>
        <view class="options-content">
            <view wx:for="{
  {provinceAlphaList}}" wx:key="index">
                <view class="alpha-content">{
  {item}}</view>
                <view>
                    <view class="area-content"  
                    wx:for="{
  {provinceDataMap[item]}}"
                    wx:for-item="subItem"
                    wx:for-index="subIndex"
                    wx:key="index"
                    data-alpha=&