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

feat: 预览样式更改

Browse Source 
- 订正预览样式内容
- 分页逻辑变更
- style lint
This commit is contained in:
Huangzhe
2025-03-17 15:57:39 +08:00
parent 80fe686c8e
commit ebc1bf5c34
14 changed files with 243 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@@ -9,11 +9,13 @@ declare module 'vue' {
export interface GlobalComponents {
Contenteditable: typeof import('./src/components/contenteditable.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElCol: typeof import('element-plus/es')['ElCol']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElText: typeof import('element-plus/es')['ElText']

2
src/stores/Questions/useQuestionStore.ts
View File

@@ -7,7 +7,7 @@ export const useQuestionStore = defineStore('questionStore', () => {
// styleInfo 主题样式
const styleInfo = computed(() => questionsData.value?.survey?.style || {});
// 当前页数
const page = ref(0);
const page = ref(1);
// 分页
const pages = computed(() => questionsData.value?.answer?.pages || []);
// 加载

4
src/views/Design/components/Questions/Choice.vue
View File

@@ -137,10 +137,6 @@ const emitValue = () => {
};
</script>
<style scoped lang="scss">
.choice-html {
width: 100%;
}
.base-select {
& .van-checkbox-group,
.van-radio-group {

27
src/views/Design/components/Questions/MartrixQuestion.vue
View File

@@ -6,7 +6,7 @@ const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');
// 注意, element.options 里面的东西是数组，第一项内容是行标签内容，第二项内容是列标签内容
// 类型 AI 生成 切勿盲目相信，以实际为准
const props = defineProps<{
element: Any;
element: any;
index: number;
active: boolean;
}>();
@@ -40,9 +40,7 @@ const emitValue = () => {
<template>
<van-field
v-model="element.stem"
:label="element.stem"
:required="element.config.is_required === 1"
v-model="element.stem" :label="element.stem" :required="element.config.is_required === 1"
label-align="top"
>
<template #left-icon>
@@ -62,11 +60,7 @@ const emitValue = () => {
<th></th>
<!-- 第二行内容开始填充 -->
<td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
<contenteditable
v-model="col.option"
:active="active"
@blur="emitValue"
></contenteditable>
<contenteditable v-model="col.option" :active="active" @blur="emitValue"></contenteditable>
</td>
<th></th>
@@ -76,11 +70,7 @@ const emitValue = () => {
<tr v-for="row in element.options[0]" :key="row.option">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<td>
<contenteditable
v-model="row.option"
:active="active"
@blur="emitValue"
></contenteditable>
<contenteditable v-model="row.option" :active="active" @blur="emitValue"></contenteditable>
</td>
<td v-for="col in element.options[1]" :key="col.option" class="td-input">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
@@ -88,11 +78,8 @@ const emitValue = () => {
</td>
<td v-if="element.config.is_limit_right_content === 1">
<contenteditable
v-model="row.option_config.limit_right_content"
:active="active"
@blur="emitValue"
></contenteditable>
<contenteditable v-model="row.option_config.limit_right_content" :active="active" @blur="emitValue">
</contenteditable>
</td>
</tr>
</tbody>
@@ -150,7 +137,7 @@ input[type='radio'] {
display: flex;
justify-content: flex-end;
& > span {
&>span {
margin-right: 6px;
font-size: 16px;
}

2
src/views/Design/components/Questions/MatrixRadio.vue
View File

@@ -22,7 +22,7 @@
<th v-html="row.option"></th>
<td v-for="(col, colIndex) in cols" :key="colIndex">
<input
type="radio"
type=" "
:name="`R${rowIndex + 1}`"
:value="`${rowIndex + 1}_${colIndex + 1}`"
:checked="isOptionChecked(rowIndex, colIndex)"

2
src/views/Home/components/LastSurvey/Index.vue
View File

@@ -46,7 +46,7 @@ import { getSurveysPage } from '@/api/home/index.js';
const survey = ref({
project_name: ''
});
const fetchSurveys = async () => {
const fetchSurveys = async() => {
const params = {
page: 1,
per_page: 10,

4
src/views/Home/components/Market/Index.vue
View File

@@ -20,7 +20,7 @@ const marketList = ref([]);
const active = ref(null);
const marketInfo = ref([]);
const getTableList = async () => {
const getTableList = async() => {
const res = await getListScene();
if (res.data.code === 0) {
res.data.data.forEach((item) => {
@@ -31,7 +31,7 @@ const getTableList = async () => {
getMarketInfo(marketList.value[0]);
}
};
const getMarketInfo = async (item) => {
const getMarketInfo = async(item) => {
const data = marketList.value.filter((market, index) => item === index)[0];
if (data) {
const params = {

48
src/views/Survey/views/Create/Index.vue
View File

@@ -1,11 +1,7 @@
<template>
<div class="container">
<van-nav-bar
class="navbar-header"
:title="surveyTitle"
left-text=""
left-arrow
@click-left="$router.go(-1)"
class="navbar-header" :title="surveyTitle" left-text="" left-arrow :border="false" @click-left="$router.go(-1)"
>
<template #left>
<van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #fff" />
@@ -15,17 +11,11 @@
<div class="question-title flex space-between">
<div class="title-left">
<!--问卷标题-->
<contenteditable
v-model="questionInfo.survey.title"
className="content-title"
:active="true"
@blur="saveTitle"
></contenteditable>
<contenteditable v-model="questionInfo.survey.title" className="content-title" :active="true" @blur="saveTitle">
</contenteditable>
<!-- 问卷标注-->
<contenteditable
v-model="questionInfo.survey.introduction"
className="introduction"
:active="true"
v-model="questionInfo.survey.introduction" className="introduction" :active="true"
@blur="saveTitle"
></contenteditable>
</div>
@@ -62,9 +52,7 @@
<img :src="emptyImage" alt="" class="empty-image" />
</div>
<van-button
v-if="questionInfo.questions.length === 0"
class="theme-background"
size="small"
v-if="questionInfo.questions.length === 0" class="theme-background" size="small"
@click="show = true"
>
+ 添加题目
@@ -75,11 +63,7 @@
<!-- <van-button @click="show = true">添加题目</van-button>-->
<!-- 弹出的新增题目弹窗-->
<van-popup
v-model:show="show"
round
:closeable="true"
position="bottom"
:style="{ maxHeight: '50%' }"
v-model:show="show" round :closeable="true" position="bottom" :style="{ maxHeight: '50%' }"
title="添加题目"
>
<van-row class="ques_title">
@@ -88,12 +72,8 @@
<van-grid :gutter="10" class="ques_list">
<van-grid-item
v-for="item in quesList"
:key="item.type"
:icon="item.icon"
icon-color="#70b936"
:text="item.name"
@click="questionEvent(item)"
v-for="item in quesList" :key="item.type" :icon="item.icon" icon-color="#70b936"
:text="item.name" @click="questionEvent(item)"
>
<template #icon>
<span class="mobilefont grid-icon" v-html="item.icon"></span>
@@ -604,10 +584,6 @@ onMounted(async () => {
}
}
::v-deep .van-hairline--bottom::after {
display: none;
}
.container {
//height: 100vh;
background-color: #f5f5f5;
@@ -657,7 +633,7 @@ onMounted(async () => {
margin: 10px 5px;
padding: 5px;
& > div {
&>div {
display: flex;
flex-direction: column;
align-items: center;
@@ -684,7 +660,7 @@ onMounted(async () => {
.design-button {
text-align: center;
& > button {
&>button {
padding: 0.5rem;
border-radius: 8px;
background: rgba(240, 248, 235, 1);
@@ -707,7 +683,7 @@ onMounted(async () => {
margin-top: 40px;
}
& > button {
&>button {
margin-top: 40px;
padding: 0.5rem;
border-radius: 5px;
@@ -795,7 +771,7 @@ onMounted(async () => {
justify-content: space-between;
margin-left: 8px;
& .van-button + .van-button {
& .van-button+.van-button {
margin-left: 10px;
}
}

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

@@ -1,24 +1,37 @@
<template>
<div ref="scrollbar" class="container">
<van-nav-bar title="预览" left-arrow />
<van-nav-bar
left-arrow style="background-color: var(--primary-color);" :border="false" class="preview-nav"
@click-left="$route.go(-1)"
>
<template #left>
<van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: white" />
</template>
<template #title>
<el-text style="color: white;">预览</el-text>
</template>
</van-nav-bar>
<div ref="scrollbar" class="preview-container">
<!-- <van-nav-bar :title="getDomString(questionsData?.survey?.title)" left-arrow />-->
<!-- 进度条 -->
<div v-if="styleInfo.is_progress" class="progress-bar">
<!-- <div v-if="styleInfo.is_progress" class="progress-bar">
<progress-bar :percent="(page / (pages.length + 1)) * 100" :color="styleInfo.button_color" />
</div>
</div> -->
<!-- 头图 -->
<!-- <img v-if="styleInfo.head_img_status && styleInfo.head_img_url" width="100%" class="head-img"-->
<!-- :src="styleInfo.head_img_url" />-->
<!-- LOGO -->
<van-cell-group v-if="page !== 0 && page !== pages.length + 1">
<van-cell-group>
<van-field :label="getDomString(questionsData?.survey?.title)" label-align="top">
<template #input>{{ getDomString(questionsData?.survey?.introduction) }}</template>
</van-field>
</van-cell-group>
</van-cell-group>
<van-field v-if="page !== 0 && page !== pages.length + 1" label-align="top" class="preview-info">
<template #label>
<h1 class="preview-info-header">
<div v-html="questionsData?.survey?.title"></div>
</h1>
</template>
<template #input>
<div class="preview-info-header-desc" v-html="questionsData?.survey?.introduction"></div>
</template>
</van-field>
<div v-if="styleInfo.logo_status && styleInfo.logo_url" class="example-logo" :style="[
{
'justify-content':
@@ -37,25 +50,28 @@
]">
<img class="logo" :src="styleInfo.logo_url" alt="logo" />
</div>
<!-- 问题 -->
<!-- eslint-disable-next-line -->
<div class="questions" :style="`min-height: ${styleInfo.head_img_status ? 'calc(100% - 240px)' : '100%'};${styleInfo.background_status
? `background-color: ${styleInfo.background_color};background-image: url(${styleInfo.background_url})`
: ''
}`">
<div class="questions">
<!-- 提前终止和正常完成 -->
<q-last v-if="page === pages.length + 1" :code="questionsData.action?.code" :action="questionsData.action"
:survey="questionsData.survey" :isAnswer="isAnswer" :isTemplate="isTemplate" />
<q-last v-if="page === pages.length + 1" :code="questionsData?.action?.code" :action="questionsData?.action"
:survey="questionsData?.survey" :isAnswer="isAnswer" :isTemplate="isTemplate" />
<!-- 问卷名和描述 -->
<q-first v-else-if="page === 0" isMobile :title="questionsData?.survey?.title"
<!-- <q-first v-else-if="page === 0" isMobile :title="questionsData?.survey?.title"
:desc="questionsData?.survey?.introduction" :questions="questionsData?.questions" :isAnswer="isAnswer"
:showTitle="styleInfo.is_title" :showDesc="styleInfo.is_introduce" :label="questionsData?.survey?.title" />
:showTitle="styleInfo.is_title" :showDesc="styleInfo.is_introduce" :label="questionsData?.survey?.title" /> -->
<!-- 题-mobile -->
<question v-for="question in questions" v-else :id="'questionIndex' + question.question_index"
<!-- <question v-for="question in questions" v-else :id="'questionIndex' + question.question_index"
:key="question.question_index" class="question" :tip="question.tip" :stem="question.stem"
:title="question.title" :error="question.error" :warning="question.warning" :questions="questionsData.questions"
:questionType="question.question_type" :questionIndex="question.question_index"
:showTitle="styleInfo.is_question_number && true" isMobile :isAnswer="isAnswer">
:showTitle="styleInfo.is_question_number && true" isMobile :isAnswer="isAnswer"> -->
<div
v-for="question in questions" v-else :id="'questionIndex' + question.question_index"
:key="question.question_index" class="question"
>
<!-- <q-radio-->
<!-- v-if="question.question_type === 1"-->
<!-- :list="question.list"-->
@@ -383,37 +399,45 @@
:isAnswer="isAnswer" :questionIndex="question.question_index" :label="question.title" :loading="loading"
:isTemplate="isTemplate" :showTitle="styleInfo.is_question_number" :question="question" @previous="previous"
@next="next" @change-answer="onRelation($event, question)" />
</question>
<!-- 分页 -->
<!-- eslint-disable max-len -->
<div v-show="showPage" class="footer-page">
<pfe-pagination class="pagination" :page="page" :pages="pages.length + 1" :min="styleInfo.is_home ? 0 : 1"
:loading="loading" :showPrevious="styleInfo.is_up_button" :showStart="styleInfo.is_start_button"
:startText="styleInfo.start_button_text" :showSubmit="styleInfo.is_submit_button" :submitText="localPageTimer.is_show && localPageTimer.short_time
? `${localPageTimer.short_time}S`
: styleInfo.submit_button_text
" :buttonTextColor="styleInfo.button_text_color" :buttonColor="styleInfo.button_color" :nextText="localPageTimer.is_show && localPageTimer.short_time
? `${localPageTimer.short_time}S`
: ''
" :nextDisabled="localPageTimer.short_time" isMobile @previous="previous" @next="next" />
</div>
<!-- eslint-enable max-len -->
<LangTranslate v-if="isAnswer && styleInfo.is_yip" translate-key="PoweredByDigitalTechnologyCenterYIP"
class="footer" />
<div style="margin: 10px 0;color: rgba(75, 75, 89, 1); text-align: center">
<el-text>
由数字科技中心YIP提供支持
</el-text>
</div>
<!-- <LangTranslate v-if="isAnswer && styleInfo.is_yip" translate-key="PoweredByDigitalTechnologyCenterYIP"
class="footer" /> -->
</div>
<!-- 分页 -->
<!-- eslint-disable max-len -->
<div v-show="showPage" class="footer-page">
<pfe-pagination
class="pagination" :page="page" :pages="pages.length + 1" :min="styleInfo.is_home ? 0 : 1"
:loading="loading" :showPrevious="styleInfo.is_up_button" :showStart="styleInfo.is_start_button"
:startText="styleInfo.start_button_text" :showSubmit="styleInfo.is_submit_button" :submitText="localPageTimer.is_show && localPageTimer.short_time
? `${localPageTimer.short_time}S`
: styleInfo.submit_button_text
" :buttonTextColor="styleInfo.button_text_color" :buttonColor="styleInfo.button_color" :nextText="localPageTimer.is_show && localPageTimer.short_time
? `${localPageTimer.short_time}S`
: ''
" :nextDisabled="localPageTimer.short_time" isMobile @previous="previous" @next="next"/>
</div>
<!-- eslint-enable max-len -->
</div>
</template>
<script setup>
import { useTemplateRef } from 'vue';
import LangTranslate from './components/LangTranslate.vue';
// import LangTranslate from './components/LangTranslate.vue';
import QLast from '@/views/Survey/views/Preview/components/questions/QLast.vue';
import Question from '@/views/Survey/views/Preview/components/questions/Question.vue';
import QFirst from '@/views/Survey/views/Preview/components/questions/QFirst.vue';
// import Question from '@/views/Survey/views/Preview/components/questions/Question.vue';
// import QFirst from '@/views/Survey/views/Preview/components/questions/QFirst.vue';
import PfePagination from './components/PfePagination/Index.vue';
import { storeToRefs } from 'pinia';
import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
import ProgressBar from './components/ProcessBar/Index.vue';
// import ProgressBar from './components/ProcessBar/Index.vue';
import { AnswerApi } from './js/api';
import { useRoute, useRouter } from 'vue-router';
import { getLanguage } from '@/views/Survey/views/Preview/js/language';
@@ -488,11 +512,11 @@ async function getQuestions () {
}
// 获取 DOM 的内容
function getDomString (htmlString) {
if (typeof htmlString !== 'string') return;
const match = htmlString.match(/<.*>(.*?)<\/.*>/);
if (match) return match[1];
}
// function getDomString (htmlString) {
// if (typeof htmlString !== 'string') return;
// const match = htmlString.match(/<.*>(.*?)<\/.*>/);
// if (match) return match[1];
// }
// 上一页
async function previous () {
@@ -1363,108 +1387,70 @@ function onRelation (
}
</script>
<style lang="scss" scoped>
.main {
position: relative;
::v-deep .van-cell::after {
display: none;
}
.preview-container {
overflow: hidden;
width: 1200px;
height: calc(100vh - 78px);
margin: 0 auto;
border-radius: 6px;
background-color: #fff;
.progress-bar {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
}
.bg {
width: 100%;
height: 100%;
// object-fit: cover;
}
.example-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-scrollbar {
//overflow: overlay;
position: absolute;
top: 0;
left: 0;
overflow: auto;
width: 100%;
height: 100%;
}
.head-img {
object-fit: cover;
width: 100%;
height: 248px;
}
.example-logo {
top: 0;
display: flex;
align-items: center;
width: 100%;
margin-top: 24px;
.logo {
object-fit: cover;
width: 60px;
height: 60px;
border-radius: 5px;
}
}
min-height: calc(100vh - 100px);
padding: 10px;
background: linear-gradient(to bottom, #71b73c 200px, #f2f2f2 300px);
.questions {
padding: 40px 80px;
background-size: 100% auto;
background-repeat: no-repeat;
.q-last {
margin-bottom: -72px;
}
overflow: hidden;
padding-bottom: 50px;
.question {
margin-bottom: 40px;
overflow: hidden;
margin-top: 10px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 16px;
background-color: white;
}
}
.pagination {
margin-top: 72px;
}
.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;
}
}
.default {
background-position: calc(100% - 10px) 24px;
background-size: 224px 118px;
background-repeat: no-repeat;
.preview-info {
margin: 0;
background-color: transparent;
//background-image: url('../../../assets/img/answer/pc-bg.png');
}
@mixin preview-info-header {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 100%;
}
.footer {
position: fixed;
bottom: 5px;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
color: #a3a3a3;
font-size: 14px;
line-height: 20px;
.preview-info-header {
@include preview-info-header;
color: white;
font-size: 16px;
&> :first-child {
max-width: 70%;
}
}
.preview-info-header-desc {
@include preview-info-header;
font-size: 12px;
line-height: 18px;
}
}
</style>

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

@@ -1,40 +1,25 @@
<template>
<div class="pagination-mob">
<van-row class="pagination-mob" :gutter="10">
<!-- mob端 -->
<div v-show="showPrevious && page > min && page < pages">
<div
class="pfe-button btn previous my-btn"
:style="`color: ${buttonTextColor};background-color: ${buttonColor}`"
@click="previous"
>
<i class="iconfont">&#xe67f;</i>
<span>preview button</span>
<span>{{ prevButtonText }}</span>
</div>
</div>
<div v-show="page < pages">
<div
class="pfe-button btn next my-btn"
:class="nextDisabled ? 'disabled' : ''"
:style="`color: ${buttonTextColor};background-color: ${buttonColor}`"
@click="next"
>
<span>start button</span>
<span>{{
showStart && page === 0
? startText
: showSubmit && page + 1 === pages
? submitText
: nextText || nextButtonText
}}</span>
<i v-show="page + 1 !== pages" class="iconfont">&#xe670;</i>
</div>
</div>
</div>
<van-col :span="12">
<van-button v-show="showLastButton" color="#71b73c" @click="previous">
{{ prevButtonText }}
</van-button>
</van-col>
<van-col :span="showLastButton ? 12 : 24">
<van-button v-show="page < pages" color="#71b73c" @click="next">
{{ showStart && page === 0
? startText
: showSubmit && page + 1 === pages
? submitText
: nextText || nextButtonText }}
</van-button>
</van-col>
</van-row>
</template>
<script>
import { computed, defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
@@ -143,93 +128,29 @@ export default defineComponent({
}
}
const showLastButton = computed(() => props.showPrevious && props.page > props.min && props.page < props.pages - 1);
return {
prevButtonText,
nextButtonText,
previous,
next
next,
showLastButton
};
}
});
</script>
<style lang="scss" scoped>
.pagination {
display: flex;
align-items: center;
justify-content: center;
.p-btn {
min-width: 96px;
margin: 0 12px;
border: 0;
:deep(span) {
white-space: pre;
}
}
}
.pagination-mob {
display: flex;
align-items: center;
justify-content: center;
align-items: end;
justify-content: space-between;
padding: 0 10px;
.spin {
width: calc(50% - 30px);
.btn {
width: 100%;
}
.van-button {
width: 100%;
height: 35px;
border-radius: 8px;
}
.prev-spin {
margin-right: 20px;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
width: calc(50% - 30px);
height: 44px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
.iconfont {
font-size: 16px;
}
}
.previous {
background-color: #fff;
color: #70b936;
// border: 1px solid $yili-default-color;
//margin-right: 20px;
.iconfont {
margin-right: 8px;
}
}
.next {
background: #70b936;
color: #fff;
.iconfont {
margin-left: 8px;
}
}
}
.my-btn:not(.disabled):active {
opacity: 0.8;
}
.disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>

37
src/views/Survey/views/Preview/components/questions/PreviewChoice.vue
View File

@@ -42,39 +42,4 @@ watch(
emit('changeAnswer', res);
}
);
</script>
<style scoped lang="scss">
.choice-html {
width: 100%;
}
.base-select {
& .van-checkbox-group,
.van-radio-group {
width: 100%;
& .van-checkbox,
.van-radio {
width: 100%;
& ::v-deep .van-checkbox__label {
width: 100%;
}
& ::v-deep .van-radio__label {
width: 100%;
}
}
}
& .other-input {
width: 100px;
height: 20px;
margin-left: 20px;
padding: 3px 5px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
}
</style>
</script>

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

@@ -1,11 +1,11 @@
<template>
<div class="question-concluse-wrapper">
<div class="content">
<div v-if="isTemplate" v-html="survey.success_end_content" />
<div v-if="isTemplate" v-html="survey?.success_end_content" />
<div v-if="code === 20004" v-html="survey.screening_end_content" />
<div v-else-if="code === 20011" v-html="survey.success_end_content" />
<div v-else-if="code === 20016" v-html="survey.quota_end_content" />
<div v-if="code === 20004" v-html="survey?.screening_end_content" />
<div v-else-if="code === 20011" v-html="survey?.success_end_content" />
<div v-else-if="code === 20016" v-html="survey?.quota_end_content" />
</div>
<div v-if="!isAnswer" class="comment">
<!-- <Remark v-if="code === 20004" title="结束语提前结束评论" :type="6" />-->

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

@@ -1,39 +1,41 @@
<template>
<div class="question">
<!-- 高级题型不显示 -->
<div v-if="questionType <= 100" class="question-inner-wrapper">
<div class="title" :style="`color: ${themeColor.stemColor}`">
<span v-if="showTitle" class="question-inner-span" v-html="title"></span>
<!-- question.stem -->
<div class="stem">
<rich-text :nodes="`${newTitle}${tip}`" isPreview :isMobile="isMobile" />
</div>
</div>
<!-- <Remark-->
<!-- :title="title + '问题评论'"-->
<!-- :type="3"-->
<!-- :questionIndex="questionIndex"-->
<!-- v-if="!isAnswer"-->
<!-- style="margin-bottom: 22px"-->
<!-- />-->
</div>
<LangTranslate v-if="error && questionType <= 100" :full-text="error" class="error" />
<LangTranslate v-if="warning" :full-text="warning" class="error warning" />
<!-- 题 -->
<slot />
</div>
<slot style=""></slot>
<!-- <div class="question"> -->
<!-- 高级题型不显示 -->
<!-- <div v-if="questionType <= 100" class="question-inner-wrapper"> -->
<!-- <div class="title" :style="`color: ${themeColor.stemColor}`"> -->
<!-- <span v-if="showTitle" class="question-inner-span" v-html="title"></span> -->
<!-- question.stem -->
<!-- <div class="stem"> -->
<!-- <rich-text :nodes="`${newTitle}${tip}`" isPreview :isMobile="isMobile" /> -->
<!-- </div> -->
<!-- </div> -->
<!-- <Remark-->
<!-- :title="title + '问题评论'"-->
<!-- :type="3"-->
<!-- :questionIndex="questionIndex"-->
<!-- v-if="!isAnswer"-->
<!-- style="margin-bottom: 22px"-->
<!-- />-->
<!-- </div> -->
<!-- <LangTranslate v-if="error && questionType <= 100" :full-text="error" class="error" /> -->
<!-- <LangTranslate v-if="warning" :full-text="warning" class="error warning" /> -->
<!-- 题 -->
<!-- </div> -->
</template>
<script>
import RichText from '@/components/RichText.vue';
// import RichText from '@/components/RichText.vue';
import { computed, defineComponent } from 'vue';
// import Remark from '../components/Remark/index.vue';
import LangTranslate from '../LangTranslate.vue';
// import LangTranslate from '../LangTranslate.vue';
import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
import { storeToRefs } from 'pinia';
export default defineComponent({
components: { RichText, /* Remark, */ LangTranslate },
components: {/* RichText, */ /* Remark, */ /* LangTranslate */ },
props: {
// 标题
stem: {
@@ -142,8 +144,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];
@@ -153,8 +155,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];
@@ -182,8 +184,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) => {
@@ -285,7 +287,7 @@ export default defineComponent({
min-height: 24px;
margin-bottom: 24px;
> span {
>span {
flex-shrink: 0;
}
@@ -310,149 +312,4 @@ export default defineComponent({
margin-bottom: 0;
}
}
// .question-inner-span {
// width: 100%;
// }
</style>
<style lang="scss" scoped>
:deep(.theme-hover-default) {
&:hover {
background-color: v-bind(hoverbackgroundcolor);
cursor: pointer;
}
}
:deep(.ant-radio-inner) {
border-color: v-bind(answercolor) !important;
background-color: transparent;
}
:deep(.ant-radio-inner::after) {
background-color: v-bind(answercolor);
}
:deep(.ant-checkbox-inner) {
border-color: v-bind(answercolor) !important;
background-color: transparent;
}
:deep(.ant-checkbox-checked .ant-checkbox-inner) {
background-color: v-bind(answercolor);
}
:deep(.ant-input) {
border-color: v-bind(answerborder) !important;
background-color: transparent;
color: v-bind(answercolor);
}
:deep(.ant-input-number) {
border-color: v-bind(answerborder) !important;
background-color: transparent;
color: v-bind(answercolor);
}
:deep(.ant-select-selector) {
border-color: v-bind(answerborder) !important;
background-color: transparent !important;
color: v-bind(answercolor);
}
:deep(.ant-input:hover) {
border-color: v-bind(answercolor);
}
:deep(.ant-input::placeholder) {
color: v-bind(answerplaceholder) !important;
}
:deep(.ant-select-selection-placeholder) {
color: v-bind(answerplaceholder) !important;
}
// :deep(.ant-rate) {
// color: v-bind(answerColor) !important;
// }
// :deep(.ant-rate-star-zero .ant-rate-star-second) {
// color: v-bind(answerColor30);
// }
// 打分组件样式 start
:deep(.num-item),
// 旧的组件的样式
:deep(.rate-wrapper .number-item .content) {
border-color: v-bind(answercolor) !important;
color: v-bind(answercolor) !important;
}
:deep(.num-item-active),
// 旧的组件的样式
:deep(.rate-wrapper .number-item.active .content) {
border-color: v-bind(answercolor) !important;
background-color: v-bind(answercolor) !important;
color: #fff !important;
}
:deep(.rich-rate-item-active) {
border-color: v-bind(answercolor) !important;
background-color: v-bind(answercolor) !important;
}
:deep(.step-inner) {
border-color: v-bind(answercolor) !important;
}
:deep(.ant-slider-track),
// 旧的组件的样式
:deep(.slider-bar::before) {
background-color: v-bind(answercolor) !important;
}
:deep(.slider-step .slider-dot.selected .content::before) {
border-color: v-bind(answercolor) !important;
}
:deep(.ant-slider-handle) {
border-color: v-bind(answercolor) !important;
}
:deep(.ant-slider-dot-active) {
border-color: v-bind(answercolor) !important;
}
:deep(.ant-slider-mark-text) {
color: v-bind(answercolor);
}
// 打分组件样式 end
:deep(.ant-upload) {
border-color: v-bind(answerborder) !important;
background-color: v-bind(answercolor10) !important;
}
:deep(.pfe-button) {
background-color: v-bind(buttoncolor) !important;
color: v-bind(buttontextcolor) !important;
}
// 公共样式
:deep(.answer-color) {
color: v-bind(answercolor) !important;
}
:deep(.answer-border) {
border-color: v-bind(answerborder) !important;
}
:deep(.answer-background30) {
background-color: v-bind(answercolor30) !important;
}
:deep(.answer-background10) {
background-color: v-bind(answercolor10) !important;
}
</style>
</style>

50
src/views/Survey/views/Publish/Index.vue
View File

@@ -9,8 +9,8 @@
<div class="qrcode">
<img :src="publishInfo?.img_url" alt="" width="100px" height="100px" />
<div class="tit">
<div>{{ surveyTitle }}</div>
<div>扫码填写问卷</div>
<div>{{ publishInfo?.download_url?.title || '' }}</div>
<div style="font-weight: 600;font-size: 14px;">扫码填写问卷</div>
</div>
</div>
<div class="tip">移动端仅做数据回收，问卷数据分析请前往PC端浏览</div>
@@ -58,8 +58,8 @@ import downloadIcon from '@/assets/img/publish/download_icon.png';
const route = useRoute();
const sn = route.query.sn;
const surveyTitle = ref('');
const status = ref<number>(0); // `0`: 编辑中 `1`: 投放中 `2`: 已结束
// `0`: 编辑中 `1`: 投放中 `2`: 已结束
const status = ref<number>(0);
const publishType = ref(0);
const operateList = reactive([
{
@@ -94,21 +94,21 @@ type OperateItem = (typeof operateList)[0];
const operateBtn = (item: OperateItem) => {
switch (item.type) {
case 'shareLink':
shareLink();
break;
case 'copyLink':
copyLink();
break;
case 'qrCode':
downLoadImg();
break;
default:
break;
case 'shareLink':
shareLink();
break;
case 'copyLink':
copyLink();
break;
case 'qrCode':
downLoadImg();
break;
default:
break;
}
};
// 复制链接
function copyLink() {
function copyLink () {
const input = document.createElement('input');
input.value = publishInfo.value.url;
document.body.appendChild(input);
@@ -118,22 +118,24 @@ function copyLink() {
showToast('复制成功');
}
// 分享链接
function shareLink() {
function shareLink () {
const params = {
type: 'shareToWx',
title: publishInfo.value.download_url.title,
description: publishInfo.value.desc || '',
thumbImageUrl: publishInfo.value.img_url,
webpageUrl: publishInfo.value.url,
scene: 0 // 朋友圈1 微信好友0
// 朋友圈1 微信好友0
scene: 0
};
console.log('shareUrl', publishInfo.value.url);
// eslint-disable-next-line
appBridge.shareToWeChat(params, () => {});
// console.log('shareUrl', publishInfo.value.url);
appBridge.shareToWeChat(params, () => {
// 分享成功
});
}
// 下载二维码
function downLoadImg() {
function downLoadImg () {
const { title, url } = publishInfo.value.download_url;
if (utils.getSessionStorage('xToken')) {
appBridge.save2Album(url, () => {
@@ -190,7 +192,7 @@ watch(status, (val) => {
getCode();
}
});
onMounted(async () => {
onMounted(async() => {
// status.value = 1;
// publishInfo.value.img_url
// = 'https://test-cxp-pubcos.yili.com/uat-yls//survey-api/publish/202503130938138261340.png';
@@ -206,7 +208,7 @@ onMounted(async () => {
<style scoped lang="scss">
.container {
height: 100vh;
background: linear-gradient(to bottom, #70b937 5.3rem, #f2f2f2 8rem);
background: linear-gradient(to bottom, #70B937 5.3rem, #F2F2F2 8rem);
button {
padding: 3px 20px;