小程序 ——— picker二级联动封装版

小程序 ——— picker二级联动封装版_第1张图片

这个事情是这个样子的 , 最近我们在做一个关于酒店的小程序 , 老板突发奇想,觉得我们必须要做的跟别人不一样!
“我就是我,是不一样的烟火~”
于是老板说,我们添加一个让顾客选房间号的功能。
想想都美滋滋,想想都爽歪歪,别人有的我们都有,别人没有的我们还有。距离走向巅峰只差这一步啦,哈哈哈~

听完后的我是懵逼的。

小程序 ——— picker二级联动封装版_第2张图片

一定是我修炼的不够, 这种功能一定有他存在的意义。一定可以超完美的实现它。

小程序 ——— picker二级联动封装版_第3张图片

然后我就做了上面那个demo。

Page({
  data: {
    multiArray: [['豪华大床房', '标准单人房','标准双人床','无敌海景房','静谧山景房'], ['101','102','103','104','105','106']],
    objectMultiArray: [
      [
        {
          id: 0,
          name: '豪华大床房'
        },
        {
          id: 1,
          name: '标准单人房'
        },
        {
          id: 2,
          name: '标准双人床'
        },
        {
          id: 3,
          name: '无敌海景房'
        },
        {
          id: 4,
          name: '静谧山景房'
        }
      ], [
        {
          id: 0,
          name: '101'
        },
        {
          id: 1,
          name: '102'
        },
        {
          id: 2,
          name: '103'
        },
        {
          id: 3,
          name: '104'
        },
        {
          id: 3,
          name: '105'
        }
      ]
    ],
    multiIndex: [0, 0],
  },

  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        switch (data.multiIndex[0]) {
          case 0:
            data.multiArray[1] = ['101', '102', '103', '104', '105', '106'];
            break;
          case 1:
            data.multiArray[1] = ['201', '202', '203', '204', '205', '206'];
            break;
          case 2:
            data.multiArray[1] = ['301', '302', '303', '304', '305', '306'];
            break;
          case 3:
            data.multiArray[1] = ['401', '402', '403', '404', '405', '406'];
            break;
          case 4:
            data.multiArray[1] = ['501', '502', '503', '504', '505', '506'];
            break;
        }
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;

        }


    this.setData(data);
  },

})

小程序 ——— picker二级联动封装版_第4张图片

来个选房型房间号的二级联动,然后再改改样式,我想 … 我已经靠近老板的需求了吧。

结果老板说pass。

“乖乖,我们不需要选房型,因为我们已经在首页选好了,进去只选房间号就行了哟。还有,万一客人想订多间,房间号是可多选的哟。”

小程序 ——— picker二级联动封装版_第5张图片

告辞。

你可能感兴趣的:(小程序)