表有汇PC端购物车功能实现
加入购物车后的结算功能
购物车页面：
购物车页面html代码：
<div class="cart_box"> <!--购物车--> <h1 class="main_tit"> <span><a οnclick="DeleteClear(this,'/','0');" href="javascript:;">清空购物车</a></span> 我的购物车<strong>Shopping Cart</strong> </h1> <div class="cart_step"> <ul> <li class="selected"><span>1</span>放进购物车</li> <li><span>2</span>填写订单信息</li> <li class="last"><span>3</span>支付/确定订单</li> </ul> </div> <div class="line20"></div> <table width="938" border="0" align="center" cellpadding="8" cellspacing="0" class="cart_table"> <tbody><tr> <th width="64"></th> <th align="left">商品名称</th> <th width="110" align="center">颜色</th> <th width="80" align="center">积分</th> <th width="80" align="center">单价</th> <th width="80" align="center">数量</th> <!--<th width="80" align="center">优惠</th>--> <th width="100" align="center">金额小计</th> <th width="100" align="center">积分小计</th> <th width="50" align="center">操作</th> </tr> <tr> <td><a target="_blank" href="/goods/show-62.html"><img src="/upload/201505/04/201505041442488793.jpg" class="img"></a></td> <td><a target="_blank" href="/goods/show-62.html">韩国乐智迅时尚正品手表学生男表女表运动防水糖果色果冻表石英表</a></td> <!--颜色--> <td align="center">黑色<input name="goods_color" type="hidden" value="黑色"></td> <!--积分--> <td align="center"> + 10 </td> <!--价格--> <td align="center">￥2600.00<input name="goods_price" type="hidden" value="2600.00"></td><!-- value=用户价格 --> <!--数量--> <td align="center"> <a href="javascript:;" class="reduce" title="减一" οnclick="CartComputNum(this, '/', '62', -1);">减一</a> <input type="text" name="goods_quantity" class="input" style="width:30px;text-align:center;ime-mode:Disabled;" value="1" οnblur="CartAmountTotal(this, '/', '62');" οnkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"> <a href="javascript:;" class="subjoin" title="加一" οnclick="CartComputNum(this,'/', '62', 1);">加一</a> </td> <!--优惠--> <!--<td align="center">￥<label name="discount_amount"></label></td>--> <!--金额小记--> <!-- string转换成int --> <td align="center"><font color="#FF0000" size="2">￥<label name="real_amount">2600</label></font></td> <td align="center"> <font color="#FF0000" size="2"> + <label name="point_count">10</label> </font> </td> <td align="center"><a οnclick="DeleteCart(this,'/','62');" href="javascript:;">删除</a></td> </tr> <tr> <th colspan="9" align="right"> 商品件数：1 件 商品总金额（不含运费）：<font color="#FF0000" size="2">￥2600</font>元 总积分：<font color="#FF0000" size="2">10分</font> </th> </tr> </tbody></table> <div class="line20"></div> <div class="right"> <a class="btn" href="/index.html">继续购物</a> <a class="btn btn-success marL10" href="/shopping/confirm.html">马上去结算</a> </div> <div class="clear"></div> <!--/购物车--> </div>
对照一下商品的颜色、数量等是否选择正确，如果无误可以点击马上结算按钮，进入订单信息界面，填写信息
订单信息界面：
订单信息页面html代码：
<div class="cart_box"> <link rel="stylesheet" href="/css/validate.css"> <script type="text/javascript" src="/scripts/jquery/jquery.form.min.js"></script> <script type="text/javascript" src="/scripts/jquery/Validform_v5.3.2_min.js"></script> <script type="text/javascript"> $(function () { //表单提交 AjaxInitForm('order_form', 'btnSubmit', 0); }); </script> <!--结算中心--> <h1 class="main_tit"> <span><a href="/shopping/cart.html">返回</a></span> 确认订单信息<strong>Confirm order</strong> </h1> <div class="cart_step"> <ul> <li class="item"><span>1</span>放进购物车</li> <li class="selected"><span>2</span>填写订单信息</li> <li class="last"><span>3</span>支付/确定订单</li> </ul> </div> <div class="line20"></div> <form name="order_form" id="order_form" url="/tools/submit_ajax.ashx?action=order_save"> <h3 class="bar_tit">1、收货信息</h3> <div class="form_box"> <dl> <dt>收货人姓名：</dt> <dd><input name="accept_name" id="accept_name" type="text" class="input txt wide" value="发vdxgsd" datatype="s2-20" sucmsg=" "><span class="Validform_checktip">*收货人姓名</span></dd> </dl> <dl> <dt>收货地址：</dt> <dd><input name="address" id="address" type="text" class="input txt" value="广东省佛山市" datatype="*2-100" sucmsg=" " style="width:300px;"><span class="Validform_checktip">*收货人的详细地址</span></dd> </dl> <dl> <dt>邮政编码：</dt> <dd><input name="post_code" id="post_code" type="text" class="input txt"><span class="Validform_checktip">所在地区的邮政编码，非必填</span></dd> </dl> <dl> <dt>手机号码：</dt> <dd><input name="mobile" id="mobile" type="text" class="input txt" value="13256202154" datatype="m" sucmsg=" "><span class="Validform_checktip">*收货人的手机号码</span></dd> </dl> <dl> <dt>联系电话：</dt> <dd><input name="telphone" id="telphone" type="text" class="input txt" value=""><span class="Validform_checktip">收货人的联系电话，非必填</span></dd> </dl> </div> <div class="line20"></div> <h3 class="bar_tit">2、支付方式</h3> <ul class="item_box"> <!--取得一个DataTable--> <li> <label><input name="payment_id" type="radio" οnclick="PaymentAmountTotal(this);" value="1"><input name="payment_price" type="hidden" value="0.00">货到付款 <em>手续费：0.00元</em></label> </li> <li> <label><input name="payment_id" type="radio" οnclick="PaymentAmountTotal(this);" value="2"><input name="payment_price" type="hidden" value="0.00">账户余额 <em>手续费：0.00元</em></label> </li> <li> <label><input name="payment_id" type="radio" οnclick="PaymentAmountTotal(this);" value="3"><input name="payment_price" type="hidden" value="0.00">支付宝 <em>手续费：0.00元</em></label> </li> <li> <label><input name="payment_id" type="radio" οnclick="PaymentAmountTotal(this);" value="4" datatype="*" sucmsg=" "><input name="payment_price" type="hidden" value="0.00">财付通 <em>手续费：0.00元</em><span class="Validform_checktip"></span></label> </li> </ul> <div class="line20"></div> <h3 class="bar_tit">3、配送方式</h3> <ul class="item_box"> <!--取得一个DataTable--> <li> <label><input name="express_id" type="radio" οnclick="FreightAmountTotal(this);" value="1"><input name="express_price" type="hidden" value="20.00">顺丰快递 <em>费用：20.00元</em></label> </li> <li> <label><input name="express_id" type="radio" οnclick="FreightAmountTotal(this);" value="2" datatype="*" sucmsg=" "><input name="express_price" type="hidden" value="14.00">韵达快递 <em>费用：14.00元</em><span class="Validform_checktip"></span></label> </li> </ul> <div class="line20"></div> <h3 class="bar_tit">4、商品清单</h3> <table width="938" border="0" align="center" cellpadding="8" cellspacing="0" class="cart_table"> <tbody><tr> <th width="64"></th> <th align="left">商品名称</th> <th width="110" align="center">颜色</th> <th width="80" align="center">积分</th> <th width="80" align="center">单价</th> <th width="80" align="center">数量</th> <th width="80" align="center">优惠</th> <th width="100" align="center">金额小计</th> <th width="100" align="center">积分小计</th> </tr> <tr> <td><a target="_blank" href="/goods/show-63.html"><img src="/upload/201505/04/201505041444321122.jpg" class="img"></a></td> <td><a target="_blank" href="/goods/show-63.html">卡帝仕正品超薄运动手表防水手表户外手表大表盘男表时装表</a></td> <!--颜色--> <td align="center"><input name="goods_color" type="hidden" value=""></td> <td align="center"> + 10 </td> <td align="center">￥5500.00<input name="goods_price" type="hidden" value="5500.00"></td> <td align="center">1</td> <td align="center">￥<label name="discount_amount">5500</label></td> <td align="center"><font color="#FF0000" size="2">￥<label name="real_amount">5500</label></font></td> <td align="center"> <font color="#FF0000" size="2"> + <label name="point_count">10</label> </font> </td> <td><input id="car_id" name="car_id" type="hidden" value="63"></td> </tr> </tbody></table> <div class="line20"></div> <h3 class="bar_tit">5、结算信息</h3> <div> <div class="left"> <h4>订单留言<span>字数控制在100个字符内</span></h4> <textarea name="message" class="input" style="width:250px;height:35px;"></textarea> </div> <div class="right" style="text-align:right;line-height:40px;"> 商品件数：<font color="#FF0000">1</font> 件 总积分：<font color="#FF0000">10</font> 分 商品金额：<font color="#FF0000">￥<label id="goods_amount">5500</label></font> + 运费：<font color="#FF0000">￥<label id="express_fee">0.00</label></font> + 支付手续费：<font color="#FF0000">￥<label id="payment_fee">0.00</label></font> <br> <b class="font18">应付总金额：<font color="#FF0000">￥<label id="order_amount">5500</label></font></b> </div> </div> <div class="line20"></div> <div class="right"> <a class="btn" href="/shopping/cart.html">返回修改</a> <input id="btnSubmit" name="btnSubmit" type="submit" value="确认提交" class="btn btn-success marL10"> </div> <div class="clea
最低0.47元/天 解锁文章
840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
