Authored by weiqingting

订单确认

... ... @@ -2,7 +2,143 @@
<div class="order-save-page yoho-page clearfix">
{{# orderSave}}
<div class="order-edit"></div>
<div class="order-pay"></div>
<div class="order-pay">
<div class="pay-wapper">
<table>
<thead>
<tr>
<th style="width:40%;">
商品信息
</th>
<th style="width:10%;">单价(元)</th>
<th style="width:10%;">返YOHO币</th>
<th style="width:10%;">数量</th>
<th style="width:10%;">小计(元)</th>
<th style="width:20%;">商品总价(元)</th>
</tr>
</thead>
<tbody>
{{#each orderProducts}}
<tr>
<td>
<div class="pay-pro">
<a class="pay-pro-icon" href="#"><img src="http://img04.static.yohobuy.com/thumb/2015/08/25/08/012622ad14f32470d56a0b1da5d533a7e2-0060x0060-2-goodsimg.jpg" /></a>
<p class="pay-pro-info">
<a href="#">Eight Guys 破洞束口牛仔裤</a>
<span>颜色:蓝色 尺码:L</span>
</p>
</div>
</td>
<td>{{price}}</td>
<td>{{coin}}</td>
<td>{{count}}</td>
<td></td>
<td></td>
</tr>
{{/each}}
</tbody>
</table>
<!--YOHO-->
<div class="play-content clearfix">
<div class="play-left">
<dl class="play-piao-pan pan">
<dt>索要发票</dt>
<dd>
<div class="play-pan">
<ul>
<li><label>发票抬头 :</label><input type="text" class="textbox" id="piaodesc" /></li>
<li><label>发票类型 :</label> <select class="dropdown" id="piaotype">
<option value="-1">请选择</option>
</select> </li>
</ul>
</div>
</dd>
</dl>
<dl class="play-remark-pan pan">
<dt>添加备注信息</dt>
<dd>
<div class="play-pan">
<textarea class="textbox" id="notedesc"></textarea>
<p class="note">声明:备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准,备注无效。</p>
<p>是否打印价格:
<input name="isPP" id="isPPY" type="radio" value="Y" checked="">
<label for="isPPY">是</label>
<input name="isPP" id="isPPN" type="radio" value="N">
<label for="isPPN">否</label>
(如:送朋友的商品可不打印价格哦!)
</p>
</div>
</dd>
</dl>
</div>
<div class="play-right">
<ul class="play-total">
<li><label>发票抬头:</label>+¥<em>0.00</em></li>
<li><label>活动:</label>-¥<em>0.00</em></li>
<li class="red"><label>运费:</label>+¥<em>0.00</em></li>
<li><label>优惠券支付<a href="javascript:void(0);" to="play-juan-pan">[修改]</a>:</label>-¥<em>0.00</em></li>
<li><label>使用YOHO币<a href="javascript:void(0);" to="play-bi-pan">[修改]</a>:</label>-¥<em>0.00</em></li>
</ul>
<dl class="play-juan-pan pan">
<dt>使用优惠卷支付</dt>
<dd>
<div class="play-pan">
<p class="strong">请选择您要使用的优惠券: </p>
<p class="strong orange">(OUTLET商品除免邮券外不可使用优惠券)</p>
<p class="strong orange">(订单中使用优惠券将不赠送商品返还的YOHO币)</p>
<div class="play-juan">
<ul>
<li>
<input name="juangroup" type="radio" value="">
<label>直接输入优惠码: </label>
<input type="text" class="textbox" id="juancode" />
</li>
<li>
<input name="juangroup" type="radio" value="">
<label>YOHOXXXXXXX免费卷 </label>
</li>
</ul>
</div>
<p class="errtip red"></p>
<div class="btn-group clearfix">
<input type="button" class="ok" value="确定" id="juansubmit"/>
<input type="button" class="cancel" value="取消"/>
</div>
</div>
</dd>
</dl>
<dl class="play-bi-pan pan">
<dt>使用YOHO币支付</dt>
<dd>
<div class="play-pan">
<div class="strong">
使用YOHO币支付:
<input type="text" class="textbox" id="biprice" />
</div>
<p >
您目前有YOHO币 <em class="strong">100</em>
</p>
<div class="btn-group clearfix">
<input type="button" class="ok" value="确定" id="bisubmit"/>
<input type="button" class="cancel" value="取消"/>
</div>
</div>
</dd>
</dl>
</div>
</div>
</div>
<div class="to-play">
<p>您需要实际支付金额:<em>0.00</em>元</p>
<div class="btn-group clearfix">
<input type="button" class="submit" value="确定"/>
</div>
</div>
</div>
{{/ orderSave}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
/**
* @description: 订单保存
* @time: 2015/12/21
*/
var $ = require('yoho.jquery');
var Order = {
Data: {
product: 0,
activity: 0,
carriage: 0,
juan: 0,
yohocoin: 0
},
UI: {
e: {
$pan: $('.pan'),
$jc: $('#juancode'),
$bp: $('#biprice'),
$statistics: $('li', '.play-total'),
$tobi: $('p em', '.play-bi-pan .play-pan'),
$cancel: $('.cancel', '.btn-group'),
$total: $('em', '.to-play'),
$tbody: $('table tbody', '.pay-wapper')
},
init: function() {
var e = this.e,
d = Order.Data,
c = Order.Common;
/*初始化产品价格*/
e.$tbody.find('tr').each(function(index) {
var td = $(this).find('td');
var len = e.$tbody.find('tr').length;
var subtotal = parseFloat(td.eq(1).html()) * parseInt(td.eq(3).html());
td.eq(4).html(c.__fixed(subtotal));
d.product += subtotal;
if (!index) {
td.last().attr('rowspan', len);
} else {
td.last().remove();
}
if (index === len - 1) {
e.$tbody.find('tr').eq(0).find('td').last().html('<strong>' + c.__fixed(d.product) + '</strong>');
}
});
/*初始化价格*/
this.render();
/*点击pan dt 打开dd*/
e.$pan.find('dt').click(function() {
var pan = $(this).parent('dl.pan');
if (pan.find('dd').is(':hidden')) {
c.winShow(pan);
} else {
c.winHide(pan);
}
});
/*使用优惠卷支付 下面的文本框*/
e.$jc.focus(function() {
$(this).prev('label').prev(':radio').attr('checked', true);
}).change(function() {
$(this).prev('label').prev(':radio').val($(this).val());
});
/*使用YOHO币支付*/
e.$bp.data('tobi', e.$tobi.html());
e.$bp.keyup(function() {
var bi = c.enterNUM($(this).val(), $(this).data('tobi'));
$(this).val(bi);
}).change(function() {
var bi = c.enterNUM($(this).val(), $(this).data('tobi'));
$(this).val(bi);
});
/*取消关闭小窗口*/
e.$cancel.click(function() {
var p = $(this).parents('.pan');
p.find('dt').show();
p.find('dd').hide();
});
e.$statistics.slice(3, 5).find('a').click(function() {
var pan = $('.' + $(this).attr('to'));
c.winShow(pan);
});
},
render: function() {
var e = this.e,
d = Order.Data,
c = Order.Common;
e.$total.html('0.00');
e.$statistics.slice(3, 5).hide();
e.$statistics.slice(2, 5).find('em').html('0.00');
if (d.carriage) {
e.$statistics.eq(2).find('em').html(c.__fixed(d.carriage));
}
if (d.juan) {
e.$statistics.eq(3).show().find('em').html(c.__fixed(d.juan));
}
if (d.yohocoin) {
e.$statistics.eq(4).show().find('em').html(c.__fixed(d.yohocoin));
}
e.$total.html(c.__fixed(c.calucate()));
}
},
Common: {
enterNUM: function(str1, str2) {
str1 = str1.replace(/[^\d]/g, '');
if (str1 && str2) {
str1 = parseInt(str1);
str2 = parseInt(str2);
if (str1 > str2) {
str1 = str2;
}
}
return str1;
},
calucate: function() {
var p = Order.Data;
$.each(Order.Data, function(key, index) {
p[key] = parseFloat(Order.Data[key]);
});
return p.product - p.activity + p.carriage - p.juan - p.yohocoin;
},
winShow: function(pan) {
pan.find('dt').show();
pan.find('dd').show();
if (pan.attr('class').match(/(-bi-)|(-juan-)/g)) {
pan.find('dt').hide();
}
},
winHide: function(pan) {
pan.find('dt').show();
pan.find('dd').hide();
},
__fixed(str) {
return parseFloat(str).toFixed(2);
}
},
Submit: {
e: {
$juanok: $('#juansubmit'),
$juantip: $('.errtip', '.play-juan-pan'),
$biok: $('#bisubmit')
},
init: function() {
var e = this.e,
d = Order.Data,
c = Order.Common,
u = Order.UI;
var options;
/*点击 优惠卷支付 确认按钮*/
e.$juanok.click(function() {
var $jgroup = $('input[name="juangroup"]:checked');
var pan = $(this).parents('.pan');
if ($jgroup.val()) {
options = {
url: '/Order/save/priceByCode',
type: 'post',
data: {
code: $jgroup.val()
},
success: function(data) {
if (data.code === 200) {
if (data.price) {
d.juan = data.price;
Order.UI.render();
c.winHide(pan);
return;
}
u.render();
}
e.$juantip.html(data.msg);
},
error: function() {
e.$juantip.html('网络出现错误~');
}
};
$.ajax(options);
}
});
/*点击 YOHO币支付 确认按钮*/
e.$biok.click(function() {
var pan = $(this).parents('.pan');
d.yohocoin = parseFloat(u.e.$bp.val()) / 100;
u.render();
c.winHide(pan);
return;
});
}
}
};
Order.Data.activity = 0;
Order.Data.carriage = 0;
Order.UI.init();
Order.Submit.init();
\ No newline at end of file
... ...
... ... @@ -168,6 +168,10 @@
text-align: left;
display: inline-block;
}
a{
color: #468fa2;
text-decoration: underline;
}
}
.pan{
text-align: right;
... ...
... ... @@ -13,8 +13,8 @@ class SaveController extends AbstractAction
'orderSavePage' => true,
'orderSave'=>array(
'orderProducts'=>array(
array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色:蓝色 尺码:L",'unitprice'=>'179.00','currency'=>'0','count'=>'0'),
array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色:蓝色 尺码:L",'unitprice'=>'179.00','currency'=>'0','count'=>'0')
array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色:蓝色 尺码:L",'price'=>'179.00','coin'=>'0','count'=>'1'),
array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色:蓝色 尺码:L",'price'=>'179.00','coin'=>'0','count'=>'1')
)
)
);
... ...