小程序开发--选择器多级联动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<view class="section" >  
        <view style="   display : flex;flex-direction : row;">
        <text class=" text">选择购买门店:</text><text bindtap="cascadePopup" style= " color: #393939;font-size: 32rpx;margin-top : 2px; margin-left:8px;">{{areaSelectedStr}}></text>
        </view>
        <text style= " color: #393939;font-size: 32rpx;margin-top : 4px;margin-left:114px;">{{detailAddress}}</text>

    </view> 

//选择器
    <view class="modal">
    <view class="modal-mask {{maskVisual}}" bindtap="cascadeDismiss"></view>
    <view animation="{{animationData}}" class="modal-content">
        <view class="modal-header">
            <text class="modal-title">请选择门店</text>
            <text class="modal-close" bindtap="cascadeDismiss">X</text>
        </view>
        <view class="modal-body">

            <text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{areaName}}</text>
            <text class="viewpager-title {{current == 1 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="1">{{shopName}}</text>
            <text class="viewpager-title {{current == 2 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="2">{{detailAddress}}</text>

            <view class="viewpager-pider"></view>
            <swiper class="swiper-area" current="{{current}}" bindchange="currentChanged">

                <block wx:if="{{area_arr.length > 0}}">
                    <swiper-item>
                        <scroll-view scroll-y="true" class="viewpager-listview">
                            <view wx:for="{{area_arr}}" wx:key="index" data-index="{{index}}" bindtap="areaTapped">
                                <text wx:if="{{index == areaIndex}}" class="area-selected">{{item}}</text>
                                <text wx:else>{{item}}</text>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </block>

                <block wx:if="{{shop_arr.length > 0}}">
                    <swiper-item>
                        <scroll-view scroll-y="true" class="viewpager-listview">
                            <view wx:for="{{shop_arr}}" wx:key="index" data-index="{{index}}" bindtap="shopTapped">
                                <text wx:if="{{index == shopIndex}}" class="area-selected">{{item}}</text>
                                <text wx:else>{{item}}</text>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </block>

              <block wx:if="{{detailAddress_tempArr.length > 0}}">
                    <swiper-item>
                        <scroll-view scroll-y="true" class="viewpager-listview">
                            <view wx:for="{{detailAddress_tempArr}}" wx:key="index" data-index="{{index}}" bindtap="detailAddressTapped">
                                <text wx:if="{{index == detailIndex}}" class="area-selected">{{item}}</text>
                                <text wx:else>{{item}}</text>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </block>

            </swiper>
        </view>
    </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
.section{
   background:white;
   margin:2px;
   padding:20rpx;
   display : flex;
   flex-direction : column;
}
.text{

  color: #393939;
  font-size: 32rpx;
  margin-top : 2px;
}
/*跳出的选择器*/
.modal-content {
    position: fixed;
    bottom: -285px;
    left: 0;
    width: 100%;
    height: 285px;
    /*box-shadow: 10rpx 0 30rpx rgba(0,0,0,.9);*/
    margin-top: 5px;
    background: #fff;
    z-index: 999;
}

/*遮罩层*/
.modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    z-index: 99;
}

/*弹窗头部*/
.modal-header {
    margin: 2px 0;
    font-size: 16px;
    color: #666;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 30px;
}

/*所在地区字样*/
.modal-title {
    text-align: center;
    width: 100%;
}

/*关闭按钮*/
.modal-close {
    width: 20px;
}

.modal-body {
    font-size: 14px;
}

/*每级地区标题*/
.viewpager-title {
    padding: 0 10px;
    /*color: #f03118;*/
    line-height: 30px;
}

/*分隔线*/
.viewpager-pider {
    width: 100%;
    height: 1px;
    background: #ccc;
}

/*左右滑动控件*/
.swiper-area {
    height:220px;
}

/*地址列表ListView容器*/
.viewpager-listview {
    padding-top: 5px;
    height: 100%;
}

/*每行地址item项*/
.viewpager-listview view{
    line-height: 30px;
    padding: 0 10px;
}

/*高亮当前所选地区*/
.area-selected {
    color: red;
}

/*初始隐藏*/
.hidden {
    display: none;
}

