微信小程序 – 解决默认的省市区 picker 数据源非最新的问题

最近的项目中遇到的一个问题,微信小程序的默认省市区联动 picker 的内容与最新的有差异,看了一下社区中有很多人在反映这个问题,但是官方也一直没有给出数据源,没办法只好放弃默认 picker,手动重写。

首先 wxml 部分

<view class="card">
    <view class="block">
        <view class="title">城市</view>
        <view class="main" bind:tap="showRegionPicker">
            <view class="picker">
                {{provinceText}},{{cityText}},{{countyText}}
            </view>
        </view>
    </view>
</view>
<view class="shadow" wx:if="{{regionPickerShow}}"></view>
<view class="picker_region_box" wx:if="{{regionPickerShow}}">
    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px; border-radius: 20rpx;" value="{{regionValue}}" bindchange="regionChange">
        <picker-view-column>
            <view wx:for="{{province}}" wx:key="{{province}}" data-id="{{item.id}}">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
            <view wx:for="{{city}}" wx:key="{{city}}" data-id="{{item.id}}">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
            <view wx:for="{{county}}" wx:key="{{county}}" data-id="{{item.id}}">{{item.name}}</view>
        </picker-view-column>
    </picker-view>
    <button class="btn_ok" type="primary" bind:tap="regionConfirm">确定</button>
</view>

然后 wxss 部分

.card {
    width: 700rpx;
    border-radius: 5rpx;
    margin: 25rpx;
    background-color: #fff;
    padding-bottom: 50rpx;
}
.block {
    width: 100%;
    height: 98rpx;
    border-bottom: 2rpx solid #F9F9F9;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 40rpx;
}
.title {
    font-size: 26rpx;
    line-height: 98rpx;
    color: #333333;
    float: left;
    width: 30%;
}
.main {
    width: 70%;
    float: right;
    font-size: 26rpx;
    line-height: 98rpx;
    color: #333333;
}
.picker {
    width: 100%;
    float: right;
    text-align: right;
}

.shadow {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}
.picker_region_box {
    width: 700rpx;
    height: 600rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    border-radius: 20rpx;
    background-color: #fff;
}
.picker_region_box view {
    line-height: 50px;
    text-align: center;
}
.btn_ok {
    margin-top: 100rpx;
}

最后 js 部分
这里的所有请求 api 都是一个接口,根据所携带的 pid 不同,返回的内容也不同,默认 pid 为 1 的话,则返回省列表,pid 为省 id 则返回该省所有的市列表。

var app = getApp()
var common = require("../../../libs/common.js")
Page({
    data:{
        regionPickerShow: false,
        regionValue: [0,0,0],
        provinceText: '江西省',
        cityText: '上饶市',
        countyText: '上饶县',
        province: [],
        city: [],
        county: [],
        provinceIndexOld: '16',
        cityIndexOld: '10',
        countyIndexOld: '2',
        provinceIndexNew: '16',
        cityIndexNew: '10',
        countyIndexNew: '2',
    },
    onLoad: function (options) {
        let that = this;
        // 获取省列表
        wx.request({
            url: app.globalData.domain + 'city',
            data: {
                pid: 1
            },
            success: function (res) {
                console.log(res.data.data);
                that.setData({
                    province: res.data.data
                })
            }
        });
        // 获取江西省的市列表
        wx.request({
            url: app.globalData.domain + 'city',
            data: {
                pid: 428836
            },
            success: function (res) {
                console.log(res.data.data)
                that.setData({
                    city: res.data.data
                });
            }
        });
        // 获取上饶市的区列表
        wx.request({
            url: app.globalData.domain + 'city',
            data: {
                pid: 448209
            },
            success: function (res) {
                console.log(res.data.data)
                that.setData({
                    county: res.data.data
                });
                // 重置默认值
                that.setValue();
            }
        })
    },
    showRegionPicker: function(){
        let that = this;
        that.setData({
            regionPickerShow: true
        })
    },
    regionConfirm: function(){
        let that = this;
        that.setData({
            regionPickerShow: false
        })
    },
    setValue: function(e){
        let that = this;
        // 设置默认值为:江西省,上饶市,上饶县
        that.setData({
            regionValue: [16,10,2]
        })
    },
    regionChange: function(e){
        let that = this;
        console.log('省NEW下标'+e.detail.value[0])
        console.log('市NEW下标'+e.detail.value[1])
        console.log('区NEW下标'+e.detail.value[2])
        that.setData({
            provinceIndexNew: e.detail.value[0],
            cityIndexNew: e.detail.value[1],
            countyIndexNew: e.detail.value[2]
        })
        // 如果省发生改变
        if (that.data.provinceIndexNew != that.data.provinceIndexOld) {
            console.log(e.detail.value);
            console.log(that.data.province[e.detail.value[0]]);
            // 获取改变之后的省 id
            let newProvinceId = that.data.province[e.detail.value[0]].id;
            // 请求新的市数据
            wx.request({
                url: app.globalData.domain + 'city',
                data: {
                    pid: newProvinceId
                },
                success: function (res) {
                    that.setData({
                        city: res.data.data,
                        regionValue: [e.detail.value[0],0,0],
                        provinceIndexOld: e.detail.value[0]
                    });
                    // 获取改变省之后的第一个市的 id
                    let newCityId = that.data.city[0].id;
                    // 请求新的区数据
                    wx.request({
                        url: app.globalData.domain + 'city',
                        data: {
                            pid: newCityId
                        },
                        success: function (res) {
                            that.setData({
                                county: res.data.data,
                                cityIndexOld: 0,
                                countyIndexOld: 0,
                                provinceText: that.data.province[e.detail.value[0]].name,
                                cityText: that.data.city[0].name,
                                countyText: that.data.county[0].name
                            })
                        }
                    })
                }
            })
        } else if (that.data.cityIndexNew != that.data.cityIndexOld) {
            console.log(e.detail.value);
            console.log(that.data.city[e.detail.value[1]]);
            let newCityId = that.data.city[e.detail.value[1]].id;
            wx.request({
                url: app.globalData.domain + 'city',
                data: {
                    pid: newCityId
                },
                success: function (res) {
                    that.setData({
                        county: res.data.data,
                        regionValue: [that.data.provinceIndexOld,e.detail.value[1],0],
                        cityIndexOld: e.detail.value[1],
                        cityText: that.data.city[e.detail.value[1]].name,
                        countyText: that.data.county[0].name
                    })
                }
            })
        } else if (that.data.countyIndexNew != that.data.countyIndexOld) {
            console.log(e.detail.value);
            console.log(that.data.city[e.detail.value[2]]);
            that.setData({
                regionValue: [that.data.provinceIndexOld,that.data.cityIndexOld,e.detail.value[2]],
                countyIndexOld: e.detail.value[2],
                countyText: that.data.county[e.detail.value[2]].name
            })
        } else {}
    },
})

发表评论

电子邮件地址不会被公开。 必填项已用*标注