uni-app上班考勤打卡情况日历展示

王小婷

发布于 2019-12-19 23:04:38

3.5K0

发布于 2019-12-19 23:04:38

文章被收录于专栏：编程微刊编程微刊

需求：请求后端接口数据，（每个月的打卡情况），并且将数据展示在日历里面

步骤

1：找到官网教程文档，实现一个静态的展示页面，https://ext.dcloud.net.cn/plugin?id=56

<template>
    <view>
        <uni-calendar 
        :insert="true"
        :lunar="true" 
        :start-date="'2019-3-2'"
        :end-date="'2019-5-20'"
        @change="change"
         ></uni-calendar>
    </view>
</template>

<script>
    import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
    export default {
        components: {
            uniCalendar
        },
        data() {
            return {};
        },
        methods: {
            change(e) {
                console.log(e);
            }
        }
    };
    </script>

大概是这样的，如果有不懂的地方可以查看官方文档说明

2：用于展示打开情况，我这里选择了用红色点标记，在view里面写上:selected="selected"，并且在data里面定义要展示的数据

<template>
    <view>
        <uni-calendar 
        :insert="true"
        :lunar="true" 
        :selected="selected"
        :start-date="'2019-3-2'"
        :end-date="'2019-5-20'"
        @change="change"
         ></uni-calendar>
    </view>
</template>

<script>
    import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
    export default {
        components: {
            uniCalendar
        },
        data() {
                     return {
       
                       selected: [{
                           date: '2019-12-1'
                       }, {
                           date: '2019-12-3'
                       }, {
                           date: '2019-12-4'
                       }, {
                           date: '2019-12-6'
                       }]
                           };
               },
        methods: {
            change(e) {
                console.log(e);
            }
        }
    };
    </script>

这个时候，就可以看到自己想要标记的日期了，但是这些都是前端静态展示，实际项目中，需要请求接口数据，并且渲染

3：将data()数据写在前端的模拟接口里面，前面在uni-app项目里使用node服务实现模拟接口https://cloud.tencent.com/developer/article/1554342，现在就可以派上用场了

将数据写入文件，并且运行node --inspect server.js，可以看到接口可以访问了

let data = {
   
    "selected": [{
        "date": '2019-12-1'
    }, {
        "date": '2019-12-3'
    }, {
        "date": '2019-12-4'
    }, {
        "date": '2019-12-6'
    }]
}
module.exports = {
  data: data
}

4：写一个请求uni.request，请求接口，并且将接口返回数据赋值到自己在data里面定义的空数组中。

完整示例代码：

<template>
    <view>
        <uni-calendar :insert="true" :lunar="true" :selected="selected" :start-date="'2019-3-2'" :end-date="'2019-5-20'"
         @change="change"></uni-calendar>
    </view>
</template>
<script>
    import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
    export default {
        components: {
            uniCalendar
        },
        data() {
            return {
                selected: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                uni.request({
                    url: 'http://localhost:3000/data3',
                    success: (res) => {
                        console.log(res.data);
                        this.selected = res.data.selected;
                    }
                });
            },
            change(e) {
                console.log(e);
            },
        }
    };
</script>

OK,显示成功了，撒花~