Skip to content

Commit e667154

Browse files
vincentzycvincentzyc
committed
设置优化
1 parent ebafd83 commit e667154

12 files changed

Lines changed: 220 additions & 189 deletions

File tree

‎src/assets/css/themes.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,20 @@ $t3-base-color: #6e7786;
77
.theme1 {
88
width: 92%;
99
background: #fff;
10-
border-radius: 8px;
1110
margin: 0 auto 20px auto;
1211
padding: 10px 0;
1312
}
1413

1514
.theme2 {
1615
width: 92%;
1716
background: #fff;
18-
border-radius: 8px;
1917
margin: 0 auto 20px auto;
2018
padding: 10px 0;
2119
}
2220

2321
.theme3 {
2422
width: 92%;
2523
background: #fff;
26-
border-radius: 8px;
2724
margin: 0 auto 20px auto;
2825
padding: 10px 0;
2926
}

‎src/assets/css/widget.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ $primary-background-color: #d8e8fa;
7575

7676
.widget-view {
7777
margin: 0;
78-
padding: 10px;
78+
padding: 5px 10px;
7979
// background: #fff;
8080
position: relative;
8181

‎src/assets/json/field-types.json‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -52,25 +52,5 @@
5252
"dateTypes": [{
5353
"value": "birthday",
5454
"label": "生日"
55-
}],
56-
57-
"themes": [{
58-
"value": "theme1",
59-
"name": "主题1",
60-
"banner": "static/img/theme1.jpg",
61-
"background": "#4a9bed",
62-
"contentWidth":"90%"
63-
}, {
64-
"value": "theme2",
65-
"name": "主题2",
66-
"banner": "static/img/theme2.jpg",
67-
"background": "#fe7c01",
68-
"contentWidth":"80%"
69-
}, {
70-
"value": "theme3",
71-
"name": "主题3",
72-
"banner": "static/img/theme3.jpg",
73-
"background": "#707988",
74-
"contentWidth":"70%"
7555
}]
7656
}

‎src/assets/json/page-config.json‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,30 @@
11
{
2-
"title": "骏伯网络",
3-
"background": "#fff",
4-
"theme": null
2+
"pageConfig": {
3+
"title": "骏伯网络",
4+
"background": "#fff",
5+
"theme": null,
6+
"matomoId": null
7+
},
8+
"themes": [{
9+
"value": "theme1",
10+
"name": "主题1",
11+
"banner": "static/img/theme1.jpg",
12+
"background": "#4a9bed",
13+
"contentWidth": "100%",
14+
"borderRadius": false
15+
}, {
16+
"value": "theme2",
17+
"name": "主题2",
18+
"banner": "static/img/theme2.jpg",
19+
"background": "#fe7c01",
20+
"contentWidth": "90%",
21+
"borderRadius": true
22+
}, {
23+
"value": "theme3",
24+
"name": "主题3",
25+
"banner": "static/img/theme3.jpg",
26+
"background": "#707988",
27+
"contentWidth": "80%",
28+
"borderRadius": true
29+
}]
530
}

