微信小程序 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刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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加密解密函数代码
2013/06/19 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
Js基础学习资料
2010/11/23 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
js密码强度校验
2015/11/10 Javascript
JavaScript中的this机制
2016/01/30 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python实现求两个csv文件交集的方法
2017/09/06 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
zookeeper python接口实例详解
2018/01/18 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
初中体育教学反思
2014/01/14 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
廉洁使者实施方案
2014/03/29 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
教你nginx跳转配置的四种方式
2022/07/07 Servers