vue购物车结算案例

<template>
  <div id="app">
    <h1>购物车结算</h1>
    <p>手机:  价格<input type="num" v-model="phonePay"> 数量<input type="num" v-model="phoneCount">  总额{{phoneSum}}元</p>
    <p>电脑:  价格<input type="num" v-model="comPay"> 数量<input type="num" v-model="comCount">  总额{{comSum}}元</p>
    <p>运费: <input type="num" v-model="transport">元</p>
    <p>共计: {{sum}}元</p>
    <p>优惠: {{cut}}元</p>
    <p>应付: {{pay}}元</p>
  </div>
</template>

<script>

export default {
  data () {
    return {
      phonePay:'',
      phoneCount:'',
      comPay: '',
      comCount: '',
      transport: ''
    }
  },
  computed:{
    phoneSum(){
    return  this.phonePay*this.phoneCount
    },
    comSum() {
      return this.comPay*this.comCount
    },
    sum() {
      return this.phoneSum + this.comSum + Number(this.transport)
    },
    cut() {
      let result = ''
      if(this.phoneSum + this.comSum >= 5000 && this.phoneSum + this.comSum < 8000) {
        result = 100
      } else if(this.phoneSum + this.comSum >= 8000) {
        result = 200
      } 
      return result
    },
    pay() {
      return this.sum - this.cut
    }
  },
}
</script>