Vue.js Pricing Calculator. How to deal with radio buttons?

T

twentytvvo2019-12-28 18:29:47

Vue.js

twentytvvo, 2019-12-28 18:29:47

There is such a code. The only problem is that when I click on different radio buttons, there are icons instead of text, then the value from all the pressed buttons is added, but it is necessary that only the value of a certain pressed button be taken into account.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  
<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<script src="jquery-3.4.1.min.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://use.typekit.net/nxw4uqt.js"></script>

<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->

<div id="calculator">


  <form action="">
  
<h1>Просчитайте стоимость изделия</h1>
<p style="text-align:center;">Вы можете просчитать ореинтировачную стоимость,<br>
Для изготовления индивидуальных размеров нужна связаться по телефону. </p>
<div class="middle">
  <label>
  <input type="radio" id="stol" about="stol" type="stol" name="radio" v-model="stol" value="111" />
  <div class="front-end box">
    <span>Стол</span>
  </div>
</label>
<label>
  <input type="radio" id="polki"  about="polki" type="polki" name="radio" v-model.lazy="polki" value="111"/>
  <div class="polki box">
    <span>Полки</span>
  </div>
</label>
  <label>
  <input type="radio" id="moika" about="moika" type="moika" name="radio" v-model.lazy="moika"value="111"/>
  <div class="back-end box">
    <span>Мойка</span>
  </div>
</label>

<label>
  <input type="radio" id="stelaj" about="stelaj" type="stelaj" name="radio" v-model="stelaj" value="111"/>
  <div class="cargo box">
    <span>Стелаж</span>
  </div>
</label>
</div>





  
    <label for="mark" class="calclabel">Марка стали</label>
    
  <select name="mark" v-model="mark" class="calcmark">
          
  <option value="1" selected>AISI 304</option>
    
    <option value="2">AISI 240</option>
      
  </select>

  <label for="tradein" style="padding-left: 20px;" class="calclabel"> Количество Полок </label>
  
  <input type="number" name="tradein" placeholder="1" min="1" max="5" class="currency calcpolki" class="calcpolki" v-model.number="tradeIn"/>
<br />

    

<label for="width" class="calclabel"> Ширина </label>
  
  <input type="number" name="width" min="500" max="700" placeholder="500мм до 700мм" class="currency calcwidth" v-model.number="width"/>
<br />
      
        <label for="height" class="calclabel"> Длина </label>
    
  <input type="number" name="height" min="500" max="2400" placeholder="500мм до 2400мм" class="currency calcheight" v-model.number="height"/>
<br />
       			
    
  
  </form>
    <div class="payment">{{ calcPayment }} грн</div>

</div>

<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'>
</script><script  src="./script.js"></script>

</body>
</html>

