Vue简单实现商城订单折扣
Vue简单实现商城订单折扣
我开始上传我认为还行的案例了，基本都是我自己写的，思路上可能有借鉴其他人的代码，不过别人的东西你完全掌握了，那你就可以说是你的了。
折扣:
1、单间商品数量满两件88折，满三件7折
2、商品总价满400减50，满八百减100，以此类推
3、商品总价大于299包邮，不满需出12元运费
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>商城结算</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
//样式部分
<style>
* {
margin: 0;
padding: 0;
}
#shop {
background-color: #efe9db;
}
h1 {
text-align: center;
color: #fcd353;
padding: 20px;
}
.image {
display: inline-block;
width: 50px;
height: 50px;
background-color: skyblue;
}
.shop-item {
display: flex;
justify-content: space-around;
align-items: center;
margin: 10px;
}
.shop-item p {
width: 158px;
display: flex;
justify-content: space-around;
align-items: center;
}
.shop-item p input:first-child,
.shop-item p input:last-child {
width: 24px;
border-radius: 5px;
}
.item-info {
display: flex;
flex-direction: column;
font-size: 12px;
color: #000000;
}
.shop-bon {
display: flex;
align-items: center;
justify-content: space-around;
}
.shop-bon p:first-child {
width: 180px;
}
.shop-bon p:last-child {
font-size: 18px;
font-weight: 600;
color: red;
}
</style>
</head>
<body>
//展示部分
<div id="shop">
<h1>清单</h1>
<div v-for="(a,i) in shopData" class="shop-item">
<p>
<input type="checkbox" v-model="a.checkBox" />
<span class="image"> </span>
<span class="item-info">
<span>商品：{{a.name}}</span>
<span> 单价：{{a.price}}元</span>
</span>
</p>
<p>
<input type="button" name="" id="" value="-" @click="sub(i)" />
<input type="number" name="" style="width: 40px;" id="" v-model="a.num" @blur="val(i)" />
<input type="button" name="" id="" value="+" @click="add(i)" />
</p>
</div>
<div class="shop-bon">
<p><input type="checkbox" v-model="allcheckbox" @click="checkAll" />全选</p>
<p>
总价：{{toDecimal2(allprice)}}
</p>
</div>
</div>
<script>
//业务逻辑部分
var vm = new Vue({
el: "#shop",
data: {
allcheckbox: false,
shopData: [
{ checkBox: false, name: "商品一", price: 100, num: 1 },
{ checkBox: false, name: "商品二", price: 85, num: 1 },
{ checkBox: false, name: "商品三", price: 99, num: 2 },
{ checkBox: false, name: "商品四", price: 64, num: 1 },
{ checkBox: false, name: "商品五", price: 57, num: 4 },
{ checkBox: false, name: "商品六", price: 42, num: 1 },
{ checkBox: false, name: "商品七", price: 31, num: 1 },
],
},
computed: {
allprice: function () {
let result = 0;
let itemPrice = [];
for (let i = 0; i < this.shopData.length; i++) {
// 判断是否选择
if (this.shopData[i].checkBox === true) {
// 判断数量进行折扣
if (this.shopData[i].num > 1) {
if (this.shopData[i].num > 2) {
itemPrice[i] =
this.shopData[i].price * this.shopData[i].num * 0.7;
} else {
itemPrice[i] =
this.shopData[i].price * this.shopData[i].num * 0.88;
}
} else {
itemPrice[i] = this.shopData[i].price * this.shopData[i].num;
}
}
}
// 计算总价
itemPrice.map((item) => (result += item));
// 判断邮费
if (result > 299 || result === 0) {
// 总价满减
if (result >= 400) {
result = result - Math.floor(result / 400) * 50;
}
} else {
result = result + 12;
}
return result;
},
},
methods: {
add(i) {
this.shopData[i].num++;
},
sub(i) {
if (this.shopData[i].num === 0) {
return;
} else {
this.shopData[i].num--;
}
},
val(i) {
if (this.shopData[i].num <= 0) {
this.shopData[i].num = 0;
}
},
checkAll(val) {
this.shopData.map((item) => {
item.checkBox = val.target.checked;
});
},
toDecimal2(x) {
// 强制保留两位小数
var f = parseFloat(x);
if (isNaN(f)) {
return false;
}
var f = Math.round(x * 100) / 100;
var s = f.toString();
var rs = s.indexOf(".");
if (rs < 0) {
rs = s.length;
s += ".";
}
while (s.length <= rs + 2) {
s += "0";
}
return s;
},
}
});
</script>
</body>
</html>
基本上这个简单的代码就这样吧，我也有很久没有写博客了，这次写博客感觉也有点水的感觉，不过对于以前的我来说，能独立的完成基本业务逻辑的代码，我感觉也算有进步了，主要最近一直是在看官方文档进行学习，没时间整理自己的笔记，所有不太好发出来，就导致我很长时间没写博客了=A=！（绝对不是我懒了的原因！）
网抑云小故事：
妈妈：儿子，如果妈妈眼睛瞎了怎么办？儿子：我会送你去这里最好的医院治疗。妈妈：如果世界上的医院仍然治不好呢？儿子：我会终身照顾你。妈妈：好儿子，谢谢你。儿子：妈妈，如果我眼睛瞎了怎么办？妈妈：我会把我的眼睛换给你……
