<template>
<div id="app">
<h1>Калькулятор клининговых услуг</h1>
<form class="calculatorForm">
<Cleaning v-bind:item="cleaning" @input="updateCleaning(item)" ></Cleaning>
<button @click.prevent="getPriceInfo" >Рассчитать</button>
</form>
</div>
</template><script>
import Vue from 'vue'
import axios from 'axios'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
import { required, minLength, between, numeric } from 'vuelidate/lib/validators'
import { helpers } from 'vuelidate/lib/validators'
const mustBeCool = (value) => !helpers.req(value) || value.indexOf('cool') >= 0
import Carpet from './components/Carpet.vue'
import Cleaning from './components/Cleaning.vue'
axios.defaults.baseURL = 'https://site.ru/calculator/php'
export default {
name: 'app',
data () {
return {
services: ["cleaning","windows", "carpets","furniture"],
cleaning: {type: 2, area: null, showAbout: false, price: null, isActive: false},
windows: {isClassic:true, oneFoldCount: 0, twoFoldCount: 0, threeFoldCount: 0, area: null, isActive: false},
carpets: {items:[{type: 1, area: null}], isActive: false},
endpoint: '/index.php'
}
},
validations: {
cleaning: {
area:{
required
}
},
windows: {
oneFoldCount:{
numeric
},
twoFoldCount:{
numeric
},
threeFoldCount:{
numeric }
}
},
components: {Cleaning,Carpet},
methods: {
getPriceInfo: function(event) {
// Здесь будет код отправки данных для расчёта на сервер и получения стоимости услуг
},
updateCleaning: function(item) {
this.cleaning = item;
},
updateCarpet: function(item, index) {
this.carpets.items[index] = item;
},
addCarpet: function() {
this.carpets.items.push({type: 1, area: null});
}
}
}
</script><template>
<div class="serviceBlock" v-bind:class="{ active: isActive }" >
<div class="serviceSwitcher">
<label class="serviceName" for="serviceCleaning">Уборка
<input type="checkbox" id="serviceCleaning" value="cleaning" @change="isActive = !isActive" ><span class="checkmark"></span>
</label>
</div>
<div class="serviceContent" v-if="isActive">
<div class="serviceFields" >
<div class="fieldItem">
<label for="cleaningType">Тип уборки</label>
<select id="cleaningType" v-model="type">
<option disabled value="">Выберите один из вариантов</option>
<option value="1" >Быстрая</option>
<option value="2" >Генеральная</option>
<option value="3">После ремонта</option>
</select>
</div>
<div class="fieldItem">
<label for="cleaningArea">Площадь помещения (кв. м.)</label>
<input type="number" id="cleaningArea" min="1" v-model="area" v-on:input="filterArea">
</div>
</div>
<div class="servicePrice">
<div class="title">Стоимость уборки:</div>
<div class="value" v-if="price !== null" ><span class="price"></span><span class="currency">₽</span></div>
<div class="serviceErrors">
<div class="error" v-if="!$v.area.required">Введите площадь помещения, чтобы узнать стоимость уборки</div>
</div>
</div>
<div class="serviceDescription">
<a class="aboutLink" @click="showAbout = !showAbout" >Что входит в стоимость?</a>
<div class="aboutContent" v-if="showAbout" >Описание услуги</div>
</div>
</div>
</div>
</template><script>
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
import { required} from 'vuelidate/lib/validators'
export default {
name: 'Cleaning',
props:['item'],
data () {
return {
type: this.item.type,
area: this.item.area,
showAbout: this.item.showAbout,
price: this.item.price,
isActive: this.item.isActive
}
},
updated()
{
$this.$emit('updated', this.data());
},
methods: {
validateArea: function()
{
// Натуральное число
const templateArea = /^(?:[1-9]\d{0,4})$/;
if(templateArea.test(this.area))
{
return true;
}
return false;
},
filterArea: function(event) {
//Целое число или пустое значение
const templateArea = /^(?:[1-9]\d{0,4}|)$/;
if(templateArea.test(this.area))
{
this.previousArea = this.area;
}
else
{
this.area = this.previousArea;
}
},
}
}
</script><template>
<div class="fieldItem">
<label for="cleaningType">Тип уборки</label>
<select id="cleaningType" :value="value" @input="$emit('input', $event.value)">
<option disabled value="">Выберите один из вариантов</option>
<option value="1" >Быстрая</option>
<option value="2" >Генеральная</option>
<option value="3">После ремонта</option>
</select>
</div>
</template>export default {
props: {
value: Number
}
}<form class="calculatorForm">
<Type v-model="type" />
<Area v-model="area" />
<Window v-model="windows" />
....
<button @click.prevent="getPriceInfo" >Рассчитать</button>
</form>
if (var === true) {
do_something()
} else {
print_something()
}Создаю свою первую форму на vue.js и видимо делаю, что-то не так.
Простой
