Authored by lore-w

Merge branch 'feature/order-save' of git.dev.yoho.cn:web/yohobuy into feature/order-save

Conflicts:
	template/www.yohobuy.com/actions/order/save/index.phtml
	web-static/sass/order/_index.scss
	yohobuy/www.yohobuy.com/application/modules/Order/controllers/Save.php
... ... @@ -116,7 +116,148 @@
</div>
</div>
</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="{{href}}"><img src="{{src}}" /></a>
<p class="pay-pro-info">
<a href="#">{{name}}</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>
{{#each piaotypes}}
<option value="{{value}}">{{name}}</option>
{{/each}}
</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>
{{#each juanlist}}
<li>
<input name="juangroup" type="radio" value="{{value}}">
<label>{{name}} </label>
</li>
{{/each}}
</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
... ...
... ... @@ -2,4 +2,221 @@
* @description: 订单保存
* @time: 2015/12/21
*/
var $ = require('yoho.jquery');
var Order = {
/*业务数据(人民币)*/
Data: {
product: 0,//商品价格
activity: 0,//活动
carriage: 0,//邮费
juan: 0,//优惠卷
yohocoin: 0//YOHO币
},
/*view 交互*/
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.strFixed(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.strFixed(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 pan = $(this).parents('.pan');
c.winHide(pan);
});
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;
var i = 0;
e.$total.html('0.00');
e.$statistics.slice(3, 5).hide();
e.$statistics.slice(0, 5).find('em').html('0.00');
$.each(d, function(key) {
if (d.hasOwnProperty(key)) {
if (d[key]) {
e.$statistics.eq(i).show().find('em').html(c.strFixed(d[key]));
}
}
i++;
});
e.$total.html(c.strFixed(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();
},
strFixed: function(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
... ...
$order: sprite-map("order/save/*.png", $spacing: 10px);
@import "save";
@import "pay";
... ...
.order-pay{
font-size: 12px;
line-height: 150%;
.pay-wapper{
border: 1px solid #ccc;
}
table{
width: 100%;
td{
border: 1px solid #ccc;
border-left: 0 none;
padding: 10px;
text-align: center;
}
}
thead{
background: #000;
th{
height: 32px;
line-height: 32px;
color: #fff;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
.clo1{
width: 10%;
}
.clo2{
width: 20%;
}
.clo4{
width: 40%;
}
}
.pay-pro{
.pay-pro-icon{
float: left;
display: inline;
width: 60px;
height: 60px;
display: block;
}
.pay-pro-info{
color: #999;
margin-left:70px;
padding-top: 15px;
text-align: left;
a{
color: #468fa2;
text-decoration: none;
display: block;
&:hover{
text-decoration: underline;
}
}
}
}
.play-content{
padding: 10px;
.red{
color: #e8044f!important;
}
.orange{
color: #f60!important;
}
.strong{
font-weight: bold;
color: #000;
}
.pan{
dt{
width: 105px;
height: 30px;
padding: 0px 0px 0px 30px;
line-height: 30px;
text-align: left;
border: 0px;
color: #fff;
display: inline-block;
cursor: pointer;
background: url(http://static.yohobuy.com/images/btn_openclose.png) no-repeat 0px -60px;
margin-bottom:5px;
}
dd{
display: none;
border: 1px #ccc solid;
padding: 10px 15px;
margin-bottom: 10px;
}
}
.textbox{
height: 20px;
line-height: 20px;
color: #333;
border: 1px #c9c9c9 solid;
vertical-align: top;
}
.dropdown{
height: 20px;
line-height: 20px;
color: #333;
border: 1px #c9c9c9 solid;
vertical-align: top;
}
.btn-group{
text-align: right;
input{
display: inline-block;
background: none;
border: 1px solid #ccc;
border-radius: 2px;
height: 20px;
}
.ok{
background-color: #000;
color:#fff;
}
}
.play-left{
float: left;
width: 405px;
.pan{
text-align: left;
dt{
color: #000;
background: url(http://static.yohobuy.com/images/btn_openclose.png) no-repeat 0px 0px;
}
}
}
.play-piao-pan{
li{
height: 25px;
padding: 10px 0px;
line-height: 22px;
label{
width: 65px;
display: inline-block;
}
.textbox{
width: 200px;
}
}
}
.play-remark-pan{
.textbox{
width: 369px;
height: 70px;
}
.note{
padding: 5px 0;
color: #999;
}
}
.play-right{
float: right;
width: 50%;
width: 405px;
.play-total{
text-align: right;
padding-bottom: 20px;
label{
padding-right: 10px;
}
em{
width: 80px;
text-align: left;
display: inline-block;
}
a{
color: #468fa2;
text-decoration: underline;
}
}
.pan{
text-align: right;
}
}
.play-juan-pan{
dd{
text-align: left;
}
.play-juan{
padding: 10px 0;
.textbox{
width: 70px;
}
}
}
.play-bi-pan{
dd{
text-align: right;
}
.textbox{
width: 70px;
}
p{
padding: 10px 0;
}
}
}
.to-play{
p{
padding: 10px 0px;
font-size: 14px;
text-align: right;
color: #000;
em{
color: #e8044f;
font-size: 24px;
}
}
.btn-group{
padding: 10px 0px 40px 0px;
.submit{
float: right;
width: 133px;
height: 33px;
padding: 0px;
text-align: center;
border: 0px;
line-height: 33px;
font-size: 14px;
color: #fff;
font-weight: bold;
background: url(http://static.yohobuy.com/images/btns.png) no-repeat 0px -33px;
display: inline-block;
cursor: pointer;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -9,19 +9,50 @@ class SaveController extends AbstractAction
*/
public function indexAction()
{
$src="http://img04.static.yohobuy.com/thumb/2015/08/25/08/012622ad14f32470d56a0b1da5d533a7e2-0060x0060-2-goodsimg.jpg";
$data = array(
'orderSavePage' => true,
'orderSave' => true,
'orderSave'=>array(
'hasAddress' => array(
array(
'user' => '王成龙',
'address' => '江苏省南京市建邺区嘉陵江东街18号,国家广告产业园5栋17楼,YOHO 18605269243',
'checked' => true
)
),
'orderProducts'=>array(
array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色:蓝色 尺码:L",'src'=>$src,'href'=>'','price'=>'179.00','coin'=>'0','count'=>'1'),
array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色:蓝色 尺码:L",'src'=>$src,'href'=>'','price'=>'179.00','coin'=>'0','count'=>'1')
),
'piaotypes'=>array(
array('name'=>'个人','value'=>'001'),
array('name'=>'公司','value'=>'002')
),
'juanlist'=>array(
array('name'=>'YOHOXXXXXX优惠卷','value'=>'001'),
array('name'=>'爽1111优惠卷','value'=>'002')
)
)
);
$this->_view->display('index', $data);
}
/*获取优惠卷的面额*/
public function priceByCodeAction()
{
$result = array();
do {
$result=array(
'code'=>200,
'msg'=>'成功',//卷不存在,过期等等
'price'=>'10'
);
} while (false);
$this->echoJson($result);
}
}
\ No newline at end of file
... ...