296 lines
8.2 KiB
Vue
296 lines
8.2 KiB
Vue
<template>
|
|
<div class="count">
|
|
{{ countTime }}
|
|
</div>
|
|
<div class="main" v-show="showIntro && step==-1">
|
|
<img src="../assets/bg.png" alt="" class="bg">
|
|
<div class="content">
|
|
<img src="../assets/wave.png" alt="" class="top">
|
|
<img src="../assets/wave.png" alt="" class="xia">
|
|
<div class="title">
|
|
{{ caseObj.case_name }}
|
|
</div>
|
|
<div class="con" v-html="(casePage[0].case_item_model)[0].content" v-if="casePage.length > 0 && casePage[0].case_item_model">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="button" @click="handleStart" >马上开始</div>
|
|
</div>
|
|
</div>
|
|
<caseDetail v-for="(item, index) in pageList" :pageIndex="index" :step="step" @switchPage="switchPage" :pageItem="item" :pageNum="pageList.length" @getAllAnswer="getAllAnswer" :start_time="start_time" :case_id="case_id"></caseDetail>
|
|
<comment v-show="!showIntro && step==pageList.length" ref="commentRef" :countTime="countTime" @initPage="initPage" :start_time="entry_time" :allAnswer="allAnswer" :is_welfare="is_welfare"></comment>
|
|
<totop></totop>
|
|
<back :project_id="caseObj.project_id"></back>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref ,reactive,getCurrentInstance} from "vue";
|
|
const step = ref(-1);
|
|
const key = ref(0);
|
|
const showIntro = ref(true);
|
|
const countTime = ref('00:00');
|
|
const start_time = ref('');
|
|
const time = ref(0);
|
|
const timer = ref(null);
|
|
const casePage = ref([]);
|
|
const pageList = ref([]);
|
|
const entry_time=ref('');
|
|
const commentRef = ref(null);
|
|
import dayjs from 'dayjs'
|
|
import api from '../api/user.js';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { WXSHARE } from "../utils/wxshare-1.6.0";
|
|
import host from "../utils/host"
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const caseObj = reactive({});
|
|
const allAnswer = reactive({});
|
|
const { proxy } = getCurrentInstance();
|
|
const is_welfare = ref(0);
|
|
let origin=route.query.source?route.query.source:''
|
|
const source = ref(origin);
|
|
const case_id = ref(route.query.case_id);
|
|
const getProjectDetail=async(name,project_id)=>{
|
|
const {code,data}=await api.getProjectDetail(project_id);
|
|
if(code==200){
|
|
let link=host+'/web/caseIntro?case_id='+case_id.value;
|
|
WXSHARE(name,data.project_name,link,'');
|
|
}
|
|
}
|
|
const getDetail = async () => {
|
|
const { code, data } = await api.getCaseDetail(case_id.value);
|
|
proxy.$loading.hide();
|
|
if (code == 200) {
|
|
document.title = data.case_name;
|
|
if(data.is_join==1){
|
|
if(source.value){
|
|
router.push({
|
|
path:'/result',
|
|
query:{
|
|
case_id:data.case_id,
|
|
project_id:data.project_id,
|
|
source:source.value
|
|
|
|
}
|
|
})
|
|
}else{
|
|
router.push({
|
|
path:'/result',
|
|
query:{
|
|
case_id:data.case_id,
|
|
project_id:data.project_id
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
}
|
|
is_welfare.value=data.is_welfare;
|
|
console.log('is_welfare:'+data.is_welfare)
|
|
Object.assign(caseObj, data)
|
|
casePage.value = data.case_item;
|
|
pageList.value = [];
|
|
for (let i = 1; i < data.case_item.length; i++) {
|
|
pageList.value.push(data.case_item[i]);
|
|
}
|
|
getProjectDetail(data.case_name,data.project_id)
|
|
|
|
}
|
|
|
|
}
|
|
const behaviorRecord=(step='',start_time='',end_time='')=>{
|
|
api.behaviorRecord({
|
|
case_id:case_id.value,
|
|
step:step,
|
|
start_time:start_time,
|
|
end_time:end_time
|
|
}).then(res=>{
|
|
|
|
})
|
|
}
|
|
const addZero = (num) => {
|
|
return num < 10 ? '0' + num : '' + num;
|
|
}
|
|
const getAllAnswer=(data)=>{
|
|
//Object.assign(allAnswer,data)
|
|
allAnswer[data.pageIndex]=data.answer;
|
|
commentRef.value.formatAnswer(allAnswer)
|
|
}
|
|
const switchPage = (index) => {
|
|
if(index<0){
|
|
showIntro.value=true;
|
|
step.value=-1;
|
|
document.documentElement.scrollTop = 0;
|
|
document.body.scrollTop = 0;
|
|
}else{
|
|
step.value=index;
|
|
document.documentElement.scrollTop = 0;
|
|
document.body.scrollTop = 0;
|
|
}
|
|
if(index==pageList.value.length){
|
|
//alert(caseObj.project_id);
|
|
commentRef.value.init(caseObj.case_id,caseObj.project_id)
|
|
}
|
|
|
|
}
|
|
const handleCount = () => {
|
|
let minute = 0;
|
|
let second = 0;
|
|
if (timer.value) {
|
|
clearInterval(timer.value)
|
|
}
|
|
timer.value = setInterval(() => {
|
|
time.value = time.value + 1;
|
|
if (time.value >= 60) {
|
|
minute = Math.floor(time.value / 60);
|
|
second = time.value % 60;
|
|
if (minute >= 99 && second >= 59) {
|
|
clearInterval(timer.value)
|
|
}
|
|
countTime.value = `${addZero(minute)}:${addZero(second)}`;
|
|
} else {
|
|
countTime.value = `00:${addZero(time.value)}`;
|
|
}
|
|
}, 1000);
|
|
};
|
|
const initPage=()=>{
|
|
// step.value =-1;
|
|
// showIntro.value=true;
|
|
step.value = 0;
|
|
showIntro.value = false;
|
|
document.documentElement.scrollTop = 0;
|
|
document.body.scrollTop = 0;
|
|
if(caseObj.case_item.length<=1) {
|
|
commentRef.value.init(caseObj.case_id,caseObj.project_id)
|
|
}
|
|
}
|
|
const handleStart = () => {
|
|
step.value = 0;
|
|
showIntro.value = false;
|
|
start_time.value =dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
behaviorRecord('点击开始',entry_time.value,dayjs(start_time.value).format('YYYY-MM-DD HH:mm:ss'));
|
|
behaviorRecord('第1页',entry_time.value,dayjs(start_time.value).format('YYYY-MM-DD HH:mm:ss'));
|
|
document.documentElement.scrollTop = 0;
|
|
document.body.scrollTop = 0;
|
|
if(caseObj.case_item.length<=1) {
|
|
commentRef.value.init(caseObj.case_id,caseObj.project_id)
|
|
}
|
|
}
|
|
onMounted(async() => {
|
|
proxy.$loading.show();
|
|
entry_time.value=dayjs().format('YYYY-MM-DD HH:mm:ss')
|
|
getDetail();
|
|
behaviorRecord('进入问卷',entry_time.value,entry_time.value);
|
|
handleCount();
|
|
// await setTimeout(() => {
|
|
// const nodeList = document.querySelectorAll(".pagemain .namebox img");
|
|
// console.log(nodeList);
|
|
// nodeList.forEach(function (node) {
|
|
// imgList.value.push(node.src);
|
|
// node.onClick=null;
|
|
// // node.removeEventListener("click",(e)=>{
|
|
// // handleClick(e)
|
|
// // });
|
|
// node.addEventListener("click", (e)=>{
|
|
// handleClick(e)
|
|
// });
|
|
// });
|
|
// });
|
|
})
|
|
onBeforeMount(() => {
|
|
clearInterval(timer.value)
|
|
})
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.count {
|
|
color:#fff;
|
|
right: 15px;
|
|
top: 12px;
|
|
z-index: 9;
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
height: 31px;
|
|
padding: 0 8px;
|
|
background: #43C9C3;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
.bg {
|
|
width: 100%;
|
|
position: absolute;
|
|
z-index: 0;
|
|
}
|
|
|
|
.content {
|
|
background: #fff;
|
|
position: relative;
|
|
margin: 20px 15px;
|
|
min-height: 300px;
|
|
margin-bottom: 80px;
|
|
border-left: 1px solid #43C9C3;
|
|
border-right: 1px solid #43C9C3;
|
|
|
|
.con {
|
|
margin: 0 10px;
|
|
:deep() img {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
padding: 20px 0;
|
|
font-weight: 500;
|
|
margin: 0 30px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
color: #000000;
|
|
}
|
|
|
|
.top {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: -9px;
|
|
}
|
|
|
|
.xia {
|
|
width: 100%;
|
|
position: absolute;
|
|
transform: rotate(180deg);
|
|
bottom: -9px;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
height: 49px;
|
|
bottom: 10px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.button {
|
|
width: 250px;
|
|
height: 40px;
|
|
background: #43C9C3;
|
|
border-radius: 20px;
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|