購物車功能實現

時間  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教程