626 lines
20 KiB
Vue
626 lines
20 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="caseUser">
|
||
<view class="caseUser-left">
|
||
<view class="caseUser-left-number"> 建档人：{{ caseInfo.name }} </view>
|
||
<view class="caseUser-left-tool">
|
||
<view class="caseUser-left-number"> 年龄：{{ caseInfo.age }} 岁 </view>
|
||
<view class="caseUser-left-number"> 性别：{{ caseInfo.sex == 'woman' ? '女' : '男' }} </view>
|
||
</view>
|
||
</view>
|
||
<view class="caseUser-img">
|
||
<image v-if="caseImg" @click="openImg(caseImg)" :src="caseImg" mode="aspectFill"></image>
|
||
<block v-else>
|
||
<image src="/static/imgs/caseTips.png" mode="aspectFill"></image>
|
||
<!-- <view @click="updImg" class="caseUser-tips">上传</view> -->
|
||
</block>
|
||
</view>
|
||
<view class="caseUser-label">
|
||
<view class="caseUser-label-see">
|
||
<view class="caseUser-label-name"> 测量类型 </view>
|
||
</view>
|
||
<view class="caseUser-label-see">
|
||
<view class="caseUser-label-name"> 初始值 </view>
|
||
</view>
|
||
<view class="caseUser-label-see">
|
||
<view class="caseUser-label-name"> 最高值 </view>
|
||
</view>
|
||
<view class="caseUser-label-see">
|
||
<view class="caseUser-label-name"> 最新值 </view>
|
||
</view>
|
||
</view>
|
||
<view class="base" v-if="countInfo">
|
||
<view class="baseitem">
|
||
<view class="title">
|
||
<image src="/static/imgs/zhi.png" mode="widthFix" style="width: 30rpx;" />
|
||
<text>高血脂</text>
|
||
</view>
|
||
<view class="title">{{countInfo.hyperlipidemia.first}}</view>
|
||
<view class="title">{{countInfo.hyperlipidemia.max}}</view>
|
||
<view class="title">{{countInfo.hyperlipidemia.last}}</view>
|
||
</view>
|
||
<view class="baseitem">
|
||
<view class="title">
|
||
<image src="/static/imgs/ya.png" mode="widthFix" style="width: 30rpx;" />
|
||
<text>高血压</text>
|
||
</view>
|
||
<view class="title">{{countInfo.hypertension.first}}</view>
|
||
<view class="title">{{countInfo.hypertension.max}}</view>
|
||
<view class="title">{{countInfo.hypertension.last}}</view>
|
||
</view>
|
||
<view class="baseitem">
|
||
<view class="title">
|
||
<image src="/static/imgs/tang.png" mode="widthFix" style="width: 30rpx;" />
|
||
<text>高血糖</text>
|
||
</view>
|
||
<view class="title">{{countInfo.hyperglycemia.first}}</view>
|
||
<view class="title">{{countInfo.hyperglycemia.max}}</view>
|
||
<view class="title">{{countInfo.hyperglycemia.last}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="caseRemark">
|
||
<view class="caseRemark-title"> 健康说明 </view>
|
||
<view class="caseRemark-text">
|
||
{{ caseInfo.remark }}
|
||
</view>
|
||
</view>
|
||
<view class="caseTime" v-if="timeInfo.length > 0">
|
||
<view class="caseTime-label" v-for="(items, index) in timeInfo" :key="index">
|
||
<view class="caseTime-date">
|
||
{{ items.created_at }}
|
||
</view>
|
||
<view class="caseTime-cont" @click="showSee(items.item.gout_case_log_id)"
|
||
v-if="items.type == 'case_log'">
|
||
<view class="caseTime-cont-left" :class="{active : items.item.cover}">
|
||
<view class="caseTime-cont-name" v-if="items.item">
|
||
{{ items.item.type.text }}测量 - {{ items.item.quantity }}{{items.item.type.unit}}
|
||
</view>
|
||
<view class="nowrap-multi caseTime-cont-text">
|
||
{{ items.item.remark }}
|
||
</view>
|
||
</view>
|
||
<image class="caseTime-cont-img" :src="items.item.cover" mode="aspectFill"></image>
|
||
</view>
|
||
<!-- <view class="caseTime-cont"
|
||
@click="$Router.push({name: 'Indexdetails', params: {id: items.item.goods.goods_id}})" v-else>
|
||
<view class="caseTime-cont-left">
|
||
<view class="caseTime-cont-name">
|
||
{{ items.text }}
|
||
</view>
|
||
<view class="nowrap caseTime-cont-text">
|
||
商品： {{ items.item.goods.goods_name }}
|
||
</view>
|
||
<view class="caseTime-cont-text" style="margin: 0;">
|
||
状态： {{ items.item.state }}
|
||
</view>
|
||
</view>
|
||
<image class="caseTime-cont-img" :src="items.item.goods.cover" mode="aspectFill"></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="no-list" v-else >
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无记录~"/>
|
||
</view>
|
||
|
||
<!-- 记录尿酸值弹出 -->
|
||
<view class="recordBack" v-if="recordShow"></view>
|
||
<view class="recordCont" v-if="recordShow">
|
||
<view class="recordCont-title" v-if="LogInfo.type">
|
||
<view class="recordCont-title-text">
|
||
{{LogInfo.type.text}}测量结果
|
||
</view>
|
||
<image @click="recordClick" class="recordCont-title-close" src="/static/icons/uricacidClose.png"
|
||
mode="aspectFill"></image>
|
||
</view>
|
||
<view class="recordCont-form">
|
||
<view class="site-input" v-if="LogInfo.type">
|
||
<label> 测量值</label> <view class="recordCont-title-input"> {{ LogInfo.quantity }} {{LogInfo.type.unit}} </view>
|
||
</view>
|
||
<view class="site-input">
|
||
<label>备注描述</label> <view class="site-remarks"> {{ LogInfo.remark }} </view>
|
||
</view>
|
||
<view class="site-data">
|
||
<label>记录日期</label> <view class="site-data-text"> {{ LogInfo.created_at }} </view>
|
||
</view>
|
||
<view class="site-input" v-if="LogInfo.cover">
|
||
<label>图片信息</label>
|
||
<image class="issueNew-icon" @click="openImg(LogInfo.cover)" :src="LogInfo.cover" mode="aspectFill" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
goutSee,
|
||
goutCover,
|
||
DetLog
|
||
} from '@/apis/interfaces/gout'
|
||
import {
|
||
uploads
|
||
} from '@/apis/interfaces/uploading'
|
||
export default {
|
||
data() {
|
||
return {
|
||
caseImg: '',
|
||
caseInfo: '',
|
||
LogInfo: '', //记录详情
|
||
countInfo: '',
|
||
timeInfo: [],
|
||
page:1,
|
||
has_more:true,
|
||
recordShow: false,
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getlist()
|
||
},
|
||
onReachBottom() {
|
||
if(this.has_more){
|
||
this.page = this.page +1
|
||
this.getlist();
|
||
} else{
|
||
uni.showToast({
|
||
title:'没有更多~',
|
||
icon:'none',
|
||
mask:true,
|
||
duration:1000
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取列表
|
||
getlist(){
|
||
goutSee({page:this.page,type:''}).then(res => {
|
||
if(this.page === 1){
|
||
this.caseInfo = res.case
|
||
this.countInfo = res.count
|
||
this.caseImg = res.case.cover
|
||
}
|
||
|
||
this.timeInfo = this.timeInfo.concat(res.timelines.data)
|
||
this.has_more = res.timelines.page.has_more
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
// 查看图片
|
||
openImg(img) {
|
||
uni.previewImage({
|
||
current: img,
|
||
urls: [img]
|
||
})
|
||
},
|
||
|
||
// 上传图片
|
||
updImg(type) {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: path => {
|
||
uploads([{
|
||
uri: path.tempFilePaths[0]
|
||
}]).then(res => {
|
||
this.caseImg = res.url[0]
|
||
// 上传头像
|
||
this.settingInfo(res.path[0]);
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 上传图片-提交
|
||
settingInfo(value) {
|
||
goutCover(this.caseInfo.gout_case_id, {
|
||
cover: value
|
||
}).then(res => {
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'none'
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 查看详情
|
||
showSee(val) {
|
||
// 获取详情
|
||
this.lastDet(val);
|
||
this.recordShow = true
|
||
},
|
||
|
||
// 新增尿酸弹出
|
||
recordClick() {
|
||
this.recordShow = !this.recordShow
|
||
},
|
||
|
||
// 尿酸列表-详情
|
||
lastDet(id) {
|
||
DetLog(id).then(res => {
|
||
this.LogInfo = res
|
||
this.LogId = id
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
overflow: hidden;
|
||
background: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .2), white);
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.caseUser {
|
||
background-color: rgba($color: #4490ff, $alpha: 1);
|
||
color: #FFFFFF;
|
||
padding: 30rpx 0;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
// height: 310rpx;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
|
||
.caseUser-left {
|
||
height: 160rpx;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.caseUser-left-tool {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
|
||
.caseUser-left-number {
|
||
flex: 2;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.caseUser-left-number {
|
||
line-height: 48rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.caseUser-img {
|
||
width: 120rpx;
|
||
height: 140rpx;
|
||
border-radius: 6rpx;
|
||
position: absolute;
|
||
background-color: #a8b0ff;
|
||
padding: 6rpx;
|
||
box-sizing: border-box;
|
||
right: 30rpx;
|
||
top: 25rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.caseUser-tips {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
color: #707070;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
line-height: 140rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.caseUser-label {
|
||
background-color: #3670ce;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
padding: 20rpx 0;
|
||
|
||
.caseUser-label-see {
|
||
flex: 3;
|
||
text-align: center;
|
||
|
||
.caseUser-label-name {
|
||
font-size: 26rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.caseUser-label-number {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.caseRemark {
|
||
background-color: #F8F8F8;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.caseRemark-title {
|
||
font-weight: 600;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.caseRemark-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.caseTime {
|
||
background-color: #FFFFFF;
|
||
padding: 50rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: 50rpx;
|
||
top: 55rpx;
|
||
background-color: #ebebeb;
|
||
width: 2rpx;
|
||
height: 100%;
|
||
}
|
||
|
||
.caseTime-label {
|
||
position: relative;
|
||
padding-left: 50rpx;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: -13rpx;
|
||
z-index: 99;
|
||
top: 6rpx;
|
||
background-color: #ebebeb;
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
&:last-child::before {
|
||
position: absolute;
|
||
content: '';
|
||
left: -1rpx;
|
||
z-index: 99;
|
||
top: 6rpx;
|
||
background-color: #FFFFFF;
|
||
width: 2rpx;
|
||
height: 200%;
|
||
}
|
||
|
||
.caseTime-date {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.caseTime-cont {
|
||
background-color: rgba($color: #2d5ba5, $alpha: 0.05);
|
||
margin: 20rpx 0 40rpx;
|
||
padding: 20rpx 30rpx;
|
||
border-radius: 10rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
// height: 180rpx;
|
||
min-height: 120rpx;
|
||
|
||
.caseTime-cont-left {
|
||
width: 100%;
|
||
|
||
&.active {
|
||
width: calc(100% - 100rpx);
|
||
}
|
||
|
||
.caseTime-cont-name {
|
||
color: #3670ce;
|
||
font-size: 30rpx;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.caseTime-cont-text {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.caseTime-cont-price {
|
||
color: red;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.caseTime-cont-img {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 20rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 弹出
|
||
.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: 70vh;
|
||
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 view {
|
||
background-color: red;
|
||
width: 150rpx;
|
||
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;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
line-height: 60rpx;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-weight: normal;
|
||
color: #adadad;
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.issueNew-icon {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
|
||
.base {
|
||
width: 100%;
|
||
background-color: white;
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: 20rpx;
|
||
|
||
.baseitem {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
|
||
image {
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
.no-list{
|
||
min-height: 50vh;
|
||
background-color: #F8F8F8;
|
||
padding-top: 100rpx;
|
||
}
|
||
</style>
|