技术相关
联系我们
购物车第二版，添加显示计算金额与实际支付金额（手工改的金额）
时间：2024-07-04 18:48
阅读：29
来源：互联网
购物车第二版，添加显示计算金额与实际支付金额（手工改的金额）
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>KEDYPACK Paygate demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=yes"/>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; /* 使用Flexbox布局 */
justify-content: center; /* 水平居中 */
}
li {
display: inline;
text-align: center
}
a:link, a:visited {
color: blue;
padding: 14px 25px;
text-decoration: none;
display: inline-block;
}
td {
word-wrap: break-word;
max-width: 800px;
vertical-align: top;
padding: 5px;
height: 30px;
}
.title {
text-decoration: underline;
}
* {
margin: 0;
padding: 0;
}
div.content {
/* width: 1000px;
height: 350px;
border: 3px solid #ccc;*/
max-width: 900px;
margin: 5px auto;
overflow: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
#goodsStore td,#goodsPay td,.newcat td {
border: 1px solid black;
text-align: center;
height: 30px;
}
caption {
font-size: 28px;
font-weight: bold;
}
#gwc input[type="text"] {
width: 30px;
margin-left: 4px;
margin-right: 4px;
}
#gwc input[type="button"] {
width: 20px;
}
.button{
width: 140px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
}
.button:nth-child(6n){
margin-right: 0;
}
.button.gray{
color: #8c96a0;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
}
.button.black{
border:1px solid #333;
box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
background: -webkit-linear-gradient(top,#656565,#4c4c4c);
background: -moz-linear-gradient(top,#656565,#4a4a4a);
background: linear-gradient(top,#656565,#4a4a4a);
}
.button.red{
border:1px solid #b42323;
box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
background: -webkit-linear-gradient(top,#d53939,#b92929);
background: -moz-linear-gradient(top,#d53939,#b92929);
background: linear-gradient(top,#d53939,#b92929);
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="."><img src="log.png"></a></li>
</ul>
</nav>
</header>
<section>
<div id="goodsStore">
<table>
<caption>储 物 仓</caption>
<thead>
<tr>
<td>商品编号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品颜色</td>
<td>商品库存</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>2018090201</td>
<td>鼠标</td>
<td>78</td>
<td>黑色</td>
<td>500</td>
<td>
<input type="button" value="加入购物车" onclick="addGoods(this);" />
</td>
</tr>
<tr>
<td>2018090202</td>
<td>键盘</td>
<td>45</td>
<td>白色</td>
<td>300</td>
<td>
<input type="button" value="加入购物车" onclick="addGoods(this);" />
</td>
</tr>
<tr>
<td>2018090203</td>
<td>显示器</td>
<td>880</td>
<td>黑色</td>
<td>200</td>
<td>
<input type="button" value="加入购物车" onclick="addGoods(this);" />
</td>
</tr>
<tr>
<td>2018090204</td>
<td>主机</td>
<td>2332</td>
<td>蓝色</td>
<td>350</td>
<td>
<input type="button" value="加入购物车" onclick="addGoods(this);" />
</td>
</tr>
</tbody>
</table>
</div>
<div id="goodsPay" class="content">
<table>
<caption>PANIER</caption>
<thead>
<tr>
<td>Référence</td>
<td>Désignation</td>
<td>Prix Unit.</td>
<td>Couleur</td>
<td>Quantité</td>
<td>Prix Total</td>
<td></td>
</tr>
</thead>
<tbody id="gwc">
<tr><td>2024070201</td><td>BOL RONDE RIGIDE EN PLASTIQUE PP</td><td>8</td><td>Doré</td><td><input type="button" value="-" onclick="reduce(this)"><input class="num" type="text" value="1" readonly=""><input type="button" value="+" onclick="add(this)"></td><td>8</td><td><input type="button" value="X" onclick="deleteGoods(this);"></td></tr>
<tr><td>2024070202</td><td>BOL BLANC ET COUVERCLE ANTI-BUÉE</td><td>66</td><td>Doré</td><td><input type="button" value="-" onclick="reduce(this)"><input class="num" type="text" value="1" readonly=""><input type="button" value="+" onclick="add(this)"></td><td>66</td><td><input type="button" value="X" onclick="deleteGoods(this);"></td></tr>
<tr><td>2024070203</td><td>BOÎTE RECTANGULAIRE, COUVERCLE PET</td><td>4</td><td>Doré</td><td><input type="button" value="-" onclick="reduce(this)"><input class="num" type="text" value="1" readonly=""><input type="button" value="+" onclick="add(this)"></td><td>4</td><td><input type="button" value="X" onclick="deleteGoods(this);"></td></tr>
<tr><td>2024070204</td><td>BOL ROND CARTON NOIR, COUVERCLE CARTON</td><td>162</td><td>Doré</td><td><input type="button" value="-" onclick="reduce(this)"><input class="num" type="text" value="1" readonly=""><input type="button" value="+" onclick="add(this)"></td><td>162</td><td><input type="button" value="X" onclick="deleteGoods(this);"></td></tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Total (HT)</td>
<td colspan="2" id="sum">240</td>
</tr>
</tfoot>
</table>
<div style="text-align: center; padding: 15px"><input type=submit id="btn_good" name="ac" value="Commande" class="button red"></div>
</div>
<br><br>
<div id="conmmande" class="content">
<form method="post" action="#" id="form">
<table>
<caption>COMMANDE</caption>
<tr>
<td colspan="2"><div><table class="newcat"></table></div></td>
</tr>
<tr>
<td align="right"><label for="TransID">TransID</label></td>
<td><input type=text id="TransID" name=TransID value="<?php echo $sTransID; ?>" size=30 required="">*</td>
</tr>
<tr>
<td align="right"><label for="Amount">Amount</td>
<td><input type=text id="Amount" name=Amount value="<?php echo $iAmount; ?>" size=10 required="">*</td>
</tr>
<tr>
<td align="right"><label for="Currency">Currency</td>
<td><input type=text id="Currency" name=Currency value="<?php echo $sCurrency; ?>" size=3 required="">*</td>
</tr>
<tr style="display: none">
<td align="right"><label for="URLSuccess"><?php echo $stdSuccess; ?></td>
<td><input type=text id="URLSuccess" name=URLSuccess value="<?php echo $sURLSuccess; ?>" size=50 required="">*</td>
</tr>
<tr style="display: none">
<td align="right"><label for="URLFailure"><?php echo $stdFailure; ?></td>
<td><input type=text id="URLFailure" name=URLFailure value="<?php echo $sURLFailure; ?>" size=50 required="">*</td>
</tr>
<tr style="display: none">
<td align="right"><label for="URLNotify"><?php echo $stdNotify; ?></td>
<td><input type=text id="URLNotify" name=URLNotify value="<?php echo $sURLNotify; ?>" size=50 required="">*</td>
</tr>
<tr style="display: none">
<td align="right"><label for="OrderDesc"><?php echo $stdOrder; ?></td>
<td><input type=text id="OrderDesc" name=OrderDesc value="<?php echo $sOrderDesc; ?>" size=50></td>
</tr>
<tr style="display: none">
<td align="right"><label for="UserData"><?php echo $stdUserdata; ?></td>
<td><input type=text id="UserData" name=UserData value="<?php echo $sUserData; ?>" size=50></td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td> </td>
<td>
<input type=button id="btn_back" name="ac" value="retour" class="button gray">
<input type=submit id="btn_redirect" name="ac" value="redirect" class="button red"> <!--onclick="redirect()"-->
<input type=submit id="btn_iframe" name="ac" value="iframe" class="button red">
</td>
</tr>
<tr>
<td align="right"><br>test cards</td><td><br>
<table>
<tr>
<td>4111.1111.1111.1111</td><td>Visa</td><td>success</td><td>0000</td><td></td>
</tr>
<tr>
<td>5555.5555.5555.4444</td><td>Mastercard</td><td>success</td><td>0000</td><td></td>
</tr>
<tr>
<td>3750.0000.0000.007</td><td>AMEX</td><td>success</td><td>0000</td><td></td>
</tr>
<tr>
<td>4012.8888.8888.1881</td><td>Visa</td><td>failed</td><td>0100</td><td>DECLINED</td>
</tr>
<tr>
<td>5105.1051.0510.5100</td><td>Mastercard</td><td>failed</td><td>0100</td><td>DECLINED</td>
</tr>
<tr>
<td>3714.4963.5398.431</td><td>AMEX</td><td>failed</td><td>0100</td><td>DECLINED</td>
</tr>
<tr>
<td>4012.8888.8888.1881</td><td>Visa</td><td>failed</td><td>0305</td><td>DECLINED</td>
</tr>
<tr>
<td>5200.0000.0000.0007</td><td>Mastercard</td><td>failed</td><td>0305</td><td>DECLINED</td>
</tr>
<tr>
<td>3782.8224.6310.005</td><td>AMEX</td><td>failed</td><td>0305</td><td>DECLINED</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</section>
<ul>
<li><img src="foot.png"></li>
</ul>
<script src="jquery-3.7.1.min.js"></script>
<script src="jquery.cookie.min.js"></script>
<script>
var sum; //定义全局变量：购物车商品总计
$(function () {
//页面加载完成后给全局变量赋值
// $("#conmmande").hide();
sum = $("#sum");
$("#btn_good").on("click", function () {
// $("#goodsPay").hide();
$("#conmmande").show();
store();
})
$("#btn_back").on("click", function () {
$("#goodsPay").show();
// $("#conmmande").hide();
})
$("#Amount").on("input",function(){
store();
})
})
function addGoods(btn) {
var td = $(btn).parent();
var tr = $(td).parent();
var tds = $(tr).children();
//创建一个行节点
var newTr = $("<tr></tr>");
//给行节点赋值
newTr.html(
'<td>' + tds[0].innerHTML + '</td>' +
'<td>' + tds[1].innerHTML + '</td>' +
'<td>' + tds[2].innerHTML + '</td>' +
'<td>' + tds[3].innerHTML + '</td>' +
'<td>' +
'<input type="button" value="-" onclick="reduce(this)" />' +
'<input type="text" value="1" class="num" readonly />' +
'<input type="button" value="+" onclick="add(this)" />' +
'</td>' +
'<td>' +
tds[2].innerHTML +
'</td>' +
'<td>' +
'<input type="button" value="X" onclick="deleteGoods(this);" />' +
'</td>'
);
//追加新节点
$("#gwc").append(newTr);
//更新总计
var s = parseFloat(sum.html());
sum.html(s + parseFloat(tds[2].innerHTML));
$("#Amount").val(sum.html());
store();
}
function add(btn) {
//获取按钮的上一个兄弟
var txt = $(btn).prev();
txt.val(parseFloat(txt.val()) + 1);
//获取该商品的单价
var price = $(btn).parent().prev().prev();
//更新总计
var s = parseFloat(sum.html());
sum.html(s + parseFloat(price.html()));
$("#Amount").val(s + parseFloat(price.html()));
store();
}
function reduce(btn) {
//获取按钮的下一个兄弟
var txt = $(btn).next();
if (parseFloat(txt.val()) == 1) {
return;
}
txt.val(parseFloat(txt.val()) - 1);
//获取该商品的单价
var price = $(btn).parent().prev().prev();
//更新总计
var s = parseFloat(sum.html());
sum.html(s - parseFloat(price.html()));
$("#Amount").val(s - parseFloat(price.html()));
store();
}
function deleteGoods(btn) {
//获取当前行
var tr = $(btn).parent().parent();
//删除当前行
tr.remove();
//获取该商品的单价
var price = $(btn).parent().siblings().eq(2);
//更新总计
var s = parseFloat(sum.html());
sum.html(s - parseFloat(price.html()));
$("#Amount").val(s - parseFloat(price.html()));
store();
}
function store() {
var cat = [];
var trs = $("#gwc").children();
trs.each(function (index, value) {//循环遍历这个数组寻找与新数据匹配的元素
console.log($("#gwc tr:eq(" + index + ") td:eq(0)").html());
cat[index] = [];
cat[index][0] = $("#gwc tr:eq(" + index + ") td:eq(0)").html();
cat[index][1] = $("#gwc tr:eq(" + index + ") td:eq(1)").html();
cat[index][2] = $("#gwc tr:eq(" + index + ") td:eq(2)").html();
cat[index][3] = $("#gwc tr:eq(" + index + ") td:eq(3)").html();
cat[index][4] = $("#gwc tr:eq(" + index + ") td:eq(4) .num").val();
cat[index][5] = $("#gwc tr:eq(" + index + ") td:eq(5)").html();
})
cat.push(['total',sum.html(),$("#Amount").val()]);
console.log(cat);
$.cookie("cat", JSON.stringify(cat));
showcat();
}
function showcat() {
$(".newcat").html("");
var cat = JSON.parse($.cookie("cat"));
console.log(cat);
// $(".newcat").append("<caption>PANIER</caption>");
var newTr = $("<tr></tr>");
newTr.html(
'<td>Référence</td>' +
'<td>Désignation</td>' +
'<td>Prix Unit.</td>' +
'<td>Couleur</td>' +
'<td>Quantité</td>' +
'<td>Prix Total</td>'
);
//追加新节点
$(".newcat").append(newTr);
cat.forEach(function (index, value) {//循环遍历这个数组寻找与新数据匹配的元素
newTr = $("<tr></tr>");
console.log(value);
if (index[0] != "total") {
//给行节点赋值
newTr.html(
'<td>' + index[0] + '</td>' +
'<td>' + index[1] + '</td>' +
'<td>' + index[2] + '</td>' +
'<td>' + index[3] + '</td>' +
'<td>' + index[4] + '</td>' +
'<td>' + index[5] + '</td>'
);
//追加新节点
$(".newcat").append(newTr);
} else {
newTr.html(
'<td colspan="5">Total (HT)</td>' +
'<td>' + index[1] +'('+index[2]+')'+ '</td>'
);
$(".newcat").append(newTr);
}
})
}
function redirect() {
$("#URLSuccess").val($("#URLSuccess").val() + "?ac=r")
$("#URLFailure").val($("#URLFailure").val() + "?ac=r")
$("#URLNotify").val($("#URLNotify").val() + "?ac=r")
$("#form").submit();
}
</script>
</body>
</html>
