微信小程序 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 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 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
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
tensorflow实现简单的卷积网络
2018/05/24 Python
Python实战之制作天气查询软件
2019/05/14 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python中断多重循环的思路总结
2019/10/04 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
开幕式邀请函
2015/01/31 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
师德师风培训感言
2015/08/03 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android