uniapp 好用的一款日历插件，适合做考勤打卡功能

### UniApp 中实现打卡功能的步骤 #### 准备工作 为了在 UniApp 中顺利实现打卡功能，需先完成环境搭建并引入必要的插件和组件。 - **安装依赖库** 确保已安装最新版本的 `uni-app` 和相关 UI 组件库。可以通过 npm 或者 HBuilderX 的内置工具来管理这些依赖项[^1]。 #### 创建基础页面结构 创建一个新的 Vue 文件作为打卡界面的基础布局文件，在此文件内定义主要视图元素以及交互逻辑。 ```html <template> <view class="container"> <!-- 地图显示区域 --> <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude" :circles="circles" ></map> <!-- 日历控件用于查看历史打卡记录 --> <uni-calendar ref="calendar" :insert="true" :lunar="false" :start-date="'2023-01-01'" :end-date="'2023-12-31'" @confirm="handleDateConfirm" /> <!-- 打卡按钮 --> <button type="primary" @click="punchIn">立即打卡</button> </view> </template> ``` #### 初始化数据与方法 通过 `<script>` 标签内的 JavaScript 部分初始化所需的数据变量，并编写处理用户操作的方法函数。 ```javascript <script> export default { data() { return { latitude: '', // 当前地理位置纬度 longitude: '',// 当前地理位置经度 circles: [], // 定义地图上的圆形标记范围 }; }, onLoad() { this.getLocation(); // 页面加载时获取当前位置信息 }, methods: { getLocation() { const that = this; uni.getLocation({ success(res) { that.latitude = res.latitude; that.longitude = res.longitude; // 设置一个半径为50米的圆圈表示允许打卡的有效区域 that.circles = [{ latitude: res.latitude, longitude: res.longitude, radius: 50, // 半径单位：米 fillColor: '#0af', strokeColor: '#fff' }]; } }); }, punchIn() { let nowTime = new Date().toLocaleString(); if (this.isWithinRange()) { console.log(`成功打卡于 ${nowTime}`); // 这里可以调用接口上传打卡时间和地点至服务器保存 uni.showToast({ title: '打卡成功', icon: 'success'}); } else { uni.showToast({title:'不在有效范围内无法打卡!',icon:"none"}); } }, isWithinRange() { var distance = Math.sqrt( Math.pow(this.latitude - this.circles[0].latitude, 2) + Math.pow(this.longitude - this.circles[0].longitude, 2) ) * 111000; // 计算两点间距离 return distance <= this.circles[0].radius; }, handleDateConfirm(event){ console.log('选择了日期:', event.detail); } } } </script> ``` #### 添加样式美化 最后一步是对上述 HTML 结构应用 CSS 来增强视觉效果，使整个应用程序看起来更加友好美观。 ```css <style scoped lang="scss"> .container{ padding: 20px; } .map{ width: 100%; height: 300px; } button[type='primary']{ margin-top: 20px; display:block; width:80%; align-self:center; } </style> ``` 以上就是利用 UniApp 构建简单而完整的考勤打卡系统的全过程介绍[^2][^3]。