xrilang/xiaoju-survey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 皮肤设置 (#78)

Browse Source
This commit is contained in:
dayou 2024-03-22 17:51:32 +08:00 committed by sudoooooo
parent 90243b9875
commit 968576b665
59 changed files with 1218 additions and 405 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
server/src/modules/survey/template/banner/index.json
View File

@ -1,12 +1,64 @@
{
"temp": {
"key": "default",
"name": "默认分类",
"name": "全部",
"list": [{
"src": "/imgs/skin/17e06b7604a007e1d3e1453b9ddadc3c.webp",
"title": "1"
}]
},
},
"scenery": {
"key": "scenery",
"name": "风景",
"list": [{
"src": "/imgs/skin/SyiLRcukyE1558430525760.webp",
"title": "1"
}, {
"src": "/imgs/skin/sqYig4AcWr1558430525663.webp",
"title": "2"
}, {
"src": "/imgs/skin/ElNeqJT2I21558430526165.webp",
"title": "3"
}, {
"src": "/imgs/skin/CxQkSU6AY21558430526163.webp",
"title": "4"
}, {
"src": "/imgs/skin/VTUwbp6vY61558430527320.webp",
"title": "5"
}, {
"src": "/imgs/skin/SHs0K703Yn1558430527218.webp",
"title": "6"
}, {
"src": "/imgs/skin/oVTedX9V4s1558430527671.webp",
"title": "7"
}]
},
"business": {
"key": "business",
"name": "商务",
"list": [{
"src": "/imgs/skin/3ABKqvDaVn1558514860472.webp",
"title": "1"
}, {
"src": "/imgs/skin/OewuaQmWoq1558514860285.webp",
"title": "2"
}, {
"src": "/imgs/skin/HuVqqtbFjs1558514860570.webp",
"title": "3"
}, {
"src": "/imgs/skin/icSlqsr0uZ1558514860875.webp",
"title": "4"
}, {
"src": "/imgs/skin/Qu9rg33wmq1558514861015.webp",
"title": "5"
}, {
"src": "/imgs/skin/145gBCRtNP1558514861211.webp",
"title": "6"
}, {
"src": "/imgs/skin/ykWLFV0QWj1558514861444.webp",
"title": "7"
}]
},
"activity": {
"key": "activity",
"name": "节日",
@ -41,32 +93,6 @@
"title": "7"
}]
},
"scenery": {
"key": "scenery",
"name": "风景",
"list": [{
"src": "/imgs/skin/SyiLRcukyE1558430525760.webp",
"title": "1"
}, {
"src": "/imgs/skin/sqYig4AcWr1558430525663.webp",
"title": "2"
}, {
"src": "/imgs/skin/ElNeqJT2I21558430526165.webp",
"title": "3"
}, {
"src": "/imgs/skin/CxQkSU6AY21558430526163.webp",
"title": "4"
}, {
"src": "/imgs/skin/VTUwbp6vY61558430527320.webp",
"title": "5"
}, {
"src": "/imgs/skin/SHs0K703Yn1558430527218.webp",
"title": "6"
}, {
"src": "/imgs/skin/oVTedX9V4s1558430527671.webp",
"title": "7"
}]
},
"transportation": {
"key": "transportation",
"name": "交通",
@ -119,32 +145,7 @@
"title": "7"
}]
},
"business": {
"key": "business",
"name": "商务",
"list": [{
"src": "/imgs/skin/3ABKqvDaVn1558514860472.webp",
"title": "1"
}, {
"src": "/imgs/skin/OewuaQmWoq1558514860285.webp",
"title": "2"
}, {
"src": "/imgs/skin/HuVqqtbFjs1558514860570.webp",
"title": "3"
}, {
"src": "/imgs/skin/icSlqsr0uZ1558514860875.webp",
"title": "4"
}, {
"src": "/imgs/skin/Qu9rg33wmq1558514861015.webp",
"title": "5"
}, {
"src": "/imgs/skin/145gBCRtNP1558514861211.webp",
"title": "6"
}, {
"src": "/imgs/skin/ykWLFV0QWj1558514861444.webp",
"title": "7"
}]
},
"campus": {
"key": "campus",
"name": "校园",

4
server/src/modules/survey/template/surveyTemplate/survey/normal.json
View File

@ -124,9 +124,5 @@
"endTime": "2028-05-22 17:17:48",
"tLimit": "0",
"language": "chinese"
},
"skinConf": {
"skinColor": "#4a4c5b",
"inputBgColor": "#ffffff"
}
}

4
server/src/modules/survey/template/surveyTemplate/survey/nps.json
View File

@ -13,10 +13,6 @@
"msg_9004": "提交失败！"
}
},
"skinConf": {
"skinColor": "#4a4c5b",
"inputBgColor": "#ffffff"
},
"bannerConf": {
"titleConfig": {
"mainTitle": "<h3 style=\"text-align: center\">满意度调研</h3> <p>&nbsp;</p> <p>为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，<span style=\"color: rgb(204, 0, 0)\">期待您的参与</span></p>",

4
server/src/modules/survey/template/surveyTemplate/survey/register.json
View File

@ -156,9 +156,5 @@
"endTime": "2028-05-22 17:17:48",
"tLimit": "0",
"language": "chinese"
},
"skinConf": {
"skinColor": "#4a4c5b",
"inputBgColor": "#ffffff"
}
}

4
server/src/modules/survey/template/surveyTemplate/survey/vote.json
View File

@ -143,9 +143,5 @@
"endTime": "2028-05-25 10:22:23",
"tLimit": "0",
"language": "chinese"
},
"skinConf": {
"skinColor": "#4a4c5b",
"inputBgColor": "#ffffff"
}
}

11
server/src/modules/survey/template/surveyTemplate/templateBase.json
View File

@ -37,6 +37,15 @@
},
"skinConf": {
"skinColor": "#4a4c5b",
"inputBgColor": "#ffffff"
"inputBgColor": "#ffffff",
"backgroundConf": {
"color": "#fff"
},
"themeConf": {
"color": "#ffa600"
},
"contentConf": {
"opacity": 100
}
}
}

82
web/src/management/config/setterConfig/bannerConfig.js
View File