‎src/assets/json/widget.json‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,32 @@
22
"basicComponents": [{
33
"type": "phone",
44
"name": "手机号",
5-
"title": "手机号",
65
"placeholder": "请输入手机号",
76
"showLabel": false,
7+
"labelTitle": "手机号",
88
"labelPosition": "left",
9+
"labelwidth": 50,
10+
"labelWidth": "50px",
911
"value": "",
1012
"apiKey": "phone",
1113
"codeValue": "",
1214
"codeKey": "verifyCode",
13-
"showCode": true,
15+
"showCode": true,
1416
"style": {
15-
"margin": "0px 0px 0px 0px",
16-
"btnStyle": {
17+
"margin": "0px 0px 0px 0px",
18+
"btnStyle": {
1719
"background": "#409EFF"
1820
}
1921
}
2022
}, {
2123
"type": "input",
2224
"name": "输入框",
23-
"title": "姓名",
2425
"placeholder": "请输入姓名",
25-
"showLabel": false,
26+
"showLabel": false,
27+
"labelTitle": "姓名",
2628
"labelPosition": "left",
29+
"labelwidth": 50,
30+
"labelWidth": "50px",
2731
"value": "",
2832
"apiKey": "name",
2933
"fieldTypes": "inputTypes",
@@ -34,7 +38,7 @@
3438
{
3539
"type": "checkbox",
3640
"name": "选择框",
37-
"title": "旅拍城市",
41+
"labelTitle": "旅拍城市",
3842
"value": [],
3943
"apiKey": "shootPlace",
4044
"isRadio": false,
@@ -48,7 +52,7 @@
4852
{
4953
"type": "date",
5054
"name": "日期选择器",
51-
"title": "生日",
55+
"labelTitle": "生日",
5256
"labelPosition": "left",
5357
"apiKey": "birthday",
5458
"value": "",
@@ -60,12 +64,14 @@
6064
{
6165
"type": "select",
6266
"name": "下拉选择框",
63-
"title": "教育程度",
6467
"value": "",
6568
"apiKey": "educationLevel",
6669
"placeholder": "请选择教育程度",
6770
"showLabel": false,
71+
"labelTitle": "教育程度",
6872
"labelPosition": "left",
73+
"labelwidth": 50,
74+
"labelWidth": "50px",
6975
"fieldTypes": "selectTypes",
7076
"options": ["硕士及以上", "本科", "大专", "中专/高中及以下"],
7177
"style": {
@@ -75,7 +81,7 @@
7581
{
7682
"type": "switch",
7783
"name": "开关",
78-
"title": "是否有信用卡",
84+
"labelTitle": "是否有信用卡",
7985
"value": false,
8086
"labelPosition": "left",
8187
"fieldTypes": "switchTypes",
@@ -114,7 +120,7 @@
114120
"value": "文本描述",
115121
"style": {
116122
"textAlign": "left",
117-
"fontsize": "14",
123+
"fontsize": 14,
118124
"fontSize": "14px",
119125
"color": "#333333",
120126
"margin": "0px 0px 0px 0px"

‎src/components/base/img-upload.vue‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
<template>
2-
<el-form-item label="图片上传">
3-
<el-upload
4-
class="avatar-uploader"
5-
:action="$api.apiUrl()+'supermarketloan/mgr/eventmarket/uploadeventmarketimg'"
6-
:show-file-list="false"
7-
:on-success="handleAvatarSuccess"
8-
:before-upload="beforeAvatarUpload"
9-
:on-error="uploadError"
10-
>
11-
<img v-if="value" :src="value" class="avatar">
12-
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
13-
</el-upload>
14-
</el-form-item>
2+
<el-upload
3+
class="avatar-uploader"
4+
:action="$api.apiUrl()+'supermarketloan/mgr/eventmarket/uploadeventmarketimg'"
5+
:show-file-list="false"
6+
:on-success="handleAvatarSuccess"
7+
:before-upload="beforeAvatarUpload"
8+
:on-error="uploadError"
9+
>
10+
<img v-if="value" :src="value" class="avatar">
11+
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
12+
</el-upload>
1513
</template>
1614
<script>
1715
export default {

‎src/components/page-config.vue‎

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,52 @@
11
<template>
22
<div class="form-config-container">
33
<el-form label-position="top">
4-
<el-form-item label="页面标题" v-if="pageData.config.hasOwnProperty('title')">
5-
<el-input v-model="pageData.config.title"></el-input>
6-
</el-form-item>
7-
<el-form-item label="主题" v-if="themes.length>0">
8-
<el-radio-group v-model="selectTheme" @change="setTheme">
9-
<el-radio-button v-for="item in themes" :label="item.value" :key="item.value">{{item.name}}</el-radio-button>
10-
</el-radio-group>
11-
</el-form-item>
12-
<el-form-item label="图片上传" v-if="pageData.config.theme">
13-
<ImgUpload :value.sync="pageData.config.theme.banner"/>
14-
</el-form-item>
15-
<el-form-item label="页面背景色" v-if="pageData.config.hasOwnProperty('background')">
16-
<el-color-picker v-model="pageData.config.background"/>
17-
</el-form-item>
18-
<el-form-item label="内容区域宽度" v-if="pageData.config.theme&&pageData.config.theme.hasOwnProperty('contentWidth')">
19-
<el-radio-group v-model="pageData.config.theme.contentWidth" size="mini">
20-
<el-radio-button label="90%"></el-radio-button>
21-
<el-radio-button label="80%"></el-radio-button>
22-
<el-radio-button label="70%"></el-radio-button>
23-
<el-radio-button label="60%"></el-radio-button>
24-
</el-radio-group>
25-
</el-form-item>
4+
<el-collapse v-model="activeName" accordion>
5+
<el-collapse-item title="基础设置" name="collapse1">
6+
<el-form-item label="页面标题">
7+
<el-input v-model="pageData.config.title"></el-input>
8+
</el-form-item>
9+
<el-form-item label="页面背景色">
10+
<el-color-picker v-model="pageData.config.background"/>
11+
</el-form-item>
12+
<el-form-item label="Matomo统计ID">
13+
<el-input type="number" v-model="pageData.config.matomoId"></el-input>
14+
</el-form-item>
15+
<el-form-item label="主题" v-if="themes.length>0">
16+
<el-radio-group v-model="selectTheme" @change="setTheme">
17+
<el-radio-button v-for="item in themes" :label="item.value" :key="item.value">{{item.name}}</el-radio-button>
18+
</el-radio-group>
19+
</el-form-item>
20+
</el-collapse-item>
21+
<el-collapse-item title="主题设置" name="collapse2" v-if="pageData.config.theme">
22+
<el-form-item label="图片上传">
23+
<ImgUpload :value.sync="pageData.config.theme.banner"/>
24+
</el-form-item>
25+
<el-form-item label="内容区域宽度" v-if="pageData.config.theme.hasOwnProperty('contentWidth')">
26+
<el-radio-group v-model="pageData.config.theme.contentWidth" size="mini">
27+
<el-radio-button label="100%"></el-radio-button>
28+
<el-radio-button label="90%"></el-radio-button>
29+
<el-radio-button label="80%"></el-radio-button>
30+
<el-radio-button label="70%"></el-radio-button>
31+
</el-radio-group>
32+
</el-form-item>
33+
<el-form-item label="内容区域圆角" v-if="pageData.config.theme.hasOwnProperty('borderRadius')">
34+
<el-switch v-model="pageData.config.theme.borderRadius"></el-switch>
35+
</el-form-item>
36+
</el-collapse-item>
37+
</el-collapse>
2638
</el-form>
2739
</div>
2840
</template>
2941

3042
<script>
3143
import { mapState } from 'vuex';
32-
import allFieldTypes from '@/assets/json/field-types.json'
44+
import pageConfigData from '@/assets/json/page-config.json'
3345
export default {
3446
data() {
3547
return {
36-
themes: allFieldTypes.themes,
48+
activeName: 'collapse1',
49+
themes: pageConfigData.themes,
3750
}
3851
},
3952
computed: {

0 commit comments

Comments
 (0)