利用vant组件结合微信小程序写选择器组件

利用vant组件结合微信小程序写选择器组件

组件代码

JS代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list: {
      type: Array,
      value: {},
      observer(arr) {
        if (arr.length) {
          this.setData({
            timeList: arr
          })
        }
      }
    },
    title: {
      type: String,
      value: ""
    },
    show: {
      type: Boolean,
      value: false
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    timeList: {},
  },

  /**
   * 组件的方法列表
   */
  methods: {
    confirm(e) {
      const {
        index,
        value
      } = e.detail;
      let data = null;
      if (Array.isArray(index) && Array.isArray(value)) {
        data = {
          startIndex: index[0],
          endIndx: index[1],
          startTime: value[0],
          endTime: value[1]
        }
      } else {
        data = {
          value
        }
      }
      this.triggerEvent("confirm", data);
    },
    cancel() {
      this.setData({
        show: false
      })
    }
  }
})

JSON代码

{
  "component": true,
  "usingComponents": {
    "van-popup": "/components/dist/popup/index",
    "van-picker": "/components/dist/picker/index",
    "van-transition": "/components/dist/transition/index"
  }
}

WXML代码

<van-popup show="{{show}}" position="bottom" bind:close="cancel">
  <van-picker show-toolbar title="{{title}}" columns="{{list}}" bind:cancel="cancel" bind:confirm="confirm" toolbar-class="picke-view_title" />
</van-popup>

WXSS代码

.picke-view_title view:first-child {
  color: #333;
}

.picke-view_title view:last-child {
  color: #F3CB3C;
  font-weight: 600;
}

调用组件代码

JS代码

const app = getApp()
import Parcel from "../../api/parcel.js"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShowPicker: false,
    isShowLayer: false,
    expressList: [],
    doorTime: {
      text: '极速上门',
      val: ''
    },
    doorDay: {
      text: '',
      val: ''
    },
    doorList: [{
      values: ['今天', '明天', '后天']
    }, {
      values: ['极速上门']
    }],
    visitSendStartTime: '', // 上门时间--开始时间
    visitSendEndTime: '', // 上门时间--结束时间 
    count: 0,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getDoorList();
  },

  // 获取上门寄件时间段列表
  getDoorList() {
    Parcel.doorList(this.data.communityId).then(res => {
      if (res.success) {
        const data = res.d;
        this.setData({
          ['doorList[1].values']: this.data.doorList[1].values.concat(data),
        })
      }
    })
  },
 
  handleisShowPicker() {
    this.setData({
      isShowPicker: !this.data.isShowPicker
    })
  },
  handleShowLayer() {
    this.setData({
      isShowLayer: !this.data.isShowLayer
    })
  },
  // 上门时间
  handleDoorConfirm(e) {
    const {
      startIndex,
      endIndx,
      startTime,
      endTime
    } = e.detail
    let day = parseInt(new Date(`${(new Date()).format('yyyy/MM/dd')} 00:00`).getTime() / 1000); //当前时间
    let time1 = 0
    let time2 = 0
    if (startIndex == 1) { //明天
      day = day + 86400
    } else if (startIndex == 2) { //后天
      day = day + 86400 * 2
    }
    const visitSendStartDay = this.getLocalTime(day) //后台需要的数据格式
    if (startIndex != 0 && endIndx == 0) {
      app.commonTip('抱歉，该日期不支持极速上门');
      return false;
    }
    let date = new Date((new Date().getTime()) + 1800000); //当前时间
    const currentHours = date.getHours();
    const currentMinute = date.getMinutes();
    if (startIndex == 0 && (currentHours > endTime.split(':')[0])) { //当前时间与选择的时间作比较
      app.commonTip('抱歉，请选择大于当前时间段');
      return false;
    }
    if (endIndx != 0) { //选择时间非‘及时送达’
      time1 = endTime.split('-')[0].replace(':', '')
      time2 = endTime.split('-')[1].replace(':', '')
    }
    if (startIndex == 0 && endIndx == 0) {
      this.setData({
        ['doorDay.text']: '',
        ['doorTime.text']: endTime,
      })
    } else {
      this.setData({
        ['doorDay.text']: startTime,
        ['doorTime.text']: endTime,
        visitSendStartTime: visitSendStartDay + time1,
        visitSendEndTime: visitSendStartDay + time2
      })
    }
    this.handleisShowPicker2();
  },

  //上门时间列表
  setDoorList(data) {
    const array = [];
    for (let i = 0; i < data.length; i++) {
      const obj = {
        text: data[i]
      }
      array.push(obj);
    }
    return array;
  },
 
    //时间格式转换
  getLocalTime(nS) {
    const val = new Date(parseInt(nS) * 1000)
    var year = val.getFullYear()
    var month = val.getMonth() + 1
    var day = val.getDate()
    var data = [year, month, day].map(this.formatNumber)
    return data[0] + data[1] + data[2]
  },
    //判断日期或时间之前是否要加0
  formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  },
})