add logic
This commit is contained in:
parent
d8e6870dfb
commit
f52d3e13e6
|
|
@ -3,31 +3,163 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Калькулятор путешествий</title>
|
<title>Калькулятор путешествий</title>
|
||||||
|
|
||||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
|
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
|
||||||
|
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<input v-model="a"></br>
|
|
||||||
<input v-model="b"></br>
|
|
||||||
<p>Итого: {{ result }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<!--Меню-->
|
||||||
|
<nav class="navbar bg-body-tertiary">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Калькулятор поездки</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container text-center">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col"></div>
|
||||||
|
<div class="col-8 interfaces-middle-block">
|
||||||
|
|
||||||
|
<!--Калькулятор-->
|
||||||
|
<div class="interfaces-calc-block">
|
||||||
|
<div class="interfaces-input-block">
|
||||||
|
<label>
|
||||||
|
<div class="interfaces-label">
|
||||||
|
Количество человек
|
||||||
|
</div>
|
||||||
|
<input class="interfaces-input" v-model="countUsers">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="interfaces-input-block">
|
||||||
|
<label>
|
||||||
|
<div class="interfaces-label">
|
||||||
|
Количество суток
|
||||||
|
</div>
|
||||||
|
<input class="interfaces-input" v-model="countDays">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="interfaces-input-block">
|
||||||
|
<label>
|
||||||
|
<div class="interfaces-label">
|
||||||
|
Место проживания
|
||||||
|
</div>
|
||||||
|
<select class="interfaces-input" v-model="selectedPlace">
|
||||||
|
<option disabled value="">Выберете один из вариантов</option>
|
||||||
|
<option>Я сам (0 руб/ночь)</option>
|
||||||
|
<option>Гостиница эконом (1500 руб/ночь)</option>
|
||||||
|
<option>Гостиница дорого богато (15 000 руб/ночь)</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="interfaces-input-block">
|
||||||
|
<label>
|
||||||
|
<div class="interfaces-label">
|
||||||
|
Трех разовое питание
|
||||||
|
</div>
|
||||||
|
<input type="checkbox" id="checkbox" v-model="eat3"/>
|
||||||
|
{{ eat3Text }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p>Цена за сутки {{ priceDay }} руб</p>
|
||||||
|
<div class="interfaces-input-block">
|
||||||
|
<label>
|
||||||
|
<div class="interfaces-label">
|
||||||
|
Дорога назад
|
||||||
|
</div>
|
||||||
|
<select class="interfaces-input" v-model="returnRace">
|
||||||
|
<option disabled value="">Выберете один из вариантов</option>
|
||||||
|
<option>Я сам (0 руб)</option>
|
||||||
|
<option>Автобус (1000 руб)</option>
|
||||||
|
<option>Такси (5000 руб)</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p>Итого: {{ result }} руб</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
Vue.createApp({
|
Vue.createApp({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
a: 0,
|
countUsers: 0,
|
||||||
b: 0,
|
countDays: 0,
|
||||||
|
selectedPlace: "",
|
||||||
|
returnRace: "",
|
||||||
|
eat3: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
eat3Text() {
|
||||||
|
if (this.eat3) {
|
||||||
|
return "Включено"
|
||||||
|
}
|
||||||
|
return "Не надо"
|
||||||
|
},
|
||||||
|
priceDay() {
|
||||||
|
var price = 0
|
||||||
|
if (this.selectedPlace === "Гостиница эконом (1500 руб/ночь)") {
|
||||||
|
price = 1500
|
||||||
|
}
|
||||||
|
if (this.selectedPlace === "Гостиница дорого богато (15 000 руб/ночь)") {
|
||||||
|
price = 15000
|
||||||
|
}
|
||||||
|
if (this.eat3) {
|
||||||
|
price += 1500
|
||||||
|
}
|
||||||
|
return price
|
||||||
|
},
|
||||||
|
priceReturnRace() {
|
||||||
|
if (this.returnRace === "Автобус (1000 руб)") {
|
||||||
|
return 1000
|
||||||
|
}
|
||||||
|
if (this.returnRace === "Такси (5000 руб)") {
|
||||||
|
return 5000
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
},
|
||||||
result() {
|
result() {
|
||||||
return this.a * this.b
|
return this.priceDay * this.countUsers * this.countDays +
|
||||||
|
this.priceReturnRace * this.countUsers
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}).mount('#app')
|
}).mount('#app')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.interfaces-middle-block {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interfaces-calc-block {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interfaces-calc-block label {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interfaces-label {
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interfaces-input {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue