<template>
<view class="BarColors">
<uni-nav-bar statusBar :border="false" @clickLeft="clickLeft" left-icon="left" backgroundColor="#1E2536;"
color="white" title="服药历史" class="unibarS" />
</view>
<view class="box">
<view class="header">
<view class="header_name">{{drugName}}</view>
<view class="header_right">
<view class="header_type">
<view class="type_color" style="background: #3EC6FF;"></view>
<view style="margin-left:10rpx;">已服药</view>
</view>
<view class="header_type">
<view class="type_color" style="background: #94FFB7;"></view>
<view style="margin-left:10rpx;">服药中</view>
</view>
<view class="header_type">
<view class="type_color" style="background: #FC7A5A;"></view>
<view style="margin-left:10rpx;">未服/漏服药</view>
</view>
</view>
</view>
<view class="calendar_box">
<uni-calendar :insert="true" :lunar="false" :selected="info.selected" :showMonth='false'
@change="onChangeDate" @monthSwitch="monthSwitch" class="custom-calendar" />
</view>
<view class="medication_time" v-if="takeDrugDetailSetResps !== null">
<view class="medication_time_header">
{{timeFormatter(selectDate, '日')}}
</view>
<view class="medication_time_list" v-for="(item,index) in takeDrugDetailSetResps">
<view class="list_left">
<view style="font-size:36rpx;color:white;">计划服药时间 {{item.takeTimeStart.substring(0, 5)}} -
{{item.takeTimeEnd.substring(0, 5)}}
</view>
<view style="font-size:24rpx;color:#BEBEBE;" v-if="item.takedTime !== null">
<image src="/static/images/icon_home_fy.png" style="width:24rpx;height:24rpx;" />
实际服药时间 {{item.takedTime}}
</view>
<view style="font-size:24rpx;color:#BEBEBE;" v-if="item.takedTime == null">
未服药
</view>
</view>
<view class="list_right">
{{item.takedTime == null ? '服药' : '已服药'}}
</view>
</view>
</view>
<view class="btn-view">
<button class="btn_ligh" v-if="pauseButtonFlag">停用</button>
<button class="btn_ligh" v-if="startButtonFlag">启用</button>
<button class="btn_ligh " style="background:#07FCFF !important;color: #1E2536 !important;">已吃完</button>
</view>
</view>
</template>
<script>
import {
timeFormatter,
} from '@/pagesA/utils/time.js';
import {
getDrugDetail
} from "@/utils/request/api.js";
export default {
data() {
return {
drugName: "",
selectDate: "",
info: {
selected: []
},
startButtonFlag: false,
pauseButtonFlag: false,
takeOverButtonFlag: false,
dayDrugMap: null,
takeDrugDetailSetResps: [],
timeSlotDes: ["上午", "中午", "下午", "晚上"]
};
},
onLoad(option) {
this.drugName = option.drugName ? option.drugName : "";
this.drugId = option.drugId;
var today = new Date();
//初始化日 周 月 年 默认日期
this.DD = String(today.getDate()).padStart(2, '0'); // 获取日
this.MM = String(today.getMonth() + 1).padStart(2, '0'); //获取月份，1 月为 0
this.yyyy = today.getFullYear(); // 获取年
this.selectDate = this.yyyy + "-" + this.MM + "-" + this.DD;
},
onShow() {
this.getMedicationDetails();
},
computed: {
},
methods: {
timeFormatter,
clickLeft() {
uni.navigateBack()
},
onChangeDate(e) {
console.log(e)
this.selectDate = e.fulldate;
this.getMedicationDetails();
// 检查是否已存在该日期的记录
// const existingIndex = this.info.selected.findIndex(item => item.date === e.fulldate);
// if (existingIndex === -1) {
// // 如果不存在，则添加新记录
// this.info.selected = [...this.info.selected, {
// date: e.fulldate,
// info: '已服药'
// }];
// } else {
// // 如果已存在，可以选择更新或不做处理
// }
// //强制更新视图
// this.$forceUpdate();
},
getMedicationDetails() {
getDrugDetail({
id: this.drugId, //药物id
searchDate: this.selectDate //查询日期（具体到日）
}).then(res => {
let code = res.code;
let data = res.data;
if (code == 0 && data && data != null) {
// 处理返回的数据
this.processMedicationData(data);
} else {
console.log("code is not zero or data is null")
}
})
},
monthSwitch(e) {
console.log('monthSwitchs 返回:', e)
},
processMedicationData(data) {
console.log("processMedicationData：", data);
this.pauseButtonFlag = data.pauseButtonFlag; //停用按钮是否显示
this.startButtonFlag = data.startButtonFlag; //启用按钮是否显示
this.takeOverButtonFlag = data.takeOverButtonFlag; //已吃完按钮是否显示
this.dayDrugMap = data.dayDrugMap; //返回已经吃过药的日期格式{"日期":"1已服药、2服药中、3未服/漏服药"}
this.takeDrugDetailSetResps = data.takeDrugDetailSetResps; //服药时间展示
}
},
};
</script>
<style lang="less" scoped>
.box {
padding: 32rpx;
background-color: #1E2536;
height: calc(100% - 96px);
.header {
// width: 686rpx;
height: 80rpx;
background: #182135;
border: 1rpx solid #0C336D;
font-size: 28rpx;
color: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10rpx;
margin-bottom: 15rpx;
.header_right {
display: flex;
align-items: center;
.header_type {
display: flex;
align-items: center;
margin-right: 20rpx;
font-size: 20rpx;
.type_color {
border-radius: 50%;
width: 20rpx;
height: 20rpx;
// background: #3EC6FF;
}
}
}
}
.calendar_box {
width: 100%;
border: 1rpx solid #0C336D;
color: #FFFFFF !important;
::v-deep {
.uni-calendar__content {
background-color: #1E2536 !important;
color: #FFFFFF !important;
}
//头部
.uni-calendar__header {
background-color: #1E3A4C !important;
border-bottom-color: #1E3A4C !important;
//文本
&-text {
color: #FFFFFF !important;
font-size: 30rpx !important;
}
//箭头
&-btn {
border-left-color: #FFFFFF !important;
border-top-color: #FFFFFF !important;
}
}
.uni-calendar__backtoday {
background-color: #008789 !important;
color: #FFFFFF;
}
// 星期栏
.uni-calendar__weeks {
&-day {
//星期文本底部的线条
border-bottom-color: #1E2536 !important;
}
}
.uni-calendar-item__weeks-box,
.uni-calendar-item__weeks-lunar {
&-text {
color: #FFFFFF !important;
}
}
//选中当前
.uni-calendar-item--checked {
background-color: #646464 !important;
border-radius: 50rpx !important;
}
//当天
.uni-calendar-item--isDay {
background-color: #3a99ff !important;
border-radius: 50rpx !important;
&-text {
// color: #93e8ff !important;
font-weight: bold;
}
}
//非当月日期，不可点击部分，背景文本颜色都设置#1E2536，隐藏不显示
.uni-calendar-item--disable {
background-color: #1E2536 !important;
color: #1E2536 !important;
}
}
}
.medication_time {
margin-top: 32rpx;
.medication_time_header {
font-size: 24rpx;
color: #FFFFFF;
}
.medication_time_list {
margin-top: 24rpx;
height: 120rpx;
background: #1E3A4C;
border-radius: 8rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx;
}
.list_right {
width: 134rpx;
height: 60rpx;
background: #07FCFF;
border-radius: 27rpx 27rpx 27rpx 27rpx;
color: #1E2536;
font-size: 28rpx;
line-height: 62rpx;
text-align: center;
}
.list_right_P {
width: 134rpx;
height: 60rpx;
background: #008789;
border-radius: 27rpx 27rpx 27rpx 27rpx;
color: #1E2536;
font-size: 28rpx;
line-height: 62rpx;
text-align: center;
}
}
.btn-view {
display: flex;
margin-top: 50rpx;
align-items: center;
justify-content: space-around;
button {
width: 303rpx;
}
}
}
</style> 界面底部背景没有充满屏幕，出现白色背景了，怎么处理？
该博客已迁移至新地址 http://hi.baidu.com/ligh0721/home 。
扫一扫
2305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