var calculator = new Vue({
  el: '#calculator',
  data: {
    width: '',
    height: '',
    tradeIn: '',
    polki: '',
    stol: '',
    moika: '',
    stelaj: '',
    mark: '',
    rate: '',
    calcPayment: ''
  },
  computed: {
    calcPayment: function(e){
      var w = this.width;
                        var h = this.height;
      var p = this.polki;
                        var t = this.tradeIn;
      var r = this.rate;
                        var st = this.stol;
                        var mo = this.moika;
                        var sl = this.stelaj;
      var m = this.mark;
      var payment = (( w * 1 ) + ( h * 1 ) + ( t * 1 ) + ( p * 1 ) + ( st - 0 ) + ( mo - 0 ) + ( sl - 0 ) + ( m - 0 )) * 23 || 0;
      return currencyFormat(payment);
    },
    numFormat: function(e){
      e.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
  }
  
});


//https://blog.tompawlak.org/number-currency-formatting-javascript
function currencyFormat (num) {
    return "" + num.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

* {
  box-sizing: border-box;
}

html {
  font-family: 'Ubuntu', sans-serif!important;
  -webkit-font-smoothing: antialiased;
}

body {
  
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-top: 16px;
  transition: all 0.3s ease-in;
}
@media (max-width: 512px) {
  body {
    padding: 32px;
    transition: all 0.3s ease-in;
  }
}
@media (max-width: 360px) {
  body {
    padding: 16px;
    transition: all 0.3s ease-in;
  }
}

h1 {
  text-align: center;
  color: #000;
  margin: 0 0 16px 0;
}

p {
  text-align: center;
  margin-top: 0;
  margin-bottom: 24px;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  background-color: #fff;
  padding: 64px;
  box-shadow: 2px 2px 96px #111;
  border-radius: 8px;
  transition: all 0.3s ease-in;
}
@media (max-width: 512px) {
  .container {
    padding: 32px;
    transition: all 0.3s ease-in;
  }
}
@media (max-width: 360px) {
  .container {
    padding: 16px;
    transition: all 0.3s ease-in;
  }
}

label {
  display: inline-block;
  width: 25%;
  min-width: 128px;
  margin-bottom: 8px;
  font-weight: bold;
}

input, select {
  display: inline-block;
  background-color: #fff;
  color: #888;
  border: 2px solid #888;
  border-radius: 2px;
  height: 56px;
  width: 100%;
  font-size: 24px;
  padding: 0 16px;
  margin-bottom: 24px;
}
input:focus, select:focus {
  background-color: #fff;
  color: #3200ff;
  border-color: #3200ff;
  outline: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.payment {
 
    color: #fff;
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    transition: all 0.3s ease-in;
    background: #0f55ab;
    margin: 0px -21px -25px -21px;
    padding: 20px 0px;

}
@media (max-width: 512px) {
  .payment {
    font-size: 40px;
    transition: all 0.3s ease-in;
  }
}
@media (max-width: 400px) {
  .payment {
    font-size: 32px;
    transition: all 0.3s ease-in;
  }
}

@media (max-height: 750px) {
  body {
    height: 100%;
  }
}input[type="radio"]{
   display:none;
}

@import url("https://fonts.googleapis.com/css?family=Dax:400,900");
html {

}

.middle {
  width: 100%;
  text-align: center;
  /* Made by */
}
.middle h1 {
  font-family: 'Ubuntu', sans-serif;
  color: #fff;
}
.middle input[type="radio"] {
  display: none;
}
.calcmark {width:150px; font-family: "Ubuntu";
font-size:15px} .calcpolki {width:70px;font-family: "Ubuntu"!important;
    font-size: 15px;
    text-align: center;}
.middle input[type="radio"]:checked + .box {

      
    border-radius: 3px;
    height: 200px;

}
.calcwidth{font-family: "Ubuntu"!important;
    font-size: 15px;
    text-align: left;}
.calcheight{font-family: "Ubuntu"!important;
    font-size: 15px;
    text-align: left;}
.calclabel {font-size: 15px;width: 130px;}
}
input::placeholder {

}
.middle input[type="radio"]:checked + .box span {
  color: black;
  transform: translateY(70px);
}
.middle input[type="radio"]:checked + .box span:before {
  transform: translateY(0px);
  opacity: 1;
}
.middle .box {
  width: 115px;
  height: 200px;
  background-color: #fff;
  transition: all 250ms ease;
  will-change: transition;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
font-family: 'Ubuntu', sans-serif;
  font-weight: 900;
}
.middle .box:active {
  transform: translateY(10px);
}
.middle .box span {
  position: absolute;
  transform: translate(0, 60px);
  left: 0;
  right: 0;
  transition: all 300ms ease;
  font-size: 15px;
  user-select: none;
  
}
.middle .box span:before {
  font-size: 1.2em;
  font-family: FontAwesome;
  display: block;
  transform: translateY(-10px);
  opacity: 0.3;
  transition: all 300ms ease-in-out;
  font-weight: normal;
  color: white;
}
.middle .front-end span:before {
    content: '\f121';
    background-image: url(http://dressprice.net/calculator/table.svg);
    background-size: 70px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0);
}
.middle .polki span:before {
    content: '\f121';
    background-image: url(http://dressprice.net/calculator/polki.svg);
    background-size: 70px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0);
}
.middle .back-end span:before {
    content: '\f121';
    background-image: url(http://dressprice.net/calculator/sink.svg);
    background-size: 70px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0);
}
.middle .cargo span:before {
    content: '\f121';
    background-image: url(http://dressprice.net/calculator/cargo.svg);
    background-size: 70px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0);
}
.middle p {
  color: #fff;
font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
}
.middle p a {
  text-decoration: underline;
  font-weight: bold;
  color: #FFF;
}
.middle p span:after {
  content: '\f0e7';
  font-family: FontAwesome;
  color: yellow;
}
#calculator{box-shadow: -1px 2px 18px 1px #cccccc;
    padding: 21px;}
#calculator h1{font-size: 24px;}
input, select {
    display: inline-block;
    background-color: #fff;
    color: #888;
    border: 1px solid #888;
    border-radius: 2px;
    height: 56px;
    width: 100%;
    font-size: 24px;
    padding: 0 16px;
    margin-bottom: 24px;
}
label {
    display: inline-block;
    width: 20%;
    min-width: 128px;
    margin-bottom: 8px;
    font-weight: bold;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: display;
  margin: 0;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2019-12-28
@twentytvvo

In the v-model of radio buttons, you should not specify different properties, but the same one - it will take the value of the selected button as a value.