511 lines
17 KiB
Vue
511 lines
17 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 class="caseUser-label-number">
|
||
{{ countInfo.first != 0 ? countInfo.first : '-' }}
|
||
</view>
|
||
</view>
|
||
<view class="caseUser-label-see">
|
||
<view class="caseUser-label-name">
|
||
最高值
|
||
</view>
|
||
<view class="caseUser-label-number">
|
||
{{ countInfo.max != 0 ? countInfo.max : '-' }}
|
||
</view>
|
||
</view>
|
||
<view class="caseUser-label-see">
|
||
<view class="caseUser-label-name">
|
||
最新值
|
||
</view>
|
||
<view class="caseUser-label-number">
|
||
{{ countInfo.last != 0 ? countInfo.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">
|
||
{{ items.text }} - {{ items.item.quantity }}umol
|
||
</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="recordBack" v-if="recordShow"></view>
|
||
<view class="recordCont" v-if="recordShow">
|
||
<view class="recordCont-title">
|
||
<view class="recordCont-title-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">
|
||
<label>尿酸值</label>
|
||
<view class="recordCont-title-input">
|
||
{{ LogInfo.quantity }}<text>umol</text>
|
||
</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"></image>
|
||
</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 : [],
|
||
recordShow : false,
|
||
};
|
||
},
|
||
onLoad() {
|
||
goutSee().then(res => {
|
||
this.caseInfo = res.case
|
||
this.countInfo = res.count
|
||
this.timeInfo = res.timelines
|
||
this.caseImg = res.case.cover
|
||
console.log(res.case)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
methods:{
|
||
// 查看图片
|
||
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: #6e79ec;
|
||
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: #5963cb;
|
||
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: #eff0ff;
|
||
margin: 20rpx 0 40rpx;
|
||
padding: 20rpx 30rpx;
|
||
border-radius: 10rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
height: 180rpx;
|
||
.caseTime-cont-left {
|
||
width: 100%;
|
||
&.active {
|
||
width: calc(100% - 100rpx);
|
||
}
|
||
.caseTime-cont-name {
|
||
color: #6e79ec;
|
||
font-size: 30rpx;
|
||
}
|
||
.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;
|
||
}
|
||
</style>
|