chenchao / YOHOBUYPC · Commits

Go to a project

Authored by weiqingting
Commit 7c6690c2a1b620841b6aa88d1edcb9f12c643fdb 2 parents 024d5d71 507fecb8

提交订单

Inline Side-by-side
Showing 18 changed files with 1750 additions and 1 deletions
{{> layout/simple-header}}
<div class="order-save-page yoho-page clearfix">
{{# orderSave}}
<div class="order-edit">
<div class="order-title">
<ul>
<li>查看购物车</li>
<li class="active">填写订单</li>
<li class="end">付款，完成购买</li>
</ul>
</div>
<div class="order-edit-main">
<h2 class="title">请填写并核对以下信息</h2>
<div class="order-content">
<div class="order-selection address-list">
<h2>收货地址：<span>[修改]</span></h2>
<div class="address-list-inner">
<ul class="exist-address-list">
{{#each hasAddress}}
<li class="has-exist-address">
<input class="radio" type="radio" name="exist-address" id="{{id}}" {{#if checked}}checked{{/if}}/>
<label for="{{id}}">
<strong>{{user}}</strong>
<span>{{address}}</span>
<b class="default-address">设为默认地址</b>
<div class="order-modify-btn">
<span class="address-modify">[修改]</span>
<span class="address-del">[删除]</span>
</div>
</label>
</li>
{{/each}}
<li class="use-new-address">
<input class="radio add-address" type="radio" name="exist-address" id=""/>
<label for="">使用新地址</label>
</li>
</ul>
<div class="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="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>
<div class="order-selection pay-time">
<h2>支付及送货时间：<span class="switch-pay-modify">[修改]</span></h2>
<ul>
<li>付款方式：在线支付</li>
<li>送货时间：只工作日送货（双休日、节假日不用送）</li>
<li>送货前联系我：否</li>
</ul>
<div class="pay-time-modify hide">
<h3>支付方式</h3>
<ul>
<li class="pay-dashed-hr pay-recommend">
<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 hide">
<h4>支持以下支付平台在线支付：</h4>
<ul>
{{#each supportLine}}
<li><img src="{{src}}" alt=""/></li>
{{/each}}
</ul>
<h4>支持以下银行在线支付：</h4>
<ul>
{{#each supportBank}}
<li><img src="{{src}}" alt=""/></li>
{{/each}}
</ul>
</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">
<h2>选择快递：</h2>
{{#each carriagelist}}
<div class="express-list">
<input class="radio" type="radio" name="carriagegroup" id="common-{id}" value="{{value}}"/>
<label for="common-express">{{name}}：&nbsp;&nbsp;运费 ￥{{value}} {{desc}}</label>
</div>
{{/each}}
<div class="express-list express-tips">注：配送会由于天气，交通等不可抗拒的客观因素造成您收货时间延迟，请您知悉。</div>
</div>
</div>
</div>
</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
... ...
... ... @@ -96,9 +96,18 @@
</script>
{{/if}}
<<<<<<< HEAD
{{!-- 品牌页 --}}
{{#if brandsHomePage}}
<script>
seajs.use('js/brand/index');
</script>
=======
{{!-- 订单保存--}}
{{#if orderSavePage}}
<script>
seajs.use('js/order/save');
</script>
>>>>>>> feature/order-save
{{/if}}
\ No newline at end of file
... ...
/**
* @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"]'),
$addressList = $('.address-list'),
$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() {
$addressList.click(function(event) {
var $this = $(event.target),
id = $this.closest('li').find('.radio').attr('id');
if ($this.hasClass('address-modify')) {
$addressManage.removeClass('hide');
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
});
} else if ($this.hasClass('default-address')) {
// 设为默认地址
$.ajax({
type: 'post',
url: '/order/save/defaultAddress',
data: {
id: id
}
}).then(function(data) {
if (!!data.status) {
$this.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
... ...
/**
* @description: 订单保存
* @time: 2015/12/21
*/
var $ = require('yoho.jquery');
var address = require('./address');
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'),
//请填写并核对一下信息
$orderSelectionSave: $('.address-list h2 span'),
$addAddress: $('.add-address'),
$addressManage: $('.address-manage'),
$spanPayTypeLegend: $('span.pay-type-legend'),
$supportType: $('.support-type'),
$existAddressList: $('.exist-address-list').find('li'),
$existAddress: $('.exist-address-list').find('input[name="exist-address"]'),
$payTimeModify: $('.pay-time-modify'),
$switchPayModify: $('.switch-pay-modify')
},
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.on('focus change', function(event) {
var radio = $(this).prev('label').prev(':radio');
if (event.type === 'focus') {
radio.attr('checked', true);
} else {
radio.val($(this).val());
}
});
/*使用YOHO币支付*/
e.$bp.data('tobi', e.$tobi.html());
e.$bp.on('keyup 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);
});
//请填写并核对一下信息
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.$switchPayModify.click(function() {
if (e.$payTimeModify.hasClass('hide')) {
e.$payTimeModify.removeClass('hide');
$(this).text('[不保存并关闭]');
} else {
e.$payTimeModify.addClass('hide');
$(this).text('[修改]');
}
});
e.$spanPayTypeLegend.click(function() {
$(this).toggleClass('active');
e.$supportType.toggleClass('hide');
});
$(document).on('click', '.exist-address-list li', function() {
e.$existAddressList.removeClass('active');
$(this).addClass('active');
e.$existAddress.removeAttr('checked');
$(this).find('input[name="exist-address"]').attr('checked', 'checked');
if ($(this).hasClass('use-new-address')) {
e.$addressManage.removeClass('hide');
}
});
},
//渲染价格明细
render: function() {
var e = this.e,
d = Order.Data,
c = Order.Common;
var i = 0;
e.$total.html('0.00');
e.$statistics.find('em').html('0.00');
e.$statistics.slice(3, 5).hide();
$.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);
}
},
/*业务逻辑*/
Bll: {
e: {
$juanok: $('#juansubmit'),
$juantip: $('.errtip', '.play-juan-pan'),
$biok: $('#bisubmit'),
$carriageGroup: $('input[name="carriagegroup"]')
},
init: function() {
var e = this.e,
d = Order.Data,
c = Order.Common,
u = Order.UI;
var options;
e.$carriageGroup.change(function() {
d.carriage = parseFloat($(this).val());
u.render();
});
/*点击 优惠卷支付 确认按钮*/
e.$juanok.click(function() {
var code = $('input[name="juangroup"]:checked').val();
var pan = $(this).parents('.pan');
if (code) {
options = {
url: '/Order/save/priceByCode',
type: 'post',
data: {
code: code
},
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.Bll.init();
address.newAddress();
address.modifyAddress();
address.saveAddress();
... ...
... ... @@ -82,4 +82,8 @@ a:focus {
}
}
<<<<<<< HEAD
@import "home/index", "product/index", "guang/index", "passport/index", "error";
=======
@import "home/index", "product/index", "guang/index", "passport/index", "order/index";
>>>>>>> feature/order-save
... ...
$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
... ...
.order-save-page {
width: 990px;
margin: 40px auto;
// 填写订单
.order-edit {
width: 100%;
position: relative;
margin-bottom: 35px;
&:before {
content: '';
display: block;
background: sprite($order, cart_logo) no-repeat;
width: image-width(sprite-file($order, cart_logo));
height: image-height(sprite-file($order, cart_logo));
}
.order-title {
ul {
display: block;
background: sprite($order, cartnew_flow) no-repeat;
width: image-width(sprite-file($order, cartnew_flow));
height: image-height(sprite-file($order, cartnew_flow));
position: absolute;
right: 0;
top: 0;
li {
display: block;
width: 33.33333333%;
float: left;
font-size: 12px;
color: #999;
height: 50px;
line-height: 50px;
&.active {
color: #333;
text-align: center;
&:after {
display: block;
content: '';
background: sprite($order, cart_flow_black) no-repeat;
width: image-width(sprite-file($order, cart_flow_black));
height: image-height(sprite-file($order, cart_flow_black));
position: absolute;
left: 50%;
margin-left: image-width(sprite-file($order, cart_flow_black))/(-2);
top: 0;
}
}
&.end {
text-align: right;
}
}
}
}
.order-edit-main {
border: 1px solid #ccc;
margin-top: 30px;
h2.title {
height: 30px;
line-height: 30px;
background: #000000;
color: #fff;
font-size: 12px;
text-indent: 15px;
}
.order-content {
padding: 5px 30px;
font-size: 12px;
color: #333;
//public
.order-selection {
border-bottom: 1px dashed #ccc;
padding: 15px 0;
h2 {
font-size: 14px;
color: #000;
span {
color: #e8044f;
text-decoration: underline;
cursor: pointer;
}
}
}
//end
.address-list {
ul {
padding: 15px 0;
li {
padding: 10px 0;
strong {
font-weight: bold;
margin-right: 15px;
}
input.radio {
margin: 0;
vertical-align: middle;
}
}
.order-modify-btn {
display: inline-block;
float: right;
color: #e8044f;
width: 80px;
padding-right: 20px;
height: auto;
overflow: hidden;
span {
text-decoration: underline;
cursor: pointer;
float: right;
&.address-modify {
float: left;
}
}
}
&.exist-address-list {
li {
border: 1px solid #fff;
padding-left: 15px;
&.active {
background: #dbedf7;
border: 1px solid #8fb8e0;
}
&.has-exist-address {
.default-address {
color: #468fa2;
text-decoration: underline;
cursor: pointer;
}
}
}
}
}
}
.address-manage {
border-top: 1px dashed #ccc;
li {
height: 25px;
line-height: 25px;
.address-legend {
width: 80px;
text-align: right;
display: inline-block;
color: #333;
i {
color: #e8044f;
}
}
.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;
}
}
}
}
}
@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 {
ul {
padding: 15px;
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;
padding: 0;
text-indent: 0;
}
span.pay-type-legend {
margin: 0;
color: #468fa2;
cursor: pointer;
&:after {
content: '';
width: 12px;
height: 12px;
background: image_url('order/icon_arrow.png');
display: inline-block;
@include transition(transform .3s);
}
&.active {
&:after {
@include rotate(180deg);
}
}
}
.support-type {
display: block;
margin-left: 130px;
border-left: 1px dashed #ccc;
font-size: 12px;
h4 {
padding: 10px 0 10px 15px;
}
ul {
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
li {
display: block;
float: left;
width: 105px;
height: 30px;
border: 1px solid #ccc;
margin: 0 0 10px 15px;
img {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
}
}
}
.pay-recommend {
font-size: 0;
.pay-type-legend, .support-type {
font-size: 12px;
}
}
}
}
.select-express {
border-bottom: none;
.express-list {
padding-left: 15px;
margin: 10px 0;
input.radio {
margin: 0;
vertical-align: middle;
}
}
.express-tips {
color: #999;
}
}
}
}
}
//
.order-pay {
width: 100%;
}
}
\ No newline at end of file
... ...
<?php
use Action\AbstractAction;
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'=>array(
'hasAddress' => array(
array(
'user' => '王成龙',
'address' => '江苏省南京市建邺区嘉陵江东街18号，国家广告产业园5栋17楼，YOHO 18605269243',
'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'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
array(
'src' => 'http://static.yohobuy.com/images/pay/icon/zhifubao.png'
),
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'
)
),
'carriagelist'=>array(
array('name'=>'普通快递','value'=>'0.00',"desc"=>''),
array('name'=>'普通快递','value'=>'5.00',"desc"=>'(仅支持顺丰可配送的地区)')
),
'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);
}
//获取省级联动ajax
//省
public function getProvinceAction()
{
$data = array(
array(
'name' => '111省',
'value' => 11,
'checked' => true
),
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' => true
),
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' => true
)
);
$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);
}
//设为默认地址
public function defaultAddressAction()
{
$data = array(
'status' => true
);
$this->echoJson($data);
}
}
\ No newline at end of file
... ...
... ... @@ -4,7 +4,7 @@ application.directory = APPLICATION_PATH "/application"
;;website library
application.library = ROOT_PATH "/library"
;;模块配置
application.modules = "Index,Product,Passport"
application.modules = "Index,Product,Passport,Order"
;;加载
application.bootstrap = APPLICATION_PATH "/application/Bootstrap.php"
;;view文件的扩展名
... ...