hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix[预览]: 预览主页样式更改

Browse Source 
- 预览主页内容修改
- 修复预览主页提交之后遗留底部空白部分
This commit is contained in:
Huangzhe
2025-03-18 10:42:28 +08:00
parent 0cf4bf14c3
commit 9d0e89d3d8
12 changed files with 301 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/Survey/views/Preview/Index.vue
View File

@@ -12,6 +12,7 @@
<!-- <img v-if="styleInfo.head_img_status && styleInfo.head_img_url" width="100%" class="head-img"--> <!-- <img v-if="styleInfo.head_img_status && styleInfo.head_img_url" width="100%" class="head-img"-->
<!-- :src="styleInfo.head_img_url" />--> <!-- :src="styleInfo.head_img_url" />-->
<!-- LOGO --> <!-- LOGO -->
<div style="display: flex; flex-flow: row nowrap">
<van-field <van-field
v-if="page !== 0 && page !== pages.length + 1" v-if="page !== 0 && page !== pages.length + 1"
label-align="top" label-align="top"
@@ -26,6 +27,10 @@
<div class="preview-info-header-desc" v-html="questionsData?.survey?.introduction"></div> <div class="preview-info-header-desc" v-html="questionsData?.survey?.introduction"></div>
</template> </template>
</van-field> </van-field>
<div class="preview-icon">
<img :src="icon" alt="icon" />
</div>
</div>
<div <div
v-if="styleInfo.logo_status && styleInfo.logo_url" v-if="styleInfo.logo_status && styleInfo.logo_url"
class="example-logo" class="example-logo"
@@ -470,7 +475,7 @@
/> />
</div> </div>
<div style="margin: 10px 0; color: rgba(75, 75, 89, 1); text-align: center"> <div style="margin: 10px 0; color: rgba(75, 75, 89, 1); text-align: center">
<el-text> 由数字科技中心YIP提供支持 </el-text> <el-text> 由数字科技中心YIP提供支持</el-text>
</div> </div>
<!-- <LangTranslate v-if="isAnswer && styleInfo.is_yip" translate-key="PoweredByDigitalTechnologyCenterYIP" <!-- <LangTranslate v-if="isAnswer && styleInfo.is_yip" translate-key="PoweredByDigitalTechnologyCenterYIP"
class="footer" /> --> class="footer" /> -->
@@ -478,7 +483,6 @@
<!-- 分页 --> <!-- 分页 -->
<!-- eslint-disable max-len --> <!-- eslint-disable max-len -->
<div v-show="showPage" class="footer-page">
<pfe-pagination <pfe-pagination
class="pagination" class="pagination"
:page="page" :page="page"
@@ -506,7 +510,6 @@
/> />
</div> </div>
<!-- eslint-enable max-len --> <!-- eslint-enable max-len -->
</div>
</template> </template>
<script setup> <script setup>
@@ -534,6 +537,9 @@ import msg from './js/message';
import answerMock from '@/views/Survey/views/Preview/js/mock.js'; import answerMock from '@/views/Survey/views/Preview/js/mock.js';
import layout from '@/layouts/index.vue'; import layout from '@/layouts/index.vue';
// const isPreview = ref(true); // const isPreview = ref(true);
// hooks file
import icon from '@/assets/img/create-right-back.png';
// scrollbar // scrollbar
const scrollbar = useTemplateRef('scrollbar'); const scrollbar = useTemplateRef('scrollbar');
const questionStore = useQuestionStore(); const questionStore = useQuestionStore();
@@ -546,7 +552,6 @@ const {
page, page,
pages, pages,
l, l,
showPage,
loading, loading,
prevLoading, prevLoading,
localPageTimer, localPageTimer,
@@ -1209,6 +1214,16 @@ async function answer(callback, callbackBeforePage) {
display: none; display: none;
} }
.preview-icon {
overflow: hidden;
width: 40%; /* 根据实际图片大小调整 */
height: 85px; /* 根据实际图片大小调整 */
img {
width: 64px;
height: 139px;
}
}
.preview-container { .preview-container {
overflow: hidden; overflow: hidden;
min-height: calc(100vh - 100px); min-height: calc(100vh - 100px);
@@ -1228,18 +1243,6 @@ async function answer(callback, callbackBeforePage) {
background-color: white; background-color: white;
} }
} }
.footer-page {
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
padding-top: 8px;
border-radius: 16px 16px 0 0;
background-color: white;
}
} }
.preview-info { .preview-info {

4
src/views/Survey/views/Preview/components/AnswerViewer.vue
View File

@@ -227,8 +227,8 @@ export default defineComponent({
.map((option) => { .map((option) => {
return this.wares.find( return this.wares.find(
(ware) => (ware) =>
ware.question_index === option.question_index && ware.question_index === option.question_index
ware.option_index === option.option_index && ware.option_index === option.option_index
); );
}); });
wares = wares.filter((x) => x); wares = wares.filter((x) => x);

15
src/views/Survey/views/Preview/components/PfePagination/Index.vue
View File

@@ -1,4 +1,5 @@
<template> <template>
<div v-if="page < pages" class="footer-page">
<van-row class="pagination-mob" :gutter="10"> <van-row class="pagination-mob" :gutter="10">
<!-- mob端 --> <!-- mob端 -->
<van-col :span="12"> <van-col :span="12">
@@ -18,6 +19,7 @@
</van-button> </van-button>
</van-col> </van-col>
</van-row> </van-row>
</div>
</template> </template>
<script> <script>
@@ -132,6 +134,7 @@ export default defineComponent({
const showLastButton = computed( const showLastButton = computed(
() => props.showPrevious && props.page > props.min && props.page < props.pages - 1 () => props.showPrevious && props.page > props.min && props.page < props.pages - 1
); );
console.log(`pages-page`, props.page, props.pages);
return { return {
prevButtonText, prevButtonText,
nextButtonText, nextButtonText,
@@ -156,4 +159,16 @@ export default defineComponent({
border-radius: 8px; border-radius: 8px;
} }
} }
.footer-page {
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
padding-top: 8px;
border-radius: 16px 16px 0 0;
background-color: white;
}
</style> </style>

2
src/views/Survey/views/Preview/components/SceneSurveyViewerPage/Index.vue
View File

@@ -144,7 +144,7 @@ export default {
methods: { methods: {
debounce(func, wait) { debounce(func, wait) {
let timeout; let timeout;
return function (...args) { return function(...args) {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait); timeout = setTimeout(() => func.apply(this, args), wait);
}; };

10
src/views/Survey/views/Preview/components/questions/QLast.vue
View File

@@ -106,11 +106,11 @@ export default defineComponent({
const isEndUrl = computed(() => { const isEndUrl = computed(() => {
const code = props.action ? props.action.code : props.code; const code = props.action ? props.action.code : props.code;
return ( return (
(code === 20004 && (code === 20004
props.survey.screening_end_url_select && && props.survey.screening_end_url_select
props.survey.screening_end_url) || && props.survey.screening_end_url)
(code === 20011 && props.survey.success_end_url_select && props.survey.success_end_url) || || (code === 20011 && props.survey.success_end_url_select && props.survey.success_end_url)
(code === 20016 && props.survey.quota_end_url_select && props.survey.quota_end_url) || (code === 20016 && props.survey.quota_end_url_select && props.survey.quota_end_url)
); );
}); });

12
src/views/Survey/views/Preview/components/questions/QRadio.vue
View File

@@ -267,16 +267,16 @@ export default defineComponent({
}); });
if ( if (
!compareArrayByField(options.value, newOptions, 'option_key') || !compareArrayByField(options.value, newOptions, 'option_key')
!compareArrayByField(options.value, newOptions, 'option') || !compareArrayByField(options.value, newOptions, 'option')
) { ) {
options.value = newOptions; options.value = newOptions;
} }
// 清空值和答案 // 清空值和答案
if ( if (
value.value && value.value
options.value.findIndex((option) => option.option_key === value.value) === -1 && options.value.findIndex((option) => option.option_key === value.value) === -1
) { ) {
// 清空值 // 清空值
value.value = ''; value.value = '';
@@ -294,8 +294,8 @@ export default defineComponent({
() => options.value, () => options.value,
(val, oldVal) => { (val, oldVal) => {
if ( if (
compareArrayByField(val, oldVal || [], 'option_key') && compareArrayByField(val, oldVal || [], 'option_key')
compareArrayByField(val, oldVal || [], 'option') && compareArrayByField(val, oldVal || [], 'option')
) { ) {
return; return;
} }

12
src/views/Survey/views/Preview/components/questions/Question.vue
View File

@@ -147,8 +147,8 @@ export default defineComponent({
// 替换文本 // 替换文本
let replacement = ''; let replacement = '';
// 查找引用问题 // 查找引用问题
const question = const question
props.questions.find((question) => { = props.questions.find((question) => {
// 矩阵题 // 矩阵题
if (question.question_type >= 8 && question.question_type <= 11) { if (question.question_type >= 8 && question.question_type <= 11) {
return question.title === value.split('_R')[0].split('_C')[0]; return question.title === value.split('_R')[0].split('_C')[0];
@@ -158,8 +158,8 @@ export default defineComponent({
return question.title === value.split('_A')[0]; return question.title === value.split('_A')[0];
} }
return question.title === value; return question.title === value;
}) || })
props.questions.find((question) => { || props.questions.find((question) => {
// 矩阵题 // 矩阵题
if (question.question_type >= 8 && question.question_type <= 11) { if (question.question_type >= 8 && question.question_type <= 11) {
return question.title === (value + cycleIndexStr).split('_R')[0].split('_C')[0]; return question.title === (value + cycleIndexStr).split('_R')[0].split('_C')[0];
@@ -187,8 +187,8 @@ export default defineComponent({
replacement = answer[option.option_key]; replacement = answer[option.option_key];
} }
} else if ( } else if (
question.question_type === 2 && question.question_type === 2
Object.keys(answer).length >= question.config.min_select && Object.keys(answer).length >= question.config.min_select
) { ) {
// 查找引用选项(多选) // 查找引用选项(多选)
options.forEach((option) => { options.forEach((option) => {

3
src/views/Survey/views/Preview/hooks/usePreviewHooks.ts Normal file
View File

@@ -0,0 +1,3 @@
import imgUrl from '@/assets/img/create-right-back.png';
export { imgUrl };

2
src/views/Survey/views/Preview/js/language.js
View File

@@ -350,7 +350,7 @@ export const language = {
zh: '请点击查看图片' zh: '请点击查看图片'
}, },
NoteCantViewAfterTimeLimit: { NoteCantViewAfterTimeLimit: {
en: "Note: Can't view after time limit", en: 'Note: Can\'t view after time limit',
zh: '注意：超过显示时间限制后将无法再次查看' zh: '注意：超过显示时间限制后将无法再次查看'
}, },
DisplayTimeLimitExceeded: { DisplayTimeLimitExceeded: {

24
src/views/Survey/views/Preview/js/logical.js
View File

@@ -250,10 +250,10 @@ function quesHandle(answer, logChild) {
const matrixRateHandle = () => { const matrixRateHandle = () => {
// 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验 // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
if ( if (
logChild.cell_index === 0 || logChild.cell_index === 0
logChild.row_index === 0 || || logChild.row_index === 0
!logChild.operator || || !logChild.operator
!logChild.value || !logChild.value
) { ) {
return true; return true;
} }
@@ -265,10 +265,10 @@ function quesHandle(answer, logChild) {
const matrixInputHandle = () => { const matrixInputHandle = () => {
// 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验 // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
if ( if (
logChild.cell_index === 0 || logChild.cell_index === 0
logChild.row_index === 0 || || logChild.row_index === 0
!logChild.operator || || !logChild.operator
!logChild.value || !logChild.value
) { ) {
return true; return true;
} }
@@ -519,10 +519,10 @@ function getlogicStatus(questionData) {
// } else { // } else {
// statusStr = statusStr + conditionStatus; // statusStr = statusStr + conditionStatus;
// } // }
statusStr = statusStr
statusStr + = statusStr
(logChild.logic === 'and' ? '&&' : logChild.logic === 'or' ? '||' : '') + + (logChild.logic === 'and' ? '&&' : logChild.logic === 'or' ? '||' : '')
conditionStatus; + conditionStatus;
}); });
// eslint-disable-next-line no-eval // eslint-disable-next-line no-eval
logs.logicStatus = eval(statusStr); logs.logicStatus = eval(statusStr);

4
src/views/Survey/views/Preview/js/mock.js
View File

@@ -105,8 +105,8 @@ export default function answerMock(questionsData, page) {
} else if (logic.skip_type === 4) { } else if (logic.skip_type === 4) {
// 只计算跳转后所在页面的隐藏逻辑，否则会出现只返回最后一道隐藏选项题目的情况，导致失效 // 只计算跳转后所在页面的隐藏逻辑，否则会出现只返回最后一道隐藏选项题目的情况，导致失效
const toPage = page + 1; const toPage = page + 1;
const hasHiddenLogicQuizPage = const hasHiddenLogicQuizPage
data.pages.findIndex((page) => page.includes(logic.question_index)) + 1; = data.pages.findIndex((page) => page.includes(logic.question_index)) + 1;
if (hasHiddenLogicQuizPage === toPage) { if (hasHiddenLogicQuizPage === toPage) {
// 选项隐藏逻辑 // 选项隐藏逻辑
updateOptionHidden(data.hide_options, logic); updateOptionHidden(data.hide_options, logic);

38
src/views/Survey/views/Preview/js/questions.js
View File

@@ -155,9 +155,9 @@ export default defineComponent({
question.error = translatedText.value.ThisIsARequiredQuestion; question.error = translatedText.value.ThisIsARequiredQuestion;
} }
} else if ( } else if (
answer && answer
questionType === 1 && && questionType === 1
Object.keys(answer).findIndex((value) => !answer[value]) !== -1 && Object.keys(answer).findIndex((value) => !answer[value]) !== -1
) { ) {
// 单选题 // 单选题
isError = true; isError = true;
@@ -303,9 +303,9 @@ export default defineComponent({
} else if (answer && questionType === 12) { } else if (answer && questionType === 12) {
question.error = ''; question.error = '';
} else if ( } else if (
answer && answer
questionType === 14 && && questionType === 14
Object.keys(answer).length < config.min_select && Object.keys(answer).length < config.min_select
) { ) {
// 图片多选题 // 图片多选题
isError = true; isError = true;
@@ -343,8 +343,8 @@ export default defineComponent({
switch (config.text_type) { switch (config.text_type) {
// 字母 // 字母
case 3: case 3:
isError = isError
config.include_mark === 1 = config.include_mark === 1
? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test( ? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
newValue newValue
) || !newValue.length ) || !newValue.length
@@ -353,8 +353,8 @@ export default defineComponent({
break; break;
// 中文 // 中文
case 4: case 4:
isError = isError
config.include_mark === 1 = config.include_mark === 1
? !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test( ? !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
newValue newValue
) || !newValue.length ) || !newValue.length
@@ -365,8 +365,8 @@ export default defineComponent({
break; break;
// 邮箱 // 邮箱
case 5: case 5:
isError = isError
!/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( = !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
value value
); );
question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : ''; question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
@@ -378,8 +378,8 @@ export default defineComponent({
break; break;
// 身份证号 // 身份证号
case 7: case 7:
isError = isError
!/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test( = !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
value value
); );
question.error = isError ? translatedText.value.PleaseEnterACorrectID : ''; question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
@@ -447,9 +447,9 @@ export default defineComponent({
break; break;
} }
if ( if (
!question.error && !question.error
value.length < config.min && && value.length < config.min
![1, 2].includes(config.text_type) && ![1, 2].includes(config.text_type)
) { ) {
question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min); question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
} }
@@ -825,8 +825,8 @@ export default defineComponent({
const evt1 = {}; const evt1 = {};
if ([1].includes(question.question_type)) { if ([1].includes(question.question_type)) {
evt1.value = evt1.value
Object.keys(question.answer) = Object.keys(question.answer)
.map((key) => (question.answer[key] ? key : undefined)) .map((key) => (question.answer[key] ? key : undefined))
.filter((i) => !!i)?.[0] || undefined; .filter((i) => !!i)?.[0] || undefined;
evt1.options = question.list.flatMap((i) => i.options); evt1.options = question.list.flatMap((i) => i.options);