fe / yohobuy-node · Commits

Go to a project

Authored by 刘传洋
Commit 9dd0775f85c3560aeb7049d3b0f0c8241305b5cc 2 parents 78a665d6 a974798f

Merge branch 'feature/shoppingCart' of http://git.yoho.cn/fe/yohobuy-node into feature/shoppingCart

Inline Side-by-side
Showing 9 changed files with 576 additions and 170 deletions
/**
* 订单结算controller
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/8/26
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/12/21
*/
'use strict';
... ...
... ... @@ -22,7 +22,7 @@ router.post('/address/delete', address.delAddress); // 删除地址
router.post('/address/save', address.saveAddress); // 新增地址/更新地址
router.post('/address/setdefault', address.setDefault); // 设置默认地址
router.get('/orderensure', ensure.index); // 限购商品快捷结算页
router.get('/ensure', ensure.index); // 限购商品快捷结算页
router.get('/easypay', easypay.index); // 限购商品快捷结算页
router.post('/easypay/compute', easypay.compute); // 价格重新计算
... ...
... ... @@ -4,70 +4,72 @@
{{> shopping-step}}
</div>
<div class="info-block-wrap">
<p class="block-title">收货信息<span class="right">新增收货地址></span></p>
<div class="address-wrap">
<div class="addr-list clearfix">
{{# deliveryAddress}}
<div class="addr-item{{#isY is_default}} addr-default{{/isY}}" data-id="{{id}}" data-mobile="{{mobile}}"{{#isY is_delivery}} data-delivery="1"{{/isY}}>
<div class="address-wrap">
<div class="block-title">收货信息<span id="new-address-btn" class="right">新增收货地址 +</span></div>
<div class="addr-list clearfix">
{{# deliveryAddress}}
<div class="addr-item{{#isY is_default}} addr-default{{/isY}}" data-id="{{id}}" data-mobile="{{mobile}}"{{#isY is_delivery}} data-delivery="1"{{/isY}}>
<p class="name">
{{consignee}}
<span class="right">{{mobile}}</span>
</p>
<p class="area">
<span>{{area}}</span>
</p>
<p class="street">{{address}}</p>
<p class="option">
<label class="set-default">设为默认</label>
<label class="default-tip">默认地址</label>
<p class="name">{{consignee}} {{mobile}} {{phone}}</p>
<p class="area">{{area}}</p>
<p class="street">{{address}}</p>
<p class="option">
<span>修改</span>
<span>删除</span>
</p>
</div>
{{/ deliveryAddress}}
</div>
<p class="addr-opt">
<span class="more-addr-btn">显示全部地址<i class="iconfont">&#xe60b;</i></span>
</p>
</div>
<p class="block-title">支付方式</p>
<div class="pay-wrap">
{{#each paymentWay}}
<p>
<label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{payment_id}}" data-type="{{payment_type}}" data-name="{{payment_type_name}}">{{payment_type_name}}</label>
{{#isEqual payment_type 1}}
<span>支持主流银行卡、微信、支付宝、银联等平台付款，方便快捷</span>
{{/isEqual}}
{{#isEqual payment_type 2}}
<span>送货上门后再付款</span>
{{/isEqual}}
</p>
{{/each}}
<span>修改</span>
<span>删除</span>
</p>
</div>
{{/ deliveryAddress}}
</div>
<p class="block-title">配送方式</p>
<div class="delivery-way-wrap">
{{# deliveryWay}}
<p>
<label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{delivery_way_id}}"
title="{{delivery_way_name}}：运费 ¥ {{delivery_way_cost}}">{{delivery_way_name}}：运费 ¥ {{delivery_way_cost}}</label>
{{#isEqual delivery_way_id 2}}
<span>您所选择的区域暂不在支持顺丰派送范围内，点击<a href="＃">查看详情></a> </span>
{{/isEqual}}
</p>
{{/ deliveryWay}}
<p class="default-line">注：配送会由于天气，交通等不可抗拒的客观因素造成您收货时间延迟，请您知悉。</p>
</div>
<p class="block-title">送货时间</p>
<div class="delivery-time-wrap">
<p class="addr-opt">
<span class="more-addr-btn">显示全部地址<i class="iconfont">&#xe60b;</i></span>
</p>
</div>
<div class="pay-wrap">
<div class="block-title">支付方式</div>
{{#each paymentWay}}
<p>
{{# deliveryTime}}
<label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{delivery_time_id}}" data-name="{{delivery_time_string}}" title="{{delivery_time_string}}">{{delivery_time_string}}</label>
{{/ deliveryTime}}
<label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{payment_id}}" data-type="{{payment_type}}" data-name="{{payment_type_name}}">{{payment_type_name}}</label>
{{#isEqual payment_type 1}}
<span>支持主流银行卡、微信、支付宝、银联等平台付款，方便快捷</span>
{{/isEqual}}
{{#isEqual payment_type 2}}
<span>限量商品、预售商品、化妆品或者订单金额超过10000元不可以选择</span>
{{/isEqual}}
</p>
<p class="contract-me">
送货前是否联系：
<label class="radio-btn" data-id="1">是</label>
<label class="radio-btn on" data-id="0">否</label>
<span class="tips">（您需要特定时间配送可以选择哦！）</span>
{{/each}}
</div>
<div class="delivery-way-wrap">
<div class="block-title">配送方式</div>
{{# deliveryWay}}
<p>
<label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{delivery_way_id}}"
title="{{delivery_way_name}}：运费 ¥ {{delivery_way_cost}}">{{delivery_way_name}}：运费 ¥ {{delivery_way_cost}}</label>
{{#isEqual delivery_way_id 2}}
<span>您所选择的区域暂不在支持顺丰派送范围内，点击<a href="＃">查看详情></a> </span>
{{/isEqual}}
</p>
</div>
<p class="block-title">订单商品信息<span class="right">返回购物车修改></span></p>
{{/ deliveryWay}}
<p class="default-line">注：配送会由于天气，交通等不可抗拒的客观因素造成您收货时间延迟，请您知悉。</p>
</div>
<div class="delivery-time-wrap">
<div class="block-title">送货时间</div>
<p>
{{# deliveryTime}}
<label class="check-btn{{#isY default}} checked{{/isY}}" data-id="{{delivery_time_id}}" data-name="{{delivery_time_string}}" title="{{delivery_time_string}}">{{delivery_time_string}}</label>
{{/ deliveryTime}}
</p>
<p class="default-line">温馨提示：快递公司会尽力按您选择的送货时间配送，如遇特殊情况（天气、环境等）无法按您要求的时间配送，请您谅解！</p>
</div>
<div class="goods-wrap">
<div class="block-title">订单商品信息<span class="right">返回购物车修改 ></span></div>
<table class="goods-table">
<thead>
<tr>
... ... @@ -98,7 +100,7 @@
</a>
</td>
<td class="border-top color-size">
颜色：<span class="color">{{color_name}}</span>
颜色：<span class="color">{{color_name}}</span>
尺码：<span class="size">{{size_name}}</span>
</td>
<td class="border-top price">¥ {{round last_vip_price 2}}</td>
... ... @@ -108,18 +110,22 @@
{{/each}}
</tbody>
</table>
<div class="extra-wrap">
<dl>
<dt>使用YOHO币</dt>
<dd></dd>
<dt>使用红包</dt>
<dd></dd>
<dt>索要发票</dt>
<dd></dd>
<dt>添加备注信息</dt>
<dd></dd>
</dl>
</div>
</div>
<div class="invoice-wrap">
<div class="block-title">发票信息</div>
<p>
<label class="radio-btn">发票开具</label>
</p>
</div>
<div class="extra-wrap">
<dl>
<dt>使用YOHO币</dt>
<dd></dd>
<dt>使用红包</dt>
<dd></dd>
<dt>添加备注信息</dt>
<dd></dd>
</dl>
</div>
{{# shoppingCartData}}
<div class="balance-wrap">
... ... @@ -128,7 +134,7 @@
<li class="promotion-item">
{{#if @first}}
<a class="gain-coin-tip" href="/help/?category_id=87" target="_blank"></a>
<span>共返YOHO币：{{../gain_yoho_coin}}个</span>
<span class="back-coin">共返YOHO币：{{../gain_yoho_coin}}个</span>
<span class="total-num"><i>{{../selected_goods_count}}</i>件商品</span>
{{/if}}
<span class="promotion-name">{{promotion}}：</span>
... ... @@ -147,5 +153,7 @@
<button id="order-submit">提交订单</button>
</div>
{{/ shoppingCartData}}
{{> ensure-tpl}}
{{/ content}}
</div>
\ No newline at end of file
</div>
... ...
<script id="address-tpl" type="text/html">
<div class="title">\{{title}}</div>
<p class="prompt">电话为选填项，其他均为必填项</p>
<ul class="info-wrap">
<li>
<span class="left-rd"><i class="red">*</i>收货人：</span>
<input type="text" name="consignee" value="\{{name}}" placeholder="请输入您的姓名">
<span class="caveat-tip"></span>
</li>
<li>
<span class="left-rd"><i class="red">*</i>所在区域：</span>
<div class="area-box">
<select class="province">
<option value="0">请选择省</option>
</select>
<select class="city">
<option value="0">请选择市</option>
</select>
<select class="country">
<option value="0">请选择县</option>
</select>
</div>
<span>注：标“＊”的为支持加急送的地区</span>
<span class="caveat-tip"></span>
</li>
<li>
<span class="left-rd"><i class="red">*</i>详细地址：</span>
<input type="text" name="address" value="\{{name}}" placeholder="街道名称或小区名称">
<span class="caveat-tip"></span>
</li>
<li>
<span class="left-rd"><i class="red">*</i>手机号码：</span>
<input type="text" name="mobile" value="\{{name}}" placeholder="请输入手机号码（重要必填）">
<span class="caveat-tip"></span>
</li>
<li>
<span class="left-rd">电话号码：</span>
<input type="text" name="tel" value="\{{name}}" placeholder="请输入电话号码（选填）">
<span class="caveat-tip"></span>
</li>
<li>
<span class="left-rd"></span>
<label class="radio-btn">设置为默认收货地址</label>
</li>
</ul>
</script>
... ...

55.8 KB | W: 0px | H: 0px

56.8 KB | W: 0px | H: 0px

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -11,6 +11,8 @@ var order = {};
var payWay,
deliveryWay;
require('./order-new/address');
// 支付方式
payWay = {
$payType: $('.pay-wrap .check-btn'),
... ...
/**
* 订单结算页
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/11/30
* @date: 2016/12/20
*/
// var $ = require('yoho-jquery');
var $ = require('yoho-jquery');
var hbs = require('yoho-handlebars');
var dialog = require('../../common/dialog');
var Dialog = dialog.Dialog;
// var Confirm = dialog.Confirm;
// var Alert = dialog.Alert;
var addressTpl = hbs.compile($('#address-tpl').html());
Dialog.prototype.packageInfo = function() {
var data = {};
var province = this.$el.find('.province').val(),
city = this.$el.find('.city').val(),
country = this.$el.find('.country').val();
this.$el.find('input').each(function() {
var $this = $(this),
key = $this.attr('name');
if (key) {
data[key] = $.trim($this.val());
}
});
data.areacode = '' + province + city + country;
if (this.$el.find('.radio-btn.on').length) {
data.setDefault = true;
}
return data;
};
function validateAddress(data) {
var regx = {
consignee: /^[\u4e00-\u9fa5]{2,5}$/,
areacode: /^[0-9]{6}$/,
mobile: /^\d{3}(\d{4}|\*{4})\d{1,8}$/,
tel: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
},
pass = true,
i;
data = data || {};
for (i in data) {
if (data.hasOwnProperty(i) &&
regx[i] &&
!regx[i].test(data[i])) {
pass = false;
}
}
return pass;
}
function bindOperateEvent($el) {
var $province = $el.find('.province'),
$city = $el.find('.city'),
$country = $el.find('.country');
$el.on('change', 'input[name="consignee"]', function() {
var $this = $(this);
var val = $.trim($this.val());
if (!val) {
$this.siblings('.caveat-tip').text('收货人不能为空').show();
} else if (!validateAddress({consignee: val})) {
$this.siblings('.caveat-tip').text('收货人姓名至少2个中文，最多5个中文').show();
} else {
$this.siblings('.caveat-tip').empty().hide();
}
}).on('change', '.country', function() {
var code = '' + $province.val() + $city.val() + $country.val();
if (!validateAddress({areacode: code})) {
$province.parent().siblings('.caveat-tip').show().text('请选择省市县').prev().hide();
} else {
$province.parent().siblings('.caveat-tip').empty().hide().prev().show();
}
}).on('change', 'input[name="address"]', function() {
var $this = $(this);
var val = $.trim($this.val());
if (!val) {
$this.siblings('.caveat-tip').text('收货地址不能为空').show();
} else {
$this.siblings('.caveat-tip').empty().hide();
}
$country.trigger('change');
}).on('change', 'input[name="mobile"]', function() {
var $this = $(this);
var val = $.trim($this.val());
if (!val) {
$this.siblings('.caveat-tip').text('手机号码不能为空').show();
} else if (!validateAddress({mobile: val})) {
$this.siblings('.caveat-tip').text('您输入的手机号码格式不正确').show();
} else {
$this.siblings('.caveat-tip').empty().hide();
}
}).on('change', 'input[name="tel"]', function() {
var $this = $(this);
var val = $.trim($this.val());
if (val && !validateAddress({tel: val})) {
$this.siblings('.caveat-tip').text('您输入的电话格式不正确').show();
} else {
$this.siblings('.caveat-tip').empty().hide();
}
}).on('click', '.radio-btn', function() {
$(this).toggleClass('on');
});
}
function newEditAddress(info) {
var addDia = new Dialog({
content: addressTpl({
title: '新增地址'
}),
className: 'ope-address-dialog',
btns: [{
id: 'save',
name: '保存',
btnClass: ['black'],
cb: function() {
var data = addDia.packageInfo();
if (!validateAddress(data)) {
addDia.$el.find('input').trigger('change');
return;
}
if (info.id) {
data.id = info.id;
}
console.log(data);
// window.open(myCouponUrl);
}
}, {
id: 'cancel',
name: '取消',
btnClass: ['btn-close']
}]
}).show();
bindOperateEvent(addDia.$el);
}
$('#new-address-btn').click(function() {
newEditAddress();
});
... ...
.order-ensure2016 {
width: 990px;
margin: 50px auto;
$red: #ee4147;
$red: #d0021b;
$borderColor: #e8e8e8;
.order-ensure-title {
... ... @@ -98,36 +98,35 @@
}
}
.info-block-wrap {
border: 1px solid $borderColor;
.block-title {
height: 38px;
line-height: 40px;
font-size: 16px;
padding: 0 24px;
background-color: #f5f5f5;
border-bottom: 1px solid $borderColor;
.block-title {
height: 50px;
line-height: 50px;
font-size: 18px;
padding: 0 24px;
background-color: #eaeaea;
border-bottom: 1px solid $borderColor;
.right {
color: $red;
font-size: 12px;
}
.right {
color: $red;
font-size: 14px;
}
}
.check-btn {
line-height: 28px;
font-size: 13px;
color: #444;
padding: 0 20px;
margin-right: 16px;
border: 1px solid $borderColor;
display: inline-block;
text-align: center;
position: relative;
cursor: pointer;
.check-btn {
line-height: 28px;
color: #444;
padding: 0 20px;
margin-right: 16px;
border: 1px solid #444;
display: inline-block;
text-align: center;
position: relative;
cursor: pointer;
&.checked {
border-color: $red;
&.checked:after {
&:after {
content: '';
width: 20px;
height: 20px;
... ... @@ -138,39 +137,45 @@
bottom: 0;
}
}
}
.radio-btn {
margin: 0 10px;
.radio-btn {
margin-right: 20px;
&:before {
content: '';
width: 15px;
height: 15px;
margin-right: 6px;
background-image: url(/cart/radio-off.png);
display: inline-block;
vertical-align: middle;
position: relative;
top: -1px;
cursor: pointer;
}
&:before {
content: '';
width: 15px;
height: 15px;
margin-right: 6px;
background-image: url(/cart/radio-off.png);
display: inline-block;
vertical-align: middle;
position: relative;
top: -1px;
cursor: pointer;
}
&.on:before {
background-image: url(/cart/radio-on.png);
}
&.on:before {
background-image: url(/cart/radio-on.png);
}
}
.address-wrap {
padding-left: 20px;
font-size: 13px;
font-size: 14px;
color: #444;
border: 1px solid $borderColor;
margin-bottom: 40px;
.addr-list {
width: 100%;
padding-left: 20px;
}
.addr-item {
width: 200px;
height: 174px;
height: 162px;
float: left;
padding-left: 18px;
padding: 8px 14px 8px 8px;
margin-right: 18px;
margin-top: 30px;
border: 1px solid $borderColor;
... ... @@ -185,63 +190,80 @@
background: resolve('cart/addr-tps.png');
position: absolute;
left: 0;
top: 0;
}
&:hover:before {
background: resolve('cart/addr-tps-on.png');
}
.set-default,
.default-tip {
font-size: 12px;
line-height: 18px;
color: #9a9a9a;
padding: 0 4px;
position: absolute;
right: 6px;
top: 14px;
}
.default-tip {
color: #f00;
border: 1px solid $borderColor;
display: none;
}
.name {
height: 58px;
line-height: 58px;
padding-top: 12px;
height: 40px;
line-height: 40px;
padding-top: 4px;
border-bottom: 1px solid $borderColor;
}
.area {
line-height: 26px;
margin-top: 10px;
line-height: 40px;
padding-top: 2px;
}
.area > span {
max-height: 36px;
line-height: 1.3;
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
.street {
max-height: 42px;
color: #9a9a9a;
font-size: 12px;
line-height: 1.5;
word-break: break-all;
overflow: hidden;
}
.option {
width: 100%;
position: absolute;
left: 0;
bottom: 10px;
right: 14px;
font-size: 12px;
color: #9a9a9a;
text-align: right;
}
.option > span {
margin-left: 10px;
float: right;
margin-right: 10px;
line-height: 24px;
}
.option > span:hover {
color: #ce0b22;
}
.set-default,
.default-tip {
display: inline-block;
padding: 4px;
color: #444;
background-color: #e0e0e0;
border: 1px solid #cdcdcd;
margin-left: 8px;
cursor: pointer;
}
.default-tip {
color: #fff;
background-color: #ce0b22;
border-color: #ce0b22;
display: none;
}
}
.addr-default {
border-color: #fff;
border-color: $red;
&:before {
background: resolve('cart/addr-tps-on.png');
... ... @@ -251,7 +273,7 @@
}
.default-tip {
display: block;
display: inline-block;
}
&:after {
... ... @@ -268,7 +290,8 @@
.addr-opt {
height: 40px;
padding-top: 20px;
padding-left: 20px;
margin-top: 20px;
.more-addr-btn {
cursor: pointer;
... ... @@ -279,13 +302,28 @@
.pay-wrap,
.delivery-way-wrap,
.delivery-time-wrap {
padding: 30px 20px 10px;
border: 1px solid $borderColor;
border-bottom-color: #fff;
.block-title {
margin-bottom: 20px;
}
> p {
font-size: 12px;
padding-left: 20px;
font-size: 14px;
line-height: 30px;
margin-bottom: 20px;
color: #444;
}
.disable {
color: #9a9a9a;
.check-btn {
color: #9a9a9a;
border-color: #9a9a9a;
}
}
.default-line {
... ... @@ -293,18 +331,27 @@
}
}
.delivery-time-wrap > .contract-me {
line-height: 16px;
font-size: 13px;
color: #444;
margin-bottom: 18px;
.pay-wrap {
.check-btn {
min-width: 100px;
text-align: center;
}
}
.tips {
color: #9a9a9a;
font-size: 12px;
.delivery-time-wrap {
border-bottom-color: $borderColor;
margin-bottom: 40px;
.check-btn {
min-width: 138px;
text-align: center;
}
}
.goods-wrap {
border: 1px solid $borderColor;
}
.goods-table {
width: 100%;
font-size: 13px;
... ... @@ -380,13 +427,24 @@
}
}
.invoice-wrap {
border-left: 1px solid $borderColor;
border-right: 1px solid $borderColor;
> p {
line-height: 70px;
padding-left: 20px;
}
}
.extra-wrap {
font-size: 14px;
padding: 10px 20px;
border-top: 1px solid $borderColor;
border: 1px solid $borderColor;
border-bottom-color: #fff;
dt {
font-size: 15px;
line-height: 40px;
line-height: 30px;
}
}
... ... @@ -394,13 +452,22 @@
font-size: 13px;
line-height: 2;
color: #444;
margin-top: 30px;
border: 1px solid $borderColor;
text-align: right;
.balance-detail {
padding: 30px 20px;
border-bottom: 1px solid $borderColor;
.back-coin:before {
content: '';
width: 14px;
height: 14px;
background-image: url(/cart/yoho-coin.png);
display: inline-block;
vertical-align: text-top;
margin-right: 4px;
}
}
.promotion-val {
... ... @@ -448,3 +515,130 @@
}
}
}
.ope-address-dialog {
width: 610px;
height: 410px;
text-align: left;
> .close {
display: none;
}
> .content {
text-align: left;
}
.title {
padding-bottom: 26px;
border-bottom: 1px solid #e8e8e8;
}
.prompt {
line-height: 54px;
font-size: 12px;
color: #444;
}
.info-wrap {
font-size: 12px;
color: #aaa;
.radio-btn {
font-size: 14px;
color: #444;
&:before {
content: '';
width: 15px;
height: 15px;
margin-right: 6px;
background-image: url(/cart/radio-off.png);
display: inline-block;
vertical-align: middle;
position: relative;
top: -1px;
cursor: pointer;
}
&.on:before {
background-image: url(/cart/radio-on.png);
}
}
li {
padding-bottom: 20px;
input {
width: 180px;
border: 1px solid #e8e8e8;
padding: 5px;
margin-right: 10px;
}
input[name="address"] {
width: 270px;
}
}
.left-rd {
width: 92px;
font-size: 14px;
color: #444;
text-align: right;
display: inline-block;
.red {
color: #ce0b24;
margin-right: 10px;
}
}
.caveat-tip {
color: #ce0b24;
display: none;
&:before {
content: '';
width: 16px;
height: 16px;
margin-right: 6px;
background: url('/cart/error-ico.png');
display: inline-block;
position: relative;
top: 4px;
}
}
.area-box {
height: 26px;
display: inline-block;
border: 1px solid #e8e8e8;
background: #fff;
padding-right: 3px;
margin-right: 10px;
> select {
width: 90px;
height: 26px;
border: 0;
background: none;
color: #aaa;
}
}
}
.btns {
> .btn {
width: 128px;
height: 30px;
line-height: 32px;
}
.black {
background: #000;
color: #fff;
margin-right: 18px;
}
}
}
... ...