微信小程序 ecshop地址三级联动实现实例代码


Posted in Javascript onFebruary 28, 2017

微信小程序 ecshop地址3级联动实现实例代码

picker标签,官方给出的实例:

<view class="section">
 <view class="section__title">地区选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">
   当前选择:{{array[index]}}
  </view>
 </picker>
</view>

 Page({
 data: {
  array: ['美国', '中国', '巴西', '日本'],
  index: 0,
 },
 bindPickerChange: function(e) {
  console.log('picker发送选择改变,携带值为', e.detail.value)
  this.setData({
   index: e.detail.value
  })
 },
})

wxml页面:

<view class="add-list under-line" >

    <view class="add-lab">收货地址</view>
    <view class="add-text">
      <picker class="w-3" bindchange="bindPickerProvince" value="{{provinceIndex}}" range="{{province}}" >
        <view class="picker">{{province[provinceIndex]}}</view>
      </picker> 
      <picker class="w-3" bindchange="bindPickerCity" value="{{cityIndex}}" range="{{city}}" >
        <view class="picker">{{city[cityIndex]}}</view>
      </picker>
      <picker class="w-3" bindchange="bindPickerDistrict" value="{{districtIndex}}" range="{{district}}" >
        <view class="picker">{{district[districtIndex]}}</view>
      </picker>        
    </view>
  </view>

js页面:

