2083 lines
51 KiB
Vue
2083 lines
51 KiB
Vue
<template>
|
||
<div class="upage">
|
||
<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">发病例交流帖</view>
|
||
</view>
|
||
</view>
|
||
<!-- <backNav :navName="'发病例交流帖'"></backNav> -->
|
||
<scroll-view class="form" id="form" scroll-y="true" :style="{paddingBottom:bottomHeight+'rpx'}">
|
||
<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">
|
||
<sv-editor
|
||
placeholder="患者基本情况，检查结果，诊疗图片或视频"
|
||
eid="editor-id"
|
||
@ready="ready"
|
||
pasteMode="origin"
|
||
@focus="focusInfo"
|
||
@blur="blurInfo"
|
||
@epaste="epaste"
|
||
></sv-editor>
|
||
<!-- <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">
|
||
<view class="row">
|
||
<view class="left">
|
||
总结与讨论 <text class="tip">(可不填)</text>
|
||
</view>
|
||
</view>
|
||
<view class="textcell">
|
||
<view class="iptbox" id="editorRes">
|
||
<sv-editor
|
||
placeholder="分享经验和心得，如：诊断与鉴别诊断易错点，治疗过程难点，病例的相关知识总结及讨论等"
|
||
eid="editorResult"
|
||
@ready="readyResult"
|
||
@focus="focusResult"
|
||
@blur="focusResult"
|
||
></sv-editor>
|
||
</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:bottomHeight+'rpx'}">
|
||
<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">草稿箱</view>
|
||
<view class="vote" @click="alertVote">
|
||
投票
|
||
<up--image
|
||
:src="voteImg"
|
||
class="headImg"
|
||
width="47rpx"
|
||
height="47rpx"
|
||
></up--image>
|
||
</view>
|
||
</view>
|
||
<view class="right" @click="publish">发布</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">{{
|
||
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>
|
||
<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-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"
|
||
>
|
||
<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 { 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 draftImg from "@/static/draft.png";
|
||
import api from "@/api/api";
|
||
import dayjs from "dayjs";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import throttle from "@/utils/throttle"
|
||
import svEditor from "@/uni_modules/sv-editor/components/sv-editor/sv-editor.vue";
|
||
//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";
|
||
const isLock = ref(false);
|
||
const isFlag = ref(false);
|
||
const delId = ref("");
|
||
const showModal = ref(false);
|
||
const delType = ref("delDraft"); //delDraft saveDraft
|
||
const isPublish = ref(false);
|
||
const exchange_id=ref('');
|
||
|
||
const bottomHeight=ref(200);
|
||
const form = reactive({
|
||
exchange_title: "",
|
||
exchange_content: "",
|
||
exchange_summary: "",
|
||
case_exchange_vote: {},
|
||
case_exchange_label: [],
|
||
});
|
||
const voteData = reactive({
|
||
vote_title: "",
|
||
valid_day: 7,
|
||
case_exchange_vote_option: [
|
||
{
|
||
option_value: "",
|
||
},
|
||
],
|
||
});
|
||
const value = ref("");
|
||
|
||
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 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 goBack = () => {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
};
|
||
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 == 0) {
|
||
uni.showToast({
|
||
title: "请添加投票选项",
|
||
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();
|
||
uni.pageScrollTo({
|
||
scrollTop:0,
|
||
selector:"#form"
|
||
// })
|
||
})
|
||
uni.hideLoading();
|
||
|
||
};
|
||
const readyResult = (e) => {
|
||
editorCtxResult.value = e;
|
||
setTimeout(()=>{
|
||
if(exchange_id.value){
|
||
getExchangeDetail(exchange_id.value);
|
||
}
|
||
})
|
||
//editorCtxResult.value.initHtml("")
|
||
};
|
||
const clearMuBan = () => {
|
||
console.log("清空模板");
|
||
|
||
editorCtx.value.initHtml("");
|
||
};
|
||
const focusInfo = () => {
|
||
isFocusInfo.value = true;
|
||
uni.onKeyboardHeightChange(res => {
|
||
console.log(res.height);
|
||
bottomHeight.value=res.height*2;
|
||
editorCtx.value.s
|
||
})
|
||
|
||
};
|
||
const blurInfo = () => {
|
||
// #ifdef MP-WEIXIN
|
||
isFocusInfo.value = false;
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
setTimeout(() => {
|
||
isFocusInfo.value = false;
|
||
},0)
|
||
|
||
// #endif
|
||
|
||
};
|
||
const focusResult = () => {
|
||
isFocusResult.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;
|
||
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;
|
||
editorCtx.value.initHtml(exchange_content,async (videoUrl) => {
|
||
let res
|
||
|
||
// #ifdef APP || H5
|
||
// res = await this.editorCtx.createVideoThumbnail(videoUrl)
|
||
// #endif
|
||
|
||
const fox = 'https://cn.bing.com//th?id=OHR.FlamingosNamibia_ZH-CN3639748956_1920x1080.jpg'
|
||
res = await editorCtx.value.createCoverThumbnail(fox)
|
||
|
||
return res
|
||
});
|
||
form.exchange_content = 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;
|
||
form.case_exchange_vote = exchange_vote;
|
||
editorCtxResult.value.initHtml(exchange_summary,async (videoUrl) => {
|
||
let res
|
||
|
||
// #ifdef APP || H5
|
||
// res = await this.editorCtx.createVideoThumbnail(videoUrl)
|
||
// #endif
|
||
|
||
const fox = 'https://cn.bing.com//th?id=OHR.FlamingosNamibia_ZH-CN3639748956_1920x1080.jpg'
|
||
res = await editorCtxResult.value.createCoverThumbnail(fox)
|
||
|
||
return res
|
||
});
|
||
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;
|
||
editorCtx.value.initHtml(exchange_content);
|
||
form.exchange_content = exchange_content;
|
||
form.exchange_title = exchange_title;
|
||
form.case_exchange_label = exchange_label;
|
||
labelList.value = exchange_label;
|
||
form.exchange_summary = exchange_summary;
|
||
form.case_exchange_vote = exchange_vote;
|
||
editorCtxResult.value.initHtml(exchange_summary);
|
||
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();
|
||
}
|
||
};
|
||
const delDraft = (id) => {
|
||
api.delDraft(id).then((res) => {
|
||
uni.showToast({
|
||
title: "删除成功",
|
||
icon: "none",
|
||
});
|
||
});
|
||
getDraftList();
|
||
};
|
||
const alertSave = async () => {
|
||
if(isPublish.value || exchange_id.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 publish =throttle(async () => {
|
||
console.log(3333);
|
||
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;
|
||
}
|
||
const res = await editorCtx.value.getLastContent();
|
||
let html = editorCtx.value.exportHtml(res.html);
|
||
if (html == initInfo) {
|
||
uni.showToast({
|
||
title: "请编辑病例信息",
|
||
icon: "none",
|
||
});
|
||
return false;
|
||
}
|
||
if (!(form.case_exchange_vote && form.case_exchange_vote.vote_title)) {
|
||
delete form.case_exchange_vote;
|
||
}
|
||
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);
|
||
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;
|
||
uni.navigateBack()
|
||
});
|
||
}else{
|
||
api.addExchange(form).then((res) => {
|
||
uni.showToast({
|
||
title: "发布成功",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
isFlag.value = false;
|
||
isPublish.value = true;
|
||
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);
|
||
let imgUrl =
|
||
"https://cn.bing.com//th?id=OHR.FlamingosNamibia_ZH-CN3639748956_1920x1080.jpg";
|
||
const fileThumbnail = await editorCtx.createCoverThumbnail(
|
||
imgUrl
|
||
);
|
||
resolve([
|
||
{
|
||
videoUrl: url,
|
||
videoImg: fileThumbnail,
|
||
},
|
||
]);
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log(err);
|
||
},
|
||
});
|
||
});
|
||
}
|
||
});
|
||
});
|
||
});
|
||
if (videos) {
|
||
uni.showLoading();
|
||
uni.showToast({ title: "添加视频成功", icon: "success" });
|
||
} else {
|
||
uni.showToast({ title: "添加视频失败", icon: "error" });
|
||
}
|
||
};
|
||
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);
|
||
}
|
||
onLoad((optoions) => {
|
||
uni.showLoading({
|
||
title: "正在加载中...",
|
||
mask: true,
|
||
});
|
||
if(optoions.exchange_id){
|
||
exchange_id.value=optoions.exchange_id;
|
||
console.log(1111)
|
||
console.log(exchange_id.value)
|
||
}
|
||
//getDraftList();
|
||
|
||
});
|
||
|
||
// 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>
|
||
.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 {
|
||
padding-top: 102rpx;
|
||
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 {
|
||
padding: 0 10rpx;
|
||
height: calc(100vh - 700rpx);
|
||
}
|
||
#editorRes {
|
||
height: 600rpx;
|
||
:deep(.sv-editor-wrapper) {
|
||
flex: 1;
|
||
min-height: 300rpx;
|
||
}
|
||
}
|
||
.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;
|
||
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: 3;
|
||
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;
|
||
}
|
||
.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 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;
|
||
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%;
|
||
}
|
||
}
|
||
/* #ifdef H5 */
|
||
:deep(.ql-editor){
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
width:100%;
|
||
}
|
||
/* #endif */
|
||
|
||
</style> |