@ -1,55 +1,41 @@
export default [
{
label: '头图配置（默认尺寸：750*260）',
type: 'Customed',
key: 'bannerConfig',
labelStyle: {
fontWeight: 'bold',
},
content: [
{
label: '顶部图片地址',
type: 'Input',
key: 'bannerConfig.bgImage',
direction: 'horizon',
},
{
label: '顶部视频地址',
type: 'Input',
key: 'bannerConfig.videoLink',
direction: 'horizon',
},
{
label: '视频海报地址',
type: 'Input',
key: 'bannerConfig.postImg',
direction: 'horizon',
},
],
label: '顶部图片地址',
type: 'Input',
key: 'bgImage',
inline: true,
direction: 'horizon',
labelStyle: { width: '120px' }
},
{
label: '头图跳转',
type: 'Customed',
key: 'bannerConfig-Jump',
labelStyle: {
fontWeight: 'bold',
label: '顶部视频地址',
type: 'Input',
key: 'videoLink',
direction: 'horizon',
labelStyle: { width: '120px' }
},
{
label: '视频海报地址',
type: 'Input',
key: 'postImg',
direction: 'horizon',
labelStyle: { width: '120px' }
},
{
label: '图片支持点击',
type: 'CustomedSwitch',
direction: 'horizon',
labelStyle: { width: '120px' },
key: 'bgImageAllowJump',
},
{
label: '跳转链接',
type: 'Input',
direction: 'horizon',
labelStyle: { width: '120px' },
key: 'bgImageJumpLink',
relyFunc: (data) => {
return !!data?.bgImageAllowJump;
},
content: [
{
label: '图片支持点击',
type: 'CustomedSwitch',
direction: 'space_between',
key: 'bannerConfig.bgImageAllowJump',
},
{
label: '跳转链接',
type: 'Input',
direction: 'horizon',
key: 'bannerConfig.bgImageJumpLink',
relyFunc: (data) => {
return !!data?.bannerConfig?.bgImageAllowJump;
},
},
],
},
];

10
web/src/management/config/setterConfig/logoConfig.js
View File

@ -4,17 +4,15 @@ export default [
type: 'Input',
key: 'logoImage',
tip: '默认尺寸200px*50px',
labelStyle: {
fontWeight: 'bold',
},
direction: 'horizon',
labelStyle: { width: '120px' }
},
{
label: 'Logo大小',
type: 'InputPercent',
key: 'logoImageWidth',
tip: '填写宽度百分比，例如30%',
labelStyle: {
fontWeight: 'bold',
},
direction: 'horizon',
labelStyle: { width: '120px' }
},
];

46
web/src/management/config/setterConfig/skinConfig.js Normal file
View File

@ -0,0 +1,46 @@
import bannerConfig from "./bannerConfig"
import logoConfig from "./logoConfig"
export default [
{
name: '头图',
key: 'bannerConf.bannerConfig',
formConfigList: bannerConfig
},
{
name: '背景',
key: 'skinConf.backgroundConf',
formConfigList: [{
direction: 'space_between',
label: '背景颜色',
type: 'ColorPicker',
key: 'color',
}],
},
{
name: '主题色',
key: 'skinConf.themeConf',
formConfigList: [{
direction: 'space_between',
direction: 'space_between',
label: '全局应用',
type: 'ColorPicker',
key: 'color',
}],
},
{
key: 'skinConf.contentConf',
name: '内容区域',
formConfigList: [{
direction: 'space_between',
label: '内容透明度',
type: 'SliderSetter',
key: 'opacity',
}],
},
{
name: '品牌logo',
key: 'bottomConf',
formConfigList: logoConfig
}
]

7
web/src/management/config/skinPresets.js Normal file
View File

@ -0,0 +1,7 @@
export default {
'default-1': {
'skinConf.backgroundConf.color': '#90b4fa',
'skinConf.themeConf.color': '#FAA600',
}
}

9
web/src/management/pages/edit/modules/questionModule/components/logo.vue → web/src/management/pages/edit/components/logo.vue
View File

