Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
f49b3891 by simon
Options

默认提交

1 parent 99c76e6f
Inline Side-by-side
Showing 9 changed files with 108 additions and 43 deletions
...@@ -110,7 +110,7 @@ npm run sandbox ...@@ -110,7 +110,7 @@ npm run sandbox
110 #### z-index 权重划分 110 #### z-index 权重划分
111 111
112 - 遮罩蒙层:5000 112 - 遮罩蒙层:5000
113 - 导航栏:3000 113 - 导航栏:1000
114 - element-ui:2000+ 114 - element-ui:2000+
115 - 自定义交互组件 如 date-picker: 800-900 115 - 自定义交互组件 如 date-picker: 800-900
116 - 一般业务级:小于 100 116 - 一般业务级:小于 100
......
1 /** 1 /**
2 * 组件描述:过滤组件 2 * 组件描述:过滤组件
3 * PC端样式为左图标右文案 3 * 日期根据保单列表中已有月份进行筛选
4 * 主要用于错误提示 4 *
5 */ 5 */
6 6
7
7 export default { 8 export default {
8 props: { 9 props: {
9 // 是否显示组件 10 // 是否显示组件
...@@ -16,34 +17,44 @@ export default { ...@@ -16,34 +17,44 @@ export default {
16 type: Function, 17 type: Function,
17 default: null 18 default: null
18 }, 19 },
20 // 确认文案
21 confirmText: {
22 type: String,
23 default: "確認",
24 },
25 // 取消文案
26 cancelText: {
27 type: String,
28 default: "取消",
29 },
30 // 确定按钮回调方法
31 confirm: {
32 type: Function,
33 default: null
34 },
35 // 取消按钮回调方法
36 cancel: {
37 type: Function,
38 default: null
39 },
19 // 点击蒙层回调方法 40 // 点击蒙层回调方法
20 overlay: { 41 overlay: {
21 type: Function, 42 type: Function,
22 default: null 43 default: null
23 }, 44 },
45
24 // 传入数据 46 // 传入数据
25 items: { 47 items: {
26 type: Array, 48 type: Array,
27 default: () => [ 49 default: () => [
28 "复选框 A", 50
29 "复选框 B",
30 "复选框 C",
31 "复选框 D",
32 "复选框 E",
33 "复选框 F",
34 "复选框 G",
35 "复选框 H",
36 "复选框 I",
37 "复选框 J",
38 "复选框 K",
39 "复选框 L",
40 ] 51 ]
41 } 52 }
42 }, 53 },
43 data() { 54 data() {
44 return { 55 return {
45 key: 'value', 56 checkList: [],
46 checkList: [] 57 value2: ""
47 } 58 }
48 }, 59 },
49 components: {}, 60 components: {},
...@@ -59,15 +70,22 @@ export default { ...@@ -59,15 +70,22 @@ export default {
59 this.close(); 70 this.close();
60 } 71 }
61 }, 72 },
73 // 点击取消
74 onCancelHandler() {
75 if (this.close) {
76 this.close();
77 }
78 },
62 // 点击蒙层 79 // 点击蒙层
63 onOverLayHandler() { 80 onOverLayHandler() {
64 if (this.overlay) { 81 if (this.overlay) {
65 this.overlay(); 82 this.overlay();
66 } 83 }
67 }, 84 },
68 toTarget() { 85 // 点击确认
69 if (this.target) { 86 onConfirmHandler() {
70 this.$emit("targetCallbak", this.target1); 87 if (this.confirm) {
88 this.confirm(this.checkList);
71 } 89 }
72 }, 90 },
73 initData() {} 91 initData() {}
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 position: fixed; 5 position: fixed;
6 top: 0; 6 top: 0;
7 left: 0; 7 left: 0;
8 z-index: 5000; 8 z-index: 2000;
9 width: 100%; 9 width: 100%;
10 height: 100%; 10 height: 100%;
11 @extend .fcc; 11 @extend .fcc;
...@@ -38,7 +38,25 @@ ...@@ -38,7 +38,25 @@
38 38
39 &-content { 39 &-content {
40 padding: 72px 60px; 40 padding: 72px 60px;
41 max-height: 534px; 41 // max-height: 534px;
42 max-height: 70vh;
43 overflow-y: auto;
44 }
45
46 &-btn-wrap {
47 display: flex;
48 justify-content: center;
49
50 .btn {
51 @include btc4(144px, 42px, 16px);
52 margin: 36px 36px 36px;
53 @extend .pointer;
54 }
55
56 .disable {
57 background-image: none;
58 background-color: $cFontGray3;
59 }
42 } 60 }
43 61
44 } 62 }
...@@ -74,20 +92,16 @@ ...@@ -74,20 +92,16 @@
74 .border { 92 .border {
75 width: 80%; 93 width: 80%;
76 94
95
77 .modal { 96 .modal {
78 .modal-content { 97 .modal-content {
79 flex-wrap: wrap; 98 flex-wrap: wrap;
80 padding: 32px 16px; 99 padding: 32px 16px;
81
82 .info-icon {
83 margin: 0 auto;
84 width: 32%;
85 min-width: auto;
86 } 100 }
87 101
88 .message { 102 .modal-btn-wrap {
89 margin: 16px auto 0; 103 .btn {
90 font-size: 20px; 104 margin: 24px 12px 24px;
91 } 105 }
92 } 106 }
93 } 107 }
......
...@@ -6,11 +6,18 @@ ...@@ -6,11 +6,18 @@
6 <div class="close" @click="onCloseHandler()"><img src="@/assets/images/clarms/close.png"></div> 6 <div class="close" @click="onCloseHandler()"><img src="@/assets/images/clarms/close.png"></div>
7 <div class="modal"> 7 <div class="modal">
8 <div class="modal-content"> 8 <div class="modal-content">
9 <div class="check-panel">
9 <el-checkbox-group v-model="checkList"> 10 <el-checkbox-group v-model="checkList">
10 <el-checkbox v-for="item in items" :key="item.id" :label="item"></el-checkbox> 11 <el-checkbox v-for="item in items" :key="item.id" :label="item"></el-checkbox>
11 </el-checkbox-group> 12 </el-checkbox-group>
12 </div> 13 </div>
13 </div> 14 </div>
15
16 <div class="modal-btn-wrap">
17 <div @click="onCancelHandler()" class="btn disable">{{cancelText}}</div>
18 <div @click="onConfirmHandler()" class="btn">{{confirmText}}</div>
19 </div>
20 </div>
14 </div> 21 </div>
15 </div> 22 </div>
16 </template> 23 </template>
......
...@@ -8,7 +8,7 @@ $navHeiM: 72px; ...@@ -8,7 +8,7 @@ $navHeiM: 72px;
8 background-color: #fff; 8 background-color: #fff;
9 color: $cFontGray; 9 color: $cFontGray;
10 position: relative; 10 position: relative;
11 z-index: 3000; 11 z-index: 1000;
12 font-size: $fontSize; 12 font-size: $fontSize;
13 13
14 .header-container { 14 .header-container {
......
...@@ -4,9 +4,16 @@ import App from './App.vue'; ...@@ -4,9 +4,16 @@ import App from './App.vue';
4 import router from './router'; 4 import router from './router';
5 import store from './store/index'; 5 import store from './store/index';
6 6
7 import Element from 'element-ui' 7 import ElementUI from 'element-ui'
8 import '@styles/element-variables.scss' 8 import '@styles/element-variables.scss'
9 Vue.use(Element) 9
10 Vue.use(ElementUI)
11 // import enLocale from 'element-ui/lib/locale/lang/en' // lang i18n
12 // import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
13 // import tcLocale from 'element-ui/lib/locale/lang/zh-TW' // lang i18n
14 // Vue.use(ElementUI, {
15 // tcLocale
16 // })
10 17
11 import api from '@/api/api' 18 import api from '@/api/api'
12 import { 19 import {
...@@ -18,7 +25,9 @@ import VueAwesomeSwiper from 'vue-awesome-swiper' ...@@ -18,7 +25,9 @@ import VueAwesomeSwiper from 'vue-awesome-swiper'
18 import 'swiper/dist/css/swiper.css' 25 import 'swiper/dist/css/swiper.css'
19 Vue.use(VueAwesomeSwiper) 26 Vue.use(VueAwesomeSwiper)
20 27
21 import { Loading } from 'vant'; 28 import {
29 Loading
30 } from 'vant';
22 Vue.use(Loading); 31 Vue.use(Loading);
23 32
24 // vant 33 // vant
...@@ -31,9 +40,6 @@ Vue.use(Collapse).use(CollapseItem); ...@@ -31,9 +40,6 @@ Vue.use(Collapse).use(CollapseItem);
31 Vue.use(Icon); 40 Vue.use(Icon);
32 41
33 42
34 // import { Button } from 'element-ui';
35 // Vue.use(Button)
36
37 import Mock from './mock' 43 import Mock from './mock'
38 Mock.bootstrap(); 44 Mock.bootstrap();
39 45
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 <e-correspondence-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></e-correspondence-head-list> 7 <e-correspondence-head-list :multiSelectable="false" @onSelect="handlePolicySelect"></e-correspondence-head-list>
8 8
9 <!-- 保单详情 --> 9 <!-- 保单详情 -->
10 <template v-if="dataForm"> 10 <!-- <template v-if="dataForm">
11 <div class="cell-group"> 11 <div class="cell-group">
12 <div class="table-header"> 12 <div class="table-header">
13 <div class="normal-header"> 13 <div class="normal-header">
...@@ -264,7 +264,7 @@ ...@@ -264,7 +264,7 @@
264 </div> 264 </div>
265 </div> 265 </div>
266 </div> 266 </div>
267 </template> 267 </template> -->
268 </div> 268 </div>
269 </div> 269 </div>
270 </template> 270 </template>
......
...@@ -40,8 +40,8 @@ export default { ...@@ -40,8 +40,8 @@ export default {
40 selectPolicyCodes: {}, 40 selectPolicyCodes: {},
41 hide: false, 41 hide: false,
42 showDownloadError: false, 42 showDownloadError: false,
43 filterVisible: true, 43 filterVisible: false,
44 checkList:[] 44 checkList: []
45 } 45 }
46 }, 46 },
47 computed: { 47 computed: {
...@@ -260,10 +260,24 @@ export default { ...@@ -260,10 +260,24 @@ export default {
260 }, 260 },
261 // 过滤筛选 261 // 过滤筛选
262 onFilterHandler(idx) { 262 onFilterHandler(idx) {
263 this.checkList = []
263 switch (idx) { 264 switch (idx) {
264 // 保单号码 265 // 保单号码
265 case 1: 266 case 1:
266 267 this.checkList = [
268 "复选框 A",
269 "复选框 B",
270 "复选框 C",
271 "复选框 D",
272 "复选框 E",
273 "复选框 F",
274 "复选框 G",
275 "复选框 H",
276 "复选框 I",
277 "复选框 J",
278 "复选框 K",
279 "复选框 L",
280 ]
267 break; 281 break;
268 // 通知书类型 282 // 通知书类型
269 case 2: 283 case 2:
...@@ -285,6 +299,12 @@ export default { ...@@ -285,6 +299,12 @@ export default {
285 299
286 // 显示模态窗 300 // 显示模态窗
287 this.filterVisible = true; 301 this.filterVisible = true;
302 },
303 /**
304 * 多选确认
305 */
306 onCheckConfirmHandler(evt) {
307 console.log("checkList evt:", evt);
288 } 308 }
289 }, 309 },
290 components: { 310 components: {
......
1 <template> 1 <template>
2 <div class="list-container"> 2 <div class="list-container">
3 <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp> 3 <modal2-comp :visible="showDownloadError" :close="()=>{showDownloadError = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
4 <filter-comp v-model="checkList" :visible="filterVisible" :close="()=>{filterVisible = false}" ></filter-comp> 4 <filter-comp :items="checkList" :confirm="onCheckConfirmHandler" :visible="filterVisible" :close="()=>{filterVisible = false}" ></filter-comp>
5 <div class="cell-group"> 5 <div class="cell-group">
6 <div class="table-contaner"> 6 <div class="table-contaner">
7 <div class="table-header orange new"> 7 <div class="table-header orange new">
......