This commit is contained in:
zoujiandong
2025-05-29 17:01:07 +08:00
parent 1ee5968dfe
commit 6684bf1e29
23 changed files with 2834 additions and 39 deletions
+654
View File
@@ -0,0 +1,654 @@
<template>
<div class="upage">
<backNav :navName="'发病例交流帖'"></backNav>
<view class="form">
<view class="textbox">
<up--textarea
autoHeight
v-model="form.title"
placeholder="输入标题,可包含患者信息、主诉"
></up--textarea>
</view>
<view class="row">
<view class="left"> 病例信息 </view>
<view class="right">
<u-icon name="trash" color="#6B7280" size="18"></u-icon>
清除模板
</view>
</view>
<view class="textcon">
<view class="textcell">
<view class="title">患者信息</view>
<view class="iptbox">
<up--textarea
maxlength="-1"
autoHeight
v-model="form.title"
placeholder="请输入患者信息"
></up--textarea>
</view>
</view>
<view class="textcell">
<view class="title">主诉</view>
<view class="iptbox">
<up--textarea
maxlength="-1"
autoHeight
v-model="form.title"
placeholder="请输入主诉"
></up--textarea>
</view>
</view>
<view class="textcell">
<view class="title">现病史及既往史</view>
<view class="iptbox">
<up--textarea
maxlength="-1"
autoHeight
v-model="form.title"
placeholder="请输入现病史及既往史"
></up--textarea>
</view>
</view>
<view class="textcell">
<view class="title">检查</view>
<view class="iptbox">
<up--textarea
maxlength="-1"
autoHeight
v-model="form.title"
placeholder="请输入检查内容"
></up--textarea>
</view>
</view>
<view class="textcell">
<view class="title">临床诊断</view>
<view class="iptbox">
<up--textarea
maxlength="-1"
autoHeight
v-model="form.title"
placeholder="请输入临床诊断"
></up--textarea>
</view>
</view>
<view class="textcell">
<view class="title">治疗经过及结果</view>
<view class="iptbox">
<up--textarea
maxlength="-1"
autoHeight
v-model="form.title"
placeholder="请输入治疗经过及结果"
></up--textarea>
</view>
</view>
</view>
<view class="textcon">
<view class="row">
<view class="left">
总结与讨论 <text class="tip">(可不填)</text>
</view>
</view>
<view class="textcell">
<view class="iptbox">
<up--textarea
maxlength="-1"
autoHeight
v-model="form.title"
placeholder="分享经验和心得,如:诊断与鉴别诊断易错点,治疗过程难点,病例的相关知识总结及讨论等"
></up--textarea>
</view>
</view>
</view>
<view class="textcon">
<view class="sickbox">
<view class="sick">
治疗经过及结果
<view class="del">
<up-icon name="close-circle" color="#3CC7C0" size="20"></up-icon>
</view>
</view>
<view class="add">
<up-icon name="plus" color="#3CC7C0" size="16"></up-icon>
添加疾病
</view>
</view>
<view class="toolbox">
<view class="cell">
<up--image
:src="photoImg"
class="headImg"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加图片</view>
</view>
<view class="cell">
<up--image
:src="videoImg"
class="headImg"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加视频</view>
</view>
<view class="cell">
<up--image
:src="addImg"
class="headImg"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加小标题</view>
</view>
</view>
</view>
</view>
<view class="bottom">
<view class="left">
<view class="draft">存草稿</view>
<view class="vote">
投票
<up--image
:src="voteImg"
class="headImg"
width="47rpx"
height="47rpx"
></up--image>
</view>
</view>
<view class="right">发布</view>
</view>
<up-popup
:round="10"
:show="showVote"
mode="bottom"
@close="closeVote"
@open="openVote"
>
<view class="votepop">
<view class="titlebox">
<view class="left" @click="closeVote">取消</view>
<view class="right" @click="closeVote">保存</view>
</view>
<view class="votecon">
<view class="titlebox">
<view class="title">投票标题</view>
<view class="desc">(最多20字)</view>
</view>
<view class="row first">
<up-input
placeholder="请输入投票标题"
border="surround"
v-model="value"
clearable
></up-input>
</view>
<view class="row">
<up-input
placeholder="输入选项,建议少于16个字"
border="surround"
v-model="value"
clearable
></up-input>
</view>
<view class="row">
<up-input
placeholder="输入选项,建议少于16个字"
border="surround"
v-model="value"
clearable
></up-input>
</view>
<view class="row">
<up-input
placeholder="输入选项,建议少于16个字"
border="surround"
v-model="value"
clearable
></up-input>
</view>
<view class="add">
<up-icon name="plus" color="#4B5563" size="18"></up-icon>
<view class="desc">添加选项</view>
</view>
<view class="expire">
<view class="name">有效期</view>
<view class="right">
<view class="minus">-</view>
<view class="day">7</view>
<view class="plus">+</view>
</view>
</view>
<view class="tips">友情提醒为保证投票结果准确性帖子发布后投票无法修改</view>
</view>
<view class="confirm">确认</view>
<view class="del">删除投票</view>
</view>
</up-popup>
<up-popup
:round="10"
zIndex="999999"
:show="showDraft"
mode="bottom"
@close="closeDraft"
@open="openDraft"
>
<view class="draftpop">
<view class="titlebox">草稿箱
<view class="close" @click="closeDraft"><up-icon name="close" color="#4B5563" size="20"></up-icon></view>
</view>
<view class="draftlist">
<view class="cell">
<view class="title">2025: 肝硬化门静脉高压症食管胃底静脉曲张破裂出血诊治专家共识</view>
<view class="smalltitle">版2025 APASL临床实践指南</view>
<view class="deal">
<view class="time">编辑于03-11</view>
<view class="right">
<view class="del"><up-icon name="trash" color="#4B5563" size="16"></up-icon>删除</view>
<view class="edit"><up-icon name="edit-pen" color="#fff" size="17"></up-icon>编辑</view>
</view>
</view>
</view>
</view>
</view>
</up-popup>
</div>
</template>
<script setup>
import { reactive, ref } from "vue";
import backNav from "@/components/backNav/backNav";
import photoImg from "@/static/photo.png";
import addImg from "@/static/add.png";
import videoImg from "@/static/videoicon.png";
import voteImg from "@/static/vote.png";
const form = reactive({
title: "",
});
const value = ref("");
const showVote = ref(false);
const showDraft = ref(true);
const closeVote = () => {
showVote.value = false;
};
const openVote = () => {
showVote.value = true;
};
const closeDraft = () => {
showDraft.value = false;
};
const openDraft = () => {
showDraft.value = true;
};
</script>
<style lang='scss' scoped>
.draftpop{
.titlebox{
text-align: center;
padding: 30rpx;
font-size: 31rpx;
color: #111827;
position: relative;
.close{
position: absolute;
top:20rpx;
right:30rpx;
}
}
.draftlist{
height:calc(100vh - 500rpx);
overflow-y: scroll;
.cell{
padding-bottom: 34rpx;
border-bottom:2rpx solid #E5E7EB;
.title{
margin:15rpx 30rpx 0;
font-size: 36rpx;
color: #111827;
line-height: 46rpx;
}
.smalltitle{
margin:4px 30rpx 0;
font-size: 30rpx;
color: #666666;
line-height: 38rpx;
}
.deal{
margin:36rpx 30rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
.time{
font-size: 26rpx;
color: #9CA3AF;
}
.right{
display: flex;
align-items: center;
}
.del{
width: 138rpx;
height: 62rpx;
background: #F3F4F6;
display: flex;
border-radius: 20rpx;
align-items: center;
font-size: 27rpx;
color: #4B5563;
justify-content: center;
}
.edit{
margin-left: 23rpx;
display: flex;
align-items: center;
justify-content: center;
width: 192rpx;
height: 62rpx;
font-size: 27rpx;
color: #FFFFFF;
background: #3CC7C0;
border-radius: 20rpx;
}
}
}
}
}
.expire{
margin-top: 46rpx;
padding: 0 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.name{
font-size: 31rpx;
color: #111827;
}
.right{
display: flex;
align-items: center;
.day{
min-width:50rpx;
text-align: center;
}
.minus{
width: 62rpx;
height: 62rpx;
display: flex;
align-items: center;
justify-content: center;
background: #F5F5F5;
border-radius: 50%;
font-size: 50rpx;
}
.plus{
display: flex;
align-items: center;
font-size:50rpx;
justify-content: center;
width: 62rpx;
height: 62rpx;
background: #F5F5F5;
border-radius: 50%;
}
}
}
.row{
padding: 0 30rpx;
margin-bottom: 23rpx;
:deep(.u-input){
background: #F5F5F5;
}
:deep(.u-input--radius){
border-radius: 15rpx;
}
:deep(.u-input__content__field-wrapper__field){
height:92rpx;
}
}
.first{
margin-bottom: 47rpx;
}
.votepop {
.confirm{
margin:39rpx 30rpx 0;
height: 92rpx;
background: #3CC7C0;
border-radius: 15rpx;
display: flex;
align-items: center;
font-size: 31rpx;
color: #FFFFFF;
justify-content: center;
}
.del{
margin:30rpx 30rpx 30rpx;
height: 92rpx;
background: #fff;
border-radius: 15rpx;
font-size: 31rpx;
color: #666666;
display: flex;
align-items: center;
justify-content: center;
}
.tips{
margin-top: 30rpx;
font-size: 27rpx;
color: #9CA3AF;
line-height: 38rpx;
padding:0 30rpx;
}
.add{
margin:0 30rpx;
display: flex;
align-items: center;
height: 92rpx;
justify-content: center;
background: #F5F5F5;
border-radius: 15rpx;
font-size: 31rpx;
color: #4B5563;
.desc{
margin-left: 10rpx;
}
}
.titlebox {
padding: 0 30rpx;
height: 86rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #f3f4f6;
.left {
font-size: 31rpx;
color: #4b5563;
}
.right {
font-size: 31rpx;
color: #3cc7c0;
}
}
.votecon {
max-height:calc(100vh - 530rpx);
overflow-y: scroll;
.titlebox {
border: none;
margin: 30rpx 0 20rpx;
.title {
font-size: 31rpx;
color: #111827;
}
.desc {
font-size: 27rpx;
color: #9ca3af;
}
}
}
}
.upage {
display: flex;
flex-direction: column;
height: 100vh;
}
.bottom {
position: fixed;
bottom: 0;
border-top: 2rpx solid #e5e7eb;
width: 100%;
align-items: center;
z-index: 3;
height: 133rpx;
background: #ffffff;
display: flex;
.right {
margin-right: 30rpx;
flex: 1;
margin-left: 32rpx;
height: 86rpx;
background: #3cc7c0;
border-radius: 23rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 31rpx;
color: #ffffff;
}
.left {
margin-left: 30rpx;
display: flex;
.draft {
width: 162rpx;
height: 86rpx;
background: rgba(0, 0, 0, 0);
border-radius: 16rpx;
border: 2rpx solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
}
.vote {
margin-left: 25rpx;
width: 162rpx;
height: 86rpx;
background: rgba(0, 0, 0, 0);
border-radius: 16rpx;
border: 2rpx solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.form {
height: calc(100vh - 133rpx);
margin: -20rpx 0rpx 134rpx;
overflow-y: scroll;
:deep(.u-image) {
background: transparent !important;
}
.toolbox {
padding: 22rpx 30rpx;
display: flex;
align-items: center;
.cell {
margin-right: 20rpx;
display: flex;
align-items: center;
.name {
font-size: 25rpx;
margin-left: 4rpx;
color: #4b5563;
}
}
}
.sickbox {
display: flex;
padding: 25rpx 25rpx 0;
}
.add {
display: flex;
font-size: 26rpx;
justify-content: center;
align-items: center;
color: #3cc7c0;
margin-left: 18rpx;
}
.sick {
position: relative;
padding: 0 60rpx 0 30rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
background: #f9f9f9;
border-radius: 40rpx;
font-size: 25rpx;
color: #3cc7c0;
.del {
position: absolute;
right: 12rpx;
}
}
.textcon {
border-bottom: 2rpx solid #f3f4f6;
}
.textbox {
padding: 0 30rpx;
border-bottom: 2rpx solid #f3f4f6;
:deep(.u-textarea__field) {
min-height: 55rpx !important;
}
}
.textcell {
padding: 0 30rpx;
margin-top: 25rpx;
}
.row {
padding: 30rpx 30rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
.left {
font-size: 38rpx;
color: #000000;
.tip {
color: #9ca3af;
font-size: 32rpx;
}
}
.right {
display: flex;
align-items: center;
color: #6b7280;
font-size: 31rpx;
}
}
}
</style>