fe / YOHOBUYWAP · Commits

Go to a project

Authored by lore-w
Commit e826e468fc7068cf57edc794f55f4b50477f2c12 1 parent f003a930

订单确认页面

Inline Side-by-side
Showing 9 changed files with 662 additions and 88 deletions
... ... @@ -15,82 +15,81 @@
<div class="order-content">
<div class="order-selection address-list">
<h2>收货地址：<span>[不保存并关闭]</span></h2>
<div class="address-list-inner">
<ul>
{{#each hasAddress}}
<li>
<input class="radio" type="radio" name="address" id="{{id}}" {{#if checked}}checked{{/if}}/>
<input class="radio" type="radio" id="{{id}}" {{#if checked}}checked{{/if}}/>
<label for="{{id}}">
<strong>{{user}}</strong>
<span>{{address}}</span>
<a href="javascript:void(0);">设为默认地址</a>
<div class="order-modify-btn">
<span>[修改]</span>
<span>[删除]</span>
<span class="address-modify">[修改]</span>
<span class="address-del">[删除]</span>
</div>
</label>
</li>
{{/each}}
<li>
<input class="radio" type="radio" name="" id="addAddress"/>
<label for="addAddress">使用新地址</label>
</li>
</ul>
</div>
<div class="order-selection address-manage hide">
<ul>
<li>
<span class="address-legend"><i>*</i>收货人姓名：</span>
<input type="text" name="name" class="name text-input"/>
<span>请填写您的真实姓名，最多5个汉字</span>
</li>
<li>
<span class="address-legend"><i>*</i>省市：</span>
<select name="" id="" class="text-input">
{{# province}}
<option value="{{value}}">{{name}}</option>
{{/ province}}
<option value="0">请选择省份</option>
</select>
<select name="" id="" class="text-input">
{{# city}}
<option value="{{value}}">{{name}}</option>
{{/ city}}
<option value="0">请选择城市</option>
</select>
<select name="" id="" class="text-input">
{{# county}}
<option value="{{value}}">{{name}}</option>
<option value="0">请选择区县</option>
{{/ county}}
</select>
<input type="text" class="text-input"/>
<span>标'*'的为支持加急送的地区，请输入收货的详细地址</span>
</li>
<li>
<span class="address-legend"><i>*</i>手机号码：</span>
<input type="text" class="text-input"/>
<span>填写正确手机号便于接收发货和收货通知</span>
</li>
<li>
<span class="address-legend">固定电话：</span>
<input type="text" class="text-input"/>—
<input type="text" class="text-input"/>
<span>如：010-12345678，固话和手机号至少填一项</span>
</li>
<li>
<span class="address-legend">电子邮件：</span>
<input type="text" class="text-input"/>
<span>用来接收订单提醒邮件，便于您及时了解订单状态</span>
</li>
<li>
<span class="address-legend">邮编：</span>
<input type="text" class="text-input"/>
<span>请填写准确的邮编，以确保商品尽快送达</span>
<li class="use-new-address">
<input class="radio add-address" type="radio" name="address" id=""/>
<label for="">使用新地址</label>
</li>
</ul>
<div class="address-manage">
<ul>
<li>
<span class="address-legend"><i>*</i>收货人姓名：</span>
<input type="text" name="name" class="name text-input"/>
<span>请填写您的真实姓名，最多5个汉字</span>
</li>
<li>
<span class="address-legend"><i>*</i>省市：</span>
<select name="province" id="" class="text-input">
<option>请选择省份</option>
</select>
<select name="city" id="" class="text-input">
<option>请选择城市</option>
</select>
<select name="county" id="" class="text-input">
<option>请选择区县</option>
</select>
<input type="text" name="address" class="text-input"/>
<span>标'*'的为支持加急送的地区，请输入收货的详细地址</span>
</li>
<li>
<span class="address-legend"><i>*</i>手机号码：</span>
<input type="text" name="phone" class="text-input"/>
<span>填写正确手机号便于接收发货和收货通知</span>
</li>
<li>
<span class="address-legend">固定电话：</span>
<div class="address-tel-input">
<input type="text" name="tel-code" class="tel-lengend text-input"/>
<input type="text" name="tel" class="text-input"/>
—
</div>
<span>如：010-12345678，固话和手机号至少填一项</span>
</li>
<li>
<span class="address-legend">电子邮件：</span>
<input type="text" name="mail" class="text-input"/>
<span>用来接收订单提醒邮件，便于您及时了解订单状态</span>
</li>
<li>
<span class="address-legend">邮编：</span>
<input type="text" name="code" class="text-input"/>
<span>请填写准确的邮编，以确保商品尽快送达</span>
</li>
</ul>
</div>
<span class="save-btn">保存并送到这个地址</span>
</div>
</div>
<span class="save-btn">保存并送到这个地址</span>
<div class="order-selection pay-time">
<h2>支付及送货时间：<span>[修改]</span></h2>
... ... @@ -99,6 +98,68 @@
<li>送货时间：只工作日送货（双休日、节假日不用送）</li>
<li>送货前联系我：否</li>
</ul>
<div class="pay-time-modify">
<h3>支付方式</h3>
<ul>
<li class="pay-dashed-hr">
<div class="pay-type-legend">
<input checked class="radio" name="pay-type" type="radio" id=""/>
<label for="">在线支付（推荐）</label>
</div>
<span class="pay-type-legend">查看支持在线支付的银行和平台</span>
<div class="support-type">
<h4>支持以下支付平台在线支付：</h4>
{{#each supportLine}}
<img src="{{src}}" alt=""/>
{{/each}}
<h4>支持以下银行在线支付：</h4>
{{#each supportBank}}
<img src="{{src}}" alt=""/>
{{/each}}
</div>
</li>
<li>
<input class="radio" name="pay-type" type="radio" id=""/>
<label for="">付款方式：货到付款</label>
<span>注：订单中有限量商品、预售商品、化妆品或者订单金额超过10000元不可以选择货到付款。</span>
</li>
</ul>
<h3>送货时间</h3>
<ul>
<li>
<input checked class="radio" name="pay-time-radio" type="radio" id=""/>
<label for="">只工作日送货（双休日、节假日不送）</label>
</li>
<li>
<input class="radio" name="pay-time-radio" type="radio" id=""/>
<label for="">工作日、双休日和节假日均送货</label>
</li>
<li class="pay-dashed-hr">
<input class="radio" name="pay-time-radio" type="radio" id=""/>
<label for="">只双休日、节假日送货（工作时间不送货）</label>
</li>
<li class="pay-dashed-hr pay-type-tips">声明：我们会努力按照您指定的时间配送，但因为天气、交通等各类因素影响，您的订单有可能会有延误现象，敬请谅解！</li>
<li>
<span>送货前是否联系：</span>
<input class="radio" name="call-me" type="radio" id=""/>
<label for="">是</label>
<input checked class="radio" name="call-me" type="radio" id=""/>
<label for="">否</label>
</li>
</ul>
<span class="pay-btn">确定</span>
</div>
</div>
<div class="order-selection select-express">
... ...
/**
* @description: 地址管理
* @author: chenglong.wang@yoho.cn
*/
var $ = require('yoho.jquery');
var isProvinceChecked = false;
var $addressManage = $('.address-manage'),
$province = $addressManage.find('.text-input[name="province"]'),
$city = $addressManage.find('.text-input[name="city"]'),
$county = $addressManage.find('.text-input[name="county"]'),
$selectList = $addressManage.find('.text-input[name="province"], .text-input[name="city"]'),
$btn = $('.order-modify-btn'),
$name = $addressManage.find('.text-input[name="name"]'),
$phone = $addressManage.find('.text-input[name="phone"]'),
$telCode = $addressManage.find('.text-input[name="code-tel"]'),
$tel = $addressManage.find('.text-input[name="tel"]'),
$mail = $addressManage.find('.text-input[name="mail"]'),
$address = $addressManage.find('.text-input[name="address"]'),
$code = $addressManage.find('.text-input[name="code"]'),
$saveBtn = $('.save-btn');
function structureOption($obj, data) {
var key,
optionHtml,
defaultOption;
for (key in data) {
if (data[key].checked) {
optionHtml += '<option selected value="' + data[key].value + '">' + data[key].name + '</option>';
} else {
optionHtml += '<option value="' + data[key].value + '">' + data[key].name + '</option>';
}
}
$obj.html(optionHtml);
if ($obj.attr('name') === 'province') {
defaultOption = '<option value="0">请选择省份</option>';
} else if ($obj.attr('name') === 'city') {
defaultOption = '<option value="0">请选择城市</option>';
} else if ($obj.attr('name') === 'county') {
defaultOption = '<option value="0">请选择区县</option>';
}
$obj.prepend($(defaultOption));
}
/**
* @description: 改函数会返回地址信息
* d {Object} type: 'getProvince'获取省 type: 'getCity'获取城市 type: 'getCounty'获取县
* id: 0 && type: 'getProvince' 获取所有省，默认没有选中项
* id !== 0 && type: 'getProvince' 获取所有省，默认选中用户所在的省
*/
function getAddress(d, callback) {
var $obj,
url;
if (d.type === 'getProvince') {
url = 'getProvince';
$obj = $province;
} else if (d.type === 'getCity') {
url = 'getCity';
$obj = $city;
} else if (d.type === 'getCounty') {
url = 'getCounty';
$obj = $county;
}
$.ajax({
type: 'post',
url: '/order/save/' + url,
dataType: 'json',
data: {
id: d.id
}
}).then(function(data) {
structureOption($obj, data);
if (typeof callback === 'function') {
callback();
}
}).fail(function() {
//todo
});
}
function getUserInfo(id) {
$.ajax({
type: 'post',
url: 'getUserInfo',
data: {
id: id
}
}).then(function(data) {
var key;
for (key in data) {
if (data.hasOwnProperty[key]) {
if (!!data[key]) {
eval('$' + key).val(data[key]);
}
}
}
}).fail(function() {
});
}
//添加地址
exports.newAddress = function(id) {
var pId = id !== 'undefined' ? id : 0;
if (!!pId) {
getUserInfo();
}
//获取省
getAddress({
id: pId,
type: 'getProvince'
}, function() {
var provinceId = $province.val();
if (provinceId !== '0') {
//如果获取的省有默认选中项则获取市
getAddress({
id: provinceId,
type: 'getCity'
}, function() {
var cityId = $city.val();
//如果获取的市有默认选中项则获取县
if (cityId !== '0') {
getAddress({
id: cityId,
type: 'getCounty'
});
}
});
}
});
$selectList.change(function() {
var $this = $(this);
if ($this.attr('name') === 'province') {
getAddress({
id: $this.val(),
type: 'getCity'
}, function() {
isProvinceChecked = true;
});
}
if ($this.attr('name') === 'city' && isProvinceChecked) {
getAddress({
id: $this.val(),
type: 'getCounty'
});
}
});
};
//修改地址
exports.modifyAddress = function() {
$btn.click(function(event) {
var $this = $(event.target),
id = $this.closest('li').find('.radio').attr('id');
if ($this.hasClass('address-modify')) {
exports.newAddress(id);
} else if ($this.hasClass('address-del')) {
$.ajax({
type: 'post',
url: '/order/save/addressDel',
data: {
id: id
}
}).then(function(data) {
if (!!data.status) {
$this.closest('li').remove();
}
}).fail(function() {
//todo
});
}
});
};
exports.saveAddress = function() {
$saveBtn.click(function() {
var name = $name.val(),
province = $province.val(),
city = $city.val(),
county = $county.val(),
address = $address.val(),
phone = $phone.val(),
telCode = $telCode.val(),
tel = $tel.val(),
mail = $mail.val(),
code = $code.val(),
id = new Date();
$.ajax({
type: 'post',
url: '/order/save/addressSave',
data: {
name: name,
province: province,
city: city,
county: county,
address: address,
phone: phone,
tel: tel,
telCode: telCode,
mail: mail,
code: code,
id: id * 1
}
}).then(function(data) {
var addressStr;
if (!!data.status) {
addressStr = '<li>' +
'<input class="radio" type="radio" name="address" id="' + id * 1 + '" />' +
'<label for="' + id * 1 + '">' +
'<strong>' + name + '</strong>' +
'<span>' + address + '</span>' +
'<a href="javascript:void(0);">设为默认地址</a>' +
'<div class="order-modify-btn">' +
'<span class="address-modify">[修改]</span>' +
'<span class="address-del">[删除]</span>' +
'</div>' +
'</label>' +
'</li>';
$('.use-new-address').before($(addressStr));
}
}).fail(function() {
//todo
});
});
};
\ No newline at end of file
... ...
... ... @@ -2,8 +2,10 @@
* @description: 订单保存
* @time: 2015/12/21
*/
var $ = require('yoho.jquery');
var $ = require('yoho.jquery');
var address = require('./address');
var Order = {
/*业务数据(人民币)*/
... ... @@ -24,7 +26,12 @@ var Order = {
$tobi: $('p em', '.play-bi-pan .play-pan'),
$cancel: $('.cancel', '.btn-group'),
$total: $('em', '.to-play'),
$tbody: $('table tbody', '.pay-wapper')
$tbody: $('table tbody', '.pay-wapper'),
//请填写并核对一下信息
$orderSelectionSave: $('.address-list h2 span'),
$addAddress: $('.add-address'),
$addressManage: $('.address-manage')
},
init: function() {
var e = this.e,
... ... @@ -95,6 +102,34 @@ var Order = {
c.winShow(pan);
});
//请填写并核对一下信息
e.$orderSelectionSave.click(function() {
if (!$(this).data('expand')) {
$('.address-list-inner').addClass('hide');
$(this).data('expand', 'expand').text('[修改]');
} else {
$('.address-list-inner').removeClass('hide');
$(this).removeData('expand').text('[不保存并关闭]');
}
});
e.$addAddress.click(function() {
if (e.$addressManage.hasClass('hide')) {
e.$addressManage.removeClass('hide');
} else {
return;
}
});
},
//渲染价格明细
... ... @@ -219,4 +254,9 @@ Order.Data.activity = 0;
Order.Data.carriage = 0;
Order.UI.init();
Order.Submit.init();
\ No newline at end of file
Order.Submit.init();
address.newAddress();
address.modifyAddress();
address.saveAddress();
\ No newline at end of file
... ...
... ... @@ -70,7 +70,7 @@
}
.order-content {
padding: 20px 30px;
padding: 5px 30px;
font-size: 12px;
color: #333;
... ... @@ -78,13 +78,8 @@
//public
.order-selection {
border-top: 1px dashed #ccc;
padding-top: 30px;
&.address-list {
border-top: none;
padding-top: 0;
}
border-bottom: 1px dashed #ccc;
padding: 15px 0;
h2 {
font-size: 14px;
... ... @@ -105,7 +100,7 @@
padding: 15px 0;
li {
margin: 10px 0;
padding: 10px 0;
strong {
font-weight: bold;
... ... @@ -133,17 +128,18 @@
}
.address-manage {
border-top: 1px dashed #ccc;
li {
margin-bottom: 15px;
height: 25px;
line-height: 25px;
.address-legend {
width: 80px;
text-align: right;
display: inline-block;
height: 30px;
line-height: 30px;
color: #333;
i {
... ... @@ -154,22 +150,51 @@
.text-input {
height: 25px;
line-height: 25px;
width: 180px;
padding: 0;
border: 1px solid #ccc;
@include box-sizing();
}
select.text-input {
width: 100px;
}
.address-tel-input {
width: 180px;
text-align: center;
display: inline-block;
height: 25px;
line-height: 25px;
input {
text-align: left;
float: right;
width: 120px;
&.tel-lengend {
float: left;
width: 40px;
}
}
}
}
}
.save-btn {
background: sprite($order, btn_sb) no-repeat;
width: image-width(sprite-file($order, btn_sb));
height: image-height(sprite-file($order, btn_sb));
line-height: image-height(sprite-file($order, btn_sb));
display: block;
font-size: 14px;
color: #fff;
font-weight: bold;
text-indent: 25px;
cursor: pointer;
margin-bottom: 30px;
@each $class in save-btn, pay-btn {
.#{$class} {
background: sprite($order, $class) no-repeat;
width: image-width(sprite-file($order, $class));
height: image-height(sprite-file($order, $class));
line-height: image-height(sprite-file($order, $class));
display: block;
font-size: 14px;
color: #fff;
font-weight: bold;
text-indent: 25px;
cursor: pointer;
}
}
.pay-time {
... ... @@ -179,6 +204,64 @@
li {
margin: 10px 0;
input.radio {
margin: 0;
vertical-align: middle;
}
}
}
.pay-time-modify {
h3 {
height: 25px;
line-height: 25px;
border: 1px solid #e6e6e6;
background: #efefef;
text-indent: 25px;
position: relative;
&:after {
content: '';
display: block;
width: 11px;
height: 11px;
background: image_url('order/roundgreybtn.gif');
position: absolute;
top: 7px;
left: 8px;
}
}
.pay-dashed-hr {
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
}
.pay-type-tips {
color: #999;
}
div.pay-type-legend {
width: 130px;
display: inline-block;
}
span.pay-type-legend {
margin: 0;
color: #468fa2;
}
.support-type {
display: none;
margin-left: 130px;
border-left: 1px dashed #ccc;
padding: 15px;
font-size: 12px;
h4 {
margin-bottom: 15px;
}
}
}
}
... ...
... ... @@ -17,7 +17,24 @@ class SaveController extends AbstractAction
array(
'user' => '王成龙',
'address' => '江苏省南京市建邺区嘉陵江东街18号，国家广告产业园5栋17楼，YOHO 18605269243',
'checked' => true
'checked' => true,
'id' => 100
)
),
'supportLine' => array(
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
)
),
'supportBank' => array(
array(
'src' => 'http://static.yohobuy.com/images/bankico/BOC.gif'
),
array(
'src' => 'http://static.yohobuy.com/images/bankico/BOC.gif'
)
),
'orderProducts'=>array(
... ... @@ -55,4 +72,106 @@ class SaveController extends AbstractAction
$this->echoJson($result);
}
//获取省级联动ajax
//省
public function getProvinceAction()
{
$data = array(
array(
'name' => '111省',
'value' => 11,
'checked' => false
),
array(
'name' => '222省',
'value' => 22
),
array(
'name' => '333省',
'value' => 33
)
);
$this->echoJson($data);
}
//市
public function getCityAction()
{
$data = array(
array(
'name' => '111市',
'value' => 11
),
array(
'name' => '222市',
'value' => 22,
'checked' => false
),
array(
'name' => '333市',
'value' => 33
)
);
$this->echoJson($data);
}
//县
public function getCountyAction()
{
$data = array(
array(
'name' => '111县',
'value' => 11
),
array(
'name' => '222县',
'value' => 22
),
array(
'name' => '333县',
'value' => 33,
'checked' => false
)
);
$this->echoJson($data);
}
//修改地址
public function getUserInfoAction()
{
$data = array(
'name' => '王成龙',
'phone' => '18605269243',
'address' => '江陵江东街',
'tel' => false,
'telCode' => false,
'mail' => false,
'code' => '210000'
);
$this->echoJson($data);
}
//删除地址
public function addressDelAction()
{
$data = array(
'status' => true
);
$this->echoJson($data);
}
//保存地址
public function addressSaveAction()
{
$data = array(
'status' => true
);
$this->echoJson($data);
}
}
\ No newline at end of file
... ...