最近给公司做了一个H5扫码付款的项目。
其中用到了购物车按钮 如下图
- 数据库字段
款式名称 shopName
款式单价 price
推荐数量 commend_num 进入页面初始化要取的数据(2)
最大数量 max
最小数量 min
输入框不能小于最小数量 min 也不能大于最大数量
- 前台html
@foreach (var item in result) //读取后台的数据
{
<div class="id" name="sku_info" style="margin-top:20px;">
<table style="width:100%;height:auto;">
<thead>
<tr>
<th class="sku_name" style="width:35%;text-align:left;font-size:12px;">@item.shopName</th> //商品名称
<th class="@item.price" style="width:15%;text-align:left;font-size:12px;">¥@item.price/@item.unit</th>//读取单价和单位
<th style="text-align:right;font-size:12px;width:50%;">
<button onclick="less('@item.sku_id','@item.min','@item.price')" ; style="width:30px;height:30px;border-radius:30px;">-</button>//减按钮
//数量输入框
<input class="@item.sku_id" value="@item.commend_num" oninput="value=value.replace(/[^\d]/g,'')" style="width:30px;height:30px;text-align:center;font-size:12px;"/>
<input id="@item.sku_id" value="@item.commend_num" style="display:none;"/>//存值框隐藏
<button onclick="add('@item.sku_id','@item.max','@item.price')" ; style="width:30px;height:30px;border-radius:30px;">+</button>//加按钮
</th>
</tr>
</thead>
</table>
</div>
}
- 1.初始化页面上总金额
注明:为什么初始化 数量不取数据库的推荐数量
为什么不是@tem.price * @tem.commend_num 而是 @tem.price * parseInt($("." + @tem.sku_id).val());
当你点击加号 数量增加 总金额也增加 你在进入其他页面返回刷新的时候会发现 总金额 变成初始化的总金额
如初始化(单价 50 数量2 总金额 100)点击加号(单价 50 数量3 总金额 150)
进入其他页面返回刷新的时候会变成(单价 50 数量3 总金额 100)
所以必须用@tem.price * parseInt($("." + @tem.sku_id).val()); 数量取输入框的值金额就不会变
//进入页面自动加载
$(document).ready(function (){
//初始化总金额
var t = 0;
//遍历
@foreach (var tem in result)
{
<text>
//单价乘输入框的值
t = t + @tem.price * parseInt($("." + @tem.sku_id).val());
</text>
}
//把总金额存在id为total的标签里 防止丢失精度toFixed(2)保留两位小数
document.getElementById("total").innerText = t.toFixed(2);
})
- 2 ,加减按钮
在html里加减按钮是button按钮
因为是遍历出来的值 不清楚到底有多少行数量 所以class和id值不能写死
在加按钮里面写一个点击事件onclick 把款式id 最大值,和单价传过来。如果加到大于最大值 则return出去
在减按钮里面写一个点击事件onclick 把款式id 最小值,和单价传过来。如果减到大于最小值 则return出去
款式id唯一的不会重复 是判断 用户点的是哪一行的加减按钮
再写一个函数 接收 状态 和 金额两个值 0 为增加 1 为 减少
如过是点击加 则(parseFloat(t.text()) - parseFloat(price)); 总金额加单价 减也一样。
-
//增加 function add(id, max,price) { //超过最大值不能再加 var maxs = parseInt(max); var num = parseInt($("." + id).val()); if (num >= maxs) { // mui.alert("数量不能大于"+max); return; } var nu = num + 1; $("." + id).val(num + 1);//加则加1 $('#'+ id).attr('value',nu); setTotal('0',price); } //减少 function less(id, min, price) { var mins = parseInt(min); var num =parseInt($("." + id).val()); if (num <= mins ) { // mui.alert("数量不能少于"+min); return; } var nu = num - 1; $("." + id).val(num - 1);//加则加1 $("#"+ id).attr('value',nu); setTotal('1',price); } function setTotal(flag, price) { var t = $("#total"); var total = 0; if (flag == '1') {//减少 total = (parseFloat(t.text()) - parseFloat(price)); } else if (flag == '0') { total = (parseFloat(t.text()) + parseFloat(price)); } else { total = (parseFloat(t.text()) + parseFloat(price)); } document.getElementById("total").innerText= total.toFixed(2); }
如图
-
加减按钮到此就可以实现了。但是万恶的产品经理提了新需求万一用户买100套 总不能让用户点击100次吧。需要可以输入那就麻烦点了 以下 js就是实现 核心主要取用户输入前的值,用输入后的值减去输入前的值再 再算总金额
@foreach (var tem in result)
{
<text>
$("." [email protected]_id).change(function () {
var nu = $("." + @tem.sku_id).val(); //获取输入的值
var max = @tem.max; //获取能输入的最大值
var min = @tem.min;//获取能输入的最小值
var tj = @tem.commend_num; //默认值
var t = 0;
if (nu > max) { //如果输入的值大于最大值
$("." + @tem.sku_id).prop('value', tj); //更改为默认值
$('#'+ @tem.sku_id).attr('value',tj); //同时存值的input也更改为默认值
@foreach (var item in result)
{
<text>
t = t + @item.price * parseInt($("." + @item.sku_id).val());
</text>
}
document.getElementById("total").innerText = t.toFixed(2);//更改刷新总金额的值
return;
}
if (nu < min) {//如果输入的值小于最小值 逻辑同上
$("." + @tem.sku_id).prop('value', tj);
$('#'+ @tem.sku_id).attr('value',tj);
@foreach (var item in result)
{
<text>
t = t + @item.price * parseInt($("." + @item.sku_id).val());
</text>
}
document.getElementById("total").innerText = t.toFixed(2);
return;
return;
}
var nums = $("#" + @tem.sku_id).val(); //获取旧值
var num = nu - nums; //输入的值减去旧值
$('#'+ @tem.sku_id).attr('value',nu); //存到存值的input框
var p = @tem.price;
var price = parseFloat(p) * parseInt(num);
setTotal('3',price);
});
</text>
}