This commit is contained in:
花有清香月有阴
2022-01-10 18:00:59 +08:00
3 changed files with 154 additions and 281 deletions

View File

@@ -62,7 +62,7 @@ export default {
}, },
toUser() { toUser() {
uni.navigateTo({url: './UserInfo'}) uni.navigateTo({url: './ErrorDetail'})
} }
}, },
} }

View File

@@ -1,61 +1,43 @@
<template> <template>
<div class="ErrorDetail"> <div class="ErrorDetail">
<div class="top"> <div class="header">
<div class="items"> <div class="name">李维民<span>15220171897</span><img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone('112')" class="phone-icon" ></div>
<div class="names">李维民</div> <p>身份证号</p>
<div class="callPhones" @click="callPhone"> <p class="mar-b8" style="color:#333;">4223241900****0014</p>
<div class="phones">15220171897</div> <p>异常情况</p>
<img src="./components/img/phone2@.png" alt="" /> <p style="color:#FF4466;">体温38有咳嗽 , 未去高风险区域</p>
</div> </div>
<div class="info">
<div class="title">异常情况记录</div>
<div class="error-list">
<div class="item">
<p>于2022年1月7日早上10:00自测体温38家人也有咳嗽情况初步诊断为上呼吸道感染</p>
<div>2021-12-06 13:23<span>网格员: 李依云</span></div>
</div> </div>
<div class="item">
<div class="card"> <p>于2022年1月7日早上10:00自测体温38家人也有咳嗽情况初步诊断为上呼吸道感染</p>
<div class="typeName">身份证号</div> <div>2021-12-06 13:23<span>网格员: 李依云</span></div>
<div class="idCard">4223241900****0014</div> </div>
<div class="typeName1">异常情况</div> <div class="item">
<p>于2022年1月7日早上10:00自测体温38家人也有咳嗽情况初步诊断为上呼吸道感染</p>
<div class="det"> <div>2021-12-06 13:23<span>网格员: 李依云</span></div>
<div class="detail">2020-01-13体温38有咳嗽 , 未去高风险区域</div>
<div class="detail">2020-01-13诊断为流感自测38.5伴随咳嗽</div>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-line"></div>
<div class="middle" :class="data.length ? '' : 'middle1'"> <div class="footer">
<div class="record">异常情况记录</div> <div class="add" @click="show=true">新增记录</div>
<div class="confirm">解除异常</div>
<template class="templates" v-if="data.length">
<div class="templatess" v-for="(item, index) in 13" :key="index">
<div class="cont">于2022年1月7日早上10:00自测体温38家人也有咳嗽情况初步诊断为上呼吸道感染</div>
<div class="bottom">
<div class="time">2021-12-06 13:23</div>
<div class="gard">
<span>网格员:</span>
<span class="gardName">李依云</span>
</div> </div>
<u-popup v-model="show" mode="bottom">
<div class="textarea">
<u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="异常情况记录" :clearable="false" />
<p>字数0/1000</p>
</div> </div>
<div class="btn">
<span>清空内容</span>
<span class="confirm">保存</span>
</div> </div>
</template>
<AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
</div>
<div class="fixed">
<div class="addRecord" @click="addShow = true">新增记录</div>
<div class="relieveErr" @click="relieveError">解除异常</div>
</div>
<u-popup v-model="addShow" height="auto" mode="bottom" @close="close">
<scroll-view scroll-y="true" style="height: 180px" class="comments-wrapper">
<u-input v-model="content" placeholder="异常情况记录" type="textarea" auto-height height="150" :clearable="false" maxlength="1000"> </u-input>
<div class="words">字数{{ content.length }}/1000</div>
<div class="bottombtn">
<div class="emptys" @click="content = ''">清空内容</div>
<div class="publishs" @click="save">保存</div>
</div>
</scroll-view>
</u-popup> </u-popup>
</div> </div>
</template> </template>
@@ -64,252 +46,160 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
name: 'ErrorDetail',
components: {}, components: {},
props: {}, props: {},
data() { data() {
return { return {
data: [], show: false,
addShow: false, value: ''
content: '',
flag: false,
} }
}, },
computed: { methods: {},
...mapState(['user']),
},
watch: {},
onLoad() {},
onShow() {},
methods: {
save() {
if (this.flag) return
if (!this.content) {
return this.$u.toast('请输入异常情况记录')
}
this.$http
.post(`/app/appvillagediscussmessage/addOrUpdate`, {
// content: this.content,
// avatar: this.user.avatar,
// createUserId: this.user.id,
// createUserName: this.user.name,
// discussId: this.id,
})
.then((res) => {
if (res?.code == 0) {
this.$u.toast('新增记录成功')
this.flag = false
this.content = ''
this.addShow = false
// this.getDetail()
}
})
},
relieveError() {},
close() {
this.content = ''
},
toAddRecord() {
uni.navigateTo({
url: `./AddRecord`,
})
},
relieveError() {},
callPhone(phone) {
uni.makePhoneCall({ phoneNumber: phone })
},
previewImage(images, img) {
uni.previewImage({
urls: images.map((v) => v.url),
current: img,
})
},
},
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.ErrorDetail { .ErrorDetail {
background: #f3f6f9; height: 100%;
padding-bottom: 142px; .header{
padding: 32px 48px;
.top { box-sizing: border-box;
padding: 32px 52px 40px 48px; background-color: #fff;
background: #fff; margin-bottom: 24px;
.items { .name{
display: flex;
align-items: center;
.names {
font-size: 36px; font-size: 36px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333;
} line-height: 50px;
.callPhones { margin-bottom: 16px;
display: flex; span{
align-items: center;
.phones {
font-size: 32px; font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #4181ff; color: #4181FF;
margin-left: 60px; line-height: 44px;
margin: 0 20px 0 32px;
} }
img { img{
width: 64px; width: 32px;
height: 64px; height: 32px;
margin-left: 20px; vertical-align: middle;
} }
} }
} p{
.card {
margin-top: 16px;
.typeName {
font-size: 30px; font-size: 30px;
color: #999999; font-family: PingFangSC-Regular, PingFang SC;
} color: #999;
.idCard {
font-size: 30px;
color: #333333;
height: 42px;
line-height: 42px; line-height: 42px;
color: #999;
} }
.typeName1 { .mar-b8{
margin-top: 8px; margin-bottom: 8px;
font-size: 30px;
color: #999999;
} }
} }
.info{
.det { padding: 0 32px 32px;
.detail { background-color: #fff;
font-size: 30px; .title{
color: #333333; font-size: 38px;
height: 42px; font-family: PingFangSC-Semibold, PingFang SC;
line-height: 42px; font-weight: 600;
color: #333;
line-height: 116px;
} }
.detail:last-child { .error-list{
margin-top: 16px; .item{
} width: 100%;
} background: #F4F7FE;
}
.middle {
margin-top: 24px;
padding-bottom: 48px;
background: #fff;
.record {
padding: 32px 32px;
}
.templatess {
padding: 24px 24px 18px 24px;
background: #f4f7fe;
border-radius: 8px; border-radius: 8px;
margin: 0 32px 16px 32px; padding: 24px 24px 18px 24px;
.cont { box-sizing: border-box;
margin-bottom: 16px;
p{
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #343D65;
line-height: 40px;
word-break: break-all;
margin-bottom: 12px;
} }
.bottom { div{
display: flex;
margin-top: 12px;
.time {
font-size: 24px; font-size: 24px;
color: #666666; font-family: PingFangSC-Regular, PingFang SC;
} color: #666;
.gard { line-height: 34px;
font-size: 24px; span{
color: #666666; display: inline-block;
margin-left: 32px; margin-left: 32px;
.gardName {
display: inline;
margin-left: 12px;
} }
} }
} }
} }
.emptyWrap {
background: #f3f6f9;
margin-top: 0;
} }
} .footer{
.middle1 {
padding-bottom: 0;
}
.fixed {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0;
width: 100%; width: 100%;
box-sizing: border-box; height: 112px;
display: flex; line-height: 112px;
text-align: center;
.addRecord {
width: 40%;
padding: 32px 0;
font-size: 36px;
color: #333333;
background: #fff; background: #fff;
} display: flex;
.relieveErr {
width: 60%;
padding: 32px 0;
background: #1365dd;
font-size: 36px; font-size: 36px;
font-weight: 500; font-family: PingFangSC-Regular, PingFang SC;
color: #ffffff; .add{
flex: 1;
color: #333;
}
.confirm{
flex: 2;
color: #fff;
background: #1365DD;
}
div{
text-align: center;
} }
} }
.bg-line{
.comments-wrapper { width: 100%;
padding: 20px 0; height: 130px;
.u-input {
background: #f7f7f7;
border-radius: 8px 8px 0 0;
padding: 10px !important;
margin: 0 30px 0 30px;
.uni-textarea-placeholder {
padding: 16px 0 0 16px;
} }
.uni-textarea-textarea { .textarea{
padding: 16px 0 0 16px; margin: 32px 32px 24px;
} width: calc(100% - 64px);
} padding: 16px;
.words { box-sizing: border-box;
background: #f7f7f7; background: #F7F7F7;
border-radius: 0 0 8px 8px; border-radius: 8px;
margin: 0 30px; p{
padding: 10px;
text-align: right;
font-size: 26px; font-size: 26px;
color: #999999; font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 36px;
text-align: right;
} }
.bottombtn { }
.btn{
padding: 0 32px 24px;
height: 64px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; span{
margin: 0 30px; display: inline-block;
padding: 20px 0 0;
.emptys {
font-size: 26px;
color: #666666;
}
.publishs {
width: 144px;
height: 64px;
line-height: 64px; line-height: 64px;
text-align: center; font-size: 26px;
background: #1365dd; font-family: PingFangSC-Regular, PingFang SC;
border-radius: 32px; color: #666;
color: #fff;
} }
.confirm{
width: 144px;
text-align: center;
background: #1365DD;
border-radius: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #FFF;
} }
} }
} }

View File

@@ -81,24 +81,7 @@ export default {
data() { data() {
return {} return {}
}, },
computed: { methods: {},
...mapState(['user']),
},
watch: {},
onLoad() {},
onShow() {},
methods: {
callPhone(phone) {
uni.makePhoneCall({ phoneNumber: phone })
},
previewImage(images, img) {
uni.previewImage({
urls: images.map((v) => v.url),
current: img,
})
},
},
} }
</script> </script>