![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@{ ViewBag.Title = "Cart"; } <h2>购物车</h2> <script src="~/Scripts/jquery-3.4.1.js"></script> <table class="table table-bordered"> <thead style="background-color:aqua"> <tr style="text-align:center"> <td>全选<input id="ckall" onclick="ckAll()" type="checkbox" /></td> <td>图片</td> <td>名称</td> <td>颜色</td> <td>规格</td> <td>数量</td> <td>价格</td> <td>操作</td> </tr> </thead> <tbody id="tb"> </tbody> </table> <input id="Button1" onclick="searchGoods()" type="button" value="支付已选商品" /> <script> function load() { var i = 1; var s = 1; $.ajax({ url: 'http://localhost:63636/api/Good/ShowCart', type: 'Get', dataType: 'Json', success: function (d) { $("#tb").empty(); $(d).each(function () { $("#tb").append( '<tr style="text-align:center">' + '<td><input class="cka" value="' + this.CId + '" type="checkbox" /></td>' + '<td><img style="height:50px;100px" src="' + this.GImg + '" alt="" /></td>' + '<td>' + this.GName + '</td>' + ' <td>' + this.Color + '</td>' + '<td>' + this.Big + '</td>' + ' <td><input id="bt1'+s+'" type="button" onclick="bit(-1,'+s+')" value="-" /><span id="sp'+s+'">' + i + '</span><input id="bt2'+s+'" onclick="bit(1,'+s+')" type="button" value="+" /></td>' + ' <td><span id="ss'+s+'">' + this.CPrice + '</span><input id="hd1'+s+'" type="hidden" value="' + this.CPrice + '" /></td>' + ' <td><input id="Button1" type="button" onclick="order(' + this.CId + ')" value="支付" /><input id="Button1" type="button" onclick="del(' + this.CId + ')" value="删除" /></td>' + '</tr>' ) s++; window.gid = this.GId; }) } });//显示购物车信息 } function del(cid) { if (confirm('是否删除该商品')) { $.ajax({ url: 'http://localhost:63636/api/Good/DelCart', data: { id: cid }, type: 'Get', dataType: 'Json', success: function (d) { if (d > 0) { alert('删除成功'); load(); } else { alert('删除失败'); } } });//删除购物车商品 } } function order(cid) { location.href = '/Default/Order?id=' + cid + ',' + window.gid; } function ckAll() { if ($("#ckall").prop("checked")) { $(".cka").prop("checked", true); } else { $(".cka").each(function () { this.checked = !this.checked; }) } } function bit(a,s) { $(("#sp"+s)).text((parseInt(($("#sp"+s)).text()) + a)); var count = $(("#sp"+s)).text(); var cprice = $(("#hd1"+s)).val(); $(("#ss"+s)).text(parseInt(count) * parseInt(cprice)); } function searchGoods() { var arr = []; $(".cka:checked").each(function () { arr.push(this.value); }) location.href = '/Default/Orders?ids='+arr.toString(); } load(); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@{ ViewBag.Title = "Detail"; } <h2>商品详情</h2> <script src="~/Scripts/jquery-3.4.1.js"></script> <div id="d1" style="float:left"> @*显示商品*@ </div> <div id="d2" style="float:left"> @*显示商品类别信息*@ <table> <tr> <td>价格:<span id="s1"></span></td> </tr> <tr id="t1"> <td></td> </tr> <tr> <td>浅蓝<input id="rd1" name="color" value="浅蓝" onclick="hehe()" type="radio" /></td> </tr> <tr id="t2"> <td></td> </tr> </table> <input id="Button1" onclick="save()" type="button" value="加入购物车" /> </div> <script> function hehe() { alert('目前没有货'); $("#d2").append( '<input id="bt1" onclick="lala()" type="button" value="到货通知" />' ); $("#Button1").attr("disabled", true); } function lala() { $("#bt1").css("color","red"); } function load() { $.ajax({ url: 'http://localhost:63636/api/Good/ShowGood', data: {id:@ViewBag.ls}, type: 'Get', dataType: 'Json', success: function (d) { $("#d1").empty(); $(d).each(function () { $("#d1").append( '<table style="float:left">' + '<tr style="text-align:center">' + '<td><img style="height:600px;400px" src="' + this.GImg + '" alt="" /></td>' + ' </tr>' + '<tr style="text-align:center">' + ' <td>价格:2000</td>' + '</tr>' + ' <tr style="text-align:center">' + ' <td>' + this.GName + '</td>' + ' </tr>' + ' </table>' ) }) } });//显示商品图片信息 $.ajax({ url: 'http://localhost:63636/api/Good/ShowColor', data: {gid:@ViewBag.ls}, type: 'Get', dataType: 'Json', success: function (d) { $("#t1").empty(); $("#t1").append('颜色:'); $(d).each(function () { $("#t1").append( '<td><input id="rd1" name="color" value="' + this.VName + '" type="radio" />' + this.VName + '</td>' ) }) } });//显示商品图片信息 $.ajax({ url: 'http://localhost:63636/api/Good/ShowBig', data: {gid:@ViewBag.ls}, type: 'Get', dataType: 'Json', success: function (d) { $("#t2").empty(); $("#t2").append('规格:'); $(d).each(function () { $("#t2").append( '<td><input id="rd2" value="' + this.VName + '" onclick="price(' + this.VId + ')" name="big" type="radio" />' + this.VName + '</td>' ) }) } });//显示商品图片信息 } function price(id) { $.ajax({ url: 'http://localhost:63636/api/Good/ShowPrice', data: { gid:@ViewBag.ls, vid: id }, type: 'Get', dataType: 'Json', success: function (d) { $("#s1").empty(); $(d).each(function () { $("#s1").append(this.Price) }) } });//显示价格 } function save() { var obj = {}; obj.Color = $("#rd1:checked").val(); obj.GId =@ViewBag.ls; obj.Big = $("#rd2:checked").val(); obj.CPrice = $("#s1").text(); $.ajax({ url: 'http://localhost:63636/api/Good/Cart', data: obj , type: 'Post', dataType: 'Json', success: function (d) { if (d > 0) { alert('添加成功'); } else { alert('添加失败'); } } });//添加购物车 } load(); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@{ ViewBag.Title = "Order"; } <h2>支付订单</h2> <script src="~/Scripts/jquery-3.4.1.js"></script> <div id="dd"> </div> <script> var i; function load() { i = 1; $.ajax({ url: 'http://localhost:63636/api/Good/ShCart', data: {id:@ViewBag.id}, type: 'Get', dataType: 'Json', success: function (d) { $("#dd").empty(); $(d).each(function () { $("#dd").append( '<table class="table table-bordered">'+ '<tr style="text-align:center">' + '<td>图片:</td>'+ ' <td><img style="height:30px;40px" src="' + this.GImg + '" alt="" /></td>'+ ' </tr>'+ '<tr style="text-align:center">'+ ' <td>名称:</td>' + ' <td>' + this.GName + '</td>' + ' </tr>'+ '<tr style="text-align:center">'+ ' <td>颜色:</td>' + ' <td>' + this.Color + '</td>' + ' </tr>'+ ' <tr style="text-align:center">'+ ' <td>规格:</td>'+ ' <td>'+this.Big+'</td>'+ ' </tr>'+ ' <tr style="text-align:center">'+ ' <td>数量:</td>' + ' <td><input id="bt1" type="button" onclick="bit(-1)" value="-" /><span id="sp">' +i+ '</span><input id="bt2" onclick="bit(1)" type="button" value="+" /></td>' + ' </tr>'+ '<tr style="text-align:center">'+ ' <td>价格:</td>' + ' <td><span id="ss">' + this.CPrice + '</span><input id="hd1" type="hidden" value="' + this.CPrice + '" /></td>' + ' </tr>' + '<tr style="text-align:center">'+ ' <td>付款人:</td>' + ' <td>' + this.UName + '</td>' + ' </tr>' + ' <tr style="text-align:center">'+ '<td>地址:</td>'+ ' <td><input id="txt1" type="text" /></td>'+ ' </tr>'+ ' <tr style="text-align:center">'+ ' <td>手机号:</td>'+ ' <td><input id="txt2" type="text" /></td>'+ ' </tr>'+ ' <tr style="text-align:center">'+ ' <td></td>'+ ' <td><input id="Button1" type="button" onclick="pay()" value="付款" /></td>'+ ' </tr>'+ ' </table>' ) }) window.price = this.CPrice; } });//显示商品图片信息 } function bit(a) { $("#sp").text((parseInt($("#sp").text()) + a)); var count = $("#sp").text(); var cprice = $("#hd1").val(); $("#ss").text(parseInt(count) * parseInt(cprice)); } function pay() { var obj = {}; obj.GNum = $("#sp").text(); obj.GPrice = $("#ss").text(); obj.Sites = $("#txt1").val(); obj.Phone = $("#txt2").val(); obj.IsPub = 0; obj.CId =@ViewBag.id; obj.GId=@ViewBag.gid; $.ajax({ url: 'http://localhost:63636/api/Good/AddOrder', data: obj , type: 'Post', dataType: 'Json', success: function (d) { if (d > 0) { alert('添加成功'); location.href = '/Default/ShowOrder'; } else { alert('添加失败'); } } });//添加订单 } load(); </script>