VLADIMIR
/
interfaces
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add logic

This commit is contained in:
Владимир Фёдоров 2023-04-10 13:38:53 +07:00
parent d8e6870dfb
commit f52d3e13e6
1 changed files with 140 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
topic_result/index.html
View File

@ -3,31 +3,163 @@
<head>
<meta charset="UTF-8">
<title>Калькулятор путешествий</title>
<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>
<body>
<div id="app">
<input v-model="a"></br>
<input v-model="b"></br>
<p>Итого: {{ result }}</p>
<!--Меню-->
<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>
Vue.createApp({
data() {
return {
a: 0,
b: 0,
countUsers: 0,
countDays: 0,
selectedPlace: "",
returnRace: "",
eat3: false
}
},
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() {
return this.a * this.b
return this.priceDay * this.countUsers * this.countDays +
this.priceReturnRace * this.countUsers
}
}
}).mount('#app')
</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>
</html>