409 lines
13 KiB
Vue
409 lines
13 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="tabs">
|
||
<view class="tabs-item" :class="tabType == 'hyperglycemia' ? 'active': ''" @click="onTab('hyperglycemia')">血糖记录</view>
|
||
<view class="tabs-item" :class="tabType == 'hyperlipidemia' ? 'active': ''" @click="onTab('hyperlipidemia')">血脂记录</view>
|
||
<view class="tabs-item" :class="tabType == 'hypertension' ? 'active': ''" @click="onTab('hypertension')">血压记录</view>
|
||
</view>
|
||
<view class="While">
|
||
<view class="top">
|
||
<view class="top-time">
|
||
{{ lastData.log ? lastData.log.created_at : '您还没有上传过血糖值' }}
|
||
</view>
|
||
<view v-if="lastData.log" class="top-record" @click="$Router.push({name: 'uricacidList', params: {id: lastData.caseId}})">
|
||
所有记录
|
||
</view>
|
||
</view>
|
||
<view class="uricacid">
|
||
<view class="uricacid-number">
|
||
<block v-if="lastData.log">
|
||
<text>{{ lastData.log.quantity }}</text>umol
|
||
</block>
|
||
<block v-else>
|
||
<text>暂无数据</text>
|
||
</block>
|
||
</view>
|
||
<view class="uricacid-tips">
|
||
<text>男性血糖指标 {{ lastData.Newscope.man }}</text>
|
||
<text>女性血糖指标 {{ lastData.Newscope.woman }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="While analyse">
|
||
<view class="analyse-title">
|
||
血糖趋势分析
|
||
</view>
|
||
<view class="analyse-text" v-if="lastData.log">
|
||
当前血糖值为{{ lastData.log.quantity }}umol,
|
||
<block v-if="lastData.Newscope.scope">
|
||
{{ lastData.log.quantity > lastData.Newscope.scope.max ? '高于' : '低于' }}{{ lastData.Newscope.scope.max }}umol
|
||
{{ lastData.log.quantity > lastData.Newscope.scope.max ? '您的尿酸水平偏高，根据治疗指南需要进行治疗干预。需要生活控制（多喝水，饮食控制、并发症危险因素的控制、碱化尿液），配合药物治疗。具体情况请遵循医嘱。' : '您的尿酸水平控制很棒，请继续保持' }}
|
||
</block>
|
||
</view>
|
||
<view class="analyse-text" v-else>
|
||
暂无分析数据
|
||
</view>
|
||
<view class="analyse-btn" @click="recordClick">
|
||
记录尿酸值
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 记录尿酸值弹出 -->
|
||
<view class="recordBack" v-if="recordShow"></view>
|
||
<view class="recordCont" v-if="recordShow">
|
||
<form @submit="siteform">
|
||
<view class="recordCont-title">
|
||
<image @click="recordClick" class="recordCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
|
||
<view class="recordCont-title-text">
|
||
新增尿酸记录
|
||
</view>
|
||
<view class="recordCont-title-btn">
|
||
<button form-type="submit">完成</button>
|
||
</view>
|
||
</view>
|
||
<view class="recordCont-form">
|
||
<view class="site-input">
|
||
<label>请输入尿酸值</label>
|
||
<view class="recordCont-title-input">
|
||
<input placeholder="请输入" name="quantity" type="digit"></input>
|
||
<text>umol</text>
|
||
</view>
|
||
</view>
|
||
<view class="site-remarks">
|
||
<textarea name="remark" placeholder="请输入备注信息" maxlength="30" />
|
||
<text>最大限制30字</text>
|
||
</view>
|
||
<view class="site-data">
|
||
<label>尿酸记录日期</label>
|
||
<view class="site-data-text">
|
||
<picker mode="date" :value="date" @change="bindDateChange">
|
||
<view class="uni-input">{{date}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="site-photo">
|
||
<label>上传图片（选填）</label>
|
||
<view class="issueNew-photo">
|
||
<image @click="updImg()" class="issueNew-icon" :src="cover.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { lastLog, AddlastLog } from '@/apis/interfaces/gout'
|
||
import { uploads } from '@/apis/interfaces/uploading'
|
||
export default {
|
||
data() {
|
||
return {
|
||
lastData : {
|
||
Newscope : '',
|
||
log : '',
|
||
caseId : ''
|
||
}, //尿酸数据
|
||
date : '请选择日期',
|
||
recordShow : false,
|
||
cover : {
|
||
showpath: '',
|
||
path : ''
|
||
},
|
||
tabType : 'hyperglycemia'
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取尿酸数据
|
||
this.lastInfo();
|
||
},
|
||
methods: {
|
||
// 切换数据
|
||
onTab(e){
|
||
this.tabType = e;
|
||
this.lastInfo()
|
||
},
|
||
// 尿酸数据
|
||
lastInfo() {
|
||
lastLog(this.tabType).then(res => {
|
||
this.lastData.Newscope = res.scope
|
||
this.lastData.log = res.log
|
||
this.lastData.caseId = res.case.gout_case_id
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 选择日期
|
||
bindDateChange(e) {
|
||
this.date = e.target.value
|
||
},
|
||
|
||
// 新增尿酸弹出
|
||
recordClick() {
|
||
this.recordShow = !this.recordShow
|
||
},
|
||
|
||
// 上传图片
|
||
updImg(type){
|
||
uni.chooseImage({
|
||
count : 1,
|
||
success : path => {
|
||
uploads([{
|
||
uri : path.tempFilePaths[0]
|
||
}]).then(res => {
|
||
this.cover = {
|
||
showpath: res.url[0],
|
||
path: res.path[0]
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 提交表单
|
||
siteform(e) {
|
||
let newQuantity = e.detail.value.quantity,
|
||
newRemark = e.detail.value.remark,
|
||
newChecked = this.date,
|
||
newCover = this.cover.path
|
||
AddlastLog(this.lastData.caseId, {
|
||
quantity : newQuantity,
|
||
remark : newRemark,
|
||
checked_at : newChecked,
|
||
cover : newCover
|
||
}).then(res => {
|
||
this.recordShow = false
|
||
this.cover = ''
|
||
// 获取尿酸数据
|
||
this.lastInfo();
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
overflow: hidden;
|
||
background: #f3f4f6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.tabs{
|
||
background-color: white;
|
||
border-radius: 0 0 10rpx 10rpx;
|
||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||
margin-bottom: 30rpx;
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
.tabs-item{
|
||
line-height: 100rpx;
|
||
color: #888;
|
||
&.active{
|
||
font-weight: bold;
|
||
color: $mian-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.While {
|
||
border-radius: 10rpx;
|
||
margin-bottom: 30rpx;
|
||
background-color: #FFFFFF;
|
||
padding:30rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||
}
|
||
|
||
.top {
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
.top-time {
|
||
color: #919191;
|
||
flex: 1;
|
||
}
|
||
.top-record {
|
||
color: #54975e;
|
||
}
|
||
}
|
||
.uricacid {
|
||
padding: 40rpx 0 20rpx;
|
||
.uricacid-number {
|
||
text-align: center;
|
||
color: #919191;
|
||
text {
|
||
color: #000000;
|
||
font-size: 58rpx;
|
||
font-weight: 600;
|
||
padding-right: 10rpx;
|
||
}
|
||
}
|
||
.uricacid-tips {
|
||
margin-top: 30rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
text {
|
||
padding: 0 15rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.analyse {
|
||
.analyse-title {
|
||
font-weight: 600;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.analyse-text {
|
||
line-height: 42rpx;
|
||
color: #585858;
|
||
font-size: 26rpx;
|
||
}
|
||
.analyse-btn {
|
||
background-color: #4490ff;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
border-radius: 80rpx;
|
||
line-height: 84rpx;
|
||
margin: 80rpx 0 20rpx;
|
||
}
|
||
}
|
||
|
||
// 弹出
|
||
.recordBack {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba($color: #000000, $alpha: .4);
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
}
|
||
.recordCont {
|
||
position: fixed;
|
||
width: 100%;
|
||
left: 0;
|
||
bottom: 0;
|
||
background-color: #FFFFFF;
|
||
z-index: 100;
|
||
overflow-y: scroll;
|
||
height: 60vh;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
.recordCont-title {
|
||
border-bottom: 2rpx solid #F2F2F2;
|
||
padding-bottom: 30rpx;
|
||
display: flex;
|
||
line-height: 54rpx;
|
||
position: relative;
|
||
.recordCont-title-close {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-top: 7rpx;
|
||
}
|
||
.recordCont-title-text {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.recordCont-title-btn button {
|
||
background-color: #6e79ec;
|
||
width: 120rpx;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
height: 54rpx;
|
||
line-height: 54rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 28rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
.recordCont-form {
|
||
margin-top: 30rpx;
|
||
.site-input {
|
||
margin-bottom: 30rpx;
|
||
label {
|
||
margin-bottom: 20rpx;
|
||
display: block;
|
||
font-weight: 600;
|
||
}
|
||
.recordCont-title-input {
|
||
display: flex;
|
||
input {
|
||
flex: 1;
|
||
font-size: 40rpx;
|
||
}
|
||
text {
|
||
color: #adadad;
|
||
}
|
||
}
|
||
}
|
||
.site-photo {
|
||
display: flex;
|
||
label {
|
||
flex: 1;
|
||
margin-top: 10rpx;
|
||
display: block;
|
||
font-weight: 600;
|
||
}
|
||
.issueNew-photo{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin: 0 auto;
|
||
background: white;
|
||
position: relative;
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
.issueNew-icon{
|
||
width: 100%;
|
||
height: 100%;;
|
||
}
|
||
}
|
||
}
|
||
.site-remarks {
|
||
background-color: #F2F2F2;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
textarea {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
}
|
||
text {
|
||
text-align: right;
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #54975e;
|
||
}
|
||
}
|
||
.site-data {
|
||
margin: 40rpx 0;
|
||
display: flex;
|
||
label {
|
||
flex: 1;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|