451 lines
19 KiB
Vue
451 lines
19 KiB
Vue
<template>
|
||
<view class="content">
|
||
<form class="issue-form" @submit="issueForm">
|
||
<view class="case">
|
||
<view class="issue-title">
|
||
用户档案
|
||
</view>
|
||
<view class="issue-block">
|
||
<view class="issue-inputs">
|
||
<label class="issue-input-label">真实姓名</label>
|
||
<input class="issue-inputs-input" maxlength="4" placeholder="输入真实姓名" name="name" :value="seeData.name" type="text" :disabled="editState"></input>
|
||
</view>
|
||
<view class="issue-inputs">
|
||
<label class="issue-input-label">手机号码</label>
|
||
<input class="issue-inputs-input" placeholder="输入手机号码" name="mobileNo" :value="seeData.username" type="tel":disabled="editState"></input>
|
||
</view>
|
||
<view class="issue-inputs">
|
||
<label class="issue-input-label">年龄</label>
|
||
<input class="issue-inputs-input" placeholder="输入年龄" name="age" :value="seeData.age" type="number":disabled="editState"></input>
|
||
</view>
|
||
<view class="issue-inputs">
|
||
<label class="issue-input-label">性别</label>
|
||
<block v-if="editState">
|
||
<view class="issue-inputs-input">
|
||
{{ seeData.sex == 'woman' ? '女' : '男' }}
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<picker @change="bindSexChange" :value="sexIndex" :range="sexArray" range-key="name" :disabled="editState">
|
||
<view class="uni-input">{{sexArray[sexIndex].name}}</view>
|
||
<image class="uni-input-img" src="/static/icons/userLogin_icon.png" mode=""></image>
|
||
</picker>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<block v-if="!editState">
|
||
<view class="issue-title">
|
||
健康档案
|
||
</view>
|
||
<view class="case-block">
|
||
<view class="case-inputs">
|
||
<label class="case-input-label">健康说明</label>
|
||
<textarea :value="seeData.remark" placeholder="请描述您当前的三高情况" name="remark" type="text" :disabled="editState" />
|
||
</view>
|
||
<view class="case-inputs">
|
||
<label class="case-input-label">
|
||
当前高血脂
|
||
<text>（{{sexName == 'man' ? '男性' : '女性'}}高血脂正常指标 {{ hyperlipemiaMin }} ~ {{ hyperlipemiaMax }}）</text>
|
||
</label>
|
||
<input class="case-inputs-input" placeholder="输入您当前高血脂值" @input="hyperlipemiaInput" :value="hyperlipemiaNumber" type="idcard" :disabled="editState"></input>
|
||
<text class="case-inputs-tips active" v-if="hyperlipemiaNumber > hyperlipemiaMax">偏高</text>
|
||
<text class="case-inputs-tips" v-if="hyperlipemiaNumber < hyperlipemiaMin && hyperlipemiaNumber != ''">偏低</text>
|
||
</view>
|
||
<view class="case-inputs">
|
||
<label class="case-input-label">
|
||
当前高血压
|
||
<text>（{{sexName == 'man' ? '男性' : '女性'}}高血压正常指标 {{ hypertensionMin }} ~ {{ hypertensionMax }}）</text>
|
||
</label>
|
||
<input class="case-inputs-input" placeholder="输入您当前高血压值" @input="hypertensionInput" :value="hypertensionNumber" type="idcard" :disabled="editState"></input>
|
||
<text class="case-inputs-tips active" v-if="hypertensionNumber > hypertensionMax">偏高</text>
|
||
<text class="case-inputs-tips" v-if="hypertensionNumber < hypertensionMin && hypertensionNumber != ''">偏低</text>
|
||
</view>
|
||
<view class="case-inputs">
|
||
<label class="case-input-label">
|
||
当前高血糖
|
||
<text>（{{sexName == 'man' ? '男性' : '女性'}}高血糖正常指标 {{ hyperglycemiaMin }} ~ {{ hyperglycemiaMax }}）</text>
|
||
</label>
|
||
<input class="case-inputs-input" placeholder="输入您当前高血糖值" @input="hyperglycemiaInput" :value="hyperglycemiaNumber" type="idcard" :disabled="editState"></input>
|
||
<text class="case-inputs-tips active" v-if="hyperglycemiaNumber > hyperglycemiaMax">偏高</text>
|
||
<text class="case-inputs-tips" v-if="hyperglycemiaNumber < hyperglycemiaMin && hyperglycemiaNumber != ''">偏低</text>
|
||
</view>
|
||
</view>
|
||
<view class="issue-block">
|
||
<label class="issueNew-title">上传诊断证明</label>
|
||
<!-- hyperlipemia;hypertension;hyperglycemia -->
|
||
<view class="flexrow">
|
||
<view class="issueNew-photo">
|
||
<view class="issueNew-content" v-if="editState">
|
||
<image class="issueNew-icon" @click="openImg(seeData.cover)" :src="seeData.cover" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="issueNew-content" @click="updImg('hyperlipemia')" v-else>
|
||
<image class="issueNew-icon" :src="hyperlipemia.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
|
||
<view class="issueNew-text">高血脂诊断证明</view>
|
||
</view>
|
||
</view>
|
||
<view class="issueNew-photo">
|
||
<view class="issueNew-content" v-if="editState">
|
||
<image class="issueNew-icon" @click="openImg(seeData.cover)" :src="seeData.cover" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="issueNew-content" @click="updImg('hypertension')" v-else>
|
||
<image class="issueNew-icon" :src="hypertension.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
|
||
<view class="issueNew-text">高血压诊断证明</view>
|
||
</view>
|
||
</view>
|
||
<view class="issueNew-photo">
|
||
<view class="issueNew-content" v-if="editState">
|
||
<image class="issueNew-icon" @click="openImg(seeData.cover)" :src="seeData.cover" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="issueNew-content" @click="updImg('hyperglycemia')" v-else>
|
||
<image class="issueNew-icon" :src="hyperglycemia.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
|
||
<view class="issueNew-text">高血糖诊断证明</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="userdata-btn" v-if="!editState">
|
||
<button class="issue-btn" form-type="submit" :disabled="disabled">立即保存</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { goutCreate, goutAdd, goutSee } from '@/apis/interfaces/gout'
|
||
import { uploads } from '@/apis/interfaces/uploading'
|
||
export default {
|
||
data() {
|
||
return {
|
||
disabled : false ,// 提交按钮状态
|
||
editState: false, //是否可以编辑表单
|
||
numberVal: '',
|
||
count : '',
|
||
hyperlipemiaMax : '',
|
||
hyperlipemiaMin : '',
|
||
hyperlipemiaNumber:'',
|
||
hypertensionMax : '',
|
||
hypertensionMin : '',
|
||
hypertensionNumber:'',
|
||
hyperglycemiaMax : '',
|
||
hyperglycemiaMin : '',
|
||
hyperglycemiaNumber:'',
|
||
seeData : {
|
||
name : '',
|
||
id_card : '',
|
||
username: '',
|
||
sex : '',
|
||
cover : '',
|
||
remark : '',
|
||
age : ''
|
||
}, //查看我的病例内容
|
||
sexIndex : 0,
|
||
sexName : 'man',
|
||
hyperlipemia : {
|
||
showpath: '',
|
||
path : ''
|
||
},
|
||
hypertension:{
|
||
showpath: '',
|
||
path : ''
|
||
},
|
||
hyperglycemia:{
|
||
showpath: '',
|
||
path : ''
|
||
},
|
||
sexArray : [{
|
||
val : 'man',
|
||
name : '男'
|
||
},{
|
||
val : 'woman',
|
||
name : '女'
|
||
}]
|
||
};
|
||
},
|
||
onShow() {
|
||
// 健康前置信息
|
||
goutCreate().then(res => {
|
||
this.count = res.count
|
||
this.hyperlipemiaMax = res.count.man.hyperlipidemia.max
|
||
this.hyperlipemiaMin = res.count.man.hyperlipidemia.min
|
||
this.hypertensionMax = res.count.man.hypertension.max
|
||
this.hypertensionMin = res.count.man.hypertension.min
|
||
this.hyperglycemiaMax = res.count.man.hyperglycemia.max
|
||
this.hyperglycemiaMin = res.count.man.hyperglycemia.min
|
||
this.seeData.username = res.user.username
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
if(this.$Route.query.hasCase === 'true') {
|
||
this.editState = true
|
||
// 获取查看病例
|
||
this.goutSeeInfo();
|
||
}
|
||
},
|
||
methods: {
|
||
// 查看病例
|
||
goutSeeInfo() {
|
||
goutSee().then(res => {
|
||
this.seeData.name = res.case.name
|
||
this.seeData.username = res.case.user.username
|
||
this.seeData.sex = res.case.sex
|
||
this.seeData.cover = res.case.cover
|
||
this.seeData.age = res.case.age
|
||
this.countNumber = parseInt(res.case.number)
|
||
this.seeData.remark = res.case.remark
|
||
this.sexName = res.case.sex
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 选择男女
|
||
bindSexChange(e) {
|
||
this.sexIndex = parseInt(e.detail.value)
|
||
this.sexName = this.sexArray[e.detail.value].val
|
||
if(this.sexArray[e.detail.value].val == 'woman') {
|
||
this.hyperlipemiaMax = this.count.woman.hyperlipidemia.max
|
||
this.hyperlipemiaMin = this.count.woman.hyperlipidemia.min
|
||
this.hypertensionMax = this.count.woman.hypertension.max
|
||
this.hypertensionMin = this.count.woman.hypertension.min
|
||
this.hyperglycemiaMax = this.count.woman.hyperglycemia.max
|
||
this.hyperglycemiaMin = this.count.woman.hyperglycemia.min
|
||
}else {
|
||
this.hyperlipemiaMax = this.count.man.hyperlipidemia.max
|
||
this.hyperlipemiaMin = this.count.man.hyperlipidemia.min
|
||
this.hypertensionMax = this.count.man.hypertension.max
|
||
this.hypertensionMin = this.count.man.hypertension.min
|
||
this.hyperglycemiaMax = this.count.man.hyperglycemia.max
|
||
this.hyperglycemiaMin = this.count.man.hyperglycemia.min
|
||
}
|
||
},
|
||
|
||
// 上传图片
|
||
updImg(type){
|
||
uni.chooseImage({
|
||
count : 1,
|
||
success : path => {
|
||
uploads([{
|
||
uri : path.tempFilePaths[0]
|
||
}]).then(res => {
|
||
this[type] = {
|
||
showpath: res.url[0],
|
||
path: res.path[0]
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 高血脂
|
||
hyperlipemiaInput(e) {
|
||
this.hyperlipemiaNumber = e.detail.value
|
||
},
|
||
// 高血压
|
||
hypertensionInput(e) {
|
||
this.hypertensionNumber = e.detail.value
|
||
},
|
||
// 高血糖
|
||
hyperglycemiaInput(e) {
|
||
this.hyperglycemiaNumber = e.detail.value
|
||
},
|
||
|
||
|
||
|
||
// 提交表单 hyperlipemia;hypertension;hyperglycemia
|
||
issueForm(e) {
|
||
let value = e.detail.value;
|
||
|
||
let data = {
|
||
name : value.name,
|
||
age : value.age,
|
||
mobileNo: value.mobileNo,
|
||
remark : value.remark,
|
||
sex : this.sexArray[this.sexIndex].val,
|
||
hyperlipidemia : this.hyperlipemiaNumber,
|
||
hypertension : this.hypertensionNumber,
|
||
hyperglycemia : this.hyperglycemiaNumber,
|
||
hyperlipidemia_cover : this.hyperlipemia.path,
|
||
hypertension_cover : this.hypertension.path,
|
||
hyperglycemia_cover : this.hyperglycemia.path,
|
||
}
|
||
goutAdd(data).then(res => {
|
||
this.disabled = true
|
||
uni.navigateBack({
|
||
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 查看图片
|
||
openImg(img) {
|
||
uni.previewImage({
|
||
current: img,
|
||
urls:[img]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
overflow: hidden;
|
||
background: #f3f4f6;
|
||
}
|
||
.case {
|
||
border-bottom: 160rpx solid transparent;
|
||
}
|
||
.issue-title {
|
||
padding: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
.issue-block {
|
||
background: white;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 25rpx;
|
||
.issue-inputs {
|
||
position: relative;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
padding-left: 170rpx;
|
||
.issue-input-label {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 170rpx;
|
||
}
|
||
.issue-inputs-input {
|
||
line-height: 90rpx;
|
||
height: 90rpx;
|
||
width: 100%;
|
||
}
|
||
.uni-input-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.case-block {
|
||
.case-inputs {
|
||
margin-bottom: 30rpx;
|
||
background-color: #FFFFFF;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.case-input-label {
|
||
margin-bottom: 30rpx;
|
||
display: block;
|
||
text {
|
||
color: #646464;
|
||
}
|
||
}
|
||
.case-inputs-input {
|
||
width: 70%;
|
||
}
|
||
.case-inputs-tips {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 100rpx;
|
||
color: green;
|
||
&.active {
|
||
color: red;
|
||
}
|
||
}
|
||
textarea {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/* 上传图片样式 */
|
||
.issueNew-title {
|
||
line-height: 90rpx;
|
||
}
|
||
.issueNew-photo{
|
||
width: 100%;
|
||
padding-top: 50%;
|
||
background: white;
|
||
position: relative;
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
.issueNew-content{
|
||
position: absolute;
|
||
top: 0;
|
||
right: 15rpx;
|
||
left: 15rpx;
|
||
bottom: 10rpx;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-pack: center;
|
||
border:1rpx solid #f5f5f5;
|
||
border-radius: 6rpx;
|
||
.issueNew-icon{
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/* 按钮 */
|
||
.userdata-btn {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
right: 0;
|
||
background: white;
|
||
.issue-btn {
|
||
background: #4490ff;
|
||
text-align: center;
|
||
color: white;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: 34rpx;
|
||
font-weight: normal;
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
border-radius: 10rpx;
|
||
&[disabled] {
|
||
background: #4490ff !important;
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
}
|
||
.flexrow{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|