|
|
|
|
@ -1,10 +1,44 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog :visible.sync="visible" width="60%" :show-close="false" class="survey-dialog-mobile">
|
|
|
|
|
<el-dialog :visible.sync="visible" width="80%" :show-close="false" class="survey-dialog-mobile">
|
|
|
|
|
<div class="survey-mobile-bg">
|
|
|
|
|
<div class="survey-mobile-card">
|
|
|
|
|
<div class="survey-header">
|
|
|
|
|
<div class="survey-title">{{ surveyData.title }}</div>
|
|
|
|
|
<div class="survey-description">{{ surveyData.desc }}</div>
|
|
|
|
|
|
|
|
|
|
<!-- 预览模式下显示二维码 -->
|
|
|
|
|
<div v-if="previewOnly && surveyData.qrCodeData" class="qr-code-section">
|
|
|
|
|
<div class="qr-code-title">
|
|
|
|
|
<i class="el-icon-qrcode"></i> 问卷二维码
|
|
|
|
|
</div>
|
|
|
|
|
<div class="qr-code-container">
|
|
|
|
|
<img
|
|
|
|
|
:src="surveyData.qrCodeData"
|
|
|
|
|
alt="问卷二维码"
|
|
|
|
|
class="qr-code-image"
|
|
|
|
|
@error="handleQrCodeError"
|
|
|
|
|
/>
|
|
|
|
|
<div class="qr-code-actions">
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="downloadQrCode"
|
|
|
|
|
icon="el-icon-download"
|
|
|
|
|
>
|
|
|
|
|
下载二维码
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- <el-button
|
|
|
|
|
type="info"
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="copyQrCodeUrl"
|
|
|
|
|
icon="el-icon-copy-document"
|
|
|
|
|
>
|
|
|
|
|
复制链接
|
|
|
|
|
</el-button> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="survey-meta">
|
|
|
|
|
<span class="meta-item"><i class="el-icon-date"></i> {{ surveyData.start_time }}</span>
|
|
|
|
|
<span class="meta-item"><i class="el-icon-time"></i> {{ surveyData.end_time }}</span>
|
|
|
|
|
@ -14,8 +48,16 @@
|
|
|
|
|
<div v-for="(q, idx) in questionList" :key="q.id" class="question-item">
|
|
|
|
|
<div class="question-header">
|
|
|
|
|
<span class="question-number">{{ idx+1 }}</span>
|
|
|
|
|
<span v-if="q.rule && q.rule.includes('required')" class="required-mark">*</span>
|
|
|
|
|
<span class="question-title">{{ q.name }}</span>
|
|
|
|
|
<div class="question-title">
|
|
|
|
|
<div class="question-title-text">
|
|
|
|
|
<span v-if="q.rule && q.rule.includes('required')" class="required-mark">*</span>
|
|
|
|
|
<span class="question-title">{{ q.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="question-title-desc" v-if="q.course_content">
|
|
|
|
|
<span class="question-title-desc-text">{{ q.course_content?q.course_content.theme:'' }}{{ q.course_content.teacher?' -- '+q.course_content.teacher.name:'' }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="question-content">
|
|
|
|
|
@ -122,6 +164,7 @@
|
|
|
|
|
page_size: 999,
|
|
|
|
|
sort_name: 'sort',
|
|
|
|
|
sort_type: 'ASC',
|
|
|
|
|
show_relation:['courseContent.teacher'],
|
|
|
|
|
filter: [{
|
|
|
|
|
key: 'course_content_evaluation_id',
|
|
|
|
|
op: 'eq',
|
|
|
|
|
@ -130,13 +173,82 @@
|
|
|
|
|
})
|
|
|
|
|
this.questionList = res.data
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 下载二维码
|
|
|
|
|
downloadQrCode() {
|
|
|
|
|
if (!this.surveyData.qrCodeData) {
|
|
|
|
|
this.$message.warning('二维码数据不存在');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const link = document.createElement('a');
|
|
|
|
|
link.href = this.surveyData.qrCodeData;
|
|
|
|
|
link.download = `${this.surveyData.title}-问卷二维码.png`;
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
|
link.click();
|
|
|
|
|
document.body.removeChild(link);
|
|
|
|
|
this.$message.success('二维码下载成功');
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('下载失败:', error);
|
|
|
|
|
this.$message.error('下载失败，请重试');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 复制问卷链接
|
|
|
|
|
copyQrCodeUrl() {
|
|
|
|
|
const surveyUrl = `${window.location.origin}/survey-fill.html?id=${this.surveyData.id}`;
|
|
|
|
|
|
|
|
|
|
if (navigator.clipboard) {
|
|
|
|
|
navigator.clipboard.writeText(surveyUrl).then(() => {
|
|
|
|
|
this.$message.success('问卷链接已复制到剪贴板');
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.fallbackCopyTextToClipboard(surveyUrl);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.fallbackCopyTextToClipboard(surveyUrl);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 备用复制方法
|
|
|
|
|
fallbackCopyTextToClipboard(text) {
|
|
|
|
|
const textArea = document.createElement('textarea');
|
|
|
|
|
textArea.value = text;
|
|
|
|
|
textArea.style.position = 'fixed';
|
|
|
|
|
textArea.style.left = '-999999px';
|
|
|
|
|
textArea.style.top = '-999999px';
|
|
|
|
|
document.body.appendChild(textArea);
|
|
|
|
|
textArea.focus();
|
|
|
|
|
textArea.select();
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
document.execCommand('copy');
|
|
|
|
|
this.$message.success('问卷链接已复制到剪贴板');
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error('复制失败:', err);
|
|
|
|
|
this.$message.error('复制失败，请手动复制');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.body.removeChild(textArea);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 处理二维码图片加载错误
|
|
|
|
|
handleQrCodeError() {
|
|
|
|
|
console.error('二维码图片加载失败');
|
|
|
|
|
this.$message.warning('二维码图片加载失败');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.survey-dialog-mobile>>>.el-dialog{
|
|
|
|
|
margin-top:5vh!important;
|
|
|
|
|
}
|
|
|
|
|
.survey-dialog-mobile>>>.el-dialog__body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
background: #f4f6fa;
|
|
|
|
|
height:80vh;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.survey-mobile-bg {
|
|
|
|
|
@ -149,7 +261,7 @@
|
|
|
|
|
|
|
|
|
|
.survey-mobile-card {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
max-width: 414px;
|
|
|
|
|
max-width: 600px;
|
|
|
|
|
min-width: 320px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 18px;
|
|
|
|
|
@ -213,7 +325,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.question-number {
|
|
|
|
|
background: #3498db;
|
|
|
|
|
background: #bf976e;
|
|
|
|
|
color: #fff;
|
|
|
|
|
width: 22px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
@ -229,10 +341,15 @@
|
|
|
|
|
.question-title {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #2c3e50;
|
|
|
|
|
color: #333;
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.question-title-desc-text{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #6c757d;
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
}
|
|
|
|
|
.required-mark {
|
|
|
|
|
color: #e74c3c;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
@ -298,6 +415,58 @@
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 二维码相关样式 */
|
|
|
|
|
.qr-code-section {
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background: #f8f9fa;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
border: 1px solid #e9ecef;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qr-code-title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #2c3e50;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qr-code-title i {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
color: #3498db;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qr-code-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qr-code-image {
|
|
|
|
|
width: 150px;
|
|
|
|
|
height: 150px;
|
|
|
|
|
border: 2px solid #e9ecef;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qr-code-actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qr-code-actions .el-button {
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 500px) {
|
|
|
|
|
.survey-mobile-card {
|
|
|
|
|
max-width: 100vw;
|
|
|
|
|
|