@ -3,7 +3,7 @@
<div class="question-logo" @click="onSelect">
<img
v-if="logoImg !== ''"
:style="{ width: bottomConf.logoImageWidth }"
:style="{ width: logoConf.logoImageWidth }"
class="bottom-logo"
:src="logoImg"
/>
@ -18,7 +18,10 @@
export default {
name: 'LogoPreview',
props: {
bottomConf: Object,
logoConf: {
type: Object,
default: () => {}
},
isSelected: Boolean,
},
data() {
@ -31,7 +34,7 @@ export default {
},
computed: {
logoImg() {
const { logoImage } = this.bottomConf;
const { logoImage = {} } = this.logoConf;
return logoImage;
},
},

12
web/src/management/pages/edit/modules/questionModule/components/mainTitle.vue → web/src/management/pages/edit/components/mainTitle.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="title-wrapper" @click="handleClick()">
<div class="main-title" :class="{ active: isSelected }">
<div class="main-title" :class="{ active: isSelected }" >
<richEditor
:value="bannerConf?.titleConfig?.mainTitle"
@input="onTitleInput"
@ -17,6 +17,10 @@ export default {
return {};
},
props: {
preview: {
type: Boolean,
default: false,
},
bannerConf: {
type: Object,
},
@ -27,7 +31,11 @@ export default {
computed: {},
methods: {
handleClick() {
this.$emit('select');
if(this.preview) {
return false
} else {
this.$emit('select');
}
},
onTitleInput(val) {
if (!this.isSelected) {

0
web/src/management/pages/edit/modules/questionModule/components/materialGroup.vue → web/src/management/pages/edit/components/materialGroup.vue
View File

6
web/src/management/pages/edit/modules/questionModule/components/questionWrapper.vue → web/src/management/pages/edit/components/questionWrapper.vue
View File

@ -193,9 +193,9 @@ export default defineComponent({
&.spliter {
border-bottom: 0.12rem solid $spliter-color;
}
// &:last-child{
// border: none;
// }
&:last-child{
border: none;
}
.editor {
display: flex;
font-size: 0.32rem;

0
web/src/management/pages/edit/modules/questionModule/components/setterField.vue → web/src/management/pages/edit/components/setterField.vue
View File

4
web/src/management/pages/edit/modules/questionModule/components/submit.vue → web/src/management/pages/edit/components/submit.vue
View File

@ -6,7 +6,6 @@
>
<el-button
class="submit-btn"
:style="{ 'background-color': skinConf.skinColor }"
type="primary"
>{{ submitConf.submitTitle }}</el-button
>
@ -41,8 +40,9 @@ export default {
.submit-btn {
color: white;
border: none;
width: 250px;
width: 100%;
height: 44px;
background-color: var(--primary-color);
}
}
</style>

1
web/src/management/pages/edit/index.vue
View File

@ -23,7 +23,6 @@ export default {
},
async created() {
this.$store.commit('edit/setSurveyId', this.$route.params.id);
this.$store.dispatch('getBannerData');
try {
await this.$store.dispatch('edit/init');
} catch (error) {

31
web/src/management/pages/edit/modules/generalModule/pageNav.vue
View File

@ -7,21 +7,25 @@
:to="{ name: btnItem.router }"
tag="div"
replace
v-slot="{ href, route, navigate, isActive, isExactActive }"
custom
>
<div
:class="[
(isActive && btnItem.key === 'skinsettings' ) || isExactActive ? 'router-link-exact-active' : '']"
>
<i class="iconfont" :class="[btnItem.icon]"></i>
<span>{{ btnItem.text }}</span>
<a :href="href" @click="navigate"><span>{{ btnItem.text }}</span></a>
<!-- <span>{{ btnItem.text }}</span> -->
</div>
</router-link>
<i
v-if="btnItem.next"
:key="btnItem.key + '-next'"
class="iconfont icon-jiantou next"
></i>
</template>
</div>
</template>
<script>
export default {
name: 'pageTitle',
name: 'pageNav',
props: {},
data() {
return {
@ -41,10 +45,11 @@ export default {
next: true,
},
{
icon: 'icon-jieguoyeshezhi',
text: '结果页设置',
router: 'QuestionEditResultConfig',
key: 'status',
icon: 'icon-yangshishezhi',
text: '皮肤设置',
router: 'QuestionSkinSetting',
key: 'skinsettings',
next: true,
},
],
};
@ -62,7 +67,9 @@ export default {
color: #92949d;
padding: 0 20px;
cursor: pointer;
a{
color: inherit;
}
&.router-link-exact-active {
color: $font-color-title;

77
web/src/management/pages/edit/modules/questionModule/components/bannerList.vue
View File

@ -1,77 +0,0 @@
<template>
<div class="banner-list-wrapper">
<el-collapse v-model="curSkinGroupKey">
<el-collapse-item
v-for="(bannerGroup, index) in bannerList"
:key="index"
:title="bannerGroup.name"
:name="bannerGroup.key"
>
<div
class="single-banner-wrapper"
v-for="(banner, bannerIndex) in bannerGroup.list"
:key="bannerIndex"
>
<img
class="banner-img"
:src="banner.src"
loading="lazy"
@click="changeBanner(banner.src)"
/>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
name: 'bannerList',
data() {
return {
curSkinGroupKey: ['temp'],
};
},
computed: {
bannerList() {
return this.$store?.state?.bannerList || [];
},
},
methods: {
changeBanner(imgSrc) {
this.$emit('change', imgSrc);
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.banner-list-wrapper {
padding: 5px 18px 100px 19px;
overflow-x: hidden;
.banner-img {
position: relative;
margin-bottom: 10px;
width: 100%;
min-height: 111px;
cursor: pointer;
transition: all 0.2s;
&:hover {
-webkit-filter: brightness(90%);
filter: brightness(90%);
}
}
::v-deep .el-collapse-item__header {
font-size: 16px;
color: $font-color-title;
border-bottom: none;
}
::v-deep .el-collapse-item__arrow.is-active {
right: 0;
}
::v-deep .el-collapse-item__arrow {
right: 0;
}
}
</style>

40
web/src/management/pages/edit/modules/questionModule/previewPanel.vue
View File

@ -1,13 +1,7 @@
<template>
<div class="main-operation" @click="onMainClick" ref="mainOperation">
<!-- <div class="toolbar"></div> -->
<div class="operation-wrapper" ref="operationWrapper">
<div class="box content" ref="box">
<banner
:bannerConf="bannerConf"
:is-selected="currentEditOne === 'banner'"
@select="onSelectEditOne('banner')"
/>
<mainTitle
:bannerConf="bannerConf"
:is-selected="currentEditOne === 'mainTitle'"
@ -28,29 +22,22 @@
:is-selected="currentEditOne === 'submit'"
@select="onSelectEditOne('submit')"
/>
<logo
:bottom-conf="bottomConf"
:is-selected="currentEditOne === 'logo'"
@select="onSelectEditOne('logo')"
/>
</div>
</div>
</div>
</template>
<script>
import materialGroup from './components/materialGroup.vue';
import banner from './components/banner.vue';
import mainTitle from './components/mainTitle.vue';
import submit from './components/submit.vue';
import logo from './components/logo.vue';
import materialGroup from '@/management/pages/edit/components/materialGroup.vue';
import mainTitle from '@/management/pages/edit/components/mainTitle.vue';
import submit from '@/management/pages/edit/components/submit.vue';
import logo from '@/management/pages/edit/components/logo.vue';
import { mapState, mapGetters } from 'vuex';
import { get as _get } from 'lodash-es';
export default {
name: 'mainOperation',
components: {
banner,
mainTitle,
submit,
logo,
@ -81,6 +68,23 @@ export default {
},
},
watch: {
skinConf: {
handler (skinConf) {
const { themeConf, backgroundConf, contentConf} = skinConf
const root = document.documentElement;
if(themeConf?.color) {
root.style.setProperty('--primary-color', themeConf?.color); // 设置主题颜色
}
if(backgroundConf?.color) {
root.style.setProperty('--primary-background-color', backgroundConf?.color); // 设置背景颜色
}
if(contentConf?.opacity) {
root.style.setProperty('--opacity', contentConf?.opacity/100); // 设置全局透明度
}
},
immediate: true, // 立即触发回调函数
deep: true
},
autoScrollData(newVal) {
const { currentEditOne } = newVal;
if (typeof currentEditOne === 'number') {
@ -188,7 +192,7 @@ export default {
}
.operation-wrapper {
margin-top: 38px;
margin-top: 50px;
margin-bottom: 45px;
// min-height: 812px;
overflow-x: hidden;

14
web/src/management/pages/edit/modules/questionModule/setterPanel.vue
View File

@ -13,14 +13,12 @@
:module-config="moduleConfig"
@form-change="onFormChange"
/>
<bannerList v-if="currentEditOne === 'banner'" @change="onClickSkin" />
</template>
</div>
</template>
<script>
import bannerList from './components/bannerList.vue';
import setterField from './components/setterField.vue';
import setterField from '@/management/pages/edit/components/setterField.vue';
import { mapGetters } from 'vuex';
export default {
@ -42,16 +40,9 @@ export default {
}),
},
components: {
bannerList,
setterField,
},
methods: {
onClickSkin(src) {
this.onFormChange({
key: 'bannerConfig.bgImage',
value: src,
});
},
onFormChange(data) {
const { key, value } = data;
const resultKey = `${this.currentEditKey}.${key}`;
@ -75,7 +66,6 @@ export default {
font-size: 14px;
color: $primary-color;
padding-left: 20px;
background: #f9fafc;
border-bottom: 1px solid #edeffc;
}
@ -98,6 +88,6 @@ export default {
}
.question-config-form {
padding: 30px 20px 50px 20px;
padding: 30px 20px 50px 20px!important;
}
</style>

4
web/src/management/pages/edit/modules/questionModule/components/banner.vue → web/src/management/pages/edit/modules/settingModule/components/banner.vue
View File

@ -11,7 +11,7 @@
<div class="video">
<video
class="custom-video"
:poster="bannerConf.bannerConfig.postImg"
:poster="bannerConf.bannerConfigpostImg"
preload="auto"
controls
:src="bannerConf.bannerConfig.videoLink"
@ -31,6 +31,7 @@ export default {
props: {
bannerConf: {
type: Object,
default: () => {}
},
isSelected: {
type: Boolean,
@ -59,6 +60,7 @@ export default {
.banner {
width: 100%;
display: flex;
img {
width: 100%;

3
web/src/management/pages/edit/modules/settingModule/components/overTime.vue
View File

@ -26,11 +26,12 @@ export default {
.over-time {
text-align: center;
margin-bottom: 5.5rem;
height: 100%;
.title-msg {
width: 100%;
font-size: 16px;
color: #999;
color: #666;
}
}

3
web/src/management/pages/edit/modules/settingModule/components/success.vue
View File

@ -32,7 +32,7 @@ export default {
text-align: center;
width: 100%;
display: inline-block;
height: 100%;
.success-img {
margin-top: -0.2rem;
width: 100px;
@ -46,7 +46,6 @@ export default {
width: 100%;
position: relative;
padding-top: 1.8rem;
background: #fff;
}
.title-msg {

6
web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
View File

@ -5,7 +5,7 @@ export default {
label: '答题有效期',
type: 'QuestionTime',
placeholder: 'yyyy-MM-dd hh:mm:ss',
direction: 'horizon',
// direction: 'horizon',
},
// base_showVote: {
// key: 'baseConf.showVoteProcess',
@ -42,7 +42,7 @@ export default {
key: 'baseConf.tLimit',
label: '问卷回收总数',
type: 'InputNumber',
direction: 'horizon',
// direction: 'horizon',
tip: '0为无限制，此功能用于限制该问卷总提交的数据量。当数据量达到限额时，该问卷将不能继续提交',
tipShow: true,
placement: 'top',
@ -53,7 +53,7 @@ export default {
label: '答题时段',
tip: '问卷仅在指定时间段内可填写',
type: 'QuestionTimeHour',
direction: 'horizon',
// direction: 'horizon',
placement: 'top',
},
// skin_skinColor: {

43
web/src/management/pages/edit/modules/settingModule/resultCatalog.vue → web/src/management/pages/edit/modules/settingModule/result/catalogPanel.vue
View File

@ -1,21 +1,24 @@
<template>
<div class="status-list-wrapper">
<div
v-for="(status, index) in statusList"
:key="index"
class="status-item"
@click="filterDisabledStatus({ type: status.type })"
>
<span>{{ status.title }}</span>
<div class="preview-item">
<img :src="status.previewImg" :alt="status.title" />
<div class="tab-box">
<div class="title">结果页状态选择</div>
<div class="status-list-wrapper">
<div
v-for="(status, index) in statusList"
:key="index"
class="status-item"
@click="filterDisabledStatus({ type: status.type })"
>
<span>{{ status.title }}</span>
<div class="preview-item">
<img :src="status.previewImg" :alt="status.title" />
</div>
</div>
</div>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
import { EDIT_STATUS_MAP } from './enum';
import { EDIT_STATUS_MAP } from '../enum';
export default {
name: 'resultConfigList',
@ -47,13 +50,27 @@ export default {
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.status-list-wrapper {
.tab-box {
width: 300px;
height: 100%;
box-shadow: none;
border: none;
overflow-y: auto;
background-color: #fff;
.title {
height: 40px;
line-height: 40px;
font-size: 14px;
color: $primary-color;
padding-left: 20px;
// background: #f9fafc;
border-bottom: 1px solid #edeffc;
}
}
.status-list-wrapper {
padding: 19px 18px 100px 19px;
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
label.title {
font-size: 16px;

33
web/src/management/pages/edit/modules/settingModule/resultPreview.vue → web/src/management/pages/edit/modules/settingModule/result/previewPanel.vue
View File

@ -1,19 +1,21 @@
<template>
<div class="result-config-preview">
<div class="status-preview">
<component
:is="currentEditStatus"
:key="currentEditStatus"
:module-config="moduleConfig"
/>
<div class="result-page-wrap">
<div class="result-page">
<component
:is="currentEditStatus"
:key="currentEditStatus"
:module-config="moduleConfig"
/>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import success from './components/success';
import overTime from './components/overTime';
import { EDIT_STATUS_MAP } from './enum';
import success from '../components/success';
import overTime from '../components/overTime';
import { EDIT_STATUS_MAP } from '../enum';
import { get as _get } from 'lodash-es';
export default {
@ -51,13 +53,20 @@ export default {
background-color: #f6f7f9;
}
.status-preview {
.result-page-wrap {
width: 90%;
margin-top: 38px;
margin-top: 50px;
min-height: 812px;
max-height: 812px;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
background-color: var(--primary-background-color);
padding: 0 0.3rem;
.result-page{
background: rgba(255, 255, 255, var(--opacity));
display: flex;
flex-direction: column;
height: 100%;
}
}
</style>

6
web/src/management/pages/edit/modules/settingModule/resultSetter.vue → web/src/management/pages/edit/modules/settingModule/result/setterPanel.vue
View File

@ -31,13 +31,13 @@
<script>
import FormItem from '@/materials/setters/widgets/FormItem.vue';
import setterLoader from '@/materials/setters/setterLoader';
import statusConfig from './config/statusConfig';
import statusConfig from '../config/statusConfig';
import { mapState } from 'vuex';
import { get as _get, pick as _pick } from 'lodash-es';
const textMap = {
Success: '提交成功页面配置',
OvertTme: '问卷过期页面配置',
OverTime: '问卷过期页面配置',
};
export default {
@ -150,7 +150,7 @@ export default {
font-size: 14px;
color: $primary-color;
padding-left: 20px;
background: #f9fafc;
// background: #f9fafc;
border-bottom: 1px solid #edeffc;
}

170
web/src/management/pages/edit/modules/settingModule/skin/catalogPanel.vue Normal file
View File

@ -0,0 +1,170 @@
<template>
<div class="tab-box">
<div class="title">主题设置</div>
<div class="content">
<div class="tag-list">
<el-tag
v-for="item in groupList"
:class="[groupName === item.value ? 'current' : '', 'tag']"
type = 'info'
:key="item.value"
@click="() => changeGroup(item.value)">
{{item.label}}
</el-tag>
</div>
<div class="banner-list-wrapper">
<div
class="single-banner-wrapper"
v-for="(banner, bannerIndex) in currentBannerList"
:key="bannerIndex"
>
<img
class="banner-img"
:src="banner.src"
loading="lazy"
@click="changePreset(banner)"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
import skinPresets from '@/management/config/skinPresets.js'
export default {
name: 'catalogPanel',
data() {
return {
skinPresets: [],
groupName: 'temp',
};
},
computed: {
bannerList() {
return this.$store?.state?.bannerList || [];
},
groupList() {
return Object.keys(this.bannerList).map((key) => {
return {
label: this.bannerList[key].name,
value: key
}
})
},
currentBannerList () {
const arr = Object.keys(this.bannerList).map((key) => {
return this.bannerList[key]
}).map(data => {
return data.list.map(item => {
item.group = data.key;
return item;
})
})
const allbanner = arr.reduce((acc, curr) => {
return acc.concat(curr);
}, []);
return allbanner.filter(item => {
if(this.groupName === "temp") {
return true
} else {
return item.group === this.groupName
}
})
}
},
mounted() {
},
methods: {
...mapActions({
changeThemePreset: 'edit/changeThemePreset',
}),
changeGroup(value) {
this.groupName = value
},
changePreset(banner) {
const name = banner.group + '-' + banner.title
let presets = {
'bannerConf.bannerConfig.bgImage': banner.src,
'skinConf.themeConf.color': '#FAA600',
'skinConf.backgroundConf.color': '#fff',
}
if(skinPresets[name]){
presets = Object.assign(presets, skinPresets[name])
}
this.changeThemePreset(presets)
}
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.tab-box {
width: 300px;
height: 100%;
box-shadow: none;
border: none;
overflow-y: auto;
background-color: #fff;
.title {
height: 40px;
line-height: 40px;
font-size: 14px;
color: $primary-color;
padding-left: 20px;
// background: #f9fafc;
border-bottom: 1px solid #edeffc;
}
.content{
padding: 12px;
}
.tag-list{
display: flex;
flex-wrap: wrap;
.tag{
margin: 5px 8px;
cursor: pointer;
&.current{
color: $primary-color;
background-color: $primary-bg-color;
}
}
}
.banner-list-wrapper {
padding: 15px 3px 100px 3px;
overflow-x: hidden;
.banner-img {
position: relative;
margin-bottom: 10px;
width: 100%;
// min-height: 111px;
cursor: pointer;
transition: all 0.2s;
border-radius: 4px;
&:hover {
-webkit-filter: brightness(90%);
filter: brightness(90%);
}
}
::v-deep .el-collapse-item__header {
font-size: 16px;
color: $font-color-title;
border-bottom: none;
}
::v-deep .el-collapse-item__arrow.is-active {
right: 0;
}
::v-deep .el-collapse-item__arrow {
right: 0;
}
}
}
</style>

169
web/src/management/pages/edit/modules/settingModule/skin/previewPanel.vue Normal file
View File

@ -0,0 +1,169 @@
<template>
<div class="main-operation">
<div class="operation-wrapper">
<div class="box" ref="box">
<div class="mask"></div>
<banner
:bannerConf="bannerConf"
/>
<div class="content">
<mainTitle
:isSelected="false"
:bannerConf="bannerConf"
/>
<materialGroup
:questionDataList="questionDataList"
ref="materialGroup"
/>
<submit
:submit-conf="submitConf"
:skin-conf="skinConf"
:is-selected="currentEditOne === 'submit'"
/>
<logo
:logo-conf="bottomConf"
:is-selected="currentEditOne === 'logo'"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import materialGroup from '@/management/pages/edit/components/materialGroup.vue';
import banner from '../components/banner.vue';
import mainTitle from '@/management/pages/edit/components/mainTitle.vue';
import submit from '@/management/pages/edit/components/submit.vue';
import logo from '@/management/pages/edit/components/logo.vue';
import { mapState, mapGetters } from 'vuex';
import { get as _get } from 'lodash-es';
export default {
name: 'previewPanel',
components: {
banner,
mainTitle,
submit,
logo,
materialGroup,
},
data() {
return {
isAnimating: false,
};
},
computed: {
...mapState({
bannerConf: (state) => _get(state, 'edit.schema.bannerConf'),
submitConf: (state) => _get(state, 'edit.schema.submitConf'),
bottomConf: (state) => _get(state, 'edit.schema.bottomConf'),
skinConf: (state) => _get(state, 'edit.schema.skinConf'),
questionDataList: (state) => _get(state, 'edit.schema.questionDataList'),
currentEditOne: (state) => _get(state, 'edit.currentEditOne'),
}),
...mapGetters({
currentEditKey: 'edit/currentEditKey',
}),
},
watch: {
skinConf: {
handler (skinConf) {
const { themeConf, backgroundConf, contentConf} = skinConf
const root = document.documentElement;
if(themeConf?.color) {
root.style.setProperty('--primary-color', themeConf?.color); // 设置主题颜色
}
if(backgroundConf?.color) {
root.style.setProperty('--primary-background-color', backgroundConf?.color); // 设置背景颜色
}
if(contentConf?.opacity.toString()) {
root.style.setProperty('--opacity', contentConf?.opacity/100); // 设置全局透明度
}
},
immediate: true, // 立即触发回调函数
deep: true
}
},
methods: {
animate(dom, property, targetValue) {
const origin = dom[property];
const subVal = targetValue - origin;
const flag = subVal < 0 ? -1 : 1;
const step = flag * 50;
const totalCount = Math.floor(subVal / step) + 1;
let runCount = 0;
const run = () => {
dom[property] += step;
runCount++;
if (runCount < totalCount) {
requestAnimationFrame(run);
} else {
this.isAnimating = false;
}
};
requestAnimationFrame(run);
},
},
};
</script>
<style lang="scss" scoped>
.main-operation {
width: 100%;
height: 100%;
min-width: 500px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f6f7f9;
}
.toolbar {
width: 100%;
height: 38px;
background-color: #fff;
flex-grow: 0;
flex-shrink: 0;
}
.operation-wrapper {
margin-top: 50px;
margin-bottom: 45px;
// min-height: 812px;
overflow-x: hidden;
overflow-y: auto;
// padding-right: 30px;
margin-right: 0px;
scrollbar-width: none;
width: 90%;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
.box {
background-color: var(--primary-background-color);
position: relative;
.mask{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
.content {
margin: 0 0.3rem;
background: rgba(255, 255, 255, var(--opacity));
border-radius: 8px 8px 0 0;
}
}
}
</style>

119
web/src/management/pages/edit/modules/settingModule/skin/setterPanel.vue Normal file
View File

@ -0,0 +1,119 @@
<template>
<div class="setter-wrapper">
<div class="setter-title">
样式设置
</div>
<div class="setter-content">
<el-collapse v-model="collapse">
<el-collapse-item
v-for="(collapse, index) in skinConfig"
:key="index"
:title="collapse.name"
:name="collapse.key"
>
<setterField
:form-config-list="collapse.formConfigList"
:module-config="_get(schema, collapse.key, {})"
@form-change="(key) => { onFormChange(key, collapse.key) }"
/>
</el-collapse-item>
</el-collapse>
</div>
<!-- -->
</div>
</template>
<script>
import skinConfig from '@/management/config/setterConfig/skinConfig';
import setterField from '@/management/pages/edit/components/setterField.vue';
import { mapState, mapGetters } from 'vuex';
import { get as _get } from 'lodash-es'
export default {
name: 'setterPanel',
components: {
setterField,
},
data() {
return {
collapse: '',
skinConfig,
};
},
computed: {
...mapState({
skinConf: (state) => _get(state, 'edit.schema.skinConf'),
schema: (state) => _get(state, 'edit.schema'),
}),
},
methods: {
_get,
onFormChange(data,collapse) {
const { key, value } = data;
const currentEditKey = `${collapse}`
const resultKey = `${currentEditKey}.${key}`;
this.$store.dispatch('edit/changeSchema', { key: resultKey, value });
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.setter-wrapper {
width: 360px;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
}
.setter-title {
height: 40px;
line-height: 40px;
font-size: 14px;
color: $primary-color;
padding-left: 20px;
// background: #f9fafc;
border-bottom: 1px solid #edeffc;
}
.setter-content{
padding: 10px 20px;
.el-collapse {
border: none;
::v-deep .el-collapse-item__header{
font-size: 14px;
color: #606266;
font-weight: bold;
border: none;
}
::v-deep .el-collapse-item__wrap{
border: none;
.el-collapse-item__content{
padding-bottom: 0px!important;
}
}
}
.config-form{
padding: 0!important;
}
}
.no-select-question {
padding-top: 125px;
display: flex;
flex-direction: column;
align-items: center;
img {
width: 160px;
padding: 25px;
}
.tip {
font-size: 14px;
color: $normal-color;
letter-spacing: 0;
}
}
.question-config-form {
padding: 30px 20px 50px 20px;
}
</style>

32
web/src/management/pages/edit/pages/skin/content.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<commonTemplate>
<catalogPanel slot="left"></catalogPanel>
<previewPanel slot="center"></previewPanel>
<setterPanel slot="right"></setterPanel>
</commonTemplate>
</template>
<script>
import commonTemplate from '../../components/commonTemplate.vue';
import catalogPanel from '../../modules/settingModule/skin/catalogPanel.vue';
import previewPanel from '../../modules/settingModule/skin/previewPanel.vue';
import setterPanel from '../../modules/settingModule/skin/setterPanel.vue';
export default {
name: 'editIndex',
components: {
commonTemplate,
catalogPanel,
previewPanel,
setterPanel,
},
created() {
this.$store.dispatch('getBannerData');
}
};
</script>
<style lang="scss" scoped>
.navbar {
border-bottom: 1px solid #e7e9eb;
}
</style>

68
web/src/management/pages/edit/pages/skin/index.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div class="skin-content">
<div class="navbar-tab">
<el-radio-group size="mini" style="margin-bottom: 30px;" v-model="activeRouter">
<el-radio-button :label="btnItem.router" :key="btnItem.router" v-for="btnItem in btnList" >
<span>{{ btnItem.text }}</span>
</el-radio-button>
</el-radio-group>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'skinPage',
props: {},
data() {
return {
activeRouter: this.$route.name,
btnList: [
{
text: '内容页',
router: 'QuestionSkinSetting',
key: 'skinsettings',
next: true,
},
{
text: '结果页',
router: 'QuestionEditResultConfig',
key: 'status',
},
],
};
},
watch: {
activeRouter: {
handler (val) {
this.$router.push({ name: val})
}
}
},
};
</script>
<style lang="scss" scoped>
.skin-content {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
.navbar-tab {
position: absolute;
top: 10px;
cursor: pointer;
z-index: 9999;
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner{
color: $primary-color;
background-color: #fff!important;
// &:active{
// color: $primary-color;
// }
}
}
}
</style>

8
web/src/management/pages/edit/pages/resultConfig.vue → web/src/management/pages/edit/pages/skin/result.vue
View File

@ -6,10 +6,10 @@
</commonTemplate>
</template>
<script>
import commonTemplate from '../components/commonTemplate.vue';
import resultCatalog from '../modules/settingModule/resultCatalog.vue';
import resultPreview from '../modules/settingModule/resultPreview.vue';
import resultSetter from '../modules/settingModule/resultSetter.vue';
import commonTemplate from '../../components/commonTemplate.vue';
import resultCatalog from '../../modules/settingModule/result/catalogPanel.vue';
import resultPreview from '../../modules/settingModule/result/previewPanel.vue';
import resultSetter from '../../modules/settingModule/result/setterPanel.vue';
export default {
name: 'editIndex',

31
web/src/management/router/index.js
View File

@ -24,12 +24,14 @@ const routes = [
meta: {
needLogin: true,
},
// redirect: '/question',
component: () =>
import(/* webpackChunkName: "editPage" */ '../pages/edit/index.vue'),
children: [
{
path: '',
name: 'QuestionEditIndex',
meta: {
needLogin: true,
},
@ -50,15 +52,32 @@ const routes = [
),
},
{
path: 'resultConfig',
name: 'QuestionEditResultConfig',
path: 'skin',
name: 'SkinSetting',
meta: {
needLogin: true,
},
component: () =>
import(
/* webpackChunkName: "QuestionEditResultConfig" */ '../pages/edit/pages/resultConfig.vue'
),
component: () => import(/* webpackChunkName: "skin" */ '../pages/edit/pages/skin/index.vue'),
children: [
{
path: '',
name: 'QuestionSkinSetting',
meta: {
needLogin: true,
},
component: () =>
import('../pages/edit/pages/skin/content.vue'),
},
{
path: 'result',
name: 'QuestionEditResultConfig',
meta: {
needLogin: true,
},
component: () =>
import('../pages/edit/pages/skin/result.vue'),
}
],
},
],
},

3
web/src/management/store/edit/actions.js
View File

@ -66,4 +66,7 @@ export default {
commit('changeSchema', { key, value });
commit('updateSchemaUpdateTime', Date.now());
},
changeThemePreset({ commit }, presets) {
commit('changeThemePreset', presets)
},
};

7
web/src/management/store/edit/mutations.js
View File

@ -1,4 +1,4 @@
import { set as _set, merge as _merge } from 'lodash-es';
import { get as _get, set as _set, merge as _merge } from 'lodash-es';
export default {
setCurrentEditOne(state, data) {
@ -86,4 +86,9 @@ export default {
changeSchema(state, { key, value }) {
_set(state.schema, key, value);
},
changeThemePreset(state, presets) {
Object.keys(presets).forEach(key => {
_set(state.schema, key, presets[key]);
})
}
};

11
web/src/management/store/edit/state.js
View File

@ -24,8 +24,15 @@ export default {
logoImageWidth: '28%',
},
skinConf: {
skinColor: '#4a4c5b',
inputBgColor: '#ffffff',
backgroundConf: {
color: "#fff"
},
themeConf: {
color: "#ffa600"
},
contentConf: {
opacity: 100
}
},
baseConf: {
begTime: '',

11
web/src/management/styles/icon.scss
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4263849 */
src: url('//at.alicdn.com/t/c/font_4263849_tcd4y5836dg.woff2?t=1695630919866') format('woff2'),
url('//at.alicdn.com/t/c/font_4263849_tcd4y5836dg.woff?t=1695630919866') format('woff'),
url('//at.alicdn.com/t/c/font_4263849_tcd4y5836dg.ttf?t=1695630919866') format('truetype');
src: url('//at.alicdn.com/t/c/font_4263849_t1b52yiuhie.woff2?t=1695630919866') format('woff2'),
url('//at.alicdn.com/t/c/font_4263849_t1b52yiuhie.woff?t=1695630919866') format('woff'),
url('//at.alicdn.com/t/c/font_4263849_t1b52yiuhie.ttf?t=1695630919866') format('truetype');
}
.iconfont {
@ -50,7 +50,7 @@
}
.icon-wenjuanshezhi:before {
content: "\e6cc";
content: "\eacc";
}
.icon-jiantou:before {
@ -124,3 +124,6 @@
.icon-erweima:before {
content: "\e6c0";
}
.icon-yangshishezhi:before {
content: "\e6e6";
}

12
web/src/management/styles/skin.scss Normal file
View File

@ -0,0 +1,12 @@
// 定义颜色变量
$primary-color: #ffa600;
$primary-background-color: #fff;
$opacity: 1;
// 使用CSS自定义属性
:root {
--primary-color: #{$primary-color};
--primary-background-color: #{$primary-background-color};
--opacity: #{$opacity};
}

35
web/src/management/styles/variable.scss
View File

@ -1,8 +1,10 @@
@import './skin.scss';
$primary-color: #ffa600;
$primary-color-hover: #fbb733;
$primary-color-deep: #D48D00;
$primary-color-light: #fffcf0;
$normal-color: #4a4c5b;
$normal-color-hover: #626369;
$normal-color-deep: #292a36;
@ -22,6 +24,7 @@ $background-color: #f6f7f9;
$background-color-light: #ffffff;
$background-color-gray: #F7F9Fb;
$background-color-dark: #E7E9EB;
$primary-bg-color: #fef6e6;
$title-color-deep: #292a36;
$title-color: #4a4c5b;
@ -32,3 +35,35 @@ $light-focus-color: #666666;
$spliter-color: #f7f7f7;
$error-color: #ec4e29;
$primary-color-light: hsl(48, 100%, 97%);
$title-size: 0.32rem;
$font-size: 0.28rem;
$tip-size: 0.22rem;
.el-radio__input.is-checked+.el-radio__label {
color: $font-color !important;
}
.el-switch.is-checked .el-switch__core {
border-color: $primary-color !important;
background-color: $primary-color !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.question-edit-wrapper .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: $primary-color !important;
border-color: $primary-color !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
border-color: $primary-color !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: $font-color !important;
}

25
web/src/materials/questions/common/css/default.scss
View File

@ -1,4 +1,4 @@
$primary-color: #FAA600;
$primary-color: var(--primary-color);
$primary-color-light: hsl(48, 100%, 97%);
$title-color-deep: #292a36;
@ -19,26 +19,3 @@ $error-color: #ec4e29;
$title-size: 0.32rem;
$font-size: 0.28rem;
$tip-size: 0.22rem;
.el-radio__input.is-checked+.el-radio__label {
color: $font-color !important;
}
.el-switch.is-checked .el-switch__core {
border-color: $primary-color !important;
background-color: $primary-color !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.question-edit-wrapper .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: $primary-color !important;
border-color: $primary-color !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
border-color: $primary-color !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: $font-color !important;
}

1
web/src/materials/questions/common/css/radioStar.scss
View File

@ -1,3 +1,4 @@
@import './default.scss';
.star-wrapper-main {
// .isShowInput{
// padding-bottom: 0 !important ;

2
web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue
View File

@ -252,7 +252,7 @@ export default {
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../common/css/default.scss';
// @import '../../common/css/default.scss';
.ceilingPopper {
max-width: 1000px !important ;
}

2
web/src/materials/questions/components/Options/OptionEdit.vue
View File

@ -115,7 +115,7 @@ export default {
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../common/css/default.scss';
// @import '../../common/css/default.scss';
.option-edit-wrap {
.focus {
margin-top: 31px;

2
web/src/materials/questions/components/Options/OptionEditBar.vue
View File

@ -118,7 +118,7 @@ export default defineComponent({
});
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../common/css/default.scss';
// @import '../../common/css/default.scss';
.option-edit-bar-wrap {
margin-top: 20px;

1
web/src/materials/questions/components/Progress.vue
View File

@ -40,6 +40,7 @@ export default {
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../common/css/default.scss';
.process-outer {
position: relative;
border-radius: 0.16rem;

31
web/src/materials/setters/widgets/ColorPicker.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<el-form-item class="pick-wrap">
<el-color-picker :value="formConfig.value" @change="changeData"></el-color-picker>
</el-form-item>
</template>
<script>
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
export default {
name: 'ColorPicker',
props: {
formConfig: {
type: Object,
required: true,
},
},
methods: {
changeData(value) {
const key = this.formConfig.key;
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value,
});
},
},
};
</script>
<style lang="scss" scoped>
.pick-wrap{
text-align: end;
}
</style>

13
web/src/materials/setters/widgets/FormItem.vue
View File

@ -1,7 +1,7 @@
<template>
<el-form-item
:class="{
horizion: formConfig.direction === 'horizon',
horizon: formConfig.direction === 'horizon',
space_between: formConfig.direction === 'space_between',
}"
>
@ -46,4 +46,15 @@ export default {
display: flex;
flex-direction: row;
}
.space_between{
display: flex;
justify-content: space-between;
::v-deep> label{
flex: 1;
}
::v-deep> div{
flex: 1;
}
}
</style>

11
web/src/materials/setters/widgets/InputPercent.vue
View File

@ -1,5 +1,6 @@
<template>
<el-input
class="custom-input"
:placeholder="formConfig.placeholder"
v-model="value"
@input="changeData"
@ -67,4 +68,12 @@ export default {
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped></style>
<style lang="scss" rel="stylesheet/scss" scoped>
.custom-input{
::v-deep .el-input__inner{
width: 100px;
padding-right: 0px;
}
}
</style>

37
web/src/materials/setters/widgets/SliderSetter.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<el-form-item class="slider-wrap">
<el-slider :value="formConfig.value" @input="changeData" :format-tooltip="formatTooltip"></el-slider>
<!-- <span>{{ formConfig.value + '%' }}</span> -->
</el-form-item>
</template>
<script>
import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
export default {
name: 'SliderSetter',
props: {
formConfig: {
type: Object,
required: true,
},
},
methods: {
formatTooltip (val) {
return val + '%';
},
changeData(value) {
const key = this.formConfig.key;
this.$emit(FORM_CHANGE_EVENT_KEY, {
key,
value,
});
},
},
};
</script>
<style>
.slider-wrap{
flex: 1;
/* display: flex; */
padding: 0 20px;
}
</style>

36
web/src/render/App.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="app">
<Component v-if="$store.state.router" :is="$store.state.router"></Component>
<logo></logo>
<logo v-if="!['successPage', 'indexPage'].includes($store.state.router)"></logo>
</div>
</template>
@ -14,6 +14,7 @@ import errorPage from './pages/errorPage.vue';
import successPage from './pages/successPage.vue';
import logo from './components/logo.vue';
import { get as _get, value } from 'lodash-es'
export default {
name: 'App',
@ -27,7 +28,16 @@ export default {
data() {
return {};
},
computed: {},
computed: {
skinConf () {
return _get(this.$store, 'state.skinConf', {});
},
},
watch: {
skinConf(value) {
this.setSkin(value)
}
},
async created() {
this.init();
},
@ -59,6 +69,7 @@ export default {
skinConf,
submitConf,
};
this.setSkin(skinConf)
this.$store.commit('setSurveyPath', surveyPath);
this.$store.dispatch('init', questionData);
this.$store.dispatch('getEncryptInfo');
@ -73,6 +84,20 @@ export default {
}
}
},
setSkin(skinConf) {
const { themeConf, backgroundConf, contentConf} = skinConf
const root = document.documentElement;
if(themeConf?.color) {
root.style.setProperty('--primary-color', themeConf?.color); // 设置主题颜色
}
if(backgroundConf?.color) {
root.style.setProperty('--primary-background-color', backgroundConf?.color); // 设置背景颜色
}
if(contentConf?.opacity.toString()) {
console.log({opacity: (contentConf?.opacity)/100})
root.style.setProperty('--opacity', (contentConf?.opacity)/100); // 设置全局透明度
}
}
},
};
</script>
@ -86,10 +111,7 @@ html {
background: rgb(238, 238, 238);
}
body,
.container {
height: 100%;
}
#app {
position: relative;
@ -97,7 +119,7 @@ body,
width: 100%;
max-width: 750px;
margin: auto;
min-height: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;

43
web/src/render/components/header.vue
View File

@ -32,7 +32,7 @@
<div class="iconfont icon-kaishi play-icon" @click="play()"></div>
</div>
</div>
<div
<!-- <div
class="titlePanel"
v-if="bannerConf.titleConfig && bannerConf.titleConfig.mainTitle"
>
@ -41,7 +41,7 @@
v-if="bannerConf.titleConfig.mainTitle"
v-safe-html="bannerConf.titleConfig.mainTitle"
></div>
</div>
</div> -->
</div>
</template>
<script>
@ -53,7 +53,7 @@ export default {
computed: {
bannerConf() {
return _get(this.$store, 'state.bannerConf', {});
},
}
},
methods: {
onBannerClick() {
@ -90,6 +90,7 @@ export default {
}
.banner {
display: flex;
.banner-img {
width: 100%;
@ -133,39 +134,3 @@ export default {
}
}
</style>
<style lang="scss">
@import '@/render/styles/variable.scss';
.mainTitle {
font-size: 0.28rem;
line-height: 0.4rem;
color: $title-color;
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
line-height: 0.6rem;
color: $title-color-deep;
margin-bottom: 0.35rem;
}
p {
margin-bottom: 0;
}
}
</style>

1
web/src/render/components/logo.vue
View File

@ -31,7 +31,6 @@ export default {
}
.logo-wrapper {
max-width: 300px;
text-align: center;
font-size: 0;
padding: 0.1rem 0 0.5rem;

68
web/src/render/components/mainTitle.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div class="question-header">
<div
class="titlePanel"
v-if="bannerConf.titleConfig && bannerConf.titleConfig.mainTitle"
>
<div
class="mainTitle"
v-if="bannerConf.titleConfig.mainTitle"
v-safe-html="bannerConf.titleConfig.mainTitle"
></div>
</div>
</div>
</template>
<script>
import { get as _get } from 'lodash-es';
export default {
name: 'mainTitle',
computed: {
bannerConf() {
return _get(this.$store, 'state.bannerConf', {});
}
},
}
</script>
<style lang="scss" scoped>
@import '@/render/styles/variable.scss';
.question-header {
.titlePanel {
position: relative;
width: 100%;
padding: 0.4rem 0.4rem;
box-sizing: border-box;
}
}
.mainTitle {
font-size: 0.28rem;
line-height: 0.4rem;
color: $title-color;
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
line-height: 0.6rem;
color: $title-color-deep;
margin-bottom: 0.35rem;
}
p {
margin-bottom: 0;
}
}
</style>

5
web/src/render/components/submit.vue
View File

@ -2,7 +2,6 @@
<div class="question-submit_wrapper">
<button
class="question-submit-btn"
:style="{ backgroundColor: skinConf.skinColor }"
@click="submit"
>
{{ submitConf.submitTitle }}
@ -60,9 +59,9 @@ export default {
font-weight: 500;
text-align: center;
color: #fff;
background: $primary-color;
background: var(--primary-color);
border-radius: 0.08rem;
margin-top: 0.4rem;
margin: 0.4rem 0;
cursor: pointer;
}
}

26
web/src/render/pages/errorPage.vue
View File

@ -1,7 +1,11 @@
<template>
<div class="error-wrapper">
<img class="error-img" :src="errorImageUrl" />
<div class="bottom-word" v-html="errorMsg"></div>
<div class="result-page-wrap">
<div class="result-page">
<div class="error-wrapper">
<img class="error-img" :src="errorImageUrl" />
<div class="bottom-word" v-html="errorMsg"></div>
</div>
</div>
</div>
</template>
<script>
@ -29,6 +33,22 @@ export default {
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.result-page-wrap {
width: 100%;
flex: 1;
text-align: center;
overflow: hidden;
background: var(--primary-background-color);
padding: 0 0.3rem;
.result-page{
background: rgba(255, 255, 255, var(--opacity));
display: flex;
flex-direction: column;
height: 100%;
}
}
.error-wrapper {
text-align: center;
font-size: 14px;

40
web/src/render/pages/index.vue
View File

@ -1,23 +1,31 @@
<template>
<div class="index">
<progressBar />
<Header></Header>
<mainRenderer ref="main"></mainRenderer>
<submit
:validate="validate"
:renderData="renderData"
@submit="onSubmit"
></submit>
<div class="wrapper" ref="box">
<Header></Header>
<div class="content">
<mainTitle></mainTitle>
<mainRenderer ref="main"></mainRenderer>
<submit
:validate="validate"
:renderData="renderData"
@submit="onSubmit"
></submit>
<logo></logo>
</div>
</div>
</div>
</template>
<script>
import Header from '../components/header.vue';
import mainTitle from '../components/mainTitle.vue'
import submit from '../components/submit.vue';
import mainRenderer from '../components/mainRenderer';
import progressBar from '../components/progressBar';
import { submitForm } from '@/render/api/survey';
import encrypt from '../utils/encrypt';
import logo from '../components/logo.vue';
export default {
name: 'indexPage',
@ -33,9 +41,11 @@ export default {
},
components: {
Header,
mainTitle,
submit,
mainRenderer,
progressBar,
logo,
},
computed: {
formModel() {
@ -121,6 +131,20 @@ export default {
<style scoped lang="scss">
.index {
padding-bottom: 0.8rem;
// padding-bottom: 0.8rem;
min-height: 100%;
.wrapper{
min-height: 100%;
background-color: var(--primary-background-color);
display: flex;
flex-direction: column;
.content{
flex: 1;
margin: 0 0.3rem;
background: rgba(255, 255, 255, var(--opacity));
border-radius: 8px 8px 0 0;
height: 100%;
}
}
}
</style>

26
web/src/render/pages/successPage.vue
View File

@ -1,14 +1,19 @@
<template>
<div class="result-page">
<div class="result-content">
<img src="/imgs/icons/success.webp" />
<div class="msg" v-safe-html="successMsg"></div>
<div class="result-page-wrap">
<div class="result-page">
<div class="result-content">
<img src="/imgs/icons/success.webp" />
<div class="msg" v-safe-html="successMsg"></div>
</div>
<logo></logo>
</div>
</div>
</template>
<script>
import logo from '../components/logo.vue';
export default {
name: 'resultPage',
components: {logo},
computed: {
submitConf() {
return this.$store?.state?.submitConf || {};
@ -22,11 +27,20 @@ export default {
<style lang="scss" rel="stylesheet/scss" scoped>
@import '@/render/styles/variable.scss';
.result-page {
.result-page-wrap {
width: 100%;
flex: 1;
text-align: center;
overflow: hidden;
background: var(--primary-background-color);
padding: 0 0.3rem;
.result-page{
background: rgba(255, 255, 255, var(--opacity));
display: flex;
flex-direction: column;
height: 100%;
}
}
.result-content {
@ -37,7 +51,7 @@ export default {
width: 100%;
position: relative;
padding-top: 2rem;
background: #fff;
flex: 1;
img {
width: 2rem;