购物车功能实现

时间  2020-12-30
原文   原文链接

表有汇PC端购物车功能实现


加入购物车后的结算功能

购物车页面：

   

购物车页面html代码：

[html]  view plain  copy
  1. <div class="cart_box">  
  2.       
  3.     <!--购物车-->  
  4.     <h1 class="main_tit">  
  5.       <span><a onclick="DeleteClear(this,'/','0');" href="javascript:;">清空购物车</a></span>  
  6.       我的购物车<strong>Shopping Cart</strong>  
  7.     </h1>  
  8.     <div class="cart_step">  
  9.       <ul>  
  10.         <li class="selected"><span>1</span>放进购物车</li>  
  11.         <li><span>2</span>填写订单信息</li>  
  12.         <li class="last"><span>3</span>支付/确定订单</li>  
  13.       </ul>  
  14.     </div>  
  15.     <div class="line20"></div>  
  16.       
  17.     <table width="938" border="0" align="center" cellpadding="8" cellspacing="0" class="cart_table">  
  18.       <tbody><tr>  
  19.         <th width="64"></th>  
  20.         <th align="left">商品名称</th>  
  21.         <th width="110" align="center">颜色</th>  
  22.         <th width="80" align="center">积分</th>  
  23.         <th width="80" align="center">单价</th>  
  24.         <th width="80" align="center">数量</th>  
  25.         <!--<th width="80" align="center">优惠</th>-->  
  26.         <th width="100" align="center">金额小计</th>  
  27.         <th width="100" align="center">积分小计</th>  
  28.         <th width="50" align="center">操作</th>  
  29.       </tr>  
  30.         
  31.         
  32.       <tr>  
  33.         <td><a target="_blank" href="/goods/show-62.html"><img src="/upload/201505/04/201505041442488793.jpg" class="img"></a></td>  
  34.         <td><a target="_blank" href="/goods/show-62.html">韩国乐智迅时尚正品手表学生男表女表运动防水糖果色果冻表石英表</a></td>  
  35.             
  36.         <!--颜色-->  
  37.         <td align="center">黑色<input name="goods_color" type="hidden" value="黑色"></td>  
  38.   
  39.           <!--积分-->         
  40.        <td align="center">  
  41.             
  42.           +  
  43.             
  44.           10  
  45.         </td>  
  46.         <!--价格-->  
  47.         <td align="center">￥2600.00<input name="goods_price" type="hidden" value="2600.00"></td><!-- value=用户价格 -->  
  48.         <!--数量-->  
  49.         <td align="center">  
  50.           <a href="javascript:;" class="reduce" title="减一" onclick="CartComputNum(this, '/', '62', -1);">减一</a>  
  51.           <input type="text" name="goods_quantity" class="input" style="width:30px;text-align:center;ime-mode:Disabled;" value="1" onblur="CartAmountTotal(this, '/', '62');" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">  
  52.           <a href="javascript:;" class="subjoin" title="加一" onclick="CartComputNum(this,'/', '62', 1);">加一</a>  
  53.         </td>  
  54.         <!--优惠-->  
  55.         <!--<td align="center">￥<label name="discount_amount"></label></td>-->  
  56.         <!--金额小记-->                                                                       <!--   string转换成int   -->  
  57.         <td align="center"><font color="#FF0000" size="2">￥<label name="real_amount">2600</label></font></td>  
  58.         <td align="center">  
  59.           <font color="#FF0000" size="2">  
  60.               
  61.             +  
  62.               
  63.             <label name="point_count">10</label>  
  64.           </font>  
  65.         </td>  
  66.         <td align="center"><a onclick="DeleteCart(this,'/','62');" href="javascript:;">删除</a></td>  
  67.       </tr>  
  68.              
  69.           
  70.       <tr>  
  71.         <th colspan="9" align="right">  
  72.           商品件数：1 件    商品总金额（不含运费）：<font color="#FF0000" size="2">￥2600</font>元    总积分：<font color="#FF0000" size="2">10分</font>  
  73.         </th>  
  74.       </tr>  
  75.         
  76.     </tbody></table>  
  77.     <div class="line20"></div>  
  78.     <div class="right">  
  79.       <a class="btn" href="/index.html">继续购物</a>  
  80.         
  81.       <a class="btn btn-success marL10" href="/shopping/confirm.html">马上去结算</a>  
  82.         
  83.     </div>  
  84.     <div class="clear"></div>  
  85.     <!--/购物车-->  
  86.       
  87.       
  88.   </div>  

对照一下商品的颜色、数量等是否选择正确，如果无误可以点击马上结算按钮，进入订单信息界面，填写信息

订单信息界面：


订单信息页面html代码：

