微信小程式 vue 自定義日曆 sku

發表於2019-02-28

先記錄一下,之後有時間再完善吧

每一個日期都是一個陣列

  • 初始化日曆陣列 (注意深拷貝問題)

// 初始化日期陣列,
    // 取最近三個月陣列,每一天賦值一個時間戳
    resetDate() {
      let month = new Date().getMonth()
      let year = new Date().getFullYear()
      const dateArr = []
      for (let i = month; i < month + 3; i += 1) {
        const endDate = new Date(year, i + 1, 0).getDate()
        const day = new Date(year, i, 1).getDay()
        dateArr.push({
          dateTab: year + '-' + (i * 1 + 1),
          endDate,
          year,
          month: i,
          day,
          sku: []
        })
        // 12月份加一年,月份變為1月
        if (month === 12) {
          year += 1
          month = 1
        }
      }
      // 每一天賦值一個時間戳
      for (let a = 0; a < dateArr.length; a += 1) {
        //深拷貝問題
        const dateArrs = JSON.parse(JSON.stringify(dateArr[a]))
        for (let j = 1; j < dateArrs.endDate + 1; j += 1) {
          dateArr[a].sku.push({
            maxSum: 0,
            minSum: 0,
            sum: 0,
            price: 0,
            closePrice: 0,
            // 選中編輯狀態
            status: false,
            date: new Date(dateArrs.year, dateArrs.month, j).valueOf()
          })
        }
      }
      this.dateArr = dateArr
    },
複製程式碼

最後放上demo,樣式問題沒有細調。且上面的程式碼是實際業務上使用的,與demo上的不一致,但是實現的方法大致相同

https://gitee.com/Ansxu/date-select.git
複製程式碼

相關文章