Files
sykl-sm/pages/attestation/index.vue
2022-07-15 10:49:55 +08:00

361 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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' ? '男性' : '女性'}}尿酸正常指标 {{ countMin }} ~ {{ countMax }}</text>
</label>
<input class="case-inputs-input" placeholder="输入当前尿酸值" @input="numberInput" :value="countNumber" type="idcard" :disabled="editState"></input>
<text class="case-inputs-tips active" v-if="countNumber > countMax">偏高</text>
<text class="case-inputs-tips" v-if="countNumber < countMin && countNumber != ''">偏低</text>
</view>
</view>
<view class="issue-block">
<label class="issueNew-title">诊断证明</label>
<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('license')" v-else>
<image class="issueNew-icon" :src="license.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
<view class="issueNew-text">请上传诊断证明</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 : '',
countMax : '',
countMin : '',
countNumber:'',
seeData : {
name : '',
id_card : '',
username: '',
sex : '',
cover : '',
remark : '',
age : ''
}, //查看我的病例内容
sexIndex : 0,
sexName : 'man',
license : {
showpath: '',
path : ''
},
sexArray : [{
val : 'man',
name : '男'
},{
val : 'woman',
name : '女'
}]
};
},
onShow() {
// 病例前置信息
goutCreate().then(res => {
this.count = res.count
this.countMax = parseInt(res.count.man.max)
this.countMin = parseInt(res.count.man.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.countMax = parseInt(this.count.woman.max)
this.countMin = parseInt(this.count.woman.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'
})
})
}
})
},
// 尿酸值
numberInput(e) {
this.countNumber = e.detail.value
},
// 提交表单
issueForm(e) {
let value = e.detail.value,
newCover = this.license.path,
newSex = this.sexArray[this.sexIndex].val
goutAdd({
name : value.name,
age : value.age,
mobileNo: value.mobileNo,
number : this.countNumber,
remark : value.remark,
cover : newCover,
sex : newSex
}).then(res => {
this.disabled = true
this.$Router.replace({name: "User"})
}).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: 25rpx;
left: 25rpx;
bottom: 10rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
border:1rpx solid #f5f5f5;
border-radius: 6rpx;
.issueNew-icon{
width: 200rpx;
height: 200rpx;
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: #6e79ec;
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: #a7affd !important;
color: #fff !important;
}
}
}
</style>