769 lines
19 KiB
Vue
769 lines
19 KiB
Vue
<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">
|
||
<u-upload
|
||
:fileList="imgList"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
name="imgupload"
|
||
multiple
|
||
:maxCount="1"
|
||
width="32rpx"
|
||
height="32rpx"
|
||
>
|
||
<view class="cell">
|
||
<up--image
|
||
:src="photoImg"
|
||
class="headImg"
|
||
width="32rpx"
|
||
height="32rpx"
|
||
></up--image>
|
||
<view class="name">添加图片</view>
|
||
</view>
|
||
</u-upload>
|
||
</view>
|
||
<view class="cell">
|
||
<u-upload
|
||
:fileList="videoList"
|
||
@afterRead="afterRead"
|
||
accept="video"
|
||
name="videoupload"
|
||
multiple
|
||
maxDuration="3600"
|
||
:maxCount="1"
|
||
width="32rpx"
|
||
height="32rpx"
|
||
>
|
||
<view class="cell">
|
||
<up--image
|
||
:src="videoImg"
|
||
class="headImg"
|
||
width="32rpx"
|
||
height="32rpx"
|
||
></up--image>
|
||
<view class="name">添加视频</view>
|
||
</view>
|
||
</u-upload>
|
||
</view>
|
||
<view class="cell">
|
||
<up--image
|
||
:src="addImg"
|
||
class="headImg"
|
||
width="32rpx"
|
||
height="32rpx"
|
||
></up--image>
|
||
<view class="name">添加小标题</view>
|
||
</view>
|
||
</view>
|
||
<view class="imgbox">
|
||
<view class="imgunit">
|
||
<up--image
|
||
src="https://cdn.uviewui.com/uview/album/1.jpg"
|
||
radius="6"
|
||
width="150rpx"
|
||
height="150rpx"
|
||
@click="previewImg"
|
||
></up--image>
|
||
<view class="close">
|
||
<up-icon name="close-circle" color="#666" size="18"></up-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="imgbox">
|
||
<view class="close">
|
||
<up-icon name="close-circle" color="red" size="30"></up-icon>
|
||
</view>
|
||
<video
|
||
class="myVideo"
|
||
src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||
@error="videoErrorCallback"
|
||
controls
|
||
></video>
|
||
</view>
|
||
<view class="textcell" v-if="showMinTitle">
|
||
<view class="titlebox">
|
||
<view class="title">小标题：</view>
|
||
<up-icon name="trash" color="#3CC7C0" size="24" @click="delTitle"></up-icon>
|
||
</view>
|
||
<view class="iptbox">
|
||
<up--textarea
|
||
maxlength="-1"
|
||
autoHeight
|
||
v-model="form.title"
|
||
placeholder="请输入小标题"
|
||
></up--textarea>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="imgbox">
|
||
<view class="imgcell">
|
||
<up--image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></up--image>
|
||
</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 showMinTitle = ref(false);
|
||
const closeVote = () => {
|
||
showVote.value = false;
|
||
};
|
||
const openVote = () => {
|
||
showVote.value = true;
|
||
};
|
||
const closeDraft = () => {
|
||
showDraft.value = false;
|
||
};
|
||
const delTitle = () => {
|
||
showMinTitle.value = false;
|
||
};
|
||
const openDraft = () => {
|
||
showDraft.value = true;
|
||
};
|
||
const afterRead=(file) => {
|
||
}
|
||
const previewImg = () => {
|
||
uni.previewImage({
|
||
current: "https://example.com/image1.jpg",
|
||
urls: ["https://example.com/image1.jpg", "https://example.com/image2.jpg"],
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.myVideo {
|
||
width: 100%;
|
||
border-radius: 15rpx;
|
||
}
|
||
.imgbox {
|
||
margin: 0 30rpx 30rpx;
|
||
position: relative;
|
||
.close {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 0;
|
||
z-index: 9999;
|
||
}
|
||
.imgunit {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
position: relative;
|
||
.close {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
.titlebox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.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> |