<template>
<div>
<h3>购物车结算</h3>
<div>
<!-- disabled="disabled" 价格及运费输入框禁用,用户不能输入 -->
<p>
手机: 价格<input
type="text"
style="width: 100px"
disabled="disabled"
v-model.number="phonePrice"
/>
数量<input
type="number"
style="width: 100px"
v-model.number="phoneCount"
/>小计:{{ phoneSum }} 元
</p>
<p>
电脑: 价格<input
type="text"
style="width: 100px"
disabled="disabled"
v-model.number="puterPrice"
/>
数量<input
type="number"
style="width: 100px"
v-model.number="puterCount"
/>小计:{{ puterSum }} 元
</p>
<p>
运费:<input
type="text"
style="width: 100px"
disabled="disabled"
v-model.number="freight"
/>元
</p>
<p>共计:{{ allSum }}元</p>
<p>优惠:{{ discount }}元</p>
<p>应付:{{ sum }} 元</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
phonePrice: 2989, //手机价格
phoneCount: 1, //手机数量
puterPrice: 6000, //电脑价格
puterCount: 2, //电脑数量
freight: 10, //运费
};
},
watch: {
phoneCount() {
//用户输入数量小于1 强等1
if (this.phoneCount < 0) {
return (this.phoneCount = 1);
}
},
puterCount() {
if (this.puterCount < 0) {
return (this.puterCount = 1);
}
},
},
computed: {
phoneSum() {
return this.phonePrice * this.phoneCount;
},
puterSum() {
return this.puterPrice * this.puterCount;
},
allSum() {
return Number(this.phoneSum) + Number(this.puterSum);
},
discount() {
const discount = this.allSum;
//判断总价>5000 且<8000 条件成立
if (discount > 5000 && discount < 8000) {
return 100;
} else if (discount > 8000) {
return 200;
} else {
return 0;
}
},
sum() {
// 最后价格=总价-优惠+运费
return Number(this.allSum) - Number(this.discount) + Number(this.freight);
},
},
};
</script>
<style scoped>
h3 {
text-align: center;
}
</style>
购物车结算
最新推荐文章于 2022-10-19 22:56:10 发布