640 lines
16 KiB
Vue
640 lines
16 KiB
Vue
<template>
|
||
<div class="AppHealthUp">
|
||
<AiTopFixed>
|
||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" @change="change"
|
||
:bar-width="48" :bar-height="4" active-color="#fff" bg-color="#3975C6" inactive-color="#CDDCF0"></u-tabs>
|
||
</AiTopFixed>
|
||
<div v-if="currentTabs != 1">
|
||
<div v-if="!isUpload">
|
||
<div class="form-item__group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>姓名</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<AiOpenData v-if="user.wxUserId" type="userName" :openid="user.wxUserId" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item__group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>当前体温</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<input
|
||
placeholder="请输入"
|
||
v-model="form.temperature"
|
||
:maxlength="20"
|
||
/>
|
||
<i>℃</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item form-item__imgs">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>14天内是否接触新冠确诊或疑似患者</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<AiRadio
|
||
style="width: 100%"
|
||
v-model="form.touchInFourteen"
|
||
dict="epidemicTouchInFourteen"
|
||
></AiRadio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item form-item__imgs">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<i>*</i>
|
||
<h2>当前健康状况（可多选）</h2>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<AiCheckbox
|
||
style="width: 100%"
|
||
v-model="form.health"
|
||
dict="epidemicRecentHealth"
|
||
></AiCheckbox>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pad-b112" v-if="!isUpload && currentTabs != 1"></div>
|
||
</div>
|
||
<AiEmpty v-else :noPermit="true" description="今日已上报"></AiEmpty>
|
||
</div>
|
||
<div v-else>
|
||
<div class="form-item__group">
|
||
<div class="group_title">基本信息</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<span class="label">姓名</span>
|
||
</div>
|
||
<div class="form-item__right"><AiOpenData v-if="user.wxUserId" type="userName" :openid="user.wxUserId" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="time-content">
|
||
<div class="title">上报记录<span>({{month}}月)</span></div>
|
||
<div class="time">
|
||
<div class="week-list">
|
||
<span v-for="(item, index) in weekList" :key="index">{{item}}</span>
|
||
</div>
|
||
<div class="day-list">
|
||
<div v-for="(item, index) in dayList" :key="index" class="item" :class="selectDay == item.day ? 'active' : ''" @click="dayClick(item)">
|
||
<div class="num">{{item.day}}</div>
|
||
<span class="status" :class="'bg-'+item.status" v-if="item.day"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item__group" v-if="healthInfo.id">
|
||
<div class="group_title">健康状况</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<span class="label">当前体温</span>
|
||
</div>
|
||
<div class="form-item__right" :style="healthInfo.temperature >= 37.3 ? 'color:#f46;' : ''">{{healthInfo.temperature}}℃</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<span class="label" style="width:190px;">14天内是否接触新冠确诊或疑似患者</span>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<div class="value" :class="'color-'+healthInfo.touchInFourteen">{{$dict.getLabel('epidemicTouchInFourteen', healthInfo.touchInFourteen)}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="form-item__title">
|
||
<span class="label">当前健康状况</span>
|
||
</div>
|
||
<div class="form-item__right">
|
||
<span>
|
||
<span v-for="(item, index) in healthInfo.health" :key="index" :style="item != 0 ? 'color:#FF4466;' : ''"><span v-if="index>0" :style="item != 0 ? 'color:#FF4466;' : ''">;</span>{{$dict.getLabel('epidemicRecentHealth', item)}}</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pad-b112" v-if="currentTabs == 1 && isAdmin"></div>
|
||
</div>
|
||
|
||
<div class="add-btn" v-if="!isUpload && currentTabs != 1" @click="submit">
|
||
<div>提交</div>
|
||
</div>
|
||
<div class="add-btn" v-if="currentTabs == 1 && isAdmin" @click="toOther">
|
||
<div>查看其他成员</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
|
||
export default {
|
||
name: 'AppHealthUp',
|
||
appName: '健康上报',
|
||
data() {
|
||
return {
|
||
tabList: [{ name: '健康上报'},{ name: '上报统计'}],
|
||
currentTabs: 0,
|
||
form: {temperature: '', touchInFourteen: '', health: []},
|
||
isUpload: true,
|
||
weekList: ['一', '二', '三', '四', '五', '六', '日'],
|
||
dayList: [],
|
||
month: '',
|
||
selectDay: '',
|
||
healthInfo: {},
|
||
isAdmin: false, //是否网格长
|
||
girdMemberId: '',
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
},
|
||
onLoad() {
|
||
this.$dict.load('epidemicTouchInFourteen', 'epidemicRecentHealth')
|
||
let date = new Date();
|
||
this.selectDay = date.getDate()
|
||
this.month = date.getMonth() + 1
|
||
this.getStatis()
|
||
this.getCheckTodayReport()
|
||
this.isGirdUser()
|
||
},
|
||
onShow() {
|
||
document.title = '健康上报'
|
||
},
|
||
methods: {
|
||
dayClick(item) {
|
||
this.healthInfo = {}
|
||
this.selectDay = item.day
|
||
if(!item.id) {
|
||
return this.$u.toast("当日未上报");
|
||
}
|
||
this.$http.post(`/app/appepidemichealthreport/queryDetailById?id=${item.id}`).then((res) => {
|
||
if (res.code == 0) {
|
||
this.healthInfo = res.data
|
||
this.healthInfo.health = res.data.health.split(',')
|
||
}
|
||
})
|
||
},
|
||
submit() {
|
||
if (!this.form.temperature) {
|
||
return this.$u.toast("请输入当前体温");
|
||
}
|
||
if (!this.form.touchInFourteen) {
|
||
return this.$u.toast("请选择14天内是否接触新冠确诊或疑似患者");
|
||
}
|
||
if (!this.form.health.length) {
|
||
return this.$u.toast("请选择当前健康状况");
|
||
}
|
||
this.$http.post(`/app/appepidemichealthreport/addOrUpdate`, {
|
||
...this.form,
|
||
health: this.form.health.join(',')
|
||
}).then((res) => {
|
||
if (res.code == 0) {
|
||
this.getCheckTodayReport()
|
||
this.getStatis()
|
||
uni.navigateTo({url: './Success?status=1'})
|
||
}
|
||
}).catch(() => {
|
||
uni.navigateTo({url: './Success?status=0'})
|
||
})
|
||
},
|
||
getCheckTodayReport() {
|
||
this.$http.post(`/app/appepidemichealthreport/checkTodayReport`).then((res) => {
|
||
if (res?.data) {
|
||
this.isUpload = res.data
|
||
}
|
||
})
|
||
},
|
||
getStatis() {
|
||
this.dayList = []
|
||
this.$http.post(`/app/appepidemichealthreport/statistic`).then((res) => {
|
||
if (res?.data) {
|
||
Object.keys(res.data).forEach((key) => {
|
||
var info = {
|
||
week: res.data[key].week,
|
||
day: key,
|
||
status: res.data[key].status || '2',
|
||
id: res.data[key].id || '',
|
||
}
|
||
this.dayList.push(info)
|
||
})
|
||
var week = Number(this.dayList[0].week) - 1
|
||
if(week > 0) {
|
||
for(var i= 0; i<week; i++){
|
||
var info = {
|
||
id: '',
|
||
}
|
||
this.dayList.unshift(info)
|
||
}
|
||
}
|
||
this.dayList.map((item) => {
|
||
if(item.day == this.selectDay && item.id) {
|
||
this.dayClick(item)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
change(index) {
|
||
this.currentTabs = index
|
||
},
|
||
toOther() {
|
||
uni.navigateTo({ url: `./OtherUser?girdMemberId=${this.girdMemberId}`})
|
||
},
|
||
isGirdUser() {
|
||
this.isAdmin = false
|
||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||
if (res.code == 0) {
|
||
if (res.data.checkType == 2) {
|
||
this.isAdmin = true
|
||
this.girdMemberId = res.data.girdMemberId
|
||
}
|
||
}
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
uni-page-body {
|
||
height: 100%;
|
||
}
|
||
.AppHealthUp {
|
||
|
||
.emptyWrap {
|
||
margin: 0;
|
||
}
|
||
::v-deep .emptyText{
|
||
text-align: center;
|
||
}
|
||
.add-btn{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
width: 100%;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
background: #3975C6;
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFF;
|
||
div{
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
::v-deep .u-tab-bar{
|
||
bottom: 14px;
|
||
}
|
||
|
||
.form-item__group {
|
||
margin-bottom: 24px;
|
||
background: #fff;
|
||
}
|
||
|
||
.form-item {
|
||
padding-left: 32px;
|
||
|
||
.form-item__checkbox {
|
||
width: 100%;
|
||
div {
|
||
width: 100%;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
margin-bottom: 24px;
|
||
text-align: center;
|
||
background: #ffffff;
|
||
border-radius: 16px;
|
||
color: #333333;
|
||
font-size: 28px;
|
||
border: 1px solid #cccccc;
|
||
|
||
&.active {
|
||
background: #4181ff;
|
||
color: #fff;
|
||
border-color: #4181ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-item__radio {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
div {
|
||
width: 212px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
margin-right: 16px;
|
||
margin-bottom: 8px;
|
||
text-align: center;
|
||
background: #ffffff;
|
||
border-radius: 16px;
|
||
color: #333333;
|
||
font-size: 28px;
|
||
border: 1px solid #cccccc;
|
||
|
||
&:nth-of-type(3n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&.active {
|
||
background: #4181ff;
|
||
color: #fff;
|
||
border-color: #4181ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ai-area__wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 100px;
|
||
|
||
span {
|
||
color: #333;
|
||
font-size: 30px;
|
||
}
|
||
|
||
i {
|
||
color: #999;
|
||
font-size: 30px;
|
||
}
|
||
|
||
image {
|
||
width: 16px;
|
||
height: 8px;
|
||
}
|
||
}
|
||
|
||
.form-item__wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 40px 28px 40px 0;
|
||
border-bottom: 1px solid #dddddd;
|
||
|
||
input {
|
||
flex: 1;
|
||
height: 100%;
|
||
text-align: right;
|
||
color: #333;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.form-item__right {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 32px;
|
||
|
||
.select {
|
||
._i {
|
||
padding-left: 100px;
|
||
}
|
||
}
|
||
|
||
span {
|
||
max-width: 400px;
|
||
margin-right: 8px;
|
||
color: #333333;
|
||
word-break: break-all;
|
||
}
|
||
|
||
i {
|
||
margin-right: 8px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:last-child {
|
||
.form-item__wrapper {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.form-item__title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
i {
|
||
font-size: 32px;
|
||
color: #ff4466;
|
||
}
|
||
|
||
span {
|
||
font-size: 28px;
|
||
color: #999999;
|
||
}
|
||
|
||
h2 {
|
||
padding: 0 4px;
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
&.form-item__imgs,
|
||
&.form-item__textarea {
|
||
.form-item__wrapper {
|
||
display: block;
|
||
height: auto;
|
||
padding-bottom: 32px;
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
height: 90px;
|
||
}
|
||
|
||
.form-item__title {
|
||
padding: 32px 0;
|
||
}
|
||
|
||
.form-item__right {
|
||
padding-left: 18px;
|
||
}
|
||
}
|
||
}
|
||
.btn-wrapper {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: 0;
|
||
z-index: 11;
|
||
width: 100%;
|
||
padding: 20px 0 20px 0 !important;
|
||
transform: translateX(-50%);
|
||
background: #f3f6f9;
|
||
}
|
||
|
||
.btn-wrapper .btn {
|
||
width: 686px;
|
||
height: 88px;
|
||
line-height: 88px;
|
||
margin: 0 auto;
|
||
padding: 0 !important;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 34px;
|
||
background: #4181FF;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.btn-wrapper .disabled {
|
||
color: #B9E7D0;
|
||
background: #50C48A;
|
||
}
|
||
|
||
::v-deep .AiTopFixed {
|
||
.placeholder {
|
||
.content {
|
||
padding: 0 !important;
|
||
|
||
}
|
||
}
|
||
.fixed {
|
||
margin: 0 !important;
|
||
background-color: #f5f5f5!important;
|
||
.content {
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.label{
|
||
width: 280px;
|
||
font-size: 32px!important;
|
||
}
|
||
.group_title{
|
||
height: 116px;
|
||
line-height: 116px;
|
||
background: #FFF;
|
||
padding-left: 32px;
|
||
font-size: 38px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
.time-content{
|
||
width: 100%;
|
||
background-color: #fff;
|
||
.title{
|
||
line-height: 96px;
|
||
padding-left: 32px;
|
||
font-size: 36px;
|
||
font-family: PingFang-SC-Bold, PingFang-SC;
|
||
font-weight: bold;
|
||
color: #333;
|
||
span{
|
||
display: inline-block;
|
||
width: 100px;
|
||
text-align: center;
|
||
font-size: 26px;
|
||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||
color: #666;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
.time{
|
||
padding: 0 32px 32px;
|
||
background-color: #fff;
|
||
margin-bottom: 24px;
|
||
.week-list{
|
||
span{
|
||
display: inline-block;
|
||
width: 98px;
|
||
text-align: center;
|
||
padding: 32px 0;
|
||
font-size: 20px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #999;
|
||
}
|
||
}
|
||
.day-list{
|
||
.item{
|
||
display: inline-block;
|
||
width: 98px;
|
||
height: 98px;
|
||
text-align: center;
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333;
|
||
position: relative;
|
||
.num{
|
||
width: 80px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
}
|
||
.status{
|
||
position: absolute;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
top: 60px;
|
||
left: 50%;
|
||
margin-left: -4px;
|
||
}
|
||
.bg-2{
|
||
background: #999;
|
||
}
|
||
.bg-1{
|
||
background: #3B87F6;
|
||
}
|
||
.bg-0{
|
||
background: #f46;
|
||
}
|
||
}
|
||
.active{
|
||
.num{
|
||
background: #3B87F6;
|
||
color: #fff;
|
||
}
|
||
.status{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pad-b112{
|
||
padding-bottom: 112px;
|
||
}
|
||
.color-0{
|
||
color: #42D784;
|
||
}
|
||
.color-1{
|
||
color: #f46;
|
||
}
|
||
.color-2{
|
||
color: #f46;
|
||
}
|
||
}
|
||
</style>
|