case-data/pages/publish/publish.vue
2025-08-15 09:18:09 +08:00

2438 lines
59 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>
<up-toast ref="uToast"></up-toast>
<div class="upage">
<pEditor ref="pEditorRef" v-if="showEditor" :editorCotent="editorType=='info'?form.exchange_content:form.exchange_summary" :editorType="editorType" @closeEditor="closeEditor" @changeEditor="changeEditor"></pEditor>
<view class="navbox">
<view class="bg"></view>
<view class="namebox">
<view class="back" @click="alertSave">
<u-icon name="arrow-left" color="#000" size="24"></u-icon>
</view>
<!-- <view class="logo">logo</view> -->
<view class="name">{{exchange_id?"编辑病例交流帖":"发病例交流帖"}}</view>
</view>
</view>
<!-- <backNav :navName="'发病例交流帖'"></backNav> -->
<scroll-view class="form" :scroll-top="scrollTop" @scroll="scroll" ref="scrollView" id="form" scroll-y="true" style="padding-bottom:150rpx">
<view class="textbox">
<up--textarea
autoHeight
v-model="form.exchange_title"
placeholder="输入标题,可包含患者信息、主诉"
></up--textarea>
</view>
<view class="row">
<view class="left"> 病例信息 </view>
<!-- <view class="right" @click="clearMuBan">
<u-icon name="trash" color="#6B7280" size="18"></u-icon>
清除模板
</view> -->
</view>
<view class="textcon page-editor-container" id="editor" :style="{height:infoHeight+'px'}">
<view class="mask" @click="focusInfo"></view>
<view class="infoContent" id="infoContent">
<rich-text :nodes="fromatImg(infoHtml)"></rich-text>
</view>
<view class="editorcon" :class="{active:showInfoOpacity}" >
<sv-editor
placeholder="患者基本情况,检查结果,诊疗图片或视频"
eid="editor-id"
@ready="ready"
pasteMode="origin"
@input="changeInfoEditor"
readOnly="true"
@epaste="epaste"
></sv-editor>
</view>
<!-- <editor
id="editor"
placeholder="写点什么吧~~"
show-img-resize
show-img-toolbar
show-img-size
@ready="ready"
@focus="OnFocus"
@statuschange="statuschange"
></editor> -->
</view>
<view class="textcon" style="border: none;position: relative;z-index:1;" >
<view class="row">
<view class="left">
总结与讨论 <text class="tip">(可不填)</text>
</view>
</view>
<view class="textcell">
<view class="iptbox" id="editorRes" :style="{height:resultHeight+'px'}">
<view class="mask" @click="focusResult"></view>
<view class="resultContent" id="resultContent">
<rich-text :nodes="fromatImg(resultHtml)"></rich-text>
</view>
<view class="editorcon" :class="{active:showOpacity}">
<sv-editor
placeholder="分享经验和心得,如:诊断与鉴别诊断易错点,治疗过程难点,病例的相关知识总结及讨论等"
eid="editorResult"
@ready="readyResult"
@input="changeResEditor"
:readOnly="true"
></sv-editor>
</view>
</view>
</view>
</view>
<view class="textcon" style="border: none">
<view class="sickbox">
<view class="sick" v-for="(item,index) in labelList" :key="item.app_iden">
{{ item.label_name }}
<view class="del" @click="delLabel(index)">
<up-icon name="close-circle" color="#3CC7C0" size="20"></up-icon>
</view>
</view>
<view class="add" @click="openLabelPop">
<up-icon name="plus" color="#3CC7C0" size="16"></up-icon>
添加疾病
</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>
</scroll-view>
<view class="bottom" style="height:140rpx">
<!-- <view class="toolbox">
<view
class="cell"
@click="insertImage"
:class="{ active: !isFocusInfo && !isFocusResult }"
>
<up--image
:src="photoImg"
class="headImg"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加图片</view>
</view>
<view
class="cell"
@click="insertVideo"
:class="{ active: !isFocusInfo && !isFocusResult }"
>
<up--image
:src="videoImg"
class="headImg"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加视频</view>
</view>
<view
class="cell"
:class="{ active: !isFocusInfo }"
@click="alertTitle"
>
<up--image
:src="addImg"
class="headImg"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加小标题</view>
</view>
</view> -->
<view class="bottombtn">
<view class="left">
<view class="draft" @click="openDraftList" v-if="!exchange_id">草稿箱</view>
<view class="vote" :class="{active:form.case_exchange_vote.vote_title}" @click="alertVote">
投票
<up--image
v-if="form.case_exchange_vote.vote_title"
:src="voteOnImg"
class="headImg"
width="47rpx"
height="47rpx"
></up--image>
<up--image
v-else
:src="voteImg"
class="headImg"
width="47rpx"
height="47rpx"
></up--image>
</view>
</view>
<view class="right" @click="isConfirmPublish=true">发布</view>
</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="saveVote">保存</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="voteData.vote_title"
clearable
></up-input>
</view>
<view
class="row"
v-for="(item, index) in voteData.case_exchange_vote_option"
:key="index"
>
<up-input
placeholder="输入选项建议少于16个字"
border="surround"
v-model="item.option_value"
clearable
></up-input>
<view class="iconbox" @click="delOption(index)">
<u-icon name="minus-circle" color="red" size="28"></u-icon>
</view>
</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" @click="addOption">
<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" @click="changeDay('minus')">
<up-icon name="minus" color="#4B5563" size="30rpx" bold></up-icon>
</view>
<view class="day">{{ voteData.valid_day }}</view>
<view class="plus" @click="changeDay('plus')">
<up-icon name="plus" color="#4B5563" size="30rpx" bold></up-icon>
</view>
</view>
</view>
<view class="tips"
>友情提醒:为保证投票结果准确性,帖子发布后投票无法修改</view
>
</view>
<view class="confirm" @click="saveVote">确认</view>
<view class="del" @click="clearVote">删除投票</view>
</view>
</up-popup>
<up-popup
:round="10"
zIndex="9"
: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" v-if="draftList.length==0">
<div class="nodata">
<up-empty
marginTop="120rpx"
text="草稿箱为空"
mode="list"
:icon="draftImg"
>
</up-empty>
</div>
</view>
<view class="draftlist" v-if="draftList.length>0">
<view
class="cell"
v-for="(item, index) in draftList"
:key="item.draft_id"
>
<view class="title">{{
item.exchange_title ? item.exchange_title : "无标题"
}}</view>
<view class="row" v-if="item.exchange_content">
<view class="smalltitle">病例信息</view>
<view
class="con ellipsis-two-lines"
v-html="fromatImg(item.exchange_content)"
></view>
</view>
<view class="row" v-else-if="item.exchange_summary">
<view class="smalltitle"
>总结与讨论</view
>
<view
class="con ellipsis-two-lines"
v-if="item.exchange_summary"
v-html="fromatImg(item.exchange_summary)"
></view>
</view>
<view
class="sickbox"
v-else-if="item.exchange_label && item.exchange_label.length > 0"
>
<view class="smalltitle" v-if="item.exchange_summary"
>疾病标签</view
>
<view
class="sick"
v-for="cell in item.exchange_label"
:key="cell.label_name"
>{{ cell.label_name }}</view
>
</view>
<view class="row" v-else-if="item.exchange_vote">
<view class="smalltitle">投票</view>
<view class="con ellipsis-two-lines" v-if=" item.exchange_vote">{{
item.exchange_vote.vote_title
}}</view>
</view>
<view class="deal">
<view class="time">编辑于{{ fromatDay(item.updated_at) }}</view>
<view class="right">
<view class="del" @click="willDelDraft(item.draft_id)"
><up-icon name="trash" color="#4B5563" size="16"></up-icon
>删除</view
>
<view class="edit" @click="editDraft(index)"
><up-icon name="edit-pen" color="#fff" size="17"></up-icon
>编辑</view
>
</view>
</view>
</view>
</view>
</view>
</up-popup>
</div>
<up-popup
:round="10"
zIndex="9"
:show="showTitle"
mode="bottom"
@close="closeTitle"
@open="openTitle"
>
<view class="draftpop titlepop">
<view class="titlebox"
>添加小标题
<view class="close" @click="closeTitle"
><up-icon name="close" color="#4B5563" size="20"></up-icon
></view>
</view>
<view class="con">
<view class="top">
<up-icon
name="plus-circle"
color="#3CC7C0"
size="20"
@click="insertAllWord"
></up-icon>
<view class="desc" @click="insertAllWord">一键添加全部</view>
</view>
<view class="cellbox">
<view class="cell" @click="insertWord('患者信息')">患者信息</view>
<view class="cell" @click="insertWord('主诉')">主诉</view>
<view class="cell" @click="insertWord('现病史及既往史')"
>现病史及既往史</view
>
</view>
<view class="cellbox">
<view class="cell" @click="insertWord('检查')">检查</view>
<view class="cell" @click="insertWord('临床诊断')">临床诊断</view>
<view class="cell" @click="insertWord('治疗经过及结果')"
>治疗经过及结果</view
>
</view>
</view>
</view>
</up-popup>
<up-overlay :show="showModal" mask-click-able zIndex="99">
<view class="zanboxpop">
<view class="zanwraper">
<view class="title">提示</view>
<view class="content" v-if="delType == 'delDraft'">
草稿删除后无法回复,确认删除该草稿?
</view>
<view class="content" v-else-if="delType == 'saveDraft'">
是否保存该草稿?
</view>
<view class="btnbox">
<view class="cancle" @click="cancelDel">取消</view>
<view class="ok" @click="confirmDel">确定</view>
</view>
</view>
</view>
</up-overlay>
<up-overlay :show="showQuit" mask-click-able zIndex="99">
<view class="zanboxpop">
<view class="zanwraper">
<view class="title">提示</view>
<view class="content">
是否取消编辑?
</view>
<view class="btnbox">
<view class="cancle" @click="cancelQuit">取消</view>
<view class="ok" @click="confirmQuit">确定</view>
</view>
</view>
</view>
</up-overlay>
<up-overlay :show="isConfirmPublish" mask-click-able zIndex="99">
<view class="zanboxpop">
<view class="zanwraper">
<view class="title">提示</view>
<view class="content" >
是否确认发布?
</view>
<view class="btnbox">
<view class="cancle" @click="cancelConfirmPublish">取消</view>
<view class="ok" @click="confirmConfirmPublish">确定</view>
</view>
</view>
</view>
</up-overlay>
<up-overlay :show="isCheckModal" mask-click-able zIndex="99">
<view class="zanboxpop">
<view class="zanwraper">
<view class="title">提示</view>
<view class="content" >
提交成功,请耐心等待审核
</view>
<view class="btnbox" style="justify-content: center;">
<!-- <view class="cancle" @click="cancelConfirmPublish">取消</view> -->
<view class="ok" @click="goPrevPage">确定</view>
</view>
</view>
</view>
</up-overlay>
<up-popup
:round="10"
zIndex="9"
:closeOnClickOverlay="false"
:show="showCase"
mode="bottom"
@close="closeCase"
>
<view class="votepop casepop">
<view class="titlebox">
<view class="left" @click="cancelCase">取消</view>
<view class="right" @click="confirmCase">确定</view>
</view>
<view class="stepbox">
<up-steps :current="level-1" direction="column" :key="freshKey">
<up-steps-item >
<template v-slot:content>
<view class="slot-content" @click="openCaseLevel('1')">
<view class="left">{{!caseValue1.label_name?'请选择选项':caseValue1.label_name}}</view>
<u-icon name="arrow-right"></u-icon>
</view>
</template>
</up-steps-item>
<up-steps-item v-if="caseValue1.label_name && labelObj.list2.length>0">
<template v-slot:content>
<view class="slot-content" @click="openCaseLevel('2')">
<view class="left">{{!caseValue2.label_name?'请选择选项':caseValue2.label_name}}</view>
<u-icon name="arrow-right"></u-icon>
</view>
</template>
</up-steps-item>
<up-steps-item v-if="caseValue2.label_name && labelObj.list3.length>0">
<template v-slot:content>
<view class="slot-content" @click="openCaseLevel('3')">
<view class="left">{{!caseValue3.label_name?'请选择选项':caseValue3.label_name}}</view>
<u-icon name="arrow-right"></u-icon>
</view>
</template>
</up-steps-item>
</up-steps>
</view>
<scroll-view class="casecon" scroll-y="true">
<view v-show="level == 1" >
<up-radio-group
v-model="caseValue1.app_iden"
name="group1"
iconPlacement="right"
placement="column"
@change="groupChange1"
>
<view
class="column"
v-for="item in labelObj.list1"
:key="item.app_iden"
v-show="item.label_name!='热门话题'"
>
<up-radio
activeColor="#3CC7C0 "
:label="item.label_name"
:name="item.app_iden"
></up-radio>
</view>
</up-radio-group>
</view>
<view v-show="level == 2" >
<up-radio-group
name="group2"
@change="groupChange2"
v-model="caseValue2.app_iden"
iconPlacement="right"
placement="column"
>
<view
class="column"
v-for="item in labelObj.list2"
:key="item.app_iden"
>
<up-radio
activeColor="#3CC7C0 "
:label="item.label_name"
:name="item.app_iden"
></up-radio>
</view>
</up-radio-group>
</view>
<view v-show="level == 3" >
<up-radio-group
name="group3"
@change="groupChange3"
v-model="caseValue3.app_iden"
iconPlacement="right"
placement="column"
>
<view
class="column"
v-for="item in labelObj.list3"
:key="item.app_iden"
>
<up-radio
activeColor="#3CC7C0 "
:label="item.label_name"
:name="item.app_iden"
></up-radio>
</view>
</up-radio-group>
</view>
</scroll-view>
</view>
</up-popup>
</template>
<script setup>
import { nextTick, 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";
import voteOnImg from "@/static/voteon.png";
import draftImg from "@/static/draft.png";
import api from "@/api/api";
import dayjs from "dayjs";
import { onLoad,onReady,onShow } from "@dcloudio/uni-app";
import throttle from "@/utils/throttle"
import svEditor from "@/uni_modules/sv-editor/components/sv-editor/sv-editor.vue";
import pEditor from "@/components/pEditor/pEditor"
const isCheckModal=ref(false);
const uToast=ref(null);
//import SvEditorToolbar from "@/uni_modules/sv-editor/components/sv-editor/sv-editor-toolbar.vue";
import {
addImage,
addVideo,
addText,
} from "@/uni_modules/sv-editor/components/common/utils.js";
import navTo from "../../utils/navTo";
const isLock = ref(false);
const isFlag = ref(false);
const delId = ref("");
const scrollView=ref(null)
const showModal = ref(false);
const delType = ref("delDraft"); //delDraft saveDraft
const isPublish = ref(false);
const exchange_id=ref('');
const showEditor=ref(false);
const showOpacity=ref(false);
const editorType=ref('info');
const bottomHeight=ref(200);
const form = reactive({
exchange_title: "",
exchange_content: "",
exchange_summary: "",
case_exchange_vote: {
vote_title: ""
},
case_exchange_label: [],
});
const voteData = reactive({
vote_title: "",
valid_day: 7,
case_exchange_vote_option: [
{
option_value: "",
},
],
});
const videoface=ref('https://caseplatform.oss-cn-beijing.aliyuncs.com/prod/static/shipinfengmian.jpg')
const showQuit=ref(false)
const value = ref("");
const isConfirmPublish=ref(false)
const showVote = ref(false);
const showDraft = ref(false);
const showTitle = ref(false);
const draftList = ref([]);
const imgList = ref([]);
const videoList = ref([]);
const editorCtx = ref(null);
const editorCtxResult = ref(null);
const isFocusInfo = ref(false);
const isFocusResult = ref(false);
const labelList = ref([]);
const pEditorRef=ref(null);
const infoHeight=ref(300);
let inithtmlString =
"<p>【患者信息】:</p><br/><p>【主诉】:</p><br/><p>【现病史及既往史】:</p><br/><p>【检查】:</p><br/><p>【临床诊断】:</p><br/><p>【治疗经过及结果】:</p><br/><br/>";
const infoHtml=ref(inithtmlString);
const resultHtml=ref('');
const resultHeight=ref(300);
const showInfoOpacity=ref(true)
const level = ref(1);
const freshKey=ref(0);
const showCase = ref(false);
const canOpenCase = ref(false);
const caseValue1 = reactive({
app_iden:'',
label_name:'',
});
const caseValue2 = reactive({
app_iden:'',
label_name:'',
});
const caseValue3 = reactive({
app_iden:'',
label_name:'',
});
const labelObj = reactive({
list1: [],
list2: [],
list3: []
});
const cancelQuit=()=>{
showQuit.value=false;
}
const confirmQuit=()=>{
showQuit.value=false;
goBack();
}
const oldScrollTop=ref(0)
const scrollTop=ref(0)
const scroll=(e)=>{
oldScrollTop.value=e.detail.scrollTop
}
const toTop=()=>{
scrollTop.value=oldScrollTop.value
nextTick(()=>{
scrollTop.value=0
})
}
const goBack = () => {
uni.navigateBack({
delta: 1,
fail(){
uni.redirectTo({
url:'/pages/index/index'
})
}
});
};
const editorCotent=ref('')
const closeEditor=()=>{
showEditor.value=false;
};
const changeEditor=(data)=>{
console.log('content');
console.log(data.content);
showEditor.value=false;
if(data.type=="info"){
form.exchange_content=data.content;
//infoHtml.value=data.content;
infoHeight.value=600;
editorCtx.value.initHtml(data.content,async (videoUrl) => {
let res =""
console.log(videoface.value)
res = await editorCtx.value.createCoverThumbnail(videoface.value)
return res
},async()=>{
})
setTimeout(async()=>{
let info_str=await editorCtx.value.getLastContent();
infoHtml.value=info_str.html;
// console.log("获取变动");
// console.log( editorCtx.value.exportHtml(info_str.html));
setTimeout(()=>{
const query = wx.createSelectorQuery();
query.select('#infoContent').boundingClientRect(function(rect){
console.log(rect.height);
infoHeight.value=rect.height+10;
// 输出元素的高度
}).exec();
},1000)
},1000)
}else{
form.exchange_summary=data.content;
//resultHtml.value=data.content;
editorCtxResult.value.initHtml(data.content,async (videoUrl) => {
let res='';
res = await editorCtxResult.value.createCoverThumbnail(videoface.value)
return res
},async()=>{
})
setTimeout(async()=>{
let info_str=await editorCtxResult.value.getLastContent();
resultHtml.value=info_str.html;
setTimeout(()=>{
const query = wx.createSelectorQuery();
query.select('#resultContent').boundingClientRect(function(rect){
console.log(rect.height);
resultHeight.value=rect.height+10;
toTop()
// 输出元素的高度
}).exec();
},1000)
},1000)
}
};
const openDraftList=()=>{
getDraftList();
showDraft.value=true;
}
const epaste=(e)=>{
console.log(e)
}
const alertVote=()=>{
if(exchange_id.value){
uni.showToast({
title: "投票发布后不能编辑",
icon: "none",
})
return false;
}else{
showVote.value = true
}
}
const addOption = () => {
voteData.case_exchange_vote_option.push({
option_value: "",
});
};
const delOption = (index) => {
voteData.case_exchange_vote_option.splice(index, 1);
};
const changeDay = (type) => {
if (type === "minus") {
if (voteData.valid_day <= 1) return;
voteData.valid_day--;
} else if (type === "plus") {
voteData.valid_day++;
}
};
const clearVote = () => {
voteData.vote_title = "";
voteData.case_exchange_vote_option = [
{
option_value: "",
},
];
voteData.valid_day = 7;
form.case_exchange_vote.vote_title = "";
form.case_exchange_vote.case_exchange_vote_option = [
{
option_value: "",
},
];
form.case_exchange_vote.valid_day = 7;
};
const saveVote = () => {
if (voteData.vote_title == "") {
uni.showToast({
title: "请输入投票标题",
icon: "none",
});
return false;
}
if (voteData.vote_title.length > 20) {
uni.showToast({
title: "投票标题不能超过20个字符",
icon: "none",
});
return false;
}
if(voteData.case_exchange_vote_option.length <2) {
uni.showToast({
title: "请至少设置2个选项",
icon: "none",
});
return false;
}
for (let i = 0; i < voteData.case_exchange_vote_option.length; i++) {
if (voteData.case_exchange_vote_option[i].option_value == "") {
uni.showToast({
title: "投票选项不能为空",
icon: "none",
});
return false;
}
// if (voteData.case_exchange_vote_option[i].option_value.length > 16) {
// uni.showToast({
// title: "第" + (i + 1) + "个投票选项超过16个字符",
// icon: "none",
// });
// return false;
// }
}
// if (voteData.case_exchange_vote_option.length < 2) {
// uni.showToast({
// title: "至少添加两个选项",
// icon: "none",
// });
// return false;
// }
//Object.assign(form.case_exchange_vote, voteData);
form.case_exchange_vote=voteData
showVote.value = false;
};
const fromatDay = (value) => {
var date = new Date();
var year = date.getFullYear();
let Y = dayjs().format("YYYY");
if (year == Y) {
return dayjs(value).format("MM-DD");
} else {
return dayjs(value).format("YYYY-MM-DD");
}
};
const fromatImg = (val) => {
if(val){
return val.replace(/\<img/gi, '<img class="imgstyle"');
}else{
return '';
}
};
const ready = (e) => {
console.log(e);
editorCtx.value = e;
let html =
"<p>【患者信息】:</p><br/><p>【主诉】:</p><br/><p>【现病史及既往史】:</p><br/><p>【检查】:</p><br/><p>【临床诊断】:</p><br/><p>【治疗经过及结果】:</p><br/><br/>";
//editorCtx.value.initHtml(html);
// setTimeout(()=>{
uni.hideKeyboard();
toTop()
};
const readyResult = (e) => {
editorCtxResult.value = e;
toTop()
setTimeout(()=>{
if(exchange_id.value){
getExchangeDetail(exchange_id.value);
}
//uni.hideLoading();
})
//editorCtxResult.value.initHtml("")
};
const clearMuBan = () => {
console.log("清空模板");
editorCtx.value.initHtml("");
};
const focusInfo = async() => {
isFocusInfo.value = true;
const res= await editorCtx.value.getLastContent();
editorCotent.value=editorCtx.value.exportHtml(res.html);
console.log("focus")
console.log('editorCotent.value')
console.log(editorCotent.value)
showEditor.value=true;
editorType.value="info"
// uni.onKeyboardHeightChange(res => {
// console.log(res.height);
// bottomHeight.value=res.height*2;
// })
};
const blurInfo = () => {
// #ifdef MP-WEIXIN
isFocusInfo.value = false;
// #endif
// #ifdef H5
setTimeout(() => {
isFocusInfo.value = false;
},0)
// #endif
};
const focusResult = async() => {
isFocusResult.value = true;
const res= await editorCtxResult.value.getLastContent();
editorCotent.value=editorCtxResult.value.exportHtml(res.html)
editorType.value="result";
showEditor.value=true;
// uni.onKeyboardHeightChange(res => {
// console.log(res.height);
// bottomHeight.value=res.height*2;
// })
};
const blurResult = () => {
isFocusResult.value = false;
};
const closeVote = () => {
showVote.value = false;
};
const openVote = () => {
showVote.value = true;
};
const closeDraft = () => {
showDraft.value = false;
};
const openDraft = () => {
showDraft.value = true;
};
const closeTitle = () => {
showTitle.value = false;
};
const openTitle = () => {
showTitle.value = true;
};
const alertTitle = () => {
if (isFocusInfo.value) {
showTitle.value = true;
}
};
const pFun = (files) => {
uni.showLoading({
title: "正在上传图片...",
mask: true,
});
let promiseFun = [];
for (let i = 0; i < files.length; i++) {
promiseFun.push(handleUpload(files[i]));
}
Promise.all(promiseFun).then((res) => {
uni.hideLoading();
// setTimeout(()=>{
// console.log(imgList.value.length)
// addImage(imgList.value)
// })
});
};
const saveDraft = async () => {
if (isLock.value) return false;
isLock.value = true;
const res = await editorCtx.value.getLastContent();
form.exchange_content = res.html;
const resResult = await editorCtxResult.value.getLastContent();
form.exchange_summary = resResult.html;
if(labelList.value.length>0){
form.case_exchange_label = labelList.value;
}
api.saveDraft(form).then((res) => {
isLock.value = false;
goBack()
uni.showToast({
title: "保存成功",
icon: "none",
});
getDraftList();
});
};
const getExchangeDetail = (id) => {
api.getExchangeDetail(id).then((res) => {
console.log(res.data.data);
let {
exchange_content,
exchange_title,
exchange_label,
exchange_summary,
exchange_vote,
} = res.data.data;
//form.exchange_content = exchange_content;
changeEditor({
type:"info",
content:exchange_content
})
//infoHtml.value=exchange_content;
form.exchange_title = exchange_title;
form.case_exchange_label = exchange_label? exchange_label:[];
labelList.value = exchange_label?exchange_label:[];
//form.exchange_summary = exchange_summary;
//resultHtml.value=exchange_summary;
form.case_exchange_vote = exchange_vote?exchange_vote:{};
changeEditor({
type:"result",
content:exchange_summary
})
Object.assign(voteData, exchange_vote);
});
};
const editDraft = (index) => {
let draft = draftList.value[index];
let {
exchange_content,
exchange_title,
exchange_label,
exchange_summary,
exchange_vote,
} = draft;
if(exchange_content){
let html= editorCtx.value.exportHtml(exchange_content.replace('undefined',''));
//form.exchange_content=html;
changeEditor({
type:"info",
content: html
})
}
if(exchange_content){
let html= editorCtxResult.value.exportHtml(exchange_summary.replace('undefined',''));
changeEditor({
type:"result",
content:html
})
}
form.exchange_title = exchange_title;
form.case_exchange_label = exchange_label? exchange_label:[];
labelList.value = exchange_label?exchange_label:[];
form.exchange_summary = exchange_summary;
form.case_exchange_vote = exchange_vote?exchange_vote:{};
Object.assign(voteData, exchange_vote);
showDraft.value = false;
};
const willDelDraft = (id) => {
delId.value = id;
delType.value = "delDraft";
showModal.value = true;
};
const confirmDel = () => {
showModal.value = false;
console.log(delType.value);
if (delType.value == "delDraft") {
delDraft(delId.value);
} else if (delType.value == "saveDraft") {
saveDraft();
}
};
const cancelDel = () => {
showModal.value = false;
if (delType.value == "saveDraft") {
goBack();
console.log('wee')
}
};
const cancelConfirmPublish=()=>{
console.log(1111111);
isConfirmPublish.value=false;
}
const delDraft = (id) => {
api.delDraft(id).then((res) => {
uni.showToast({
title: "删除成功",
icon: "none",
});
getDraftList();
});
};
const alertSave = async () => {
if(exchange_id.value){
showQuit.value=true;
}else{
if(isPublish.value){
goBack()
}else{
const res = await editorCtx.value.getLastContent();
const initInfo =
"<p>【患者信息】:</p><br/><p>【主诉】:</p><br/><p>【现病史及既往史】:</p><br/><p>【检查】:</p><br/><p>【临床诊断】:</p><br/><p>【治疗经过及结果】:</p>";
//let html = editorCtx.value.exportHtml(res.html);
//const initInfo= "<p>【患者信息】:</p><br/><p>【主诉】:</p><br/><p>【现病史及既往史】:</p><br/><p>【检查】:</p><br/><p>【临床诊断】:</p><br/><p>【治疗经过及结果】:</p><br/><br/>";
const resContent = await editorCtxResult.value.getLastContent();
//let reshtml = editorCtxResult.value.exportHtml(resContent.html);
if (
form.exchange_title ||
res.html!=initInfo ||
resContent.text ||
(form.case_exchange_vote &&
form.case_exchange_vote.vote_title &&
form.case_exchange_label &&
form.case_exchange_label.length > 0)
) {
delType.value = "saveDraft";
showModal.value = true;
} else {
goBack();
}
}
}
};
const confirmConfirmPublish=()=>{
isConfirmPublish.value=false;
publish();
}
const publish =throttle(async () => {
const initInfo =
"<p>【患者信息】:</p><br/><p>【主诉】:</p><br/><p>【现病史及既往史】:</p><br/><p>【检查】:</p><br/><p>【临床诊断】:</p><br/><p>【治疗经过及结果】:</p>";
if (form.exchange_title == "") {
uni.showToast({
title: "请输入标题",
icon: "none",
});
return false;
}
if(form.exchange_title.length>40){
uni.showToast({
title: "标题不超过40个字",
icon: "none",
});
return false;
}
if(form.exchange_content==""){
uni.showToast({
title: "请编辑病例信息",
icon: "none",
});
return false;
}
// const res = await editorCtx.value.getLastContent();
// let html = editorCtx.value.exportHtml(res.html);
// console.log('htmlinfo')
// console.log(html)
if (form.exchange_content == initInfo) {
uni.showToast({
title: "请编辑病例信息",
icon: "none",
});
return false;
}
try{
if (!form.case_exchange_vote || !(form.case_exchange_vote.vote_title)) {
form.case_exchange_vote={};
delete form.case_exchange_vote
}
} catch(e) {
console.log(e);
};
if (
!form.case_exchange_label ||
(form.case_exchange_label && form.case_exchange_label.length == 0)
) {
delete form.case_exchange_label;
}
form.case_exchange_label = labelList.value;
if(isLock.value) return false;
isFlag.value = true;
//form.exchange_content = html;
// const resContent = await editorCtxResult.value.getLastContent();
// let reshtml = editorCtxResult.value.exportHtml(resContent.html);
// console.log('reshtml')
// console.log(reshtml)
if(form.exchange_summary=="<p><br></p>"){
form.exchange_summary==''
}
//form.exchange_summary = reshtml=="<p><br></p>"?'':reshtml;
if(exchange_id.value){
api.updateExchange(exchange_id.value,form).then((res) => {
uni.showToast({
title: "修改成功",
icon: "none",
duration: 2000,
});
isFlag.value = false;
isPublish.value = true;
isConfirmPublish.value=false;
uni.redirectTo({
url:'/pages/caseTalk/caseTalk'
})
});
}else{
api.addExchange(form).then((res) => {
//isCheckModal.value=true;
uni.redirectTo({
url:'/pages/caseTalk/caseTalk?from=publish',
})
// uni.navigateBack({
// success(){
// uni.showToast({
// duration:2500,
// title: "提交成功,请耐心等待审核",
// icon: "none",
// })
// }
// });
isFlag.value = false;
isPublish.value = true;
isConfirmPublish.value=false;
});
}
});
const goPrevPage=()=>{
uni.navigateBack()
}
const handleUpload = (file) => {
api
.getOss({
scene: 1,
})
.then((rep) => {
let result = rep.data;
if (result.code == 200) {
let { access_id, dir, policy, signature, host } = result.data;
let time = dayjs().format("YYYYMMDDHHmmss");
let random = generateRandomNumber();
let filename = time + random;
let imgType = "." + getImageFormat(file);
return new Promise((resolve, reject) => {
uni.uploadFile({
url: host, // 仅为示例,非真实的接口地址
filePath: file,
name: "file",
formData: {
OSSAccessKeyId: access_id,
policy,
key: dir + time + random + imgType,
signature,
},
success(res) {
if (res.statusCode === 204) {
let url = host + "/" + dir + filename + imgType;
imgList.value.push(url);
addImage([url]);
}
},
fail: (err) => {
console.log(err);
},
});
});
}
});
};
const insertWord = (word) => {
addText(word);
showTitle.value = false;
};
const insertAllWord = () => {
let word = [
"患者信息",
"主诉",
"现病史及既往史:",
"检查",
"临床诊断",
"治疗经过及结果",
];
word.forEach((item) => {
addText(item);
});
showTitle.value = false;
};
const generateRandomNumber = () => {
let randomNumber = Math.floor(1000 + Math.random() * 9000);
return randomNumber;
};
const getImageFormat = (imageUrl) => {
console.log(imageUrl);
const lastDotIndex = imageUrl.lastIndexOf(".");
if (lastDotIndex !== -1) {
return imageUrl.substring(lastDotIndex + 1);
}
return "unknown";
};
const insertImage = (file) => {
if (!(!isFocusInfo.value && !isFocusResult.value)) {
uni.chooseImage({
count: 9, //默认9
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["album"], //从相册选择
extension: [".jpg", ".png", ".jpeg"],
success: function (res) {
pFun(res.tempFilePaths);
},
});
}
};
const insertVideo = (file) => {
if (!(!isFocusInfo.value && !isFocusResult.value)) {
uni.chooseVideo({
count: 5, //默认9//可以指定是原图还是压缩图,默认二者都有
sourceType: ["album"], //从相册选择
extension: [".mp4", ".webm", ".ogg"],
success: function (res) {
console.log(res.tempFilePath);
HandleAddVideo(res.tempFilePath);
//pFun([res.tempFilePath], "video");
},
});
}
};
const HandleAddVideo = async (file) => {
uni.showLoading({
title: "正在上传视频...",
mask: true,
});
const videos = await addVideo(async (editorCtx) => {
return new Promise((resolve) => {
api
.getOss({
scene:2,
})
.then((rep) => {
let result = rep.data;
if (result.code == 200) {
let { access_id, dir, policy, signature, host } = result.data;
let time = dayjs().format("YYYYMMDDHHmmss");
let random = generateRandomNumber();
let filename = time + random;
let imgType = "." + getImageFormat(file);
return new Promise((res, reject) => {
uni.uploadFile({
url: host, // 仅为示例,非真实的接口地址
filePath: file,
name: "file",
formData: {
OSSAccessKeyId: access_id,
policy,
key: dir + time + random + imgType,
signature,
},
async success(res) {
if (res.statusCode === 204) {
let url = host + "/" + dir + filename + imgType;
console.log(editorCtx);
const fileThumbnail = await editorCtx.createCoverThumbnail(videoface.value);
resolve([
{
videoUrl: url,
videoImg: fileThumbnail,
},
]);
}
},
fail: (err) => {
console.log(err);
},
});
});
}
});
});
});
if (videos) {
//uni.hideLoading();
uni.showToast({ title: "添加视频成功", icon: "success" });
} else {
uni.showToast({ title: "添加视频失败", icon: "error" });
}
};
const changeInfoEditor=async()=>{
const res=await editorCtx.value.getLastContent();
let str=res.text.replace(/\s/g, '')
if(str){
showInfoOpacity.value=true;
}else{
showInfoOpacity.value=false;
}
}
const changeResEditor=async()=>{
const res=await editorCtxResult.value.getLastContent();
let str=res.text.replace(/\s/g, '')
if(str){
showOpacity.value=true;
}else{
showOpacity.value=false;
}
}
const getDraftList = () => {
api.getDraftList().then((res) => {
draftList.value = res.data.data.data;
});
};
const openCaseLevel=(lev)=>{
freshKey.value++;
level.value=lev;
if(lev==1){
caseValue2.label_name='';
caseValue2.app_iden='';
labelObj.list2=[]
}else if(lev==2){
labelObj.list3=[];
caseValue3.label_name='';
caseValue3.app_iden=''
}
};
const groupChange1=(e)=>{
caseValue1.app_iden=e;
for (var i = 0; i <labelObj.list1.length; i++) {
if(labelObj.list1[i].app_iden==caseValue1.app_iden){
caseValue1.label_name=labelObj.list1[i].label_name;
break;
}
}
console.log(caseValue1);
getCaseLabel(2,e)
}
const groupChange2=(e)=>{
caseValue2.app_iden=e;
for (var i = 0; i <labelObj.list2.length; i++) {
if(labelObj.list2[i].app_iden==caseValue2.app_iden){
caseValue2.label_name=labelObj.list2[i].label_name;
break;
}
}
getCaseLabel(3,e)
}
const groupChange3=(e)=>{
caseValue3.app_iden=e;
level.value =3
for (var i = 0; i <labelObj.list3.length; i++) {
if(labelObj.list3[i].app_iden==caseValue3.app_iden){
caseValue3.label_name=labelObj.list3[i].label_name;
break;
}
}
}
const getCaseLabel = (lev,pid=0) => {
api.getCaseLabel({
pId:pid
}).then((res) => {
level.value = lev;
if (lev == 1) {
labelObj.list1 = res.data.data;
//label_iden.value = caseValue1.value;
} else if (lev == 2) {
labelObj.list2 = res.data.data;
if(res.data.data.length==0){
level.value = 1
}
//label_iden.value = caseValue2.value;
} else if (lev == 3) {
labelObj.list3 = res.data.data;
if(res.data.data.length==0){
level.value = 2
}
//label_iden.value = caseValue3.value;
}
});
};
const openCase=()=>{
showCase.value = true;
}
const cancelCase=()=>{
showCase.value = false;
}
const clearCase=()=>{
level.value=1;
caseValue1.app_iden='';
caseValue1.label_name='';
caseValue2.app_iden='';
caseValue2.label_name='';
caseValue3.app_iden='';
caseValue3.label_name='';
labelObj.list2=[];
labelObj.list3=[];
freshKey.value++;
}
const confirmCase = () => {
if (level.value == 1 && caseValue1.app_iden == "") {
uni.showToast({ title: "请选择疾病选项", icon: "none" });
return false;
};
if(level.value == 1){
let {app_iden,label_name}=caseValue1;
labelList.value.push({
app_iden,
label_name
});
}else if(level.value == 2 ){
if(!caseValue2.app_iden){
let {app_iden,label_name}=caseValue1;
labelList.value.push({
app_iden,
label_name
});
}else{
let {app_iden,label_name}=caseValue2;
labelList.value.push({
app_iden,
label_name
});
}
}else if(level.value == 3 ){
if(!caseValue3.app_iden){
let {app_iden,label_name}=caseValue2;
labelList.value.push({
app_iden,
label_name
});
}else{
let {app_iden,label_name}=caseValue3;
labelList.value.push({
app_iden,
label_name
});
}
}
labelList.value=labelList.value.filter((item, index) => labelList.value.findIndex(i => i.app_iden === item.app_iden) === index);
console.log(labelList.value);
showCase.value=false;
};
const closeCase = () => {
showCase.value = false;
};
const delLabel = (index) => {
labelList.value.splice(index, 1);
};
const openLabelPop=()=>{
if(labelList.value.length>=5){
uni.showToast({ title: "最多添加5个标签", icon: "none" });
return false;
}
clearCase();
showCase.value=true;
getCaseLabel(1,0);
}
onReady(()=>{
uToast.value.show( {
type: "loading",
title: "正在加载",
message: "正在加载",
duration:1500
})
})
onShow(()=>{
isConfirmPublish.value=false;
})
onLoad((options) => {
if(options.exchange_id){
exchange_id.value=options.exchange_id;
}
});
</script>
<style lang='scss' scoped>
.stepbox{
padding:15rpx 30rpx;
border-bottom: 2rpx dotted #f3f4f6;
:deep(.u-steps-item__content){
margin-top: -5rpx!important;
}
.slot-content{
width:100%;
margin-bottom: 25rpx;
justify-content: space-between;
align-items: center;
display: flex;
}
}
.casepop{
display: flex;
flex-direction: column;
max-height: calc(100vh - 400rpx);
.continue{
color: #2878ff !important;
}
}
.casecon {
flex:1;
overflow-y: scroll;
padding-top: 10rpx;
max-height: calc(100vh - 700rpx);
min-height: 350rpx;
padding-bottom: 20rpx;
:deep(.u-radio){
margin-bottom: 10px!important;
margin-top: 0px!important;
}
.casePadding{
padding-bottom: 0rpx;
}
.column {
padding: 0 30rpx;
border-bottom: 2rpx solid #e5e7eb;
}
}
.navbox {
padding-bottom: 20rpx;
background-color: #f9fafb;
position: relative;
height: 200rpx;
background: radial-gradient(
60% 90% at 4% 2%,
#43c9c3 0%,
rgba(255, 255, 255, 0) 100%
);
.bg {
z-index: 0;
top: 0;
bottom: 0;
width: 100%;
position: absolute;
background: radial-gradient(
43% 90% at 84% 6%,
#ffd6c9 0%,
rgba(255, 255, 255, 0) 100%
);
}
.namebox {
/* #ifdef H5 */
padding-top: 51rpx;
/* #endif */
/* #ifdef MP-WEIXIN */
padding-top: 102rpx;
/* #endif */
justify-content: center;
margin: 0rpx 30rpx 0rpx;
position: relative;
display: flex;
.back {
position: absolute;
left: 0;
}
.name {
margin-left: 16rpx;
font-size: 30rpx;
color: #111827;
}
}
.search {
margin: 40rpx 30rpx 0rpx;
display: flex;
align-items: center;
justify-content: space-between;
.searchwrap {
display: flex;
align-items: center;
flex: 1;
padding-left: 28rpx;
margin-right: 23rpx;
height: 80rpx;
background: #fbfbfb;
box-shadow: 0px 4rpx 10rpx 0px rgba(153, 153, 153, 0.5);
border-radius: 40rpx;
.ipt {
margin-left: 15rpx;
font-size: 28rpx;
}
}
}
}
.zanboxpop {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.zanwraper {
width: 630rpx;
margin: 0 auto;
padding-bottom: 50rpx;
background: #f5f6f9;
border-radius: 16rpx;
.title {
margin-top: 48rpx;
text-align: center;
font-weight: 500;
font-size: 36rpx;
color: rgba(0, 0, 0, 0.85);
}
.content {
padding: 30rpx 0;
background: #f5f6f9;
text-align: center;
}
.count {
margin-top: 24rpx;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
font-weight: 400;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.65);
.num {
color: #ff0000;
font-size: 32rpx;
}
.earn {
font-size: 32rpx;
color: #3cc7c0;
}
}
.countbox {
display: flex;
width: 100%;
margin: 30rpx 0px 40rpx;
padding: 0 40rpx;
justify-content: center;
box-sizing: border-box;
.minus {
flex-shrink: 0;
margin-left: 10rp;
width: 90rpx;
height: 90rpx;
font-size: 60rpx;
color: #333;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
border-radius: 12rpx;
border: 2rpx solid #e9e9e9;
}
.add {
flex-shrink: 0;
width: 90rpx;
margin-left: 10rpx;
height: 90rpx;
font-size: 60rpx;
color: #333;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background: #3cc7c0;
border-radius: 12rpx;
border: 2rpx solid #3cc7c0;
}
:deep(.u-input__content__field-wrapper__field) {
height: 60rpx;
font-size: 34rpx !important;
text-align: center !important;
}
:deep(.u-input) {
background: #f2f2f2;
width: 200rpx !important;
flex: none;
}
:deep(.u-input--radius) {
border-radius: 24rrpx;
}
}
.btnbox {
margin: 0px 40rpx 0px;
display: flex;
justify-content: space-between;
.cancle {
color: rgba(0, 0, 0, 0.3);
width: 256rpx;
height: 88rpx;
background: #f5f6f9;
border-radius: 25px;
border: 2rpx solid rgba(0, 0, 0, 0.15);
font-weight: 500;
font-size: 32rpx;
color: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
}
.ok {
color: #fff;
width: 256rpx;
height: 88rpx;
background: #3cc7c0;
border-radius: 25px;
border: 2rpx solid #3cc7c0;
font-weight: 500;
font-size: 32rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
.titlepop {
.top {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0 30rpx;
margin-bottom: 30rpx;
font-size: 30rpx;
color: #3cc7c0;
}
.con {
padding-bottom: 50rpx;
}
.cellbox {
margin: 20rpx 30rpx;
display: flex;
justify-content: space-between;
.cell {
width: 200rpx;
height: 60rpx;
border-radius: 25rpx;
display: flex;
justify-content: center;
align-items: center;
background: #e5e7eb78;
font-size: 24rpx;
}
}
}
#editor {
position:relative;
z-index:2;
padding: 0 10rpx;
min-height:600rpx;
.editorcon{
position: absolute;
top:0;
width:100%;
bottom:0;
z-index:1;
opacity:1
}
.editorcon.active{
opacity:0;
}
.infoContent{
position: relative;
z-index:2;
background: #fff;
margin:0 32rpx;
word-wrap: break-word;
word-break: break-all;
/* position: relative;
z-index:2; */
}
.mask{
opacity: 0;
position: absolute;
width:100%;
height:100%;
background:red;
z-index:9;
}
}
#editorRes {
position: relative;
min-height: 600rpx;
.editorcon{
position: absolute;
top:0;
width:100%;
bottom:0;
z-index:-1;
opacity:1
}
.editorcon.active{
opacity:0
}
.resultContent{
margin:0 32rpx;
word-wrap: break-word;
word-break: break-all;
}
.mask{
opacity: 0;
position: absolute;
width:100%;
height:100%;
background:red;
z-index:9;
}
:deep(.sv-editor-wrapper) {
flex: 1;
min-height: 300rpx;
position: absolute!important;
}
}
.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 0rpx 0;
font-size: 30rpx;
color: #666666;
line-height: 38rpx;
}
.con {
font-size: 30rpx;
color: #666666;
line-height: 38rpx;
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;
.row {
display: flex;
align-items: center;
.iconbox {
margin-left: 15rpx;
align-items: center;
}
}
.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;
background-color: #fff;
position: relative;
:deep(.u-image) {
background: transparent !important;
}
}
.toolbox {
border-top: 2rpx solid #f3f4f6;
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;
}
}
.cell.active {
opacity: 0.65;
}
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
background: #ffffff;
.bottombtn {
display: flex;
align-items: center;
border-top: 2rpx solid #e5e7eb;
height: 133rpx;
}
.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;
margin-right: 25rpx;
}
.vote {
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.active{
color:#3CC7C0;
border: 2rpx solid #3CC7C0;
}
}
}
.form {
height: calc(100vh - 133rpx);
margin: -20rpx 0rpx 0rpx;
padding-bottom: 0rpx;
overflow-y: scroll;
.sickbox {
display: flex;
padding: 25rpx 25rpx 10rpx;
margin-bottom: 20rpx;
flex-wrap:wrap;
}
.add {
display: flex;
font-size: 26rpx;
justify-content: center;
align-items: center;
color: #3cc7c0;
margin-bottom: 10rpx;
margin-left: 18rpx;
}
.sick {
position: relative;
padding: 0 60rpx 0 30rpx;
height: 60rpx;
margin-bottom: 10rpx;
white-space: nowrap;
display: flex;
margin-right: 10rpx;
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;
}
}
}
:deep(.ql-container){
padding-bottom: 25rpx;
word-break: break-all;
height: calc(100vh - 700rpx);
}
:deep(.ql-container) img{
max-width:100%;
position: relative;
left:50%;
transform: translateX(-50%);
}
:deep(.ql-container) image{
max-width:100%;
position: relative;
left:50%;
transform: translateX(-50%);
}
.con {
:deep(.imgstyle){
max-width: 100%;
}
}
:deep(.imgstyle){
max-width: 100%;
}
/* #ifdef H5 */
:deep(.ql-editor){
position: absolute;
top: 0;
bottom: 0;
width:100%;
}
/* #endif */
</style>