|
|
|
|
@ -2,8 +2,11 @@ import Taro from "@tarojs/taro";
|
|
|
|
|
import classnames from "classnames";
|
|
|
|
|
import { Component, PropsWithChildren, useEffect, useState } from "react";
|
|
|
|
|
import { Progress } from "@antmjs/vantui";
|
|
|
|
|
|
|
|
|
|
import { Block, View, Text, Image, Input, Button } from "@tarojs/components";
|
|
|
|
|
import { showModal } from "../../utils/traoAPI.js";
|
|
|
|
|
import { Tab, Tabs, Dialog, Popup } from "@antmjs/vantui";
|
|
|
|
|
import {
|
|
|
|
|
Block, View, Text, Image, Input, Button, Textarea,
|
|
|
|
|
} from "@tarojs/components";
|
|
|
|
|
import { date, getdates, previewImage } from "../../utils/util";
|
|
|
|
|
|
|
|
|
|
/** 自定义组件 **/
|
|
|
|
|
@ -22,13 +25,38 @@ export default class Index extends Component<any, any> {
|
|
|
|
|
statistics: {},
|
|
|
|
|
recordList: [],
|
|
|
|
|
recordData: {},
|
|
|
|
|
year: new Date().getFullYear(),
|
|
|
|
|
show: false,
|
|
|
|
|
clockStatistics: [],
|
|
|
|
|
punchInInfo: {
|
|
|
|
|
clockImageList: [],
|
|
|
|
|
clockContent: "",
|
|
|
|
|
},
|
|
|
|
|
monthTime: [
|
|
|
|
|
{ month: 1, time: 0 },
|
|
|
|
|
{ month: 2, time: 0 },
|
|
|
|
|
{ month: 3, time: 0 },
|
|
|
|
|
{ month: 4, time: 0 },
|
|
|
|
|
{ month: 5, time: 0 },
|
|
|
|
|
{ month: 6, time: 0 },
|
|
|
|
|
{ month: 7, time: 0 },
|
|
|
|
|
{ month: 8, time: 0 },
|
|
|
|
|
{ month: 9, time: 0 },
|
|
|
|
|
{ month: 10, time: 0 },
|
|
|
|
|
{ month: 11, time: 0 },
|
|
|
|
|
{ month: 12, time: 0 },
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {}
|
|
|
|
|
componentDidMount() { }
|
|
|
|
|
|
|
|
|
|
componentWillUnmount() {}
|
|
|
|
|
componentWillUnmount() { }
|
|
|
|
|
|
|
|
|
|
// 打开/关闭弹窗
|
|
|
|
|
setShow(show: boolean) {
|
|
|
|
|
this.setState({ show });
|
|
|
|
|
}
|
|
|
|
|
// 查询用户护理记录的当月统计信息
|
|
|
|
|
async getStatistics(id) {
|
|
|
|
|
let data = {};
|
|
|
|
|
@ -67,7 +95,142 @@ export default class Index extends Component<any, any> {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 文本框输入文字
|
|
|
|
|
handleTextareaInput = (e) => {
|
|
|
|
|
const punchInInfo = this.state.punchInInfo;
|
|
|
|
|
this.setState({ punchInInfo: { ...punchInInfo, clockContent: e.detail.value } });
|
|
|
|
|
};
|
|
|
|
|
async submit() {
|
|
|
|
|
let punchInInfo = this.state.punchInInfo || {};
|
|
|
|
|
if (!punchInInfo.clockImageList.length) {
|
|
|
|
|
Taro.showToast({
|
|
|
|
|
title: "请上传图片",
|
|
|
|
|
icon: "none",
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (!punchInInfo.clockContent) {
|
|
|
|
|
Taro.showToast({
|
|
|
|
|
title: "请输入打卡心得",
|
|
|
|
|
icon: "none",
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
InstrumentInfo.apiClock.postInsertClockLog(punchInInfo).then((res) => {
|
|
|
|
|
showModal({
|
|
|
|
|
t2: "您已完成今日打卡",
|
|
|
|
|
btn1show: false,
|
|
|
|
|
}).then(() => {
|
|
|
|
|
let data = new Date
|
|
|
|
|
Taro.setStorageSync('DayTime', data.toISOString())
|
|
|
|
|
this.setState({
|
|
|
|
|
clockShow: true
|
|
|
|
|
})
|
|
|
|
|
this.getClockStatistics();
|
|
|
|
|
this.setShow(false);
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
/**分页获取用户的打卡记录 page size*/
|
|
|
|
|
async getClockStatistics(year = this.state.year) {
|
|
|
|
|
let res = await InstrumentInfo.apiClock.getClockStatistics({ year });
|
|
|
|
|
console.log(res,'查看返回',year);
|
|
|
|
|
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
|
|
|
|
|
res.data.data.reverse();
|
|
|
|
|
if (res.data.data.length > 0) {
|
|
|
|
|
res.data.data.map((item, index) => {
|
|
|
|
|
item.isMore = false;
|
|
|
|
|
item.detail = [];
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
item.isMore = true;
|
|
|
|
|
this.getList(item.id, item.year, item.month);
|
|
|
|
|
}
|
|
|
|
|
this.state.monthTime.map((monthItem) => {
|
|
|
|
|
if (monthItem.month == item.month) {
|
|
|
|
|
monthItem.time = item.clockNum;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
this.setState({ monthTime: this.state.monthTime });
|
|
|
|
|
} else {
|
|
|
|
|
let monthTime = [
|
|
|
|
|
{ month: 1, time: 0 },
|
|
|
|
|
{ month: 2, time: 0 },
|
|
|
|
|
{ month: 3, time: 0 },
|
|
|
|
|
{ month: 4, time: 0 },
|
|
|
|
|
{ month: 5, time: 0 },
|
|
|
|
|
{ month: 6, time: 0 },
|
|
|
|
|
{ month: 7, time: 0 },
|
|
|
|
|
{ month: 8, time: 0 },
|
|
|
|
|
{ month: 9, time: 0 },
|
|
|
|
|
{ month: 10, time: 0 },
|
|
|
|
|
{ month: 11, time: 0 },
|
|
|
|
|
{ month: 12, time: 0 },
|
|
|
|
|
];
|
|
|
|
|
this.setState({ monthTime });
|
|
|
|
|
}
|
|
|
|
|
this.setState({ clockStatistics: res.data.data });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 获取当月打卡记录
|
|
|
|
|
async getList(id, year, month) {
|
|
|
|
|
let data = {
|
|
|
|
|
year,
|
|
|
|
|
month,
|
|
|
|
|
};
|
|
|
|
|
let res = await InstrumentInfo.apiClock.getList(data);
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
console.log(this.state.clockStatistics, 88888);
|
|
|
|
|
|
|
|
|
|
this.state.clockStatistics.map((item) => {
|
|
|
|
|
if (item.id === id) {
|
|
|
|
|
item.detail = res.data.data;
|
|
|
|
|
item.detail.map((obj) => {
|
|
|
|
|
obj.updateTime = getdates(obj.updateTime).replace(/-/g, ".");
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.setState({ clockStatistics: this.state.clockStatistics });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 上传图片
|
|
|
|
|
handleChooseImage() {
|
|
|
|
|
Taro.chooseMedia({
|
|
|
|
|
count: 1,
|
|
|
|
|
mediaType: ["image"],
|
|
|
|
|
sourceType: ["album", "camera"],
|
|
|
|
|
success: (res) => {
|
|
|
|
|
const tempFilePaths = res.tempFiles.map((item) => item.tempFilePath);
|
|
|
|
|
tempFilePaths?.forEach((item) => {
|
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-shadow
|
|
|
|
|
InstrumentInfo.apiClock
|
|
|
|
|
.clockFileUpload({ clockImg: item })
|
|
|
|
|
.then((res) => {
|
|
|
|
|
const currentImage = res.data.url;
|
|
|
|
|
const newImageList =
|
|
|
|
|
this.state.punchInInfo.clockImageList.length >= 3
|
|
|
|
|
? this.state.punchInInfo.clockImageList
|
|
|
|
|
: [...this.state.punchInInfo.clockImageList, currentImage];
|
|
|
|
|
const punchInInfo = this.state.punchInInfo;
|
|
|
|
|
punchInInfo.clockImageList = newImageList;
|
|
|
|
|
this.setState({ punchInInfo });
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
console.info("err", err);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 删除打卡图片
|
|
|
|
|
delImg(i) {
|
|
|
|
|
const punchInInfo = this.state.punchInInfo;
|
|
|
|
|
punchInInfo.clockImageList.splice(i, 1);
|
|
|
|
|
this.setState({ punchInInfo });
|
|
|
|
|
}
|
|
|
|
|
getRouteId() {
|
|
|
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
|
|
|
const id = searchParams.get("id");
|
|
|
|
|
@ -89,20 +252,21 @@ export default class Index extends Component<any, any> {
|
|
|
|
|
}
|
|
|
|
|
async onLoad() {
|
|
|
|
|
this.getRouteId();
|
|
|
|
|
this.getClockStatistics()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidShow() {}
|
|
|
|
|
componentDidShow() { }
|
|
|
|
|
|
|
|
|
|
componentDidHide() {}
|
|
|
|
|
componentDidHide() { }
|
|
|
|
|
|
|
|
|
|
async initData() {}
|
|
|
|
|
async initData() { }
|
|
|
|
|
|
|
|
|
|
GoIndex = () => {
|
|
|
|
|
Taro.switchTab({ url: "/pages/index/index" });
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
let { name, statistics, recordList, recordData } = this.state;
|
|
|
|
|
let { name, statistics, recordList, recordData, show,clockStatistics,punchInInfo,monthTime } = this.state;
|
|
|
|
|
return (
|
|
|
|
|
<Block>
|
|
|
|
|
<Navbar isBack titleSlot="护理报告"></Navbar>
|
|
|
|
|
@ -223,7 +387,7 @@ export default class Index extends Component<any, any> {
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
<View className="footer flex aitems">
|
|
|
|
|
<View className="btn">前往打卡</View>
|
|
|
|
|
<View className="btn" onClick={this.setShow.bind(this, true)}>前往打卡</View>
|
|
|
|
|
<View className="text flex aitems">
|
|
|
|
|
<View onClick={this.GoIndex}>跳过</View>
|
|
|
|
|
<Image
|
|
|
|
|
@ -232,6 +396,70 @@ export default class Index extends Component<any, any> {
|
|
|
|
|
></Image>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<Popup show={show} onClose={() => this.setState({ show: false })}>
|
|
|
|
|
<View className="popBox">
|
|
|
|
|
<Image
|
|
|
|
|
className="close_icon"
|
|
|
|
|
src={require("../../img/close.png")}
|
|
|
|
|
mode="widthFix"
|
|
|
|
|
onClick={this.setShow.bind(this, false)}
|
|
|
|
|
></Image>
|
|
|
|
|
<View className="popTitle">今日打卡</View>
|
|
|
|
|
<View className="popSubtitle">
|
|
|
|
|
本月您已打卡
|
|
|
|
|
<View className="bold">{clockStatistics[0]?.clockNum}</View>{" "}
|
|
|
|
|
天，超越
|
|
|
|
|
<View className="bold">
|
|
|
|
|
{(clockStatistics[0]?.percentage * 100).toFixed(1)}%
|
|
|
|
|
</View>
|
|
|
|
|
花至用户
|
|
|
|
|
</View>
|
|
|
|
|
<View className="img_box">
|
|
|
|
|
{punchInInfo.clockImageList.map((item, index) => (
|
|
|
|
|
<View key={item} className="img">
|
|
|
|
|
<Image className="showImg" src={item} mode="widthFix"></Image>
|
|
|
|
|
<Image
|
|
|
|
|
className="closeImg"
|
|
|
|
|
src={require("../../img/close1.png")}
|
|
|
|
|
mode="widthFix"
|
|
|
|
|
onClick={this.delImg.bind(this, index)}
|
|
|
|
|
></Image>
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
{punchInInfo.clockImageList.length < 3 && (
|
|
|
|
|
<View
|
|
|
|
|
className="addBox"
|
|
|
|
|
onClick={this.handleChooseImage.bind(this)}
|
|
|
|
|
>
|
|
|
|
|
<Image
|
|
|
|
|
className="showImg"
|
|
|
|
|
src={require("../../img/clock_in_upload/add-image.png")}
|
|
|
|
|
mode="widthFix"
|
|
|
|
|
></Image>
|
|
|
|
|
</View>
|
|
|
|
|
)}
|
|
|
|
|
</View>
|
|
|
|
|
<View className="info4">
|
|
|
|
|
<View className="content">
|
|
|
|
|
<Textarea
|
|
|
|
|
placeholderStyle="color: #ccc; font-size: 26rpx;font-weight: 400;font-family: PingFang SC;"
|
|
|
|
|
placeholder="请记录一下今天的护理心得吧"
|
|
|
|
|
maxlength={120}
|
|
|
|
|
onInput={this.handleTextareaInput.bind(this)}
|
|
|
|
|
value={punchInInfo.clockContent}
|
|
|
|
|
></Textarea>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="tip">
|
|
|
|
|
{"（" + (punchInInfo.clockContent.length || 0) + "/120）"}
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="popbtnbox flex aitems jcenter">
|
|
|
|
|
<View className="btn1" onClick={this.submit.bind(this)}>
|
|
|
|
|
确认提交
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</Popup>
|
|
|
|
|
</Block>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
qsj
2 years ago