Skip to content

dev / pingan-life-index-pro

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

默认提交

1 parent 31442ebf
Expand all
Inline Side-by-side
Showing 7 changed files with 216 additions and 7 deletions
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost
5 } from '@/api/fetch-api.js'
6
7
8 export default {
9 props: {
10 // 是否显示组件
11 visible: {
12 type: Boolean,
13 default: true,
14 },
15 // 标题，不建议使用
16 title: {
17 type: String,
18 default: "",
19 },
20 // 是否显示遮罩层
21 overlayShow: {
22 type: Boolean,
23 default: true,
24 },
25 // 点击关闭回调方法
26 close: {
27 type: Function,
28 default: null
29 },
30 // 点击蒙层回调方法
31 overlay: {
32 type: Function,
33 default: null
34 }
35 },
36 data() {
37 return {
38 key: 'value'
39 }
40 },
41 components: {},
42 methods: {
43 // 点击确认
44 onConfirmHandler() {
45 if (this.confirm) {
46 this.confirm();
47 }
48 },
49 // 点击取消
50 onCancelHandler() {
51 if (this.cancel) {
52 this.cancel();
53 }
54 },
55 // 点击关闭
56 onCloseHandler() {
57 if (this.close) {
58 this.close();
59 }
60 },
61 // 点击蒙层
62 onOverLayHandler() {
63 if (this.overlay) {
64 this.overlay();
65 }
66 },
67 initData() {}
68 },
69 mounted() {},
70 created() {}
71 }
1 @import '@/styles/_support';
2
3 .comp {
4 position: fixed;
5 top: 0;
6 left: 0;
7 z-index: 999;
8 width: 100%;
9 height: 100%;
10 @extend .fcc;
11 text-align: center;
12 }
13
14 .overlay {
15 position: absolute;
16 top: 0;
17 left: 0;
18 width: 100%;
19 height: 100%;
20 background: rgba($color: #000000, $alpha: 0.7);
21 }
22
23 .modal {
24 position: relative;
25 width: 60rem;
26 min-height: 18.25rem;
27 border-radius: $borderRadius;
28 background-color: #ffffff;
29 height: 70vh;
30
31 &-title {
32 position: relative;
33 @extend .bb;
34 @include border-top-radius($borderRadius);
35 @include ellipsis(1);
36 font-size: $fontSizeTitle;
37 height: 5rem;
38 line-height: 5rem;
39 background-color: #f2f2f2;
40 text-align: left;
41 padding: 0 2.75rem;
42
43 .close-btn {
44 position: absolute;
45 top: 2rem;
46 right: 2rem;
47 }
48 }
49
50 &-icon-wrap {
51 @extend .fcc;
52 height: 12rem;
53 }
54
55 &-content {
56 position: relative;
57 @extend .bb;
58 font-size: $fontSize;
59 padding: $marginMedium-M 1rem $marginMedium-M 2rem;
60 height: 62vh;
61
62 &-desc {
63 text-align: left;
64 height: 100%;
65 overflow-y: scroll;
66 line-height: 2;
67 letter-spacing: 1.2px;
68 padding-right: 16px;
69
70 .t1 {
71 font-weight: bold;
72 }
73 }
74 }
75
76 &-btn-wrap {
77 display: flex;
78 justify-content: center;
79
80 .btn {
81 @include btc2(12rem, 3.6rem, 16px);
82 margin: 3rem 1rem 0;
83 @extend .pointer;
84 }
85 }
86 }
87
88 .hide {
89 display: none;
90 }
91
92 @media (max-width: 1200px) {
93 .comp {
94 position: fixed;
95 }
96
97 .modal {
98 position: absolute;
99 }
100 }
101
102
103 @media (max-width: 768px) {
104 .modal {
105
106 width: 90%;
107 height: auto;
108
109 &-title {}
110
111 &-icon-wrap {
112 height: 10rem;
113
114 img {
115 height: 100%;
116 }
117 }
118
119 &-content {
120 height: 70vh;
121 }
122 }
123 }
...@@ -15,6 +15,7 @@ import { contactMethodCheck } from '@utils/utils.js'; ...@@ -15,6 +15,7 @@ import { contactMethodCheck } from '@utils/utils.js';
15 15
16 import modalComp from '@/components/modal-comp/modal-comp.vue'; 16 import modalComp from '@/components/modal-comp/modal-comp.vue';
17 import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue'; 17 import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue';
18 import modalProtocolComp from '@/components/modal-protocol-comp/modal-protocol-comp.vue';
18 import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue'; 19 import modalUploadCardComp from '@/components/modal-upload-card-comp/modal-upload-card-comp.vue';
19 import { 20 import {
20 passwordEncrypt 21 passwordEncrypt
...@@ -84,6 +85,7 @@ export default { ...@@ -84,6 +85,7 @@ export default {
84 modalVisiable: false, 85 modalVisiable: false,
85 modalSimpleVisiable: false, 86 modalSimpleVisiable: false,
86 modalUploadCardVisiable: false, 87 modalUploadCardVisiable: false,
88 modalProtocolVisiable:false,
87 targetPath: "", 89 targetPath: "",
88 modalIcon: "succ", 90 modalIcon: "succ",
89 modalContent: "" 91 modalContent: ""
...@@ -92,6 +94,7 @@ export default { ...@@ -92,6 +94,7 @@ export default {
92 components: { 94 components: {
93 modalComp, 95 modalComp,
94 modalSimpleComp, 96 modalSimpleComp,
97 modalProtocolComp,
95 modalUploadCardComp 98 modalUploadCardComp
96 }, 99 },
97 computed: { 100 computed: {
...@@ -138,14 +141,16 @@ export default { ...@@ -138,14 +141,16 @@ export default {
138 closeModal() { 141 closeModal() {
139 this.modalVisiable = false; 142 this.modalVisiable = false;
140 this.modalSimpleVisiable = false; 143 this.modalSimpleVisiable = false;
144 this.modalProtocolVisiable = false;
141 }, 145 },
142 onCheckHandler() { 146 onCheckHandler() {
143 147
144 }, 148 },
145 onProtocolHandler() { 149 onProtocolHandler() {
146 this.$router.push({ 150 this.modalProtocolVisiable = true;
147 path: "/protocol" 151 // this.$router.push({
148 }) 152 // path: "/protocol"
153 // })
149 }, 154 },
150 onSubmitHandler() { 155 onSubmitHandler() {
151 156
......
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
4 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> 4 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
5 <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="closeModal" :overlay="closeModal" :close="closeModal"></modal-simple-comp> 5 <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="closeModal" :overlay="closeModal" :close="closeModal"></modal-simple-comp>
6 <modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-upload-card-comp> 6 <modal-upload-card-comp :visible="modalUploadCardVisiable" :show-confirm="true" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback" :close="closeCallback"></modal-upload-card-comp>
7 <!-- 会员协议 -->
8 <modal-protocol-comp :visible="modalProtocolVisiable" :overlay="closeModal" :close="closeModal"></modal-protocol-comp>
9
7 <div class="ebg"></div> 10 <div class="ebg"></div>
8 <div class="content"> 11 <div class="content">
9 <div class="top-space"></div> 12 <div class="top-space"></div>
......
...@@ -10,6 +10,7 @@ import { contactMethodCheck } from '@utils/utils.js'; ...@@ -10,6 +10,7 @@ import { contactMethodCheck } from '@utils/utils.js';
10 10
11 import modalComp from '@/components/modal-comp/modal-comp.vue'; 11 import modalComp from '@/components/modal-comp/modal-comp.vue';
12 import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue'; 12 import modalSimpleComp from '@/components/modal-simple-comp/modal-simple-comp.vue';
13 import modalProtocolComp from '@/components/modal-protocol-comp/modal-protocol-comp.vue';
13 import { passwordEncrypt } from '@/utils/encrypt.js'; 14 import { passwordEncrypt } from '@/utils/encrypt.js';
14 import Vue from 'vue'; 15 import Vue from 'vue';
15 import { Loading } from 'vant'; 16 import { Loading } from 'vant';
...@@ -58,6 +59,7 @@ export default { ...@@ -58,6 +59,7 @@ export default {
58 }, 59 },
59 modalSimpleVisiable: false, 60 modalSimpleVisiable: false,
60 modalVisiable: false, 61 modalVisiable: false,
62 modalProtocolVisiable:false,
61 targetPath: "", 63 targetPath: "",
62 modalIcon: "succ", 64 modalIcon: "succ",
63 modalContent: "" 65 modalContent: ""
...@@ -65,7 +67,8 @@ export default { ...@@ -65,7 +67,8 @@ export default {
65 }, 67 },
66 components: { 68 components: {
67 modalComp, 69 modalComp,
68 modalSimpleComp 70 modalSimpleComp,
71 modalProtocolComp
69 }, 72 },
70 computed: { 73 computed: {
71 ...mapState({ 74 ...mapState({
...@@ -104,11 +107,13 @@ export default { ...@@ -104,11 +107,13 @@ export default {
104 closeModal() { 107 closeModal() {
105 this.modalVisiable = false; 108 this.modalVisiable = false;
106 this.modalSimpleVisiable = false; 109 this.modalSimpleVisiable = false;
110 this.modalProtocolVisiable = false;
107 }, 111 },
108 onProtocolHandler() { 112 onProtocolHandler() {
109 this.$router.push({ 113 this.modalProtocolVisiable = true;
110 path: "/protocol" 114 // this.$router.push({
111 }) 115 // path: "/protocol"
116 // })
112 }, 117 },
113 handlerStdSendOTP() { 118 handlerStdSendOTP() {
114 // 发送短信验证码 119 // 发送短信验证码
......
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
3 <div> 3 <div>
4 <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="closeModal" :close="closeModal"></modal-simple-comp> 4 <modal-simple-comp :visible="modalSimpleVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="closeModal" :close="closeModal"></modal-simple-comp>
5 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp> 5 <modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
6 <!-- 会员协议 -->
7 <modal-protocol-comp :visible="modalProtocolVisiable" :overlay="closeModal" :close="closeModal"></modal-protocol-comp>
6 <div class="ebg"></div> 8 <div class="ebg"></div>
7 <div class="content"> 9 <div class="content">
8 <div class="top-space"></div> 10 <div class="top-space"></div>
......