var app = getApp()
Page({
 data:{
  motto: 'jxcat',
  serverUrl: app.globalData.ajaxUrl,
  baseUrl: app.globalData.baseUrl,
  title: "收货地址",
  address_id: "",
  address: "",

  province:[],

  province_id: [], //后台返回的数据对应 region_id city,district 与此相同
  province_name: [], //后台返回的数据对应 region_name
  provinceIndex: 0, //wxml页面选择的选项,从0开始
  provinceId: 0, //根据wxml页面选择的选项获取到province_id: []对应的region_id

  city:[].
  city_id: [],
  city_name: [],
  cityIndex: 0,
  cityId: 0,

  district:[],
  district_id: [],  
  district_name: [],
  districtIndex: 0,
  districtId: 0,
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
  var that = this
  var get_data
  wx.checkSession({
   success: function(){
    //登录态未过期
    wx.getStorage({
     key: 'wcx_session',
     success: function(sres) {
       get_data = {
            m: 'api',
            c: 'user' ,
            a: 'edit_address',
            wcx_session: sres.data,
        }
       if(options.act == 'edit'){
         get_data = {
            m: 'api',
            c: 'user' ,
            a: 'edit_address',
            id: options.id,
            wcx_session: sres.data,
        }
       }
       wx.request({
        url: app.globalData.ajaxUrl, 
        data: get_data,
        header: {
          'content-type': 'application/json'
        },
        success: function(res) {
  
          if(options.act == "edit"){
           that.data.provinceId = res.data.consignee.province
           that.data.cityId = res.data.consignee.city
           that.data.districtid = res.data.consignee.district
          }
          for(var i=0; i<res.data.province_list.length; i++){{
           that.data.province_id[i] = res.data.province_list[i].region_id //把region_id存入province_id
           that.data.province_name[i] = res.data.province_list[i].region_name //把region_name存入province_name
           if(res.data.consignee.province == res.data.province_list[i].region_id){
            that.data.provinceIndex = i
           }
          }}
          for(var i=0; i<res.data.city_list.length; i++){{
           that.data.city_id[i] = res.data.city_list[i].region_id
           that.data.city_name[i] = res.data.city_list[i].region_name
           if(res.data.consignee.city == res.data.city_list[i].region_id){
            that.data.cityIndex = i
           }
          }}
          for(var i=0; i<res.data.district_list.length; i++){{
           that.data.district_id[i] = res.data.district_list[i].region_id
           that.data.district_name[i] = res.data.district_list[i].region_name
           if(res.data.consignee.district == res.data.district_list[i].region_id){
            that.data.districtIndex = i
           }
          }}
          that.data.address_id = options.id
          that.setData({
           consignee: res.data.consignee,
           province: that.data.province_name,
           provinceIndex: that.data.provinceIndex,
           city: that.data.city_name,
           cityIndex: that.data.cityIndex,
           district: that.data.district_name,
           districtIndex: that.data.districtIndex
          }) 
        }
       })
       //request
     } 
    })
   },
   fail: function(){
    //登录态过期
    wx.login()
   }
  })
  
 },
 bindPickerProvince: function(event){
  var that = this
  var getId = event.detail.value //获取到wxml选择的选项对应的下标,从0开始
  that.data.provinceId = that.data.province_id[getId] //根据获取到的下标获取到region_name对应的region_id
  wx.request({
   url: app.globalData.ajaxUrl, 
   data: {
    m: 'api',
    c: 'public' ,
    a: 'region',
    rtype: 2,
    rparent: that.data.provinceId,
   },
   header: {
     'content-type': 'application/json'
   },
   success: function(res){
    for(var i=0; i<res.data.regions.length; i++){{
     that.data.city_id[i] = res.data.regions[i].region_id
     that.data.city_name[i] = res.data.regions[i].region_name
    }}
    that.setData({
      city: that.data.city_name,
      provinceIndex: getId,
     }) 
   },
   
  })
 },
 bindPickerCity: function(event){
  var that = this
  var getId = event.detail.value
  that.data.cityId = that.data.city_id[getId]
  wx.request({
   url: app.globalData.ajaxUrl, 
   data: {
    m: 'api',
    c: 'public' ,
    a: 'region',
    rtype: 3,
    rparent: that.data.cityId,
   },
   header: {
     'content-type': 'application/json'
   },
   success: function(res){
    for(var i=0; i<res.data.regions.length; i++){{
     that.data.district_id[i] = res.data.regions[i].region_id
     that.data.district_name[i] = res.data.regions[i].region_name
    }}
    that.setData({
      district: that.data.district_name,
      cityIndex: getId,
     }) 
   },
   
  })
 },
 bindPickerDistrict: function(event){
   var that = this
   var getId = event.detail.value
   that.data.districtId = that.data.district_id[getId]
   that.setData({
      districtIndex: getId,
   }) 
 },
 formSubmit: function(event) {
  var that = this
  wx.checkSession({
   success: function(){
    //登录态未过期
    wx.getStorage({
     key: 'wcx_session',
     success: function(sres) {
       wx.request({
        url: app.globalData.ajaxUrl, 
        data: {
         m: 'api',
         c: 'user' ,
         a: 'add_address',
         address_id: that.data.address_id,
         province: that.data.provinceId, // wxml页面选择的地址对应的 region_id
         city: that.data.cityId,
         district: that.data.districtId,
         address: event.detail.value.address,
         consignee: event.detail.value.consignee,
         mobile: event.detail.value.mobile,
         zipcode: event.detail.value.zipcode,
         wcx_session: sres.data,
        }, 
        header: {
          'content-type': 'application/json'
        },
        
        success: function(res) {
          console.log(res)
          wx.redirectTo({
                url: 'address'
            })
        }
       })
       //request
     } 
    })
   },
   fail: function(){
    //登录态过期
    wx.login()
   }
  })
 },


  
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery编程中的一些核心方法简介
Aug 14 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
js实现上传图片到服务器
Apr 11 Javascript
简单实现AngularJS轮播图效果
Apr 10 #Javascript
ie下js不执行的几种可能
Feb 28 #Javascript
jquery中绑定事件的异同
Feb 28 #Javascript
JS常见算法详解
Feb 28 #Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 #Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 #Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 #Javascript
You might like
C# Assembly类访问程序集信息
2009/06/13 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php检测useragent版本示例
2014/03/24 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
许愿墙中用到的函数
2006/10/07 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
react redux入门示例
2018/04/19 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
keep-alive保持组件状态的方法
2020/12/02 Javascript
python轻松查到删除自己的微信好友
2016/01/10 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
高级销售员求职信
2013/10/25 职场文书
团结演讲稿范文
2014/05/23 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
信用卡收入证明范本
2015/06/12 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书