微信小程序自定义地址组件_javascript技巧_

        取消     确定                  {{item.name}}                 {{item.name}}                 {{item.name}}        

.region-picker {   width: 100%;   height: 100%;   position: fixed;   top: 0;   left: 0;   z-index: 2;   background: rgba(0, 0, 0, 0.6);   .picker-handle {     width: 100%;     height: 72rpx;     display: flex;     justify-content: space-between;     position: absolute;     bottom: 500rpx;     left: 0;     background: #fff;     box-sizing: border-box;     padding: 0 30rpx;     line-height: 72rpx;     box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.6);     .picker-cancel,     .picker-confirm {       font-size: 30rpx;     }     .picker-cancel {       color: #9E9E9E;     }     .picker-confirm {       color: #018A56;     }   }   .picker {     width: 100%;     height: 500rpx;     position: absolute;     bottom: 0;     left: 0;     background: #fff;     .region-province,     .region-city,     .region-area {       text-align: center;       font-size: 24rpx;     }   } }

const app = getApp(); Component({   /**    * 组件的属性列表    */   properties: {     // 是否展示选择器     showPicker: {       type: Boolean,       value: false     },     // 初始省市区数组     initRegions: {       type: Array,       value: []     }   },   /**    * 组件的初始数据    */   data: {     // 当前省市区  0 省  1 市  2 区     regions: [0, 0, 0],     // 滑动选择器之前的省市区信息     oldRegions: [0, 0, 0],     // 上一次选中的省市区信息     prevRegions: [0, 0, 0],     // 省列表     provinces: [],     // 市列表     citys: [],     // 区列表     areas: [],     // 省     province: {       name: '',       code: ''     },     // 市     city: {       name: '',       code: ''     },     // 区     area: {       name: '',       code: ''     },     // 是否展示     show: false   },   lifetimes: {     attached: function () {     }   },   observers: {     'showPicker': function (value) {       if (value) {         this.setData({           show: true         })         this.initPage();       } else {         this.setData({           show: false         })       }     }   },   /**    * 组件的方法列表    */   methods: {     // 初始化页面     initPage() {       let regions = wx.getStorageSync('initRegions') || '';       if (regions) {         // 设置省         app.api.region.index().then(res1 => {           if (res1.code === 2000) {             let data1 = res1.data;             this.setData({               provinces: data1.map(item => {                 return {                   name: item.name,                   code: item.rid                 }               })             })             this.data.provinces.forEach((item, index) => {               if (item.code === regions[0]) {                 this.setData({                   ['regions[0]']: index,                   ['oldRegions[0]']: index,                   ['prevRegions[0]']: index,                   province: {                     name: item.name,                     code: item.code                   }                 })                 // 设置市                 app.api.region.index({                   parent_id: regions[0]                 }).then(async res2 => {                   if (res2.code === 2000) {                     res2.data.forEach((item, index) => {                       this.setData({                         [`citys[${this.data.citys.length}]`]: {                           name: item.name,                           code: item.rid                         }                       })                       if (item.rid === regions[1]) {                         this.setData({                           ['regions[1]']: index,                           ['oldRegions[1]']: index,                           ['prevRegions[1]']: index,                           city: {                             name: item.name,                             code: item.rid                           }                         })                       }                     })                     // 设置区                     await app.api.region.index({                       parent_id: regions[1]                     }).then(res3 => {                       if (res3.code === 2000) {                         res3.data.forEach((item, index) => {                           this.setData({                             [`areas[${this.data.areas.length}]`]: {                               name: item.name,                               code: item.rid                             }                           })                           if (item.rid === regions[2]) {                             this.setData({                               ['regions[2]']: index,                               ['oldRegions[2]']: index,                               ['prevRegions[2]']: index,                               area: {                                 name: item.name,                                 code: item.rid                               },                             })                           }                         })                       } else if (res3.code === 2001) {                         app.deletetoken();                       } else {                         app.toast(res3.msg, 'none');                       }                     })                   } else if (res2.code === 2001) {                     app.deletetoken();                   } else {                     app.toast(res2.msg, 'none');                   }                 })               }             })           } else if (res.code === 2001) {             app.deletetoken();           } else {             app.toast(res.msg, 'none');           }         })       } else {         this.getProvinces();       }     },     /**      * 获取省      */     async getProvinces() {       await app.api.region.index().then(res => {         if (res.code === 2000) {           let data = res.data;           let provinceList = data.map(item => {             return {               name: item.name,               code: item.rid             }           })           this.setData({             provinces: provinceList           })           this.initCitysAreas();         } else if (res.code === 2001) {           app.deletetoken();         } else {           app.toast(res.msg, 'none');         }       })     },     /**      * 省改变      * @param {number} code  省id       */     changeProvince(code) {       app.api.region.index({         parent_id: code       }).then(res1 => {         if (res1.code === 2000) {           let data1 = res1.data;           let cityList = data1.map(item => {             return {               name: item.name,               code: item.rid             }           })           this.setData({             citys: cityList           })           app.api.region.index({             parent_id: this.data.citys[0].code           }).then(res2 => {             if (res2.code === 2000) {               let data2 = res2.data;               let areaList = data2.map(item => {                 return {                   name: item.name,                   code: item.rid                 }               })               this.setData({                 areas: areaList               })             } else if (res2.code === 2001) {               app.deletetoken();             } else {               app.toast(res2.msg, 'none');             }           })         } else if (res1.code === 2001) {           app.deletetoken();         } else {           app.toast(res1.msg, 'none');         }       })     },     /**      * 市改变      * @param {number} code 市id      */     changeCity(code) {       app.api.region.index({         parent_id: code       }).then(res => {         if (res.code === 2000) {           let data = res.data;           let areaList = data.map(item => {             return {               name: item.name,               code: item.rid             }           })           this.setData({             areas: areaList           })         } else if (res.code === 2001) {           app.deletetoken();         } else {           app.toast(res.msg, 'none');         }       })     },     /**      * 改变picker      */     changePicker(e) {       let newRegion = e.detail.value;       for (let i = 0; i < newRegion.length; i++) {         // 找到改变的那一列         if (newRegion[i] !== this.data.oldRegions[i]) {           switch (i + 1) {             case 1:               // 省改变了               this.changeProvince(this.data.provinces[newRegion[i]].code)               this.setData({                 regions: [newRegion[i], 0, 0],                 oldRegions: [newRegion[i], 0, 0]               })               newRegion = [                 newRegion[0], 0, 0               ]               break;             case 2:               // 市改变了               this.changeCity(this.data.citys[newRegion[i]].code)               this.setData({                 regions: [this.data.oldRegions[0], newRegion[i], 0],                 oldRegions: [this.data.oldRegions[0], newRegion[i], 0]               })               break;             case 3:               // 区改变               this.setData({      
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：vue 为什么要封装全局组件引入_vue.js_
                                                                
下一篇：JS实现一键复制_javascript技巧_