var app = new Vue({
el: '#app',
data() {
return {
selected: {},
kolichestvo: 1,
dlina: 1,
color: false,
activMaterial: '',
activSize: [],
userName: '',
telephone: '',
sendOK: false,
forms: [
{
name: "Г-образная",
id: "g"
},
{
name: "П-образная",
id: "p"
},
{
name: "Колонна с крышей",
id: "krisha"
}
],
materials: price
}
},
watch: {
selected() {
this.activSize = this.selected[this.activMaterial][0]
},
activMaterial() {
this.activSize = this.selected[this.activMaterial][0]
}
},
methods: {
changeMaterial() {
this.activSize = this.selected[this.activMaterial][0]
},
select(event) {
this.changeMaterial()
this.selected = this.materials.find(item => item.material == event.target.value)
},
sendMail(){
var url = "/csend.php"
var formData = new FormData();
formData.append('text',this.emailText);
fetch(url,
{
method: "POST",
body: formData,
})
.then(response => {
if (response.status !== 200) {
alert('Ошибка отправки формы')
this.sendOK = false
return false
}
this.sendOK = true
console.log('1')
})
.catch(() => console.log('Ошибка отправки формы'));
}
},
computed: {
activPrice() {
return this.activSize[(this.color) ? 2 : 1]
},
finalPrice() {
return (this.activPrice) ? this.activPrice * this.dlina * this.kolichestvo: 0
},
emailText() {
return `
Расчёт заказа:
Материал: ${this.selected.material}
Форма: ${this.forms.find(item =>
item.id == this.activMaterial).name}
Размер: ${this.activSize[0]}
Покраска: ${(this.color) ? 'С покраской' : 'Без покраски'}
Кол-во метров: ${this.dlina}
Кол-во шт: ${this.kolichestvo}
Имя: ${this.userName}
Номер телефона: ${this.telephone}
Итоговая цена заказа: ${this.finalPrice}
`
}
},
mounted: function () {
this.$nextTick(function () {
this.selected = this.materials[0];
this.activMaterial = this.forms[0].id
this.activSize = this.selected[this.activMaterial][0]
})
}
})