钉钉日志app功能

钉钉日志app部分代码

const FLAG = "RECORD-DATA";
//  本地localStorage  存数据
function setInfo(time,title="",content=""){
    let DATA = JSON.parse(localStorage.getItem(FLAG) || "{}");
    let DATA_KEYS = Object.keys(DATA);
    if(!DATA_KEYS.includes(time)){
        DATA[time] = [];
    }
    let ARR = DATA[time];
    ARR.push({
        id:ARR.length === 0 ? 1:(parseInt(ARR[ARR.length -1].id) + 1),
        title,
        content,
        time:getMinutes()
    });
    localStorage.setItem(FLAG,JSON.stringify(DATA));
    return true;
}
//  本地localStorage  取数据
function getInfo(time,id){
    let DATA = JSON.parse(localStorage.getItem(FLAG) || "{}");
    let DATA_KEYS = Object.keys(DATA);
    if(!DATA_KEYS.includes(time)){
        return null;
    }
     DATA = DATA[time];
    if(typeof id !== 'undefined'){

        DATA = DATA.find(item=>{
            return parseInt(item.id) === parseInt(id)
        })

    }
    return DATA;
}
// 删除数据
function deleteInfo(time,id){
    let DATA = JSON.parse(localStorage.getItem(FLAG) || "{}");
    DATA_KEYS = Object.keys(DATA);
    if(!DATA_KEYS.includes(time)){
        return false;
    }
     let ARR = DATA[time];
     ARR = ARR.filter(item =>{
        return parseInt(item.id) !== parseInt(id)
    });

    DATA[time] = ARR;
    localStorage.setItem(FLAG,JSON.stringify(DATA));
    return true;
}

// 日期格式化
function formatDate(time){
    console.log(time)
    let year = time.getFullYear(),
        month = time.getMonth() +1,
        day = time.getDate();
        month = month < 10 ? "0" + month : month;
        day = day < 10 ? "0"+ day : day;
        return `${year}/${month}/${day}`;
}

// 日期补0
function formatTime(time){
    return time.split('/').map((item)=>{
        if(item.length < 2){
            return "0"+item;
        }
        return item;
    }).join('/')
}
// /获取  时分
function getMinutes(){
    let time = new Date();
   let  mintus  = time.getMinutes(),
    hours   = time.getHours();
    mintus = mintus < 10 ? "0" + mintus : mintus;
    hours = hours < 10 ? "0"+ hours : hours;
    return `${mintus}/${hours}`;
}
export default {
    formatDate,
    formatTime,
    set:setInfo,
    get:getInfo,
    del:deleteInfo
}

组件代码，css请自动忽略（没有好好写）

<template>
  <div class="homeBox">
    <div ref="calendar">
      <Calendar @changeMonth="changgeMoth" @choseDay="choseDay" :markDate = "mark"></Calendar>
    </div>
    <div class="JournalBox" ref="Record">
        <div v-for="item in list" :key="item.id">
            <router-link  :to="{path:'/handle',query:{time:mark[0],id:item.id}}" >
                    <ul>
                        <li>{{item.content}}</li>
                        <li>{{item.title}}</li>
                    </ul>
            </router-link>
        

        </div>
    </div>

    <router-link :to="{path:'/handle',query:{
        time:mark[0],
    }}" id="addbtn">添加</router-link>

  </div>
</template>

<script>
 import Calendar from "vue-calendar-component";//引入vue日历
 
export default {
  components:{
    Calendar
  },
  data () {
    return {
        mark:[],
        list:[],
    }
  },
  created() {
        this.mark = [this.$storage.formatDate(new Date())];
        console.log(this.mark)
        let time  = this.$route.query.time;
        if(time){
            this.mark = [decodeURIComponent(time)];
        }
        this.initData()
    },

  methods:{
    //  vue   ref获取domd元素
    computeRecordHeight(){
        // 异步操作  晚于浏览器渲染完成 再去操作
       let awaitTime =  setTimeout(()=>{
            clearTimeout(awaitTime)
            this.$refs.Record.style.height = 
            document.documentElement.clientHeight  - 
            this.$refs.calendar.offsetHeight + "px"
        },10)

    },
    changgeMoth(){
        // this.list = [];
        this.computeRecordHeight();

    },
    choseDay(time){
        this.mark = [this.$storage.formatTime(time)];
        this.initData();
        
    },
    initData(){
        let time = this.mark[0];
        this.list = this.$storage.get(time) || [];

    }



  },

 mounted(){
    this.computeRecordHeight();
    // 当屏幕大小发生改变的时候
    window.addEventListener("resize",()=>{
        this.computeRecordHeight();
    })

  },



}
</script>

<style scoped>
.homeBox{
     width: 100%;
    
}
.JournalBox{
    /* width: 100%; */
    /* border: 1px solid red; */
}
.JournalBox-list{
    height: 40px;
    line-height: 40px;
    /* border: 1px solid red; */
    float: left;
}
.JournalBox-list div:first-child{
    float: left;
}
.JournalBox-list div:last-child{
    float: left;
}
ul>li{
    display:inline-block;
}

#addbtn{
    position: fixed;
    border: 1px solid red;
    bottom: 120px;
    right: 0;
}



</style>