/*运行时显示*/
.show {
    display: block;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
var UserInfo = require("../../../js/bean/UserInfo.js");
var ApiUser = require("../../../js/http/ApiUser.js");

var shopss = [];
var detailAddress_arr = [];
Page({
  data: {


   //购买门店
   current:0, //选择器第几页的标识，对应wxml中的current

   shopList:[],
   area_arr:[],//第一级的数据数组
   area_id:[],

   shop_arr:[],//第二级的数据数组
   shop_id:[],

   detailAddress_tempArr:[],//第三级的数据数组
   areaSelectedStr: '请选择门店',//area_arr[index]+shop_arr[index]  用来显示于wxml中
    maskVisual: 'hidden',
    areaName: '请选择',//显示于选择器上面部分的区域名
    detailAddress:'可在小票上查看门店',//用来显示于wxml
    source: ''

  },
  onLoad:function(options){
    page = this;
    this.loadPreData();//加载选择器中的数据


  },

//加载平台、门店、投诉类型
loadPreData:function(){
    var that = this;
    ApiUser.getpreData(function (resp) {  

       var userInfo = new UserInfo(resp);
       if(userInfo.isOK()){
         if (userInfo.isSuccess()){
       //平台
      //...


      //投诉类型
      //...

      // 购买门店

        var area_arr = [],
               area_id = [];

        userInfo.getData().shopsList.forEach(function(e){ 
                area_arr.push(e.area);
                area_id.push(e.areaId);
                shopss.push(e.shops);                
        })

          that.setData({

         //...


            shopList:userInfo.getData().shopsList,
            area_arr:area_arr,
            area_id:area_id

          })

         }else {
                    wx.showModal({
                        title: '提示',
                        content: userInfo.getMessage(),
                        success: function(res) {
                            if (res.confirm) {
                                console.log('用户点击确定')
                            }
                        }

                    })
                }
          }else {
                if(userInfo.is401()){
                    wx.showModal({
                            title: '提示',
                            content: '请先登录',
                            success: function(res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                }
                            }
                        })
                  }else if(userInfo.is404()){
                    wx.showModal({
                            title: '提示',
                            content: '页面找不到啦',
                            success: function(res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                }
                            }

                        })
                    }else if(userInfo.is500()){
                    wx.showModal({
                            title: '提示',
                            content: '服务器又开小差啦',
                            success: function(res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                }
                            }

                        })
                    }else{
                    wx.showModal({
                            title: '提示',
                            content: userInfo.getMessage(),
                            success: function(res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                }
                            }

                        })
                    }

                }
            } 
     ) 

},

  //...
  //点击选择门店弹出选择器
  cascadePopup: function() {
        var animation = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease-in-out',
        });
        this.animation = animation;
        animation.translateY(-285).step();
        this.setData({
            animationData: this.animation.export(),
            maskVisual: 'show'
        });
    },
//关闭选择器
 cascadeDismiss: function () {
        this.animation.translateY(285).step();
        this.setData({
            animationData: this.animation.export(),
            maskVisual: 'hidden'
        });
    },


 //...



 //地址选择

 areaTapped: function(e) {
        // 标识当前点击第一级中的哪个区域，记录其名称与主键id都依赖它
        var index = e.currentTarget.dataset.index;
        // current为1，使得页面向左滑动一页至商场列表
        // areaIndex是商场数据的标识
        if(this.data.area_arr[index] == '未知门店'){
           this.setData({
            areaName: this.data.area_arr[index],
            shopName: '',
            shop_arr:[],
            detailAddress:'暂无详细地址',
            detailAddress_tempArr:[],
            areaSelectedStr: this.data.area_arr[index] +  '     ',
           });
         this.cascadeDismiss();

        }else{
            this.setData({
                areaName: this.data.area_arr[index],
                shopName: '',
                detailAddress:'选择门店后显示详细地址',
                areaIndex: index,
                shopIndex:-1
            });

            var that = this;
        //todo  商场列表赋值
            var shop_arr = [],
                shop_id = [];

            shopss[index].forEach(function(e){ 
                    shop_arr.push(e.shopName);
                    shop_id.push(e.shopId);
                    detailAddress_arr.push(e.address);          
                })
            that.setData({
                shopName:'请选择',
                shop_arr:shop_arr,
                shop_id: shop_id,
            });
            that.setData({

                current:1
            });
     }
    },
//点击第二级的商场事件，同理上面点击第一级
    shopTapped: function (e) {

        var index = e.currentTarget.dataset.index;

        this.setData({
            shopIndex: index,
            shopName: this.data.shop_arr[index]
        });

        var areaSelectedStr = this.data.areaName +"   "+ this.data.shopName ;

        this.setData({
            areaSelectedStr: areaSelectedStr,
            detailAddress:detailAddress_arr[index]
        });
        var detailAddress_tempArr = [];

        detailAddress_tempArr.push(detailAddress_arr[index]);

        this.setData({
            current:2,
            detailAddress_tempArr:detailAddress_tempArr
        });

    },
//点击第三级的详细地址事件，并关闭选择器
    detailAddressTapped  : function (e) {

            this.cascadeDismiss();
    },

    currentChanged: function (e) {
        // swiper滚动使得current值被动变化，用于高亮标记
        var current = e.detail.current;
        this.setData({
            current: current
        });
    },
    changeCurrent: function (e) {
        // 记录点击的标题所在的区级级别
        var current = e.currentTarget.dataset.current;
        this.setData({
            current: current
        });
    }, 

   onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示

  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})