fe / YOHOBUYWAP · Commits

Go to a project

Authored by weiqingting
Commit 9c2dbf274496b5f4d19d2ded0274a2de5de8712a 1 parent 99aa9bc7

订单确认

Inline Side-by-side
Showing 4 changed files with 360 additions and 3 deletions
@@ -2,7 +2,143 @@ @@ -2,7 +2,143 @@
2 <div class="order-save-page yoho-page clearfix"> 2 <div class="order-save-page yoho-page clearfix">
3 {{# orderSave}} 3 {{# orderSave}}
4 <div class="order-edit"></div> 4 <div class="order-edit"></div>
5 - <div class="order-pay"></div> 5 + <div class="order-pay">
  6 + <div class="pay-wapper">
  7 + <table>
  8 + <thead>
  9 + <tr>
  10 + <th style="width:40%;">
  11 + 商品信息
  12 + </th>
  13 + <th style="width:10%;">单价（元）</th>
  14 + <th style="width:10%;">返YOHO币</th>
  15 + <th style="width:10%;">数量</th>
  16 + <th style="width:10%;">小计（元）</th>
  17 + <th style="width:20%;">商品总价（元）</th>
  18 + </tr>
  19 + </thead>
  20 + <tbody>
  21 + {{#each orderProducts}}
  22 + <tr>
  23 + <td>
  24 + <div class="pay-pro">
  25 + <a class="pay-pro-icon" href="#"><img src="http://img04.static.yohobuy.com/thumb/2015/08/25/08/012622ad14f32470d56a0b1da5d533a7e2-0060x0060-2-goodsimg.jpg" /></a>
  26 + <p class="pay-pro-info">
  27 + <a href="#">Eight Guys 破洞束口牛仔裤</a>
  28 + <span>颜色：蓝色 尺码：L</span>
  29 + </p>
  30 + </div>
  31 + </td>
  32 + <td>{{price}}</td>
  33 + <td>{{coin}}</td>
  34 + <td>{{count}}</td>
  35 + <td></td>
  36 + <td></td>
  37 + </tr>
  38 + {{/each}}
  39 + </tbody>
  40 + </table>
  41 + <!--YOHO-->
  42 + <div class="play-content clearfix">
  43 + <div class="play-left">
  44 + <dl class="play-piao-pan pan">
  45 + <dt>索要发票</dt>
  46 + <dd>
  47 + <div class="play-pan">
  48 + <ul>
  49 + <li><label>发票抬头 :</label><input type="text" class="textbox" id="piaodesc" /></li>
  50 + <li><label>发票类型 :</label> <select class="dropdown" id="piaotype">
  51 + <option value="-1">请选择</option>
  52 + </select> </li>
  53 + </ul>
  54 + </div>
  55 + </dd>
  56 + </dl>
  57 + <dl class="play-remark-pan pan">
  58 + <dt>添加备注信息</dt>
  59 + <dd>
  60 + <div class="play-pan">
  61 + <textarea class="textbox" id="notedesc"></textarea>
  62 + <p class="note">声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效。</p>
  63 + <p>是否打印价格：
  64 + <input name="isPP" id="isPPY" type="radio" value="Y" checked="">
  65 + <label for="isPPY">是</label>
  66 + <input name="isPP" id="isPPN" type="radio" value="N">
  67 + <label for="isPPN">否</label>
  68 + （如：送朋友的商品可不打印价格哦！)
  69 + </p>
  70 + </div>
  71 + </dd>
  72 + </dl>
  73 + </div>
  74 + <div class="play-right">
  75 + <ul class="play-total">
  76 + <li><label>发票抬头:</label>+￥<em>0.00</em></li>
  77 + <li><label>活动:</label>-￥<em>0.00</em></li>
  78 + <li class="red"><label>运费:</label>+￥<em>0.00</em></li>
  79 + <li><label>优惠券支付<a href="javascript:void(0);" to="play-juan-pan">[修改]</a>:</label>-￥<em>0.00</em></li>
  80 + <li><label>使用YOHO币<a href="javascript:void(0);" to="play-bi-pan">[修改]</a>:</label>-￥<em>0.00</em></li>
  81 + </ul>
  82 + <dl class="play-juan-pan pan">
  83 + <dt>使用优惠卷支付</dt>
  84 + <dd>
  85 + <div class="play-pan">
  86 + <p class="strong">请选择您要使用的优惠券： </p>
  87 + <p class="strong orange">(OUTLET商品除免邮券外不可使用优惠券)</p>
  88 + <p class="strong orange">(订单中使用优惠券将不赠送商品返还的YOHO币)</p>
  89 + <div class="play-juan">
  90 + <ul>
  91 + <li>
  92 + <input name="juangroup" type="radio" value="">
  93 + <label>直接输入优惠码： </label>
  94 + <input type="text" class="textbox" id="juancode" />
  95 + </li>
  96 + <li>
  97 + <input name="juangroup" type="radio" value="">
  98 + <label>YOHOXXXXXXX免费卷 </label>
  99 + </li>
  100 + </ul>
  101 +
  102 + </div>
  103 +
  104 + <p class="errtip red"></p>
  105 + <div class="btn-group clearfix">
  106 + <input type="button" class="ok" value="确定" id="juansubmit"/>
  107 + <input type="button" class="cancel" value="取消"/>
  108 + </div>
  109 + </div>
  110 + </dd>
  111 + </dl>
  112 + <dl class="play-bi-pan pan">
  113 + <dt>使用YOHO币支付</dt>
  114 + <dd>
  115 + <div class="play-pan">
  116 + <div class="strong">
  117 + 使用YOHO币支付：
  118 + <input type="text" class="textbox" id="biprice" />
  119 + 元
  120 + </div>
  121 + <p >
  122 + 您目前有YOHO币 <em class="strong">100</em> 个
  123 + </p>
  124 + <div class="btn-group clearfix">
  125 + <input type="button" class="ok" value="确定" id="bisubmit"/>
  126 + <input type="button" class="cancel" value="取消"/>
  127 + </div>
  128 + </div>
  129 + </dd>
  130 + </dl>
  131 + </div>
  132 + </div>
  133 + </div>
  134 +
  135 + <div class="to-play">
  136 + <p>您需要实际支付金额：<em>0.00</em>元</p>
  137 + <div class="btn-group clearfix">
  138 + <input type="button" class="submit" value="确定"/>
  139 + </div>
  140 + </div>
  141 + </div>
6 {{/ orderSave}} 142 {{/ orderSave}}
7 </div> 143 </div>
8 {{> layout/footer}} 144 {{> layout/footer}}
  1 +/**
  2 + * @description: 订单保存
  3 + * @time: 2015/12/21
  4 + */
  5 + var $ = require('yoho.jquery');
  6 +
  7 +
  8 +var Order = {
  9 + Data: {
  10 + product: 0,
  11 + activity: 0,
  12 + carriage: 0,
  13 + juan: 0,
  14 + yohocoin: 0
  15 + },
  16 + UI: {
  17 + e: {
  18 + $pan: $('.pan'),
  19 + $jc: $('#juancode'),
  20 + $bp: $('#biprice'),
  21 + $statistics: $('li', '.play-total'),
  22 + $tobi: $('p em', '.play-bi-pan .play-pan'),
  23 + $cancel: $('.cancel', '.btn-group'),
  24 + $total: $('em', '.to-play'),
  25 + $tbody: $('table tbody', '.pay-wapper')
  26 + },
  27 + init: function() {
  28 + var e = this.e,
  29 + d = Order.Data,
  30 + c = Order.Common;
  31 +
  32 + /*初始化产品价格*/
  33 + e.$tbody.find('tr').each(function(index) {
  34 + var td = $(this).find('td');
  35 + var len = e.$tbody.find('tr').length;
  36 + var subtotal = parseFloat(td.eq(1).html()) * parseInt(td.eq(3).html());
  37 +
  38 + td.eq(4).html(c.__fixed(subtotal));
  39 + d.product += subtotal;
  40 + if (!index) {
  41 + td.last().attr('rowspan', len);
  42 + } else {
  43 + td.last().remove();
  44 + }
  45 + if (index === len - 1) {
  46 + e.$tbody.find('tr').eq(0).find('td').last().html('<strong>' + c.__fixed(d.product) + '</strong>');
  47 + }
  48 + });
  49 +
  50 + /*初始化价格*/
  51 + this.render();
  52 +
  53 + /*点击pan dt 打开dd*/
  54 + e.$pan.find('dt').click(function() {
  55 + var pan = $(this).parent('dl.pan');
  56 +
  57 + if (pan.find('dd').is(':hidden')) {
  58 + c.winShow(pan);
  59 + } else {
  60 + c.winHide(pan);
  61 + }
  62 +
  63 + });
  64 +
  65 + /*使用优惠卷支付 下面的文本框*/
  66 + e.$jc.focus(function() {
  67 + $(this).prev('label').prev(':radio').attr('checked', true);
  68 + }).change(function() {
  69 + $(this).prev('label').prev(':radio').val($(this).val());
  70 + });
  71 +
  72 + /*使用YOHO币支付*/
  73 + e.$bp.data('tobi', e.$tobi.html());
  74 + e.$bp.keyup(function() {
  75 + var bi = c.enterNUM($(this).val(), $(this).data('tobi'));
  76 +
  77 + $(this).val(bi);
  78 + }).change(function() {
  79 + var bi = c.enterNUM($(this).val(), $(this).data('tobi'));
  80 +
  81 + $(this).val(bi);
  82 + });
  83 +
  84 + /*取消关闭小窗口*/
  85 + e.$cancel.click(function() {
  86 + var p = $(this).parents('.pan');
  87 +
  88 + p.find('dt').show();
  89 + p.find('dd').hide();
  90 + });
  91 +
  92 + e.$statistics.slice(3, 5).find('a').click(function() {
  93 + var pan = $('.' + $(this).attr('to'));
  94 +
  95 + c.winShow(pan);
  96 + });
  97 + },
  98 + render: function() {
  99 + var e = this.e,
  100 + d = Order.Data,
  101 + c = Order.Common;
  102 +
  103 + e.$total.html('0.00');
  104 + e.$statistics.slice(3, 5).hide();
  105 + e.$statistics.slice(2, 5).find('em').html('0.00');
  106 + if (d.carriage) {
  107 + e.$statistics.eq(2).find('em').html(c.__fixed(d.carriage));
  108 + }
  109 + if (d.juan) {
  110 + e.$statistics.eq(3).show().find('em').html(c.__fixed(d.juan));
  111 + }
  112 + if (d.yohocoin) {
  113 + e.$statistics.eq(4).show().find('em').html(c.__fixed(d.yohocoin));
  114 + }
  115 +
  116 + e.$total.html(c.__fixed(c.calucate()));
  117 +
  118 + }
  119 + },
  120 + Common: {
  121 + enterNUM: function(str1, str2) {
  122 + str1 = str1.replace(/[^\d]/g, '');
  123 + if (str1 && str2) {
  124 + str1 = parseInt(str1);
  125 + str2 = parseInt(str2);
  126 + if (str1 > str2) {
  127 + str1 = str2;
  128 + }
  129 + }
  130 + return str1;
  131 + },
  132 + calucate: function() {
  133 + var p = Order.Data;
  134 +
  135 + $.each(Order.Data, function(key, index) {
  136 + p[key] = parseFloat(Order.Data[key]);
  137 + });
  138 + return p.product - p.activity + p.carriage - p.juan - p.yohocoin;
  139 + },
  140 + winShow: function(pan) {
  141 + pan.find('dt').show();
  142 + pan.find('dd').show();
  143 + if (pan.attr('class').match(/(-bi-)|(-juan-)/g)) {
  144 + pan.find('dt').hide();
  145 + }
  146 + },
  147 + winHide: function(pan) {
  148 + pan.find('dt').show();
  149 + pan.find('dd').hide();
  150 + },
  151 + __fixed(str) {
  152 + return parseFloat(str).toFixed(2);
  153 + }
  154 + },
  155 + Submit: {
  156 + e: {
  157 + $juanok: $('#juansubmit'),
  158 + $juantip: $('.errtip', '.play-juan-pan'),
  159 + $biok: $('#bisubmit')
  160 + },
  161 + init: function() {
  162 + var e = this.e,
  163 + d = Order.Data,
  164 + c = Order.Common,
  165 + u = Order.UI;
  166 + var options;
  167 +
  168 + /*点击 优惠卷支付 确认按钮*/
  169 + e.$juanok.click(function() {
  170 + var $jgroup = $('input[name="juangroup"]:checked');
  171 + var pan = $(this).parents('.pan');
  172 +
  173 + if ($jgroup.val()) {
  174 + options = {
  175 + url: '/Order/save/priceByCode',
  176 + type: 'post',
  177 + data: {
  178 + code: $jgroup.val()
  179 + },
  180 + success: function(data) {
  181 + if (data.code === 200) {
  182 + if (data.price) {
  183 + d.juan = data.price;
  184 + Order.UI.render();
  185 + c.winHide(pan);
  186 + return;
  187 + }
  188 + u.render();
  189 + }
  190 + e.$juantip.html(data.msg);
  191 + },
  192 + error: function() {
  193 + e.$juantip.html('网络出现错误~');
  194 + }
  195 + };
  196 +
  197 + $.ajax(options);
  198 + }
  199 + });
  200 + /*点击 YOHO币支付 确认按钮*/
  201 + e.$biok.click(function() {
  202 + var pan = $(this).parents('.pan');
  203 +
  204 + d.yohocoin = parseFloat(u.e.$bp.val()) / 100;
  205 + u.render();
  206 + c.winHide(pan);
  207 + return;
  208 + });
  209 + }
  210 + }
  211 +};
  212 +
  213 +Order.Data.activity = 0;
  214 +Order.Data.carriage = 0;
  215 +
  216 +Order.UI.init();
  217 +Order.Submit.init();
@@ -168,6 +168,10 @@ @@ -168,6 +168,10 @@
168 text-align: left; 168 text-align: left;
169 display: inline-block; 169 display: inline-block;
170 } 170 }
  171 + a{
  172 + color: #468fa2;
  173 + text-decoration: underline;
  174 + }
171 } 175 }
172 .pan{ 176 .pan{
173 text-align: right; 177 text-align: right;
@@ -13,8 +13,8 @@ class SaveController extends AbstractAction @@ -13,8 +13,8 @@ class SaveController extends AbstractAction
13 'orderSavePage' => true, 13 'orderSavePage' => true,
14 'orderSave'=>array( 14 'orderSave'=>array(
15 'orderProducts'=>array( 15 'orderProducts'=>array(
16 - array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色：蓝色 尺码：L",'unitprice'=>'179.00','currency'=>'0','count'=>'0'),  
17 - array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色：蓝色 尺码：L",'unitprice'=>'179.00','currency'=>'0','count'=>'0') 16 + array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色：蓝色 尺码：L",'price'=>'179.00','coin'=>'0','count'=>'1'),
  17 + array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色：蓝色 尺码：L",'price'=>'179.00','coin'=>'0','count'=>'1')
18 ) 18 )
19 ) 19 )
20 ); 20 );