https://www.ast-inter.ru/local/vue-components/Popup/QualityService/script.js

1Vue.component("quality-service", {
2	name: "QualityService",
3	data: function () {
4		return {
5			isShow: false,
6			success: false,
7			errorText: [],
8			hasErrors: false,
9			emailError: "",
10			showWait: false,
11			successText: "",
12			types: [
13				{
14					code: "complaint",
15					value: 24,
16					name: "Пожаловаться"
17				},
18				{
19					code: "quality",
20					value: 25,
21					name: "Предложение по улучшению качества обслуживания"
22				},
23				{
24					code: "thank",
25					value: 26,
26					name: "Поблагодарить"
27				}
28			],
29			selectedType: "thank",
30			theme: "",
31			author: "",
32			email: "",
33			phone: "",
34			text: ""
35		}
36	},
37	props: [],
38	methods: {
39		enforcePhoneFormat: function() {
40			this.phoneError = "";
41			const x = this.phone.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/)
42			if(x[1] === '7' || x[1] === '8') {
43				x[1] = '+7'
44			} else {
45				x[2] = x[1]
46				x[1] = '+7'
47			}
48			this.phone = !x[3] ? x[1] + ' (' + x[2] : x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '')
49		},
50		clear: function () {
51			this.errorText = "";
52			this.successText = "";
53			this.emailError = "";
54		},
55		hide: function () {
56			this.isShow = false;
57			this.clear();
58		},
59		getReasonTypeCode: function(code) {
60			for(let i in this.types) {
61				if(this.types[i].code === code) {
62					return this.types[i].value;
63				}
64			}
65		},
66		selectType: function(type) {
67			this.selectedType = type.code;
68		},
69		subscribe: function () {
70
71			this.showWait = true;
72			let $this = this;
73			$this.emailError = "";
74			let reasonCode = $this.getReasonTypeCode($this.selectedType);
75
76			axios
77				.post("/local/vue-components/api.php", {
78					type: "qualityService",
79					email: $this.email,
80					typeReason: reasonCode,
81					theme: $this.theme,
82					author: $this.author,
83					phone: $this.phone,
84					text: $this.text
85				})
86				.then(function(response) {
87					let data = response.data;
88
89					if(data.success === true) {
90						$this.errorText = [];
91						$this.successText = data.message;
92						$this.success = data.success;
93					}
94					else {
95						$this.hasErrors = true;
96						$this.errorText = data.message;
97						if(data.emailError) {
98							$this.emailError = data.emailError;
99						}
100					}
101
102					$this.showWait = false;
103				})
104				.catch(function(error) {
105
106				});
107		}
108	},
109	watch: {
110		email: function(newName, oldName) {
111			this.emailError = "";
112		}
113	},
114	created: function () {
115		let $this = this;
116
117		eventBus.$on("showQualityServiceForm", function (type) {
118			$this.isShow = true;
119			$this.hasErrors = false;
120			if(type !== undefined && type.length > 0 && type !== "") {
121				$this.selectedType = type;
122			}
123
124			this.$nextTick(function () {
125				// Код, который будет запущен только после
126				// отрисовки всех представлений
127
128				// Устанавливаем положение окна с учётом прокрутки браузера
129				$this.$refs.popupTemplate.style.top = (window.pageYOffset + 57) + "px";
130			})
131		});
132
133		eventBus.$on("hideAllPopups", function () {
134			$this.hide();
135		});
136	},
137	template:
138		'<div v-if="isShow" v-cloak class="quality-service-popup" ref="popupTemplate">' +
139			'<popup-template ref="popupTemplate" :showWait="showWait" v-on:close="hide">' +
140
141				'<template v-slot:title>' +
142					'<div>On-Line сервис претензий и контроля качества</div>' +
143				'</template>' +
144
145				'<template v-slot:body>' +
146					'<div class="row" v-if="!success">' +
147
148						'<div class="col-12 col-lg-4 type-line mb-2">' +
149							'<more-expand-list :list="types" :current-code="selectedType" @click="selectType"></more-expand-list>' +
150						'</div>' +
151						'<div class="d-none d-lg-block col-lg-8"></div>' +
152
153						'<div class="col-12 col-sm-6 py-2">' +
154								'<input value="" name="theme" type="text" v-model="theme" placeholder="Тема обращения">' +
155						'</div>' +
156
157						'<div class="col-12 col-sm-6 py-2">' +
158								'<input value="" name="author" type="text" v-model="author" placeholder="Автор обращения">' +
159						'</div>' +
160
161						'<div class="col-12 col-sm-6 py-2">' +
162								'<input value="" name="email" type="email" v-model="email" placeholder="Email">' +
163								'<span class="error-text" v-if="emailError">{{ emailError }}</span>' +
164						'</div>' +
165
166						'<div class="col-12 col-sm-6 py-2">' +
167								'<input value="" name="phone" type="text" v-model="phone" @input="enforcePhoneFormat()" placeholder="Телефон">' +
168						'</div>' +
169
170						'<div class="col-12 py-2">' +
171							'<textarea v-model="text" placeholder="Введите текст обращения"></textarea>' +
172						'</div>' +
173
174						'<div class="col-12" v-if="hasErrors">' +
175							'<span class="error-text">{{ errorText.join(", \\r\\n") }}</span>' +
176						'</div>' +
177
178						'<div class="col-12">' +
179							'<p class="muted small-text mt-2 mb-0">Я даю согласие на обработку персональных данных в соответствии с <a href="/privacy/" target="_blank" class="light">положением о персональных данных</a> и соглашаюсь с <a href="/privacy/agreement/" target="_blank" class="light">пользовательским соглашением</a>.</p>' +
180						'</div>' +
181
182					'</div>' +
183
184					'<div class="row" v-else>' +
185						'<div class="col-12 text-center">' +
186							'<h3 class="success-text">{{ successText }}</h3>' +
187						'</div>' +
188					'</div>' +
189				'</template>' +
190
191				'<template v-slot:footer>' +
192					'<div>' +
193						'<button v-if="!success" @click="subscribe" :disabled="showWait">Отправить</button>' +
194						'<button v-else="!success" @click="hide">Закрыть</button>' +
195					'</div>' +
196				'</template>' +
197			'</popup-template>' +
198		'</div>'
199});