adata-ui 0.1.72 → 0.1.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/adata-ui.common.js +560 -79
- package/dist/adata-ui.common.js.map +1 -1
- package/dist/adata-ui.css +1 -1
- package/dist/adata-ui.umd.js +560 -79
- package/dist/adata-ui.umd.js.map +1 -1
- package/dist/adata-ui.umd.min.js +2 -2
- package/dist/adata-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/App.vue +1 -2
- package/src/components/Header/Profile.vue +415 -158
- package/src/components/Loader/Loader.stories.js +25 -0
- package/src/components/Loader/Loader.vue +325 -0
- package/src/components/MailTo/MailTo.vue +107 -53
- package/src/components/SearchTextField/SearchTextField.vue +1 -0
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import Loader from './Loader.vue'
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Loader',
|
|
5
|
+
component: Loader,
|
|
6
|
+
template: '<loader />'
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Template = (args, { argTypes }) => ({
|
|
10
|
+
components: { Loader },
|
|
11
|
+
props: Object.keys(argTypes),
|
|
12
|
+
template: '<loader />',
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
export const Simple = Template.bind({})
|
|
16
|
+
Simple.args = {
|
|
17
|
+
timer: false,
|
|
18
|
+
timerCenter: false,
|
|
19
|
+
global: false,
|
|
20
|
+
small: false,
|
|
21
|
+
smallYellow: false,
|
|
22
|
+
verySmall: false,
|
|
23
|
+
seconds: 0,
|
|
24
|
+
unloadData: false
|
|
25
|
+
}
|
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="loader"
|
|
4
|
+
:class="{
|
|
5
|
+
'loader--global': global,
|
|
6
|
+
small: small || smallYellow,
|
|
7
|
+
'very-small': verySmall,
|
|
8
|
+
unloadData: unloadData,
|
|
9
|
+
}"
|
|
10
|
+
>
|
|
11
|
+
<div class="loader__wrapper">
|
|
12
|
+
<div class="loader__element" v-if="!timerCenter">
|
|
13
|
+
<p class="loader__number" v-if="timer">
|
|
14
|
+
{{ ownSeconds }}
|
|
15
|
+
</p>
|
|
16
|
+
<div
|
|
17
|
+
class="loader__base"
|
|
18
|
+
:class="[
|
|
19
|
+
{
|
|
20
|
+
small: small,
|
|
21
|
+
'very-small': verySmall,
|
|
22
|
+
'small-yellow': smallYellow,
|
|
23
|
+
},
|
|
24
|
+
]"
|
|
25
|
+
/>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="loader__element-stable" v-if="timerCenter">
|
|
29
|
+
<p class="loader__number-stable">
|
|
30
|
+
{{ ownSeconds }}
|
|
31
|
+
</p>
|
|
32
|
+
<div
|
|
33
|
+
class="loader__base"
|
|
34
|
+
:class="[
|
|
35
|
+
{
|
|
36
|
+
small: small,
|
|
37
|
+
'very-small': verySmall,
|
|
38
|
+
'small-yellow': smallYellow,
|
|
39
|
+
},
|
|
40
|
+
]"
|
|
41
|
+
/>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="loader__subtitle" v-if="global">
|
|
45
|
+
<slot></slot>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
50
|
+
|
|
51
|
+
<script>
|
|
52
|
+
export default {
|
|
53
|
+
name: "BaseLoader",
|
|
54
|
+
props: {
|
|
55
|
+
timer: {
|
|
56
|
+
type: Boolean,
|
|
57
|
+
default: false,
|
|
58
|
+
},
|
|
59
|
+
timerCenter: {
|
|
60
|
+
type: Boolean,
|
|
61
|
+
default: false,
|
|
62
|
+
},
|
|
63
|
+
global: {
|
|
64
|
+
type: Boolean,
|
|
65
|
+
default: false,
|
|
66
|
+
},
|
|
67
|
+
small: {
|
|
68
|
+
type: Boolean,
|
|
69
|
+
default: false,
|
|
70
|
+
},
|
|
71
|
+
smallYellow: {
|
|
72
|
+
type: Boolean,
|
|
73
|
+
default: false,
|
|
74
|
+
},
|
|
75
|
+
verySmall: {
|
|
76
|
+
type: Boolean,
|
|
77
|
+
default: false,
|
|
78
|
+
},
|
|
79
|
+
seconds: {
|
|
80
|
+
type: [Number, String],
|
|
81
|
+
default: 0,
|
|
82
|
+
},
|
|
83
|
+
unloadData: {
|
|
84
|
+
type: Boolean,
|
|
85
|
+
default: false,
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
data() {
|
|
89
|
+
return {
|
|
90
|
+
timerStore: null,
|
|
91
|
+
ownSeconds: this.seconds,
|
|
92
|
+
};
|
|
93
|
+
},
|
|
94
|
+
mounted() {
|
|
95
|
+
(this.timer || this.timerCenter) &&
|
|
96
|
+
(this.timerStore = setInterval(() => {
|
|
97
|
+
if (this.ownSeconds > 0) {
|
|
98
|
+
this.ownSeconds--;
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
clearInterval(this.timerStore);
|
|
102
|
+
this.$emit("completed");
|
|
103
|
+
}, 1000));
|
|
104
|
+
},
|
|
105
|
+
beforeDestroy() {
|
|
106
|
+
clearInterval(this.timerStore);
|
|
107
|
+
},
|
|
108
|
+
};
|
|
109
|
+
</script>
|
|
110
|
+
|
|
111
|
+
<style lang="scss" scoped>
|
|
112
|
+
.loader {
|
|
113
|
+
$self: &;
|
|
114
|
+
margin: 0 auto;
|
|
115
|
+
// tablet
|
|
116
|
+
@media screen and (max-width: 1025px) {
|
|
117
|
+
margin-top: 20px;
|
|
118
|
+
}
|
|
119
|
+
&.very-small {
|
|
120
|
+
margin: 0;
|
|
121
|
+
width: 16px;
|
|
122
|
+
height: 16px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&.small {
|
|
126
|
+
margin: 0;
|
|
127
|
+
width: 20px;
|
|
128
|
+
height: 20px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&__number {
|
|
132
|
+
position: absolute;
|
|
133
|
+
color: #ffcd33;
|
|
134
|
+
font-size: 24px;
|
|
135
|
+
line-height: 33px;
|
|
136
|
+
top: 38%;
|
|
137
|
+
left: 726px;
|
|
138
|
+
text-align: center;
|
|
139
|
+
|
|
140
|
+
&-stable {
|
|
141
|
+
position: absolute;
|
|
142
|
+
color: #ffcd33;
|
|
143
|
+
font-size: 24px;
|
|
144
|
+
line-height: 33px;
|
|
145
|
+
left: 50%;
|
|
146
|
+
transform: translateX(-50%);
|
|
147
|
+
text-align: center;
|
|
148
|
+
top: 20%;
|
|
149
|
+
|
|
150
|
+
@media screen and (max-width: 1025px) {
|
|
151
|
+
top: 25%;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
&__element {
|
|
157
|
+
top: 350px;
|
|
158
|
+
left: 0;
|
|
159
|
+
right: 0;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&__element-stable {
|
|
163
|
+
top: 0px;
|
|
164
|
+
left: 0;
|
|
165
|
+
right: 0;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&__base {
|
|
169
|
+
height: 100px;
|
|
170
|
+
width: 100px;
|
|
171
|
+
background: #ffcd33;
|
|
172
|
+
background: linear-gradient(
|
|
173
|
+
to right,
|
|
174
|
+
#ffcd33 10%,
|
|
175
|
+
rgba(255, 255, 255, 0) 42%
|
|
176
|
+
);
|
|
177
|
+
border-radius: 50%;
|
|
178
|
+
mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
|
|
179
|
+
animation: spin 0.7s linear infinite;
|
|
180
|
+
margin-left: auto;
|
|
181
|
+
margin-right: auto;
|
|
182
|
+
@media screen and (max-width: 1025px) {
|
|
183
|
+
height: 60px;
|
|
184
|
+
width: 60px;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
&.small {
|
|
188
|
+
width: 20px;
|
|
189
|
+
height: 20px;
|
|
190
|
+
margin: 0;
|
|
191
|
+
background: linear-gradient(
|
|
192
|
+
to right,
|
|
193
|
+
#217aff 28%,
|
|
194
|
+
rgba(255, 255, 255, 0) 42%
|
|
195
|
+
);
|
|
196
|
+
mask: radial-gradient(
|
|
197
|
+
farthest-side,
|
|
198
|
+
transparent calc(100% - 1.5px),
|
|
199
|
+
#fff 0
|
|
200
|
+
);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
&.small-yellow {
|
|
204
|
+
width: 20px;
|
|
205
|
+
height: 20px;
|
|
206
|
+
margin: 0;
|
|
207
|
+
background: linear-gradient(
|
|
208
|
+
to right,
|
|
209
|
+
#ffcd33 28%,
|
|
210
|
+
rgba(255, 255, 255, 0) 42%
|
|
211
|
+
);
|
|
212
|
+
mask: radial-gradient(
|
|
213
|
+
farthest-side,
|
|
214
|
+
transparent calc(100% - 1.5px),
|
|
215
|
+
#fff 0
|
|
216
|
+
);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
&.very-small {
|
|
220
|
+
width: 16px;
|
|
221
|
+
height: 16px;
|
|
222
|
+
margin: 0;
|
|
223
|
+
background: linear-gradient(
|
|
224
|
+
to right,
|
|
225
|
+
#217aff 28%,
|
|
226
|
+
rgba(255, 255, 255, 0) 42%
|
|
227
|
+
);
|
|
228
|
+
mask: radial-gradient(
|
|
229
|
+
farthest-side,
|
|
230
|
+
transparent calc(100% - 1.5px),
|
|
231
|
+
#fff 0
|
|
232
|
+
);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
&__subtitle {
|
|
237
|
+
text-align: center;
|
|
238
|
+
margin-top: 40px;
|
|
239
|
+
|
|
240
|
+
p {
|
|
241
|
+
font-size: 18px;
|
|
242
|
+
line-height: 25px;
|
|
243
|
+
color: var(--newGray);
|
|
244
|
+
font-weight: 400;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
&.unloadData {
|
|
249
|
+
#{$self}__element {
|
|
250
|
+
position: relative;
|
|
251
|
+
top: 200px;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
#{$self}__number {
|
|
255
|
+
position: absolute;
|
|
256
|
+
top: 50%;
|
|
257
|
+
left: 50%;
|
|
258
|
+
transform: translate(-50%, -50%);
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
&--global {
|
|
263
|
+
position: fixed;
|
|
264
|
+
top: 0;
|
|
265
|
+
left: 0;
|
|
266
|
+
right: 0;
|
|
267
|
+
bottom: 0;
|
|
268
|
+
width: 100%;
|
|
269
|
+
height: 100%;
|
|
270
|
+
background: #fff;
|
|
271
|
+
display: flex;
|
|
272
|
+
justify-content: center;
|
|
273
|
+
align-items: center;
|
|
274
|
+
|
|
275
|
+
#{$self}__base {
|
|
276
|
+
margin-top: 0;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
#{$self}__element {
|
|
280
|
+
position: relative;
|
|
281
|
+
top: 20px;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
#{$self}__number {
|
|
285
|
+
position: absolute;
|
|
286
|
+
top: 50%;
|
|
287
|
+
left: 50%;
|
|
288
|
+
transform: translate(-50%, -50%);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
@keyframes spin {
|
|
294
|
+
0% {
|
|
295
|
+
transform: rotate(0deg);
|
|
296
|
+
}
|
|
297
|
+
100% {
|
|
298
|
+
transform: rotate(360deg);
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.download-button.colored--blue {
|
|
303
|
+
&:hover {
|
|
304
|
+
.loader__base.small {
|
|
305
|
+
background: linear-gradient(
|
|
306
|
+
to right,
|
|
307
|
+
#fff 28%,
|
|
308
|
+
rgba(255, 255, 255, 0) 42%
|
|
309
|
+
);
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.right-side {
|
|
315
|
+
@media screen and (max-width: 1025px) {
|
|
316
|
+
.loader.small {
|
|
317
|
+
position: absolute;
|
|
318
|
+
right: 0;
|
|
319
|
+
height: 100%;
|
|
320
|
+
display: flex;
|
|
321
|
+
align-items: center;
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
</style>
|
|
@@ -1,34 +1,79 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="mail">
|
|
3
3
|
<div class="mail__img-wrapper">
|
|
4
|
-
<svg
|
|
4
|
+
<svg
|
|
5
|
+
class="mail__img"
|
|
6
|
+
width="100"
|
|
7
|
+
height="85"
|
|
8
|
+
viewBox="0 0 100 85"
|
|
9
|
+
fill="none"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
>
|
|
5
12
|
<g clip-path="url(#clip0_518_22722)">
|
|
6
|
-
<path
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<path
|
|
13
|
+
<path
|
|
14
|
+
d="M82.8046 8.94045L4.49388 25.7383C1.69026 26.3397 -0.0932329 29.0916 0.510373 31.8849L11.0206 80.5231C11.6242 83.3164 14.3863 85.0933 17.1899 84.4919L95.5007 67.6941C98.3043 67.0927 100.088 64.3408 99.4842 61.5475L88.974 12.9093C88.3704 10.116 85.6083 8.33906 82.8046 8.94045Z"
|
|
15
|
+
fill="white"
|
|
16
|
+
stroke="#9DA3AC"
|
|
17
|
+
stroke-linecap="round"
|
|
18
|
+
stroke-linejoin="round"
|
|
19
|
+
/>
|
|
20
|
+
<path
|
|
21
|
+
opacity="0.6"
|
|
22
|
+
d="M49.0286 56.5055C44.9588 57.3783 41.6457 53.0141 34.6371 48.6815C20.4367 39.9133 7.646 31.4705 7.646 31.4705L9.48575 40.199L39.0732 58.9098C43.8518 61.3776 51.8161 60.1 55.9974 54.7677C55.0656 54.5138 53.9187 55.458 49.0286 56.5055Z"
|
|
23
|
+
fill="#BDC7CE"
|
|
24
|
+
fill-opacity="0.4"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
opacity="0.6"
|
|
28
|
+
d="M22.9133 72.2794C22.1016 72.4542 21.2633 72.4679 20.4463 72.3196C19.6294 72.1713 18.8498 71.8639 18.1522 71.415C17.4546 70.9662 16.8527 70.3847 16.3809 69.7038C15.9092 69.0229 15.5768 68.256 15.4029 67.447L7.49433 30.8586L2.6122 28.2003C1.92726 28.3511 0.0158305 29.581 0.748548 32.9613L10.7916 79.405C10.9655 80.2132 11.2976 80.9794 11.7689 81.6596C12.2401 82.3399 12.8412 82.9211 13.5379 83.3698C14.2346 83.8186 15.0132 84.1262 15.8293 84.275C16.6454 84.4239 17.4828 84.4112 18.2939 84.2375L94.401 67.9151C96.0335 67.5519 97.4571 66.5636 98.3645 65.1636C99.272 63.7637 99.5905 62.0643 99.2513 60.4324L98.3115 56.0919L22.9133 72.2794Z"
|
|
29
|
+
fill="#BDC7CE"
|
|
30
|
+
fill-opacity="0.4"
|
|
31
|
+
/>
|
|
32
|
+
<path
|
|
33
|
+
d="M1.9668 27.7336L44.0343 54.8397C45.1788 55.5767 46.4581 56.0814 47.7988 56.3248C49.1396 56.5682 50.5153 56.5455 51.8471 56.258C53.179 55.9704 54.4408 55.4238 55.5602 54.6494C56.6796 53.8749 57.6344 52.888 58.3701 51.745L85.3692 9.68939"
|
|
34
|
+
stroke="#9DA3AC"
|
|
35
|
+
stroke-linecap="round"
|
|
36
|
+
stroke-linejoin="round"
|
|
37
|
+
/>
|
|
38
|
+
<path
|
|
39
|
+
d="M65.7535 40.3973L97.7063 65.5276"
|
|
40
|
+
stroke="#9DA3AC"
|
|
41
|
+
stroke-linecap="round"
|
|
42
|
+
stroke-linejoin="round"
|
|
43
|
+
/>
|
|
44
|
+
<path
|
|
45
|
+
d="M31.2595 46.9918L13.8813 83.5087"
|
|
46
|
+
stroke="#9DA3AC"
|
|
47
|
+
stroke-linecap="round"
|
|
48
|
+
stroke-linejoin="round"
|
|
49
|
+
/>
|
|
50
|
+
<path
|
|
51
|
+
d="M85.7678 19.6789C91.222 19.6789 95.6435 15.2736 95.6435 9.83943C95.6435 4.40526 91.222 0 85.7678 0C80.3135 0 75.892 4.40526 75.892 9.83943C75.892 15.2736 80.3135 19.6789 85.7678 19.6789Z"
|
|
52
|
+
fill="#E83949"
|
|
53
|
+
/>
|
|
54
|
+
<path
|
|
55
|
+
d="M88.1413 14.433L86.4927 14.7901L85.075 8.20403C84.8998 7.41053 84.7883 6.7916 84.7246 6.32343C84.637 6.45833 84.5335 6.60909 84.406 6.77572C84.2786 6.94236 83.8485 7.48987 83.1158 8.36273L82.0645 7.49781L84.5653 4.49837L85.9352 4.19684L88.1413 14.433Z"
|
|
56
|
+
fill="white"
|
|
57
|
+
/>
|
|
14
58
|
</g>
|
|
15
59
|
<defs>
|
|
16
60
|
<clipPath id="clip0_518_22722">
|
|
17
|
-
<rect width="100" height="85" fill="white"/>
|
|
61
|
+
<rect width="100" height="85" fill="white" />
|
|
18
62
|
</clipPath>
|
|
19
63
|
</defs>
|
|
20
64
|
</svg>
|
|
21
65
|
</div>
|
|
22
66
|
<h2 class="mail__title">Интересует больше данных?</h2>
|
|
23
67
|
<p class="mail__text">
|
|
24
|
-
|
|
68
|
+
Мы обязательно ответим вам <br />
|
|
69
|
+
в кратчайшие сроки.
|
|
25
70
|
</p>
|
|
26
71
|
<form class="mail__form" novalidate>
|
|
27
72
|
<a-text-field
|
|
28
73
|
class="mail__form-input"
|
|
29
74
|
label="Введите email"
|
|
30
75
|
:error-text="emailError"
|
|
31
|
-
|
|
76
|
+
v-model="email"
|
|
32
77
|
@input="setEmail"
|
|
33
78
|
required
|
|
34
79
|
/>
|
|
@@ -45,92 +90,101 @@
|
|
|
45
90
|
v-model="message"
|
|
46
91
|
required
|
|
47
92
|
/>
|
|
48
|
-
<a-button
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
>
|
|
52
|
-
Отправить
|
|
93
|
+
<a-button class="mail__form-btn" @click.prevent="onSubmitForm">
|
|
94
|
+
<loader v-if="isLoading" small />
|
|
95
|
+
{{ isLoading ? "" : "Отправить" }}
|
|
53
96
|
</a-button>
|
|
54
97
|
</form>
|
|
55
98
|
</div>
|
|
56
99
|
</template>
|
|
57
100
|
|
|
58
101
|
<script>
|
|
102
|
+
import Loader from "../Loader/Loader.vue";
|
|
59
103
|
export default {
|
|
60
104
|
name: "MailToTemplate",
|
|
105
|
+
components: {
|
|
106
|
+
Loader,
|
|
107
|
+
},
|
|
61
108
|
props: {
|
|
62
109
|
userEmail: {
|
|
63
110
|
type: String,
|
|
64
|
-
default:
|
|
65
|
-
}
|
|
111
|
+
default: "",
|
|
112
|
+
},
|
|
66
113
|
},
|
|
67
114
|
data() {
|
|
68
115
|
return {
|
|
69
|
-
email:
|
|
70
|
-
phoneNumber:
|
|
71
|
-
message:
|
|
72
|
-
emailError:
|
|
73
|
-
messageError:
|
|
74
|
-
|
|
116
|
+
email: this.userEmail || "",
|
|
117
|
+
phoneNumber: "",
|
|
118
|
+
message: "",
|
|
119
|
+
emailError: "",
|
|
120
|
+
messageError: "",
|
|
121
|
+
isLoading: false,
|
|
122
|
+
};
|
|
75
123
|
},
|
|
76
124
|
methods: {
|
|
77
125
|
setEmail(data) {
|
|
78
126
|
this.email = data;
|
|
79
127
|
},
|
|
80
128
|
onSubmitForm() {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
129
|
+
this.isLoading = true;
|
|
130
|
+
const regex = new RegExp("^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$");
|
|
131
|
+
|
|
132
|
+
if (!this.email.length || !regex.test(this.email)) {
|
|
133
|
+
this.emailError = "Введите валидный email";
|
|
134
|
+
this.isLoading = false;
|
|
85
135
|
return;
|
|
86
136
|
} else {
|
|
87
|
-
this.emailError =
|
|
137
|
+
this.emailError = "";
|
|
88
138
|
}
|
|
89
139
|
|
|
90
|
-
if(this.message.length < 20) {
|
|
91
|
-
this.messageError =
|
|
140
|
+
if (this.message.length < 20) {
|
|
141
|
+
this.messageError = "Введите больше чем 20 символов";
|
|
142
|
+
this.isLoading = false;
|
|
92
143
|
return;
|
|
93
144
|
} else {
|
|
94
|
-
this.messageError =
|
|
145
|
+
this.messageError = "";
|
|
95
146
|
}
|
|
96
147
|
|
|
97
|
-
this.requestSupport()
|
|
148
|
+
this.requestSupport();
|
|
98
149
|
},
|
|
99
150
|
async requestSupport() {
|
|
100
151
|
const requestBody = {
|
|
101
152
|
sender_name: this.email,
|
|
102
153
|
email: this.email,
|
|
103
154
|
phone_number: this.phoneNumber ? this.phoneNumber : this.email,
|
|
104
|
-
message: this.message
|
|
105
|
-
}
|
|
155
|
+
message: this.message,
|
|
156
|
+
};
|
|
106
157
|
|
|
107
158
|
try {
|
|
108
|
-
const response = await fetch(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
159
|
+
const response = await fetch(
|
|
160
|
+
"https://users.adtdev.kz/api/v1/message/regards",
|
|
161
|
+
{
|
|
162
|
+
method: "POST",
|
|
163
|
+
headers: {
|
|
164
|
+
"Content-Type": "application/json",
|
|
165
|
+
},
|
|
166
|
+
body: JSON.stringify(requestBody),
|
|
167
|
+
}
|
|
168
|
+
);
|
|
117
169
|
|
|
118
|
-
|
|
119
|
-
|
|
170
|
+
const result = await response.json();
|
|
171
|
+
this.isLoading = false;
|
|
172
|
+
if (result.success) {
|
|
173
|
+
this.$emit("success", result);
|
|
120
174
|
}
|
|
121
175
|
} catch (e) {
|
|
122
|
-
this
|
|
176
|
+
this.isLoading = false;
|
|
177
|
+
this.$emit("error", e);
|
|
123
178
|
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
179
|
+
},
|
|
180
|
+
},
|
|
127
181
|
};
|
|
128
182
|
</script>
|
|
129
183
|
|
|
130
184
|
<style lang="scss" scoped>
|
|
131
185
|
.mail {
|
|
132
186
|
padding: 50px 0px;
|
|
133
|
-
@media (max-width: 560px){
|
|
187
|
+
@media (max-width: 560px) {
|
|
134
188
|
padding: 32px 0;
|
|
135
189
|
}
|
|
136
190
|
&__title {
|
|
@@ -140,7 +194,7 @@ export default {
|
|
|
140
194
|
font-weight: 700;
|
|
141
195
|
text-align: center;
|
|
142
196
|
margin-bottom: 16px;
|
|
143
|
-
@media (max-width: 560px){
|
|
197
|
+
@media (max-width: 560px) {
|
|
144
198
|
font-size: 16px;
|
|
145
199
|
line-height: 22px;
|
|
146
200
|
}
|