444 lines
11 KiB
Vue
444 lines
11 KiB
Vue
<template>
|
||
<div class="main casemain" :class="{on: step == pageIndex }" :id="'pagemain'+pageIndex" v-show="step == pageIndex" :style="{height:step == pageIndex?'auto':'0px'}" >
|
||
<img src="../assets/bg.png" alt="" class="bg" />
|
||
{{'当前：'+step}}{{'页码：'+pageIndex}}
|
||
<div class="dealbox" style="position: relative;z-index:1;background:transparent;">
|
||
<div class="prev" @click="switchPage(pageIndex - 1)">上一步</div>
|
||
|
||
</div>
|
||
<div class="content">
|
||
<div class="pagebox">
|
||
<div class="page">
|
||
<!-- <div class="card" v-html="pageItem.content"></div> -->
|
||
<div
|
||
class="card"
|
||
v-for="(item, index) in pageItem.case_item_model"
|
||
:key="index"
|
||
>
|
||
<div class="titlebox">
|
||
<img src="../assets/titlebg.png" alt="" />
|
||
<div class="title">{{ item.model_name }}</div>
|
||
</div>
|
||
<div class="descbox">
|
||
<div class="namebox" v-html="item.content"></div>
|
||
<!-- <div class="namebox" >
|
||
<div class="row">
|
||
<div class="left"> ·姓别：</div>
|
||
<div class="right">
|
||
杨**</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="left"> ·姓别：</div>
|
||
<div class="right">
|
||
症状:自诉1月前因长期熬夜出现软困、乏力，无腹痛，无恶心、呕吐、纳差、胸闷、胸痛、无尿频、尿痛、尿黄，无发热，无胸闷、气紧，无胸痛、心悸，无呼吸困难，无皮肤黄染及皮下出血等。病后饮食稍差，睡眠尚可，精神尚可，大小便正常。，
|
||
|
||
</div>
|
||
</div>
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<question
|
||
v-for="(item, index) in pageItem.case_item_question"
|
||
:key="'case' + pageIndex + 'qestion' + item.question_id"
|
||
:question="item"
|
||
@checkAnswer="checkAnswer"
|
||
:pageIndex="pageIndex"
|
||
:questionIndex="index"
|
||
v-if="pageItem.case_item_question"
|
||
></question>
|
||
</div>
|
||
</div>
|
||
<div class="dealbox" >
|
||
<div class="next" @click="switchPage(pageIndex - 1)">上一步</div>
|
||
<div class="prev" @click="goNext(pageIndex + 1)">下一步</div>
|
||
</div>
|
||
<back></back>
|
||
<c-dialog
|
||
:message="dialog_message"
|
||
ref="cdialog"
|
||
:showCancel="false"
|
||
></c-dialog>
|
||
<van-image-preview teleport="body" :overlay-style="{zIndex:10}" ref="ImagePreview" v-model:show="showImg" closeable :images="imgList" @change="onChange">
|
||
|
||
</van-image-preview>
|
||
</div>
|
||
|
||
|
||
</template>
|
||
<script setup>
|
||
import { ref, reactive } from "vue";
|
||
import api from "../api/user.js";
|
||
import dayjs from "dayjs";
|
||
//import { showImagePreview } from 'vant';
|
||
const case_id = ref(null);
|
||
const imgList = ref([]);
|
||
const position = ref(0);
|
||
const showImg = ref(false);
|
||
const ImagePreview = ref(null);
|
||
const props = defineProps({
|
||
pageIndex: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
case_id: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
step: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
pageNum: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
start_time: {
|
||
type: String,
|
||
default:'',
|
||
},
|
||
pageItem: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
const unitAnswer = {
|
||
pageIndex: null,
|
||
answer: [],
|
||
};
|
||
const cdialog = ref(null);
|
||
const dialog_message = ref("");
|
||
|
||
watch(
|
||
() => props.pageItem,
|
||
(newVal) => {
|
||
if (newVal.case_item_question && newVal.case_item_question.length > 0) {
|
||
for (let i = 0; i < newVal.case_item_question.length; i++) {
|
||
unitAnswer.answer[i] = "";
|
||
}
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
deep: true,
|
||
}
|
||
);
|
||
const emit = defineEmits(["switchPage", "getAllAnswer"]);
|
||
const switchPage = (index) => {
|
||
emit("switchPage", index);
|
||
};
|
||
const behaviorRecord = (step = "", start_time = "", end_time = "") => {
|
||
api
|
||
.behaviorRecord({
|
||
case_id: props.case_id,
|
||
step: step,
|
||
start_time: start_time,
|
||
end_time: end_time,
|
||
})
|
||
.then((res) => {});
|
||
};
|
||
|
||
const checkAnswer = (data) => {
|
||
//
|
||
unitAnswer.pageIndex = data.pageIndex;
|
||
unitAnswer.answer[data.questionIndex] = {
|
||
answer: data.answer,
|
||
question_type: data.question_type,
|
||
question_id: data.questionId,
|
||
question_name: data.question_name,
|
||
question_answer: data.question_answer,
|
||
option_id: data.option_id,
|
||
error_tips: data.error_tips,
|
||
is_right_next: data.is_right_next,
|
||
};
|
||
// console.log(unitAnswer);
|
||
// allAnswer[data.pageIndex]=unitAnswer.answer;
|
||
// console.log(allAnswer);
|
||
};
|
||
const fomatObj = (obj) => {
|
||
let str = "";
|
||
for (let key in obj) {
|
||
if (str) {
|
||
str += `${obj[key]}`;
|
||
} else {
|
||
str = `${obj[key]}`;
|
||
}
|
||
}
|
||
return str;
|
||
};
|
||
const passNext = () => {
|
||
let answer = unitAnswer.answer;
|
||
console.log(answer);
|
||
let answerForamt = answer.map((item) => {
|
||
if (item.question_type == 2) {
|
||
return {
|
||
answer: fomatObj(item.answer),
|
||
question_type: item.question_type,
|
||
question_id: item.question_id,
|
||
question_name: item.question_name,
|
||
question_answer: item.question_answer,
|
||
option_id: item.option_id,
|
||
error_tips: item.error_tips,
|
||
is_right_next: item.is_right_next,
|
||
};
|
||
} else {
|
||
return { ...item };
|
||
}
|
||
});
|
||
console.log(answerForamt);
|
||
if (answerForamt.length == 0 && props.pageItem.case_item_question) {
|
||
dialog_message.value = "请回答本页所有问题后再提交";
|
||
cdialog.value.openDialog();
|
||
//showToast('请回答本页所有问题后再提交')
|
||
return false;
|
||
}
|
||
for (let i = 0; i < answerForamt.length; i++) {
|
||
if (!answerForamt[i].answer) {
|
||
dialog_message.value = "请回答本页第" + (i + 1) + "个问题后再提交";
|
||
cdialog.value.openDialog();
|
||
//showToast('请回答本页第'+(i+1)+'个问题后再提交')
|
||
return false;
|
||
}
|
||
|
||
if (answerForamt[i].question_type == 2) {
|
||
if (answerForamt[i].answer.length < 2) {
|
||
dialog_message.value = answerForamt[i].question_name + "至少选择两项";
|
||
cdialog.value.openDialog();
|
||
//showToast('本页第'+(i+1)+'个问题是多选')
|
||
return false;
|
||
}
|
||
}
|
||
if (
|
||
answerForamt[i].answer !== answerForamt[i].question_answer &&
|
||
answerForamt[i].is_right_next == 1 &&
|
||
answerForamt[i].question_type != 3
|
||
) {
|
||
//dialog_message.value=props.pageItem.error_tips;
|
||
dialog_message.value = answerForamt[i].error_tips;
|
||
cdialog.value.openDialog();
|
||
return false;
|
||
}
|
||
}
|
||
// alert(unitAnswer.pageIndex);
|
||
// allAnswer[unitAnswer.pageIndex]=answerForamt;
|
||
// console.log('allAnswer');
|
||
// console.log(allAnswer);
|
||
emit("getAllAnswer", {
|
||
pageIndex: unitAnswer.pageIndex,
|
||
answer: answerForamt,
|
||
});
|
||
return true;
|
||
};
|
||
const reportQuestion = (start, end) => {
|
||
let answer = unitAnswer.answer;
|
||
for (let i = 0; i < answer.length; i++) {
|
||
behaviorRecord(answer[i].question_name, start, end);
|
||
}
|
||
};
|
||
const goNext = (index) => {
|
||
if (passNext()) {
|
||
if (index < props.pageNum) {
|
||
let nextPageTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
||
localStorage.setItem("entryPage" + index, nextPageTime);
|
||
if (index == 1) {
|
||
let start = dayjs(props.start_time).format("YYYY-MM-DD HH:mm:ss");
|
||
behaviorRecord("第2页", start, nextPageTime);
|
||
reportQuestion(start, nextPageTime);
|
||
} else {
|
||
let prevPageTime = localStorage.getItem("entryPage" + (index - 1));
|
||
behaviorRecord(`第${index + 2}页`, prevPageTime, nextPageTime);
|
||
reportQuestion(prevPageTime, nextPageTime);
|
||
}
|
||
|
||
emit("switchPage", index);
|
||
} else {
|
||
let nextPageTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
||
localStorage.setItem("entryPage" + index, nextPageTime);
|
||
localStorage.setItem("lastPage", nextPageTime);
|
||
if (index == 1 && props.pageNum == 1) {
|
||
let start = dayjs(props.start_time).format("YYYY-MM-DD HH:mm:ss");
|
||
behaviorRecord("第2页", start, nextPageTime);
|
||
reportQuestion(start, nextPageTime);
|
||
} else {
|
||
let prevPageTime = localStorage.getItem("entryPage" + (index - 1));
|
||
behaviorRecord(`第${index + 2}页`, prevPageTime, nextPageTime);
|
||
reportQuestion(prevPageTime, nextPageTime);
|
||
}
|
||
emit("switchPage", index);
|
||
}
|
||
}
|
||
};
|
||
const showPreview=(index)=> {
|
||
//if(showImg.value)return;
|
||
showImg.value=true;
|
||
position.value=index;
|
||
setTimeout(()=>{
|
||
ImagePreview.value.swipeTo(index)
|
||
})
|
||
};
|
||
const handleClick = (e) => {
|
||
let src=e.target.currentSrc;
|
||
let index =imgList.value.findIndex((item)=>{
|
||
if(item==src) return true;
|
||
});
|
||
|
||
showPreview(index)
|
||
|
||
};
|
||
onMounted(async () => {
|
||
let imgArr = [];
|
||
await nextTick(() => {
|
||
const nodeList = document.querySelectorAll("#pagemain"+props.pageIndex+" .namebox img");
|
||
console.log(nodeList);
|
||
nodeList.forEach(function (node) {
|
||
imgArr.push(node.src);
|
||
node.removeEventListener("click",(e)=>{
|
||
handleClick(e)
|
||
});
|
||
node.addEventListener("click", (e)=>{
|
||
handleClick(e)
|
||
});
|
||
});
|
||
imgList.value = [...new Set(imgArr)];
|
||
});
|
||
});
|
||
const onChange=(newIndex)=>{
|
||
position.value = newIndex || 0
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.casemain.on{
|
||
opacity: 1;
|
||
display: block;
|
||
position: relative;
|
||
z-index:1;
|
||
height:auto;
|
||
min-height: 100vh;
|
||
}
|
||
.casemain{
|
||
position: relative;
|
||
z-index:-100;
|
||
height:0px;
|
||
display: none;
|
||
opacity: 0;
|
||
}
|
||
.main {
|
||
|
||
padding-bottom: 15px;
|
||
width: 100%;
|
||
position: relative;
|
||
background: #fff;
|
||
overflow: hidden;
|
||
.dealbox {
|
||
background: #fff;
|
||
margin: 12px 15px 10px;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.prev,
|
||
.next {
|
||
width: 73px;
|
||
font-size: 14px;
|
||
color: #43c9c3;
|
||
height: 34px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #ffffff;
|
||
border-radius: 5px;
|
||
border: 1px solid #43c9c3;
|
||
}
|
||
|
||
.count {
|
||
:deep() .van-count-down {
|
||
color: #fff;
|
||
}
|
||
|
||
right: 15px;
|
||
top: 18px;
|
||
z-index: 9;
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
height: 31px;
|
||
padding: 0 8px;
|
||
background: #43c9c3;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.bg {
|
||
width: 100%;
|
||
position: absolute;
|
||
z-index: 0;
|
||
}
|
||
|
||
.content {
|
||
margin: 20px 15px;
|
||
position: relative;
|
||
|
||
.page {
|
||
background: #fff;
|
||
|
||
min-height: 100px;
|
||
margin-bottom: 20px;
|
||
border-radius: 10px;
|
||
border: 1px solid #43c9c3;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card {
|
||
padding: 15px;
|
||
:deep() img {
|
||
width: 100%;
|
||
}
|
||
|
||
.descbox {
|
||
margin-top: 13px;
|
||
background: #f6feff;
|
||
border-radius: 8px;
|
||
padding: 12px 10px;
|
||
}
|
||
|
||
.titlebox {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
color: #000000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.namebox {
|
||
.row {
|
||
display: flex;
|
||
align-items: first baseline;
|
||
margin-bottom: 5px;
|
||
|
||
.left {
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #43c9c3;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.right {
|
||
font-size: 16px;
|
||
color: #333333;
|
||
line-height: 23px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|