fix: 新增详情
This commit is contained in:
parent
c8b504ce03
commit
09ee8475e3
81
App.vue
81
App.vue
|
|
@ -7,9 +7,7 @@
|
||||||
plus.navigator.closeSplashscreen();
|
plus.navigator.closeSplashscreen();
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
onLaunch: function() {
|
onLaunch: async function() {
|
||||||
|
|
||||||
console.log('App Launch')
|
|
||||||
uni.getSystemInfo({
|
uni.getSystemInfo({
|
||||||
success: function(e) {
|
success: function(e) {
|
||||||
// #ifndef MP
|
// #ifndef MP
|
||||||
|
|
@ -33,13 +31,88 @@
|
||||||
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
|
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
|
// 是否更新APP
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
await this.getIsUpdata();
|
||||||
|
// #endif
|
||||||
},
|
},
|
||||||
onShow: function() {
|
onShow: function() {
|
||||||
console.log('App 开启')
|
console.log('App 开启')
|
||||||
},
|
},
|
||||||
onHide: function() {
|
onHide: function() {
|
||||||
console.log('App 关闭')
|
console.log('App 关闭')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getIsUpdata() {
|
||||||
|
// 获取本地应用资源版本号
|
||||||
|
plus.runtime.getProperty(plus.runtime.appid, (info) => {
|
||||||
|
this.version = info.version; // 版本号 1.0.0
|
||||||
|
this.versionCode = info.versionCode ; // 版本号名称 100
|
||||||
|
let params = {
|
||||||
|
version: info.version
|
||||||
|
};
|
||||||
|
this.$store.dispatch('api/getVersion', params).then(res => {
|
||||||
|
if (this.compareVersions(res.data.version, params.version) == 1) {
|
||||||
|
uni.showModal({
|
||||||
|
title: "版本更新",
|
||||||
|
content: '有新的版本发布，是否立即进行新版本下载？',
|
||||||
|
confirmText:'立即更新',
|
||||||
|
cancelText:'稍后进行',
|
||||||
|
success: function (res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
//#ifdef APP-PLUS
|
||||||
|
// encodeURI要大写
|
||||||
|
plus.runtime.openURL(encodeURI(`http://ydy.baimajingxuan.com`));
|
||||||
|
//#endif
|
||||||
|
} else if (res.cancel) {
|
||||||
|
console.log('稍后更新');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下面执行需要更新的安卓端热更新代码
|
||||||
|
// var data = {
|
||||||
|
// // 版本更新内容 支持<br>自动换行
|
||||||
|
// describe: "1.修复已知问题2.优化用户体验3.新增聊天室4.修复部分bug4.修复部分bug14.",
|
||||||
|
// edition_url: 'https://img.agrimedia.cn/bmsc/apps/1.1.8s.wgt', //apk、wgt包下载地址或者应用市场地址 安卓应用市场 market://details?id=xxxx 苹果store itms-apps://itunes.apple.com/cn/app/xxxxxx
|
||||||
|
// edition_force: 0, //是否强制更新 0代表否 1代表是, 弹窗关闭
|
||||||
|
// package_type: 1, //0是整包升级（apk或者appstore或者安卓应用市场） 1是wgt升级
|
||||||
|
// edition_number: 100, //版本号 最重要的manifest里的版本号 （检查更新主要以服务器返回的edition_number版本号是否大于当前app的版本号来实现是否更新）
|
||||||
|
// edition_name: '1.0.0', // 版本名称 manifest里的版本名称
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 这里也可以让前端判断本地和接口返回的版本号是否一致
|
||||||
|
// if (Number(this.versionCode) == 117) {
|
||||||
|
// //跳转更新页面 （注意！！！如果pages.json第一页的代码里有一打开就跳转其他页面的操作，下面这行代码最好写在setTimeout里面设置延时3到5秒再执行）
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: `/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=${JSON.stringify(data)}`
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
compareVersions(v1, v2) {
|
||||||
|
const v1Parts = v1.split('.').map(Number);
|
||||||
|
const v2Parts = v2.split('.').map(Number);
|
||||||
|
|
||||||
|
for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
|
||||||
|
const v1Part = v1Parts[i] || 0;
|
||||||
|
const v2Part = v2Parts[i] || 0;
|
||||||
|
|
||||||
|
if (v1Part > v2Part) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (v1Part < v2Part) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,15 @@ export const getDayInfo = (data) => {
|
||||||
return post('watch/device/getDayInfo', data)
|
return post('watch/device/getDayInfo', data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const getDeviceListDays = (data) => {
|
||||||
|
return post('watch/device/getDeviceListDays', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取版本号
|
||||||
|
export const getVersion = (data) => {
|
||||||
|
return post('watch/version/index', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
code,
|
code,
|
||||||
|
|
@ -37,5 +46,7 @@ export default {
|
||||||
sendSms,
|
sendSms,
|
||||||
register,
|
register,
|
||||||
getBindUserDeviceId,
|
getBindUserDeviceId,
|
||||||
getDayInfo
|
getDayInfo,
|
||||||
|
getDeviceListDays,
|
||||||
|
getVersion
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name" : "family-app",
|
"name" : "中鼎云医",
|
||||||
"appid" : "__UNI__24DA8DD",
|
"appid" : "__UNI__24DA8DD",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.0.0",
|
"versionName" : "1.0.0",
|
||||||
|
|
@ -83,12 +83,12 @@
|
||||||
"target" : "http://test.sc2.agrimedia.cn",
|
"target" : "http://test.sc2.agrimedia.cn",
|
||||||
"changeOrigin" : true,
|
"changeOrigin" : true,
|
||||||
"secure" : false
|
"secure" : false
|
||||||
// "pathRewrite": { //重写url
|
|
||||||
// "^/watch": ""
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// "pathRewrite": { //重写url
|
||||||
|
// "^/watch": ""
|
||||||
|
// }
|
||||||
"title" : "智能终端",
|
"title" : "智能终端",
|
||||||
"optimization" : {
|
"optimization" : {
|
||||||
"treeShaking" : {
|
"treeShaking" : {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,10 @@
|
||||||
"path": "pages/login/login",
|
"path": "pages/login/login",
|
||||||
"style": {}
|
"style": {}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/detail",
|
||||||
|
"style": {}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/login/forget",
|
"path": "pages/login/forget",
|
||||||
"style": {}
|
"style": {}
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,8 @@
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="content-header">
|
<view class="content-header">
|
||||||
<view class="title">设备</view>
|
<view class="title">设备</view>
|
||||||
<!-- <view class="add" @click="toAdd()">
|
|
||||||
<image src="/static/image/add-icon.png" mode=""></image>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item" v-for="(item, index) in deviceList">
|
<view class="content-item" v-for="(item, index) in deviceList" v-if="item.user">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<text>绑定人: {{item.user.mobile}}</text>
|
<text>绑定人: {{item.user.mobile}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -37,15 +34,13 @@
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// toAdd() {
|
|
||||||
// uni.navigateTo({
|
|
||||||
// url: '/pages/device/adddevice'
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
clickLeft() {
|
clickLeft() {
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
delta: 1
|
delta: 1
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
getNameByKey(key) {
|
||||||
|
return this.keyNameMap[key] || "Key not found";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,186 @@
|
||||||
|
<template>
|
||||||
|
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
||||||
|
<tm-nav-bar left-icon="arrow-left" :title="desc? getNameByKey(desc) : getNameByKey(type)" @clickLeft="back" />
|
||||||
|
<view class="content">
|
||||||
|
<view class="over" style="margin-top: 30rpx" @click="flag = !flag">
|
||||||
|
<text>日期筛选</text>
|
||||||
|
<uni-icons type="down" size="24"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="time" v-show="flag">
|
||||||
|
<punch-calendar @switchMonth="switchMonth" @chooseDay="chooseDay" :errorList="errorList" :successList="successList" ref="calendar"></punch-calendar>
|
||||||
|
</view>
|
||||||
|
<view class="list" v-if="dataList.length">
|
||||||
|
<view class="row" v-for="(item, index) in dataList" :key="index">
|
||||||
|
<view class="data">
|
||||||
|
<image src="https://img.agrimedia.cn/apptest/%E6%89%8B%E8%A1%A8-%E7%BA%BF%E6%80%A73-0.png" mode="widthFix"></image>
|
||||||
|
<view v-if="type == 'step'">
|
||||||
|
疲劳：{{item.data_msg.wear}}
|
||||||
|
运动量：{{item.data_msg.amountOfExercise}}
|
||||||
|
</view>
|
||||||
|
<view v-if="type == 'bloodPressure'">
|
||||||
|
{{item.data_msg.bloodPressureHigh}}/{{item.data_msg.bloodPressureLow}}
|
||||||
|
</view>
|
||||||
|
<view v-if="type == 'bloodGlucose'">
|
||||||
|
{{item.data_msg}}
|
||||||
|
</view>
|
||||||
|
<view v-if="type == 'bloodLiquid' && desc == 'uricAcidVal'">
|
||||||
|
{{item.data_msg.uricAcidVal}}
|
||||||
|
</view>
|
||||||
|
<view v-if="type == 'bloodLiquid' && desc !== 'uricAcidVal'" style="font-size: 24rpx;">
|
||||||
|
<view>胆固醇：{{item.data_msg.cholesterol/100}} 三酰甘油：{{item.data_msg.triacylglycerol/100}}</view>
|
||||||
|
<view>高密度脂蛋白：{{item.data_msg.highDensity/100}}低密度脂蛋白：{{item.data_msg.lowDensity}}</view>
|
||||||
|
</view>
|
||||||
|
<view v-else>
|
||||||
|
{{getArrMaxValue(item.data_msg)}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="time">
|
||||||
|
{{item.date_str}} {{item.hour_minute}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</z-paging>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getArrMaxValue } from '@/utils/utils.js'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
type: '',
|
||||||
|
desc: '',
|
||||||
|
dataList: [],
|
||||||
|
keyNameMap: {
|
||||||
|
bloodGlucose: "血糖",
|
||||||
|
bloodOxygen: "血氧",
|
||||||
|
bloodPressure: '血压',
|
||||||
|
heartReat: '心率',
|
||||||
|
bloodLiquid: "血液",
|
||||||
|
uricAcidVal: '尿酸',
|
||||||
|
meiTuo: '梅拖',
|
||||||
|
pulseReat: '脉率',
|
||||||
|
updataDate: '更新时间',
|
||||||
|
step: '步数'
|
||||||
|
},
|
||||||
|
time: '',
|
||||||
|
flag: false,
|
||||||
|
successList: ['1676995200000'],
|
||||||
|
errorList: ['1676908800000'],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
// 初始化
|
||||||
|
this.$refs.calendar.initCalendar()
|
||||||
|
|
||||||
|
// 模拟异步赋值
|
||||||
|
let timer = setTimeout(()=>{
|
||||||
|
this.addTimer()
|
||||||
|
},2000)
|
||||||
|
},
|
||||||
|
|
||||||
|
// onLoad() {
|
||||||
|
// // 初始化
|
||||||
|
// this.$refs.calendar.initCalendar()
|
||||||
|
|
||||||
|
// // 模拟异步赋值
|
||||||
|
// let timer = setTimeout(()=>{
|
||||||
|
// this.addTimer()
|
||||||
|
// },2000)
|
||||||
|
// },
|
||||||
|
|
||||||
|
onShow(e) {
|
||||||
|
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||||||
|
let curRoute = routes[routes.length - 1].route //获取当前页面路由
|
||||||
|
let curParam = routes[routes.length - 1].options; //获取路由参数
|
||||||
|
// 拼接参数
|
||||||
|
let param = ''
|
||||||
|
for (let key in curParam) {
|
||||||
|
param += '&' + key + '=' + curParam[key]
|
||||||
|
}
|
||||||
|
this.type = curParam.type;
|
||||||
|
this.desc = curParam.desc;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getArrMaxValue,
|
||||||
|
queryList(pageNo, pageSize) {
|
||||||
|
this.$store.dispatch('api/getDeviceListDays', {
|
||||||
|
type: this.type,
|
||||||
|
device_real_time: this.time
|
||||||
|
}).then(res => {
|
||||||
|
this.$refs.paging.completeByTotal(res.data, res.total);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getNameByKey(key) {
|
||||||
|
return this.keyNameMap[key] || "Key not found";
|
||||||
|
},
|
||||||
|
|
||||||
|
addTimer() {
|
||||||
|
this.successList = [...this.successList, '1681920000000']
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击某一天
|
||||||
|
chooseDay(val) {
|
||||||
|
this.time = val.year + '-' + val.month + '-' + val.day;
|
||||||
|
this.$refs.paging.reload();
|
||||||
|
},
|
||||||
|
|
||||||
|
back() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
.over {
|
||||||
|
margin: 0rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin: 30rpx 30rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
.row {
|
||||||
|
height: 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.data {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 36rpx;
|
||||||
|
image {
|
||||||
|
width: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -15,34 +15,37 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item row">
|
<view class="content-item row" @click="toPage('/pages/index/detail?type=step')">
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<view class="title">卡路里</view>
|
<view class="title">卡路里</view>
|
||||||
<view class="row-date">
|
<view class="row-date">
|
||||||
{{dataLists.step.calorie}}
|
{{dataLists.step? dataLists.step.calorie/10 : '--'}}
|
||||||
|
<text>千卡</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<view class="title">步数</view>
|
<view class="title">步数</view>
|
||||||
<view class="row-date">
|
<view class="row-date">
|
||||||
{{dataLists.step.step}}
|
{{dataLists.step? dataLists.step.step : '--'}}
|
||||||
|
<text>步</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<view class="title">距离</view>
|
<view class="title">距离</view>
|
||||||
<view class="row-date">
|
<view class="row-date">
|
||||||
{{dataLists.step.distance}}
|
{{dataLists.step? dataLists.step.distance/100 : '--'}}
|
||||||
|
<text>公里</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="row-time">
|
<view class="row-time">
|
||||||
{{dataLists.updataDate}}
|
{{formatDateTime(dataLists.updataDate)}}
|
||||||
</view>
|
</view>
|
||||||
<view class="bg">
|
<view class="bg">
|
||||||
<image src="../../static/icon/血糖.png" mode="widthFix"></image>
|
<!-- <image src="../../static/icon/血糖.png" mode="widthFix"></image> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item">
|
<view class="content-item" @click="toPage('/pages/index/detail?type=bloodGlucose')">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
{{getNameByKey('bloodGlucose')}}
|
{{getNameByKey('bloodGlucose')}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -57,7 +60,7 @@
|
||||||
<image src="../../static/icon/血糖.png" mode="widthFix"></image>
|
<image src="../../static/icon/血糖.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item">
|
<view class="content-item" @click="toPage('/pages/index/detail?type=bloodOxygen')">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
{{getNameByKey('bloodOxygen')}}
|
{{getNameByKey('bloodOxygen')}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -72,7 +75,7 @@
|
||||||
<image src="../../static/icon/血氧.png" mode="widthFix"></image>
|
<image src="../../static/icon/血氧.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item">
|
<view class="content-item" @click="toPage('/pages/index/detail?type=bloodPressure')">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
{{getNameByKey('bloodPressure')}}
|
{{getNameByKey('bloodPressure')}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -87,7 +90,7 @@
|
||||||
<image src="../../static/icon/血压.png" mode="widthFix"></image>
|
<image src="../../static/icon/血压.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item">
|
<view class="content-item" @click="toPage('/pages/index/detail?type=heartReat')">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
{{getNameByKey('heartReat')}}
|
{{getNameByKey('heartReat')}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -102,7 +105,7 @@
|
||||||
<image src="../../static/icon/脉率.png" mode="widthFix"></image>
|
<image src="../../static/icon/脉率.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item">
|
<view class="content-item" @click="toPage('/pages/index/detail?type=meiTuo')">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
{{getNameByKey('meiTuo')}}
|
{{getNameByKey('meiTuo')}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -117,7 +120,7 @@
|
||||||
<image src="../../static/icon/心率.png" mode="widthFix"></image>
|
<image src="../../static/icon/心率.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item">
|
<view class="content-item" @click="toPage('/pages/index/detail?type=bloodLiquid&desc=uricAcidVal')">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
尿酸
|
尿酸
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -133,7 +136,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="content-item" style="height: 360rpx">
|
<view class="content-item" style="height: 430rpx" @click="toPage('/pages/index/detail?type=bloodLiquid')">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
{{getNameByKey('bloodLiquid')}}
|
{{getNameByKey('bloodLiquid')}}
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -216,8 +219,18 @@
|
||||||
this.$refs.paging.complete();
|
this.$refs.paging.complete();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
toPage(url) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url
|
||||||
|
})
|
||||||
|
},
|
||||||
getNameByKey(key) {
|
getNameByKey(key) {
|
||||||
return this.keyNameMap[key] || "Key not found";
|
return this.keyNameMap[key] || "Key not found";
|
||||||
|
},
|
||||||
|
formatDateTime(dateTimeStr) {
|
||||||
|
if (dateTimeStr) {
|
||||||
|
return dateTimeStr.replace(/-/g, ' ').replace(' ', ' ', 2).replace(' ', ':');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -291,6 +304,7 @@
|
||||||
.title {
|
.title {
|
||||||
font-size: 38rpx;
|
font-size: 38rpx;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
margin-bottom: 14rpx;
|
||||||
}
|
}
|
||||||
.row-time {
|
.row-time {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -320,6 +334,12 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
text {
|
||||||
|
opacity: .5;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -4,10 +4,10 @@
|
||||||
<view class="head"></view>
|
<view class="head"></view>
|
||||||
<!-- 个人信息模块 -->
|
<!-- 个人信息模块 -->
|
||||||
<view class="user-info-box">
|
<view class="user-info-box">
|
||||||
<view class="avatar-box" @click="logout()">
|
<view class="avatar-box">
|
||||||
<image class="avatar" src="../../static/a-ziyuan85.png"></image>
|
<image class="avatar" src="../../static/a-ziyuan85.png"></image>
|
||||||
<view class="avatar-text">
|
<view class="avatar-text">
|
||||||
<view class="name">登录</view>
|
<view class="name">{{getApiToken? '用户':'去登录'}}</view>
|
||||||
<view class="desc"></view>
|
<view class="desc"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -98,6 +98,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import store from "@/store/index.js";
|
import store from "@/store/index.js";
|
||||||
|
import { mapGetters } from "vuex";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -106,6 +107,11 @@
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters({
|
||||||
|
getApiToken: "api/getApiToken"
|
||||||
|
}),
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
logout() {
|
logout() {
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,8 @@ import {
|
||||||
register,
|
register,
|
||||||
getBindUserDeviceId,
|
getBindUserDeviceId,
|
||||||
getDayInfo,
|
getDayInfo,
|
||||||
|
getDeviceListDays,
|
||||||
|
getVersion
|
||||||
} from '@/common/api.js';
|
} from '@/common/api.js';
|
||||||
|
|
||||||
let state = {
|
let state = {
|
||||||
|
|
@ -58,6 +60,14 @@ let state = {
|
||||||
async getDayInfo({commit}, data) {
|
async getDayInfo({commit}, data) {
|
||||||
const res = await getDayInfo(data)
|
const res = await getDayInfo(data)
|
||||||
return res
|
return res
|
||||||
|
},
|
||||||
|
async getDeviceListDays({commit}, data) {
|
||||||
|
const res = await getDeviceListDays(data)
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
async getVersion({commit}, data) {
|
||||||
|
const res = await getVersion(data)
|
||||||
|
return res
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
## 1.0.6（2023-04-20）
|
||||||
|
更新ios端 date问题
|
||||||
|
## 1.0.5（2023-04-20）
|
||||||
|
添加切换方法，更新使用demo
|
||||||
|
## 1.0.4（2023-03-30）
|
||||||
|
修改初始化以及分阶段赋值
|
||||||
|
## 1.0.3（2023-03-12）
|
||||||
|
完善文档
|
||||||
|
## 1.0.2（2023-03-11）
|
||||||
|
修复异步赋值不展示问题
|
||||||
|
## 1.0.1（2023-02-27）
|
||||||
|
修改文档，添加github地址
|
||||||
|
## 1.0.0（2023-02-24）
|
||||||
|
第一版本，后续会持续优化
|
||||||
|
|
@ -0,0 +1,464 @@
|
||||||
|
<template>
|
||||||
|
<view class="punch-calendar-wrapper">
|
||||||
|
<view class="calendar">
|
||||||
|
<view class="top flex-bt padding-32">
|
||||||
|
<view class="prev flex-center" @click="switchMonth('prev')">
|
||||||
|
<image class="icon" src="../../static/images/calendar-prev.png"></image>
|
||||||
|
</view>
|
||||||
|
<text>{{calendarConfig.yearAndMonth}}</text>
|
||||||
|
<view class="next flex-center" @click="switchMonth('next')">
|
||||||
|
<image class="icon" :src="nextIconStyle"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="center">
|
||||||
|
<view class="week flex-bt">
|
||||||
|
<view class="items" v-for="item in calendarConfig.week" :key="item">{{item}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="day">
|
||||||
|
<template v-for="(item,index) in calendarConfig.day">
|
||||||
|
<view class="flex-start" :key="index" v-if="item.open">
|
||||||
|
<view class="items flex-center" :class="[child.tag]" v-for="(child,childIndex) in item.list"
|
||||||
|
:key="childIndex">
|
||||||
|
<text :class="[child.className,child.active]" @click="chooseDay(item,child)">
|
||||||
|
{{child.value}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bottom flex-center" @click="fold">
|
||||||
|
<image src="../../static/images/cakebdar-open.png" :class="[!calendarConfig.fold ? 'active' : '']"
|
||||||
|
class="icon"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'punch-calendar',
|
||||||
|
props: {
|
||||||
|
// 成功打卡
|
||||||
|
successList: {
|
||||||
|
type: Array,
|
||||||
|
default: ()=> []
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打卡异常点
|
||||||
|
errorList: {
|
||||||
|
type: Array,
|
||||||
|
default: ()=>[]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
successArr: [],
|
||||||
|
errorArr: [],
|
||||||
|
calendarConfig: {
|
||||||
|
week: ['日', '一', '二', '三', '四', '五', '六'],
|
||||||
|
nowYear: '', //当前日历 年
|
||||||
|
nowMonth: '', //当前日历 月
|
||||||
|
nowDay: '', //当前日历 日
|
||||||
|
day: [], //日历列表
|
||||||
|
fold: false, // 展开/折叠状态
|
||||||
|
yearAndMonth: '', // 当前日历年月
|
||||||
|
needClock: true, //当天是否需要打卡
|
||||||
|
},
|
||||||
|
monthStatisticList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
nextIconStyle: function() {
|
||||||
|
const {
|
||||||
|
year,
|
||||||
|
month
|
||||||
|
} = this.getNowDate()
|
||||||
|
const {
|
||||||
|
nowYear,
|
||||||
|
nowMonth
|
||||||
|
} = this.calendarConfig
|
||||||
|
if (nowYear == year && nowMonth == month) {
|
||||||
|
return '../../static/images/calendar-next.png';
|
||||||
|
} else {
|
||||||
|
return '../../static/images/calendar-next-active.png';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
successList: {
|
||||||
|
handler(val) {
|
||||||
|
this.successArr = JSON.parse(JSON.stringify(val))
|
||||||
|
this.initCalendar(false)
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
errorList: {
|
||||||
|
handler(val) {
|
||||||
|
this.errorArr = JSON.parse(JSON.stringify(val))
|
||||||
|
this.initCalendar(false)
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//切换日历
|
||||||
|
switchMonth(type = 'next') {
|
||||||
|
let {nowYear, nowMonth} = this.calendarConfig
|
||||||
|
let {year, month, day} = this.getNowDate()
|
||||||
|
if(type == 'next' && nowYear == year && nowMonth == month)return false;
|
||||||
|
if(type == 'prev'){
|
||||||
|
if (nowMonth <= 1) {
|
||||||
|
nowMonth = 12
|
||||||
|
nowYear -= 1
|
||||||
|
} else {
|
||||||
|
nowMonth--;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if (nowMonth >= 12) {
|
||||||
|
nowMonth = 1
|
||||||
|
nowYear += 1
|
||||||
|
} else {
|
||||||
|
nowMonth++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$emit('switchMonth', type, nowYear, nowMonth)
|
||||||
|
this.calendarConfig.nowYear = nowYear
|
||||||
|
this.calendarConfig.nowMonth = nowMonth
|
||||||
|
this.calendarConfig.nowDay = (nowYear == year && nowMonth == month) ? day : ''
|
||||||
|
this.calendarConfig.day = this.calendar(nowYear, nowMonth, this.calendarConfig.nowDay, this.calendarConfig.fold, this.successArr, this.errorArr)
|
||||||
|
this.calendarConfig.yearAndMonth = this.monDetail(nowYear, nowMonth)
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
chooseDay(item, child) {
|
||||||
|
if(child.className == 'last' || child.className == 'nextMonth')return false;
|
||||||
|
this.$emit('chooseDay',child)
|
||||||
|
this.calendarConfig.day.map(parent=>{
|
||||||
|
parent.list.map(child=>{
|
||||||
|
child.className == 'active' && (child.className = '')
|
||||||
|
return child
|
||||||
|
})
|
||||||
|
return parent
|
||||||
|
})
|
||||||
|
child.className = 'active'
|
||||||
|
},
|
||||||
|
|
||||||
|
// 展开/折叠
|
||||||
|
fold(){
|
||||||
|
const {now, year, month, day} = this.getNowDate()
|
||||||
|
const {nowYear, nowMonth} = this.calendarConfig
|
||||||
|
this.calendarConfig.day.map((parent,index)=>{
|
||||||
|
if(!this.calendarConfig.fold){
|
||||||
|
parent.open = true
|
||||||
|
}else{
|
||||||
|
if(nowYear == year && nowMonth == month){
|
||||||
|
parent.open = parent.list.reduce((result, child)=>{
|
||||||
|
if(child.value == day && child.className !== 'last' && child.className !== 'nextMonth'){
|
||||||
|
result = true
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}, false)
|
||||||
|
}else{
|
||||||
|
parent.open = index == 0 ? true : false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return parent
|
||||||
|
})
|
||||||
|
this.calendarConfig.fold = !this.calendarConfig.fold
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
initCalendar(nowDate = true) {
|
||||||
|
if(nowDate) {
|
||||||
|
const { year, month, day } = this.getNowDate()
|
||||||
|
this.calendarConfig.nowYear = year
|
||||||
|
this.calendarConfig.nowMonth = month
|
||||||
|
this.calendarConfig.nowDay = day
|
||||||
|
}
|
||||||
|
const {nowYear, nowMonth, nowDay} = this.calendarConfig
|
||||||
|
|
||||||
|
// 渲染日历
|
||||||
|
this.calendarConfig.day = this.calendar(nowYear, nowMonth, nowDay, this.calendarConfig.fold, this.successArr, this.errorArr)
|
||||||
|
// 日历title
|
||||||
|
this.calendarConfig.yearAndMonth = this.monDetail(nowYear, nowMonth)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取当前年月日
|
||||||
|
getNowDate(){
|
||||||
|
let now = new Date()
|
||||||
|
let year = now.getFullYear()
|
||||||
|
let month = now.getMonth() + 1
|
||||||
|
let day = now.getDate()
|
||||||
|
return {now, year, month, day}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 显示当前年月
|
||||||
|
monDetail(ynow, mnow) {
|
||||||
|
return `${ynow}年${mnow}月`
|
||||||
|
},
|
||||||
|
|
||||||
|
//判断是否为闰年
|
||||||
|
is_leap(year) {
|
||||||
|
let res = year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 渲染日历
|
||||||
|
* ynow 年
|
||||||
|
* mnow 月
|
||||||
|
* dnow 日
|
||||||
|
* fold 折叠状态
|
||||||
|
* successArr 需要打卡
|
||||||
|
* errorArr 异常标记
|
||||||
|
**/
|
||||||
|
calendar(ynow, mnow, dnow, fold, successArr = [], errorArr = []) {
|
||||||
|
let arr = []
|
||||||
|
var nlstr = new Date(ynow, mnow - 1, 1)
|
||||||
|
var firstday = nlstr.getDay()
|
||||||
|
const {now, year, month, day} = this.getNowDate()
|
||||||
|
//每个月的天数
|
||||||
|
var m_days = new Array(31, 28 + this.is_leap(ynow), 31, 30, 31, 31, 30, 31, 30, 31, 30, 31)
|
||||||
|
//当前月天数+第一天是星期几的数值 获得 表格行数
|
||||||
|
var tr_str = Math.ceil((m_days[mnow-1] + firstday) / 7)
|
||||||
|
var i, k, idx, date_str;
|
||||||
|
for (i = 0; i < tr_str; i++) {
|
||||||
|
//表格每行的单元格
|
||||||
|
let row = []
|
||||||
|
for (k = 0; k < 7; k++) {
|
||||||
|
//单元格自然序列号
|
||||||
|
idx = i * 7 + k;
|
||||||
|
//计算日期
|
||||||
|
date_str = idx - firstday + 1;
|
||||||
|
|
||||||
|
if(date_str <= 0){
|
||||||
|
// 处理上月空缺
|
||||||
|
row.push({ value: '', className: '' })
|
||||||
|
|
||||||
|
}else if(year == ynow && month == mnow){
|
||||||
|
if(date_str > m_days[mnow-1]) {
|
||||||
|
row.push({ value: '', className: 'nextMonth' })
|
||||||
|
}else if(date_str > dnow ){
|
||||||
|
row.push({ value: date_str, className: 'last', year: ynow, month: mnow, day: date_str})
|
||||||
|
}else{
|
||||||
|
row.push({ value: idx - firstday + 1, className: '', year: ynow, month: mnow, day: date_str})
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if(date_str > m_days[mnow-1]) {
|
||||||
|
row.push({ value: '', className: 'nextMonth' })
|
||||||
|
}else if(date_str > dnow ){
|
||||||
|
row.push({ value: date_str, className: '', year: ynow, month: mnow, day: date_str})
|
||||||
|
}else{
|
||||||
|
row.push({ value: date_str, className: '', year: ynow, month: mnow, day: date_str})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理下月候补日期
|
||||||
|
let list = row.reduce((arr,item,index)=>{
|
||||||
|
if(item.className == 'nextMonth'){
|
||||||
|
if(arr[index-1].value == m_days[mnow-1]){
|
||||||
|
item.value = 1
|
||||||
|
}else{
|
||||||
|
item.value = arr[index-1].value + 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 判断是否为当日
|
||||||
|
item.className !== 'nextMonth' && item.year == year && item.month == month && item.day == day && (item.active = 'thatDay')
|
||||||
|
item.className !== 'nextMonth' && item.year == year && item.month == month && item.day == day && (item.className = 'active')
|
||||||
|
|
||||||
|
// 处理需要打卡标记
|
||||||
|
if(item.year && item.month && item.day){
|
||||||
|
let nowDate = `${item.year}/${item.month}/${item.day}`
|
||||||
|
let timer = new Date(nowDate).getTime().toString()
|
||||||
|
successArr.includes(timer) && (item.tag = 'border')
|
||||||
|
errorArr.includes(timer) && (item.tag = 'error')
|
||||||
|
}
|
||||||
|
arr.push(item)
|
||||||
|
return arr
|
||||||
|
},[])
|
||||||
|
|
||||||
|
arr.push({list, open: false})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理默认折叠状态
|
||||||
|
arr.forEach((parent,index)=>{
|
||||||
|
if(fold){
|
||||||
|
parent.open = true
|
||||||
|
}else{
|
||||||
|
parent.open = parent.list.reduce((result, child)=>{
|
||||||
|
if(ynow == year && mnow == month){
|
||||||
|
child.value == dnow && child.className !== 'nextMonth' && (result = true)
|
||||||
|
}else{
|
||||||
|
index == 0 && (result = true)
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}, false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return arr
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.punch-calendar-wrapper {
|
||||||
|
.flex-center{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.flex-end{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.flex-start{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.flex-bt{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.calendar {
|
||||||
|
width: 686rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 10rpx 25rpx rgba(0,0,0,0.1);
|
||||||
|
.center {
|
||||||
|
.week {
|
||||||
|
padding-top: 32rpx;
|
||||||
|
|
||||||
|
.items {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #8c8f94;
|
||||||
|
line-height: 32rpx;
|
||||||
|
width: 98rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.day {
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.items {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #8c8f94;
|
||||||
|
line-height: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 24rpx;
|
||||||
|
padding-bottom: 32rpx;
|
||||||
|
width: 98rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.border ::before {
|
||||||
|
content: '';
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background: #b6d1ff;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
bottom: 10rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.error::before {
|
||||||
|
content: '';
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background: #ff5040;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
bottom: 10rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.6s;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 48rpx;
|
||||||
|
color: #474a50;
|
||||||
|
|
||||||
|
&.last,
|
||||||
|
&.nextMonth {
|
||||||
|
color: #c0c3c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.thatDay {
|
||||||
|
background: #e6efff !important;
|
||||||
|
color: #474a50;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #0D67FF !important;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 78rpx;
|
||||||
|
border-top: 1px solid #e6efff;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
transition: all 0.6s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 112rpx;
|
||||||
|
border-bottom: 2px solid #e6efff;
|
||||||
|
text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFangSC-Medium, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a1a1a;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
.prev,
|
||||||
|
.next {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100%;
|
||||||
|
.icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
{
|
||||||
|
"id": "punch-calendar",
|
||||||
|
"displayName": "punch-calendar 打卡日历 可在日历标记圆点，配置简单，长期维护",
|
||||||
|
"version": "1.0.6",
|
||||||
|
"description": "打卡日历，可在日历标记圆点，配置简单，长期维护。",
|
||||||
|
"keywords": [
|
||||||
|
"punch-calendar"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/LonJinUp/punch-calendar",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.6.10"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "n",
|
||||||
|
"vue3": "n"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "n",
|
||||||
|
"app-nvue": "n"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "n",
|
||||||
|
"Android Browser": "n",
|
||||||
|
"微信浏览器(Android)": "n",
|
||||||
|
"QQ浏览器(Android)": "n"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "n",
|
||||||
|
"IE": "n",
|
||||||
|
"Edge": "n",
|
||||||
|
"Firefox": "n",
|
||||||
|
"Safari": "n"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y",
|
||||||
|
"钉钉": "y",
|
||||||
|
"快手": "y",
|
||||||
|
"飞书": "y",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
# punch-calendar
|
||||||
|
|
||||||
|
> [punch-calendar](https://github.com/LonJinUp/punch-calendar)为有打卡需求制作的日历，可标记小圆点。简单配置即可使用，代码体积小，无第三方引用。
|
||||||
|
> 任何问题可以评论联系我，第一时间处理，或者添加 🛰️:ljsw8686
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
demo:
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<punch-calendar @switchMonth="switchMonth" @chooseDay="chooseDay" :errorList="errorList" :successList="successList" ref="calendar"></punch-calendar>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
successList: ['1676995200000'],
|
||||||
|
errorList: ['1676908800000'],
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 初始化
|
||||||
|
this.$refs.calendar.initCalendar()
|
||||||
|
|
||||||
|
// 模拟异步赋值
|
||||||
|
let timer = setTimeout(()=>{
|
||||||
|
this.addTimer()
|
||||||
|
},2000)
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击某一天
|
||||||
|
chooseDay(val) {
|
||||||
|
console.log(val)
|
||||||
|
},
|
||||||
|
|
||||||
|
addTimer() {
|
||||||
|
this.successList = [...this.successList, '1681920000000']
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换事件
|
||||||
|
* @param type 切换类型 prev next
|
||||||
|
* @param nowYear 当前年
|
||||||
|
* @param nowMonth 当前月
|
||||||
|
* **/
|
||||||
|
switchMonth(type, nowYear, nowMonth){
|
||||||
|
//... doSomeThing
|
||||||
|
if(nowYear == '2023' && nowMonth == '3' && !this.successList.includes('1678204800000')){
|
||||||
|
uni.showLoading({})
|
||||||
|
let timer = setTimeout(()=>{
|
||||||
|
uni.hideLoading()
|
||||||
|
clearTimeout(timer)
|
||||||
|
this.successList = [...this.successList, '1678204800000']
|
||||||
|
},3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 配置说明：
|
||||||
|
|
||||||
|
参数说明：
|
||||||
|
|
||||||
|
| 参数 | 说明 | 默认值 | 类型 |
|
||||||
|
| ----------- | ---------------------------- | ------ | ----- |
|
||||||
|
| successList | 打卡成功标记，传入13位时间戳 | [] | Array |
|
||||||
|
| errorList | 打卡异常标记，传入13位时间戳 | [] | Array |
|
||||||
|
|
||||||
|
|
||||||
|
回调方法
|
||||||
|
|
||||||
|
| 方法名称 | 说明 | 返回值 |
|
||||||
|
| ---------- | -------------------- | ---------------------------- |
|
||||||
|
| @chooseDay | 点击某日时候执行函数 | 返回一个对象，包含年、月、日 |
|
||||||
|
| @switchMonth | 切换日期时候执行 | 返回type（切换类型，prev｜｜next）, 当前年nowYear,当前月nowMonth |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 271 B |
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
Loading…
Reference in New Issue