[html]  view plain  copy
  1. <div class="cart_box">  
  2.       
  3.     <link rel="stylesheet" href="/css/validate.css">  
  4.     <script type="text/javascript" src="/scripts/jquery/jquery.form.min.js"></script>  
  5.     <script type="text/javascript" src="/scripts/jquery/Validform_v5.3.2_min.js"></script>  
  6.     <script type="text/javascript">  
  7.         $(function () {  
  8.             //表单提交  
  9.             AjaxInitForm('order_form', 'btnSubmit', 0);  
  10.         });  
  11.     </script>  
  12.     <!--结算中心-->  
  13.     <h1 class="main_tit">  
  14.       <span><a href="/shopping/cart.html">返回</a></span>  
  15.       确认订单信息<strong>Confirm order</strong>  
  16.     </h1>  
  17.   
  18.     <div class="cart_step">  
  19.       <ul>  
  20.         <li class="item"><span>1</span>放进购物车</li>  
  21.         <li class="selected"><span>2</span>填写订单信息</li>  
  22.         <li class="last"><span>3</span>支付/确定订单</li>  
  23.       </ul>  
  24.     </div>  
  25.   
  26.     <div class="line20"></div>  
  27.       
  28.     <form name="order_form" id="order_form" url="/tools/submit_ajax.ashx?action=order_save">  
  29.     <h3 class="bar_tit">1、收货信息</h3>  
  30.     <div class="form_box">  
  31.       <dl>  
  32.         <dt>收货人姓名：</dt>  
  33.         <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>  
  34.       </dl>  
  35.       <dl>  
  36.         <dt>收货地址：</dt>  
  37.         <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>  
  38.       </dl>  
  39.       <dl>  
  40.         <dt>邮政编码：</dt>  
  41.         <dd><input name="post_code" id="post_code" type="text" class="input txt"><span class="Validform_checktip">所在地区的邮政编码，非必填</span></dd>  
  42.       </dl>  
  43.       <dl>  
  44.         <dt>手机号码：</dt>  
  45.         <dd><input name="mobile" id="mobile" type="text" class="input txt" value="13256202154" datatype="m" sucmsg=" "><span class="Validform_checktip">*收货人的手机号码</span></dd>  
  46.       </dl>  
  47.       <dl>  
  48.         <dt>联系电话：</dt>  
  49.         <dd><input name="telphone" id="telphone" type="text" class="input txt" value=""><span class="Validform_checktip">收货人的联系电话，非必填</span></dd>  
  50.       </dl>  
  51.     </div>  
  52.       
  53.     <div class="line20"></div>  
  54.     <h3 class="bar_tit">2、支付方式</h3>  
  55.     <ul class="item_box">  
  56.        <!--取得一个DataTable-->  
  57.         
  58.       <li>  
  59.           
  60.         <label><input name="payment_id" type="radio" onclick="PaymentAmountTotal(this);" value="1"><input name="payment_price" type="hidden" value="0.00">货到付款  
  61.           
  62.         <em>手续费：0.00元</em></label>  
  63.       </li>  
  64.         
  65.       <li>  
  66.           
  67.         <label><input name="payment_id" type="radio" onclick="PaymentAmountTotal(this);" value="2"><input name="payment_price" type="hidden" value="0.00">账户余额  
  68.           
  69.         <em>手续费：0.00元</em></label>  
  70.       </li>  
  71.         
  72.       <li>  
  73.           
  74.         <label><input name="payment_id" type="radio" onclick="PaymentAmountTotal(this);" value="3"><input name="payment_price" type="hidden" value="0.00">支付宝  
  75.           
  76.         <em>手续费：0.00元</em></label>  
  77.       </li>  
  78.         
  79.       <li>  
  80.           
  81.         <label><input name="payment_id" type="radio" onclick="PaymentAmountTotal(this);" value="4" datatype="*" sucmsg=" "><input name="payment_price" type="hidden" value="0.00">财付通  
  82.           
  83.         <em>手续费：0.00元</em><span class="Validform_checktip"></span></label>  
  84.       </li>  
  85.         
  86.     </ul>  
  87.       
  88.     <div class="line20"></div>  
  89.     <h3 class="bar_tit">3、配送方式</h3>  
  90.     <ul class="item_box">  
  91.        <!--取得一个DataTable-->  
  92.         
  93.       <li>  
  94.           
  95.         <label><input name="express_id" type="radio" onclick="FreightAmountTotal(this);" value="1"><input name="express_price" type="hidden" value="20.00">顺丰快递  
  96.           
  97.         <em>费用：20.00元</em></label>  
  98.       </li>  
  99.         
  100.       <li>  
  101.           
  102.         <label><input name="express_id" type="radio" onclick="FreightAmountTotal(this);" value="2" datatype="*" sucmsg=" "><input name="express_price" type="hidden" value="14.00">韵达快递  
  103.           
  104.         <em>费用：14.00元</em><span class="Validform_checktip"></span></label>  
  105.       </li>  
  106.         
  107.     </ul>  
  108.       
  109.     <div class="line20"></div>  
  110.     <h3 class="bar_tit">4、商品清单</h3>  
  111.     <table width="938" border="0" align="center" cellpadding="8" cellspacing="0" class="cart_table">  
  112.       <tbody><tr>  
  113.         <th width="64"></th>  
  114.         <th align="left">商品名称</th>  
  115.         <th width="110" align="center">颜色</th>  
  116.         <th width="80" align="center">积分</th>  
  117.         <th width="80" align="center">单价</th>  
  118.         <th width="80" align="center">数量</th>  
  119.         <th width="80" align="center">优惠</th>  
  120.         <th width="100" align="center">金额小计</th>  
  121.         <th width="100" align="center">积分小计</th>  
  122.       </tr>  
  123.         
  124.       <tr>  
  125.         <td><a target="_blank" href="/goods/show-63.html"><img src="/upload/201505/04/201505041444321122.jpg" class="img"></a></td>  
  126.         <td><a target="_blank" href="/goods/show-63.html">卡帝仕正品超薄运动手表防水手表户外手表大表盘男表时装表</a></td>  
  127.         <!--颜色-->  
  128.         <td align="center"><input name="goods_color" type="hidden" value=""></td>  
  129.   
  130.         <td align="center">  
  131.             
  132.           +  
  133.             
  134.           10  
  135.         </td>  
  136.         <td align="center">￥5500.00<input name="goods_price" type="hidden" value="5500.00"></td>  
  137.         <td align="center">1</td>  
  138.         <td align="center">￥<label name="discount_amount">5500</label></td>  
  139.         <td align="center"><font color="#FF0000" size="2">￥<label name="real_amount">5500</label></font></td>  
  140.         <td align="center">  
  141.           <font color="#FF0000" size="2">  
  142.               
  143.             +  
  144.               
  145.             <label name="point_count">10</label>  
  146.             </font>  
  147.         </td>  
  148.         <td><input id="car_id" name="car_id" type="hidden" value="63"></td>  
  149.       </tr>  
  150.         
  151.     </tbody></table>  
  152.       
  153.     <div class="line20"></div>  
  154.     <h3 class="bar_tit">5、结算信息</h3>  
  155.     <div>  
  156.       <div class="left">  
  157.         <h4>订单留言<span>字数控制在100个字符内</span></h4>  
  158.         <textarea name="message" class="input" style="width:250px;height:35px;"></textarea>  
  159.       </div>  
  160.         
  161.       <div class="right" style="text-align:right;line-height:40px;">  
  162.         商品件数：<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>  
  163.           
  164.         <br>  
  165.         <b class="font18">应付总金额：<font color="#FF0000">￥<label id="order_amount">5500</label></font></b>  
  166.       </div>  
  167.     </div>  
  168.   
  169.     <div class="line20"></div>  
  170.     <div class="right">  
  171.       <a class="btn" href="/shopping/cart.html">返回修改</a>  
  172.         
  173.       <input id="btnSubmit" name="btnSubmit" type="submit" value="确认提交" class="btn btn-success marL10">  
  174.         
  175.     </div>  
  176.     <div class="clear"></div>  
  177.     </form>  
  178.     <!--/结算中心-->  
  179.       
  180.   </div>  

填写好必要的信息(如：收货人姓名、地址、手机号码、快递、付款方式等)，点击确认提交按钮进入支付界面；

支付界面：

支付页面html代码：

     

[html]  view plain  copy
  1. <div class="cart_box">  
  2.     <h1 class="main_tit">  
  3.       支付中心<strong>Payment</strong>  
  4.     </h1>  
  5.       
  6.     <!--提交支付-->  
  7.       
  8.     <!--提交支付-->  
  9.     <form id="pay_form" name="pay_form" method="post" action="/api/payment/balance/index.aspx" target="_blank">  
  10.     <input id="pay_order_no" name="pay_order_no" type="hidden" value="b15061907244648">      <!--hidden-->  
  11.     <input id="pay_order_amount" name="pay_order_amount" type="hidden" value="2614.00">  
  12.  target="_blank">  
  13.     <input id="pay_order_no" name="pay_order_no" type="hidden" value="b15061907244648">      <!--hidden-->  
  14.     <input id="pay_order_amount" name="pay_order_amount" type="hidden" value="2614.00">  
  15.     <input id="pay_user_name" name="pay_user_name" type="hidden" value="admin00">="pay_order_no" name="pay_order_no" type
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程