https://www.audio-technica.co.jp/vuejs/support/parts/search//index.js?20260930120000

1const search = Vue.createApp({
2	el: '#search',
3	data() {
4		return {
5			processing: false,
6			model_number: '',
7			formErrors: {},
8		}
9	},
10	computed: {
11		model_number_has_error: function() {
12			return Object.keys(this.formErrors).length > 0 && this.formErrors.model_number !== void(0);
13		},
14		model_number_error_message: function() {
15			if(this.formErrors.model_number !== void(0)) {
16				return this.formErrors.model_number.message;
17			}
18			return '';
19		},
20	},
21	mounted() {
22		const targetGroup = document.getElementById('item-search')?.dataset?.targetGroup;
23		if (!targetGroup) return;
24		$(function() {
25			const radio = document.querySelector(`input[data-group-page="${targetGroup}"]`);
26			if (!radio) return;
27			const accordionContent = radio.closest('.accordion_content');
28			if (accordionContent) {
29				accordionContent.style.display = 'block';
30				const accordionTitle = accordionContent.previousElementSibling;
31				if (accordionTitle) accordionTitle.classList.add('open');
32			}
33			radio.checked = true;
34			setTimeout(function() {
35				const label = document.getElementById(targetGroup);
36				if (!label) return;
37				const ac = label.closest('.accordion_content');
38				const scrollTarget = ac ? ac.previousElementSibling : label;
39				if (!scrollTarget) return;
40				const header = document.querySelector('header');
41				const headerHeight = header ? header.offsetHeight : 0;
42				const top = scrollTarget.getBoundingClientRect().top + window.scrollY - headerHeight;
43				window.scrollTo({ top: top, behavior: 'smooth' });
44			}, 300);
45		});
46	},
47	methods: {
48		toResult: function() {
49			if(this.processing) return;
50			const self = this;
51			self.processing = true;
52			try {
53				fetch('/support/parts/search/?_method=productExists', {
54					method: "POST",
55					headers: { 'Accept': 'application/json, text/plain, */*', "content-type": "application/json" },
56					body: JSON.stringify({params: {model_number: self.model_number}})
57				}).then(function(r){if(!r.ok) throw new Error(r.status); return r.json();}).then(function(data) {
58					// response 処理
59					if (!('resultStatus' in data)) {
60						alert('Error: FAULT RESPONSE');
61						console.log(data);
62						self.processing = false;
63						return;
64					}
65					self.formErrors = data.formErrors;
66					if(data.resultStatus) {
67						location.href = '/support/parts/search/result/' + data.page + '/';
68					}
69					self.processing = false;
70				});
71			} catch(error) {
72				self.processing = false;
73				alert('Error: ' + error);
74			}
75		},
76	}
77}).mount('#search');