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

33
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"-->
<!-- :src="styleInfo.head_img_url" />-->
<!-- LOGO -->
<div style="display: flex; flex-flow: row nowrap">
<van-field
v-if="page !== 0 && page !== pages.length + 1"
label-align="top"
@@ -26,6 +27,10 @@
<div class="preview-info-header-desc" v-html="questionsData?.survey?.introduction"></div>
</template>
</van-field>
<div class="preview-icon">
<img :src="icon" alt="icon" />
</div>
</div>
<div
v-if="styleInfo.logo_status && styleInfo.logo_url"
class="example-logo"
@@ -478,7 +483,6 @@
<!-- 分页 -->
<!-- eslint-disable max-len -->
<div v-show="showPage" class="footer-page">
<pfe-pagination
class="pagination"
:page="page"
@@ -506,7 +510,6 @@
/>
</div>
<!-- eslint-enable max-len -->
</div>
</template>
<script setup>
@@ -534,6 +537,9 @@ import msg from './js/message';
import answerMock from '@/views/Survey/views/Preview/js/mock.js';
import layout from '@/layouts/index.vue';
// const isPreview = ref(true);
// hooks file
import icon from '@/assets/img/create-right-back.png';
// scrollbar
const scrollbar = useTemplateRef('scrollbar');
const questionStore = useQuestionStore();
@@ -546,7 +552,6 @@ const {
page,
pages,
l,
showPage,
loading,
prevLoading,
localPageTimer,
@@ -1209,6 +1214,16 @@ async function answer(callback, callbackBeforePage) {
display: none;
}
.preview-icon {
overflow: hidden;
width: 40%; /* 根据实际图片大小调整 */
height: 85px; /* 根据实际图片大小调整 */
img {
width: 64px;
height: 139px;
}
}
.preview-container {
overflow: hidden;
min-height: calc(100vh - 100px);
@@ -1228,18 +1243,6 @@ async function answer(callback, callbackBeforePage) {
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 {

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

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

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

@@ -1,4 +1,5 @@
<template>
<div v-if="page < pages" class="footer-page">
<van-row class="pagination-mob" :gutter="10">
<!-- mob端 -->
<van-col :span="12">
@@ -18,6 +19,7 @@
</van-button>
</van-col>
</van-row>
</div>
</template>
<script>
@@ -132,6 +134,7 @@ export default defineComponent({
const showLastButton = computed(
() => props.showPrevious && props.page > props.min && props.page < props.pages - 1
);
console.log(`pages-page`, props.page, props.pages);
return {
prevButtonText,
nextButtonText,
@@ -156,4 +159,16 @@ export default defineComponent({
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>

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

@@ -106,11 +106,11 @@ export default defineComponent({
const isEndUrl = computed(() => {
const code = props.action ? props.action.code : props.code;
return (
(code === 20004 &&
props.survey.screening_end_url_select &&
props.survey.screening_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 === 20004
&& props.survey.screening_end_url_select
&& props.survey.screening_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)
);
});

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

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

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

@@ -147,8 +147,8 @@ export default defineComponent({
// 替换文本
let replacement = '';
// 查找引用问题
const question =
props.questions.find((question) => {
const question
= props.questions.find((question) => {
// 矩阵题
if (question.question_type >= 8 && question.question_type <= 11) {
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;
}) ||
props.questions.find((question) => {
})
|| props.questions.find((question) => {
// 矩阵题
if (question.question_type >= 8 && question.question_type <= 11) {
return question.title === (value + cycleIndexStr).split('_R')[0].split('_C')[0];
@@ -187,8 +187,8 @@ export default defineComponent({
replacement = answer[option.option_key];
}
} else if (
question.question_type === 2 &&
Object.keys(answer).length >= question.config.min_select
question.question_type === 2
&& Object.keys(answer).length >= question.config.min_select
) {
// 查找引用选项(多选)
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: '请点击查看图片'
},
NoteCantViewAfterTimeLimit: {
en: "Note: Can't view after time limit",
en: 'Note: Can\'t view after time limit',
zh: '注意：超过显示时间限制后将无法再次查看'
},
DisplayTimeLimitExceeded: {

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

@@ -250,10 +250,10 @@ function quesHandle(answer, logChild) {
const matrixRateHandle = () => {
// 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
if (
logChild.cell_index === 0 ||
logChild.row_index === 0 ||
!logChild.operator ||
!logChild.value
logChild.cell_index === 0
|| logChild.row_index === 0
|| !logChild.operator
|| !logChild.value
) {
return true;
}
@@ -265,10 +265,10 @@ function quesHandle(answer, logChild) {
const matrixInputHandle = () => {
// 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
if (
logChild.cell_index === 0 ||
logChild.row_index === 0 ||
!logChild.operator ||
!logChild.value
logChild.cell_index === 0
|| logChild.row_index === 0
|| !logChild.operator
|| !logChild.value
) {
return true;
}
@@ -519,10 +519,10 @@ function getlogicStatus(questionData) {
// } else {
// statusStr = statusStr + conditionStatus;
// }
statusStr =
statusStr +
(logChild.logic === 'and' ? '&&' : logChild.logic === 'or' ? '||' : '') +
conditionStatus;
statusStr
= statusStr
+ (logChild.logic === 'and' ? '&&' : logChild.logic === 'or' ? '||' : '')
+ conditionStatus;
});
// eslint-disable-next-line no-eval
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) {
// 只计算跳转后所在页面的隐藏逻辑，否则会出现只返回最后一道隐藏选项题目的情况，导致失效
const toPage = page + 1;
const hasHiddenLogicQuizPage =
data.pages.findIndex((page) => page.includes(logic.question_index)) + 1;
const hasHiddenLogicQuizPage
= data.pages.findIndex((page) => page.includes(logic.question_index)) + 1;
if (hasHiddenLogicQuizPage === toPage) {
// 选项隐藏逻辑
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;
}
} else if (
answer &&
questionType === 1 &&
Object.keys(answer).findIndex((value) => !answer[value]) !== -1
answer
&& questionType === 1
&& Object.keys(answer).findIndex((value) => !answer[value]) !== -1
) {
// 单选题
isError = true;
@@ -303,9 +303,9 @@ export default defineComponent({
} else if (answer && questionType === 12) {
question.error = '';
} else if (
answer &&
questionType === 14 &&
Object.keys(answer).length < config.min_select
answer
&& questionType === 14
&& Object.keys(answer).length < config.min_select
) {
// 图片多选题
isError = true;
@@ -343,8 +343,8 @@ export default defineComponent({
switch (config.text_type) {
// 字母
case 3:
isError =
config.include_mark === 1
isError
= config.include_mark === 1
? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
newValue
) || !newValue.length
@@ -353,8 +353,8 @@ export default defineComponent({
break;
// 中文
case 4:
isError =
config.include_mark === 1
isError
= 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(
newValue
) || !newValue.length
@@ -365,8 +365,8 @@ export default defineComponent({
break;
// 邮箱
case 5:
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(
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(
value
);
question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
@@ -378,8 +378,8 @@ export default defineComponent({
break;
// 身份证号
case 7:
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(
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(
value
);
question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
@@ -447,9 +447,9 @@ export default defineComponent({
break;
}
if (
!question.error &&
value.length < config.min &&
![1, 2].includes(config.text_type)
!question.error
&& value.length < config.min
&& ![1, 2].includes(config.text_type)
) {
question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
}
@@ -825,8 +825,8 @@ export default defineComponent({
const evt1 = {};
if ([1].includes(question.question_type)) {
evt1.value =
Object.keys(question.answer)
evt1.value
= Object.keys(question.answer)
.map((key) => (question.answer[key] ? key : undefined))
.filter((i) => !!i)?.[0] || undefined;
evt1.options = question.list.flatMap((i) => i.options);