- 商品按钮的加减
<!-- 到一时禁用这个按钮 -->
<button :disabled="itmr.count===1" @click="itmr.count--">-</button>
<input @keydown.enter="onblur(itmr,$event)" @blur="onblur(itmr,$event)" type="text" v-model="itmr.count" />
<button @click="itmr.count++">+</button>
- 用计算属性，将总积分与总商品放在对象里return出去
computed: {
totalall() {
//先定义两个变量，总积分与总金额
let totalpart = 0;
let totalprice = 0;
// 循环两个数组，将总积分和总金额得到
this.shopcarlist.forEach(r => {
r.goodslist.forEach(rr => {
totalpart += rr.part* rr.count
totalprice += rr.price*rr.count
})
})
// 将一个对象return出去
return {totalpart,totalprice}
}
}
- 删除单价商品
// html部分
<div class="del" @click="del(j,i)">X</div>
// js部分
del(j, i) {
let isconfirm = confirm("确定要删除吗");
if (isconfirm) {
// 先找到购物车里的卖家店铺的商品数组
let goodlist = this.shopcarlist[j].goodslist;
// 再将这个对象删除
goodlist.splice(i, 1);
// 判断商品数组为空，就将这个店铺对象删除
if (goodlist.length === 0) {
this.shopcarlist.splice(j, 1);
}
}
}
- 判断输入数量文本框的值是否合法
// 可以几个事件绑定同一个方法 将商品对象和e传过去
@keydown.enter="onblur(itmr,$event)" @blur="onblur(itmr,$event)"
// 将商品的对象传进来
onblur(itmr,e){
// 先将字符转换成数字
let val = parseInt(e.target.value)
// 判断是否为数字
if(isNaN(val)) val = 1
// 判断是否不为整数
if(!Number.isSafeInteger(val)) Math.floor(val)
if(val<1) val = 1
itmr.count = val
e.target.value = val
},
-
模板较为粗糙
image
