fe / YOHOBUYPC · Commits

Go to a project

Authored by lore-w
Commit f003a930a3ee06c82c30900e3817ec4b963a12ea 2 parents 6c3ce08b 29ab865b

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
Inline Side-by-side
Showing 5 changed files with 644 additions and 15 deletions
@@ -116,7 +116,148 @@ @@ -116,7 +116,148 @@
116 </div> 116 </div>
117 </div> 117 </div>
118 </div> 118 </div>
119 - <div class="order-pay"></div> 119 + <div class="order-pay">
  120 + <div class="pay-wapper">
  121 + <table>
  122 + <thead>
  123 + <tr>
  124 + <th style="width:40%;">
  125 + 商品信息
  126 + </th>
  127 + <th style="width:10%;">单价（元）</th>
  128 + <th style="width:10%;">返YOHO币</th>
  129 + <th style="width:10%;">数量</th>
  130 + <th style="width:10%;">小计（元）</th>
  131 + <th style="width:20%;">商品总价（元）</th>
  132 + </tr>
  133 + </thead>
  134 + <tbody>
  135 + {{#each orderProducts}}
  136 + <tr>
  137 + <td>
  138 + <div class="pay-pro">
  139 + <a class="pay-pro-icon" href="{{href}}"><img src="{{src}}" /></a>
  140 + <p class="pay-pro-info">
  141 + <a href="#">{{name}}</a>
  142 + <span>颜色：蓝色 尺码：L</span>
  143 + </p>
  144 + </div>
  145 + </td>
  146 + <td>{{price}}</td>
  147 + <td>{{coin}}</td>
  148 + <td>{{count}}</td>
  149 + <td></td>
  150 + <td></td>
  151 + </tr>
  152 + {{/each}}
  153 + </tbody>
  154 + </table>
  155 + <!--YOHO-->
  156 + <div class="play-content clearfix">
  157 + <div class="play-left">
  158 + <dl class="play-piao-pan pan">
  159 + <dt>索要发票</dt>
  160 + <dd>
  161 + <div class="play-pan">
  162 + <ul>
  163 + <li><label>发票抬头 :</label><input type="text" class="textbox" id="piaodesc" /></li>
  164 + <li><label>发票类型 :</label> <select class="dropdown" id="piaotype">
  165 + <option value="-1">请选择</option>
  166 + {{#each piaotypes}}
  167 + <option value="{{value}}">{{name}}</option>
  168 + {{/each}}
  169 + </select> </li>
  170 + </ul>
  171 + </div>
  172 + </dd>
  173 + </dl>
  174 + <dl class="play-remark-pan pan">
  175 + <dt>添加备注信息</dt>
  176 + <dd>
  177 + <div class="play-pan">
  178 + <textarea class="textbox" id="notedesc"></textarea>
  179 + <p class="note">声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效。</p>
  180 + <p>是否打印价格：
  181 + <input name="isPP" id="isPPY" type="radio" value="Y" checked="">
  182 + <label for="isPPY">是</label>
  183 + <input name="isPP" id="isPPN" type="radio" value="N">
  184 + <label for="isPPN">否</label>
  185 + （如：送朋友的商品可不打印价格哦！)
  186 + </p>
  187 + </div>
  188 + </dd>
  189 + </dl>
  190 + </div>
  191 + <div class="play-right">
  192 + <ul class="play-total">
  193 + <li><label>发票抬头:</label>+￥<em>0.00</em></li>
  194 + <li><label>活动:</label>-￥<em>0.00</em></li>
  195 + <li class="red"><label>运费:</label>+￥<em>0.00</em></li>
  196 + <li><label>优惠券支付<a href="javascript:void(0);" to="play-juan-pan">[修改]</a>:</label>-￥<em>0.00</em></li>
  197 + <li><label>使用YOHO币<a href="javascript:void(0);" to="play-bi-pan">[修改]</a>:</label>-￥<em>0.00</em></li>
  198 + </ul>
  199 + <dl class="play-juan-pan pan">
  200 + <dt>使用优惠卷支付</dt>
  201 + <dd>
  202 + <div class="play-pan">
  203 + <p class="strong">请选择您要使用的优惠券： </p>
  204 + <p class="strong orange">(OUTLET商品除免邮券外不可使用优惠券)</p>
  205 + <p class="strong orange">(订单中使用优惠券将不赠送商品返还的YOHO币)</p>
  206 + <div class="play-juan">
  207 + <ul>
  208 + <li>
  209 + <input name="juangroup" type="radio" value="">
  210 + <label>直接输入优惠码： </label>
  211 + <input type="text" class="textbox" id="juancode" />
  212 + </li>
  213 + {{#each juanlist}}
  214 + <li>
  215 + <input name="juangroup" type="radio" value="{{value}}">
  216 + <label>{{name}} </label>
  217 + </li>
  218 + {{/each}}
  219 + </ul>
  220 +
  221 + </div>
  222 +
  223 + <p class="errtip red"></p>
  224 + <div class="btn-group clearfix">
  225 + <input type="button" class="ok" value="确定" id="juansubmit"/>
  226 + <input type="button" class="cancel" value="取消"/>
  227 + </div>
  228 + </div>
  229 + </dd>
  230 + </dl>
  231 + <dl class="play-bi-pan pan">
  232 + <dt>使用YOHO币支付</dt>
  233 + <dd>
  234 + <div class="play-pan">
  235 + <div class="strong">
  236 + 使用YOHO币支付：
  237 + <input type="text" class="textbox" id="biprice" />
  238 + 元
  239 + </div>
  240 + <p >
  241 + 您目前有YOHO币 <em class="strong">100</em> 个
  242 + </p>
  243 + <div class="btn-group clearfix">
  244 + <input type="button" class="ok" value="确定" id="bisubmit"/>
  245 + <input type="button" class="cancel" value="取消"/>
  246 + </div>
  247 + </div>
  248 + </dd>
  249 + </dl>
  250 + </div>
  251 + </div>
  252 + </div>
  253 +
  254 + <div class="to-play">
  255 + <p>您需要实际支付金额：<em>0.00</em>元</p>
  256 + <div class="btn-group clearfix">
  257 + <input type="button" class="submit" value="确定"/>
  258 + </div>
  259 + </div>
  260 + </div>
120 {{/ orderSave}} 261 {{/ orderSave}}
121 </div> 262 </div>
122 {{> layout/footer}} 263 {{> layout/footer}}
1 -/**  
2 - * @description: 订单保存  
3 - * @time: 2015/12/21  
4 - */  
5 - 1 +/**
  2 + * @description: 订单保存
  3 + * @time: 2015/12/21
  4 + */
  5 + var $ = require('yoho.jquery');
  6 +
  7 +
  8 +var Order = {
  9 + /*业务数据(人民币)*/
  10 + Data: {
  11 + product: 0,//商品价格
  12 + activity: 0,//活动
  13 + carriage: 0,//邮费
  14 + juan: 0,//优惠卷
  15 + yohocoin: 0//YOHO币
  16 + },
  17 + /*view 交互*/
  18 + UI: {
  19 + e: {
  20 + $pan: $('.pan'),
  21 + $jc: $('#juancode'),
  22 + $bp: $('#biprice'),
  23 + $statistics: $('li', '.play-total'),
  24 + $tobi: $('p em', '.play-bi-pan .play-pan'),
  25 + $cancel: $('.cancel', '.btn-group'),
  26 + $total: $('em', '.to-play'),
  27 + $tbody: $('table tbody', '.pay-wapper')
  28 + },
  29 + init: function() {
  30 + var e = this.e,
  31 + d = Order.Data,
  32 + c = Order.Common;
  33 +
  34 + /*初始化产品价格*/
  35 + e.$tbody.find('tr').each(function(index) {
  36 + var td = $(this).find('td');
  37 + var len = e.$tbody.find('tr').length;
  38 + var subtotal = parseFloat(td.eq(1).html()) * parseInt(td.eq(3).html());
  39 +
  40 + td.eq(4).html(c.strFixed(subtotal));
  41 + d.product += subtotal;
  42 + if (!index) {
  43 + td.last().attr('rowspan', len);
  44 + } else {
  45 + td.last().remove();
  46 + }
  47 + if (index === len - 1) {
  48 + e.$tbody.find('tr').eq(0).find('td').last().html('<strong>' + c.strFixed(d.product) + '</strong>');
  49 + }
  50 + });
  51 +
  52 + /*初始化价格*/
  53 + this.render();
  54 +
  55 + /*点击pan dt 打开dd*/
  56 + e.$pan.find('dt').click(function() {
  57 + var pan = $(this).parent('dl.pan');
  58 +
  59 + if (pan.find('dd').is(':hidden')) {
  60 + c.winShow(pan);
  61 + } else {
  62 + c.winHide(pan);
  63 + }
  64 +
  65 + });
  66 +
  67 + /*使用优惠卷支付 下面的文本框*/
  68 + e.$jc.focus(function() {
  69 + $(this).prev('label').prev(':radio').attr('checked', true);
  70 + }).change(function() {
  71 + $(this).prev('label').prev(':radio').val($(this).val());
  72 + });
  73 +
  74 + /*使用YOHO币支付*/
  75 + e.$bp.data('tobi', e.$tobi.html());
  76 + e.$bp.keyup(function() {
  77 + var bi = c.enterNUM($(this).val(), $(this).data('tobi'));
  78 +
  79 + $(this).val(bi);
  80 + }).change(function() {
  81 + var bi = c.enterNUM($(this).val(), $(this).data('tobi'));
  82 +
  83 + $(this).val(bi);
  84 + });
  85 +
  86 + /*取消关闭小窗口*/
  87 + e.$cancel.click(function() {
  88 + var pan = $(this).parents('.pan');
  89 +
  90 + c.winHide(pan);
  91 + });
  92 +
  93 + e.$statistics.slice(3, 5).find('a').click(function() {
  94 + var pan = $('.' + $(this).attr('to'));
  95 +
  96 + c.winShow(pan);
  97 + });
  98 + },
  99 +
  100 + //渲染价格明细
  101 + render: function() {
  102 + var e = this.e,
  103 + d = Order.Data,
  104 + c = Order.Common;
  105 + var i = 0;
  106 +
  107 + e.$total.html('0.00');
  108 + e.$statistics.slice(3, 5).hide();
  109 + e.$statistics.slice(0, 5).find('em').html('0.00');
  110 +
  111 + $.each(d, function(key) {
  112 + if (d.hasOwnProperty(key)) {
  113 + if (d[key]) {
  114 + e.$statistics.eq(i).show().find('em').html(c.strFixed(d[key]));
  115 + }
  116 + }
  117 + i++;
  118 + });
  119 + e.$total.html(c.strFixed(c.calucate()));
  120 +
  121 + }
  122 + },
  123 + /*公共方法*/
  124 + Common: {
  125 + enterNUM: function(str1, str2) {
  126 + str1 = str1.replace(/[^\d]/g, '');
  127 + if (str1 && str2) {
  128 + str1 = parseInt(str1);
  129 + str2 = parseInt(str2);
  130 + if (str1 > str2) {
  131 + str1 = str2;
  132 + }
  133 + }
  134 + return str1;
  135 + },
  136 + calucate: function() {
  137 + var p = Order.Data;
  138 +
  139 + $.each(Order.Data, function(key, index) {
  140 + p[key] = parseFloat(Order.Data[key]);
  141 + });
  142 + return p.product - p.activity + p.carriage - p.juan - p.yohocoin;
  143 + },
  144 + winShow: function(pan) {
  145 + pan.find('dt').show();
  146 + pan.find('dd').show();
  147 + if (pan.attr('class').match(/(-bi-)|(-juan-)/g)) {
  148 + pan.find('dt').hide();
  149 + }
  150 + },
  151 + winHide: function(pan) {
  152 + pan.find('dt').show();
  153 + pan.find('dd').hide();
  154 + },
  155 + strFixed: function(str) {
  156 + return parseFloat(str).toFixed(2);
  157 + }
  158 + },
  159 + /*业务逻辑*/
  160 + Submit: {
  161 + e: {
  162 + $juanok: $('#juansubmit'),
  163 + $juantip: $('.errtip', '.play-juan-pan'),
  164 + $biok: $('#bisubmit')
  165 + },
  166 + init: function() {
  167 + var e = this.e,
  168 + d = Order.Data,
  169 + c = Order.Common,
  170 + u = Order.UI;
  171 + var options;
  172 +
  173 + /*点击 优惠卷支付 确认按钮*/
  174 + e.$juanok.click(function() {
  175 + var $jgroup = $('input[name="juangroup"]:checked');
  176 + var pan = $(this).parents('.pan');
  177 +
  178 + if ($jgroup.val()) {
  179 + options = {
  180 + url: '/Order/save/priceByCode',
  181 + type: 'post',
  182 + data: {
  183 + code: $jgroup.val()
  184 + },
  185 + success: function(data) {
  186 + if (data.code === 200) {
  187 + if (data.price) {
  188 + d.juan = data.price;
  189 + Order.UI.render();
  190 + c.winHide(pan);
  191 + return;
  192 + }
  193 + u.render();
  194 + }
  195 + e.$juantip.html(data.msg);
  196 + },
  197 + error: function() {
  198 + e.$juantip.html('网络出现错误~');
  199 + }
  200 + };
  201 +
  202 + $.ajax(options);
  203 + }
  204 + });
  205 + /*点击 YOHO币支付 确认按钮*/
  206 + e.$biok.click(function() {
  207 + var pan = $(this).parents('.pan');
  208 +
  209 + d.yohocoin = parseFloat(u.e.$bp.val()) / 100;
  210 + u.render();
  211 + c.winHide(pan);
  212 + return;
  213 + });
  214 + }
  215 + }
  216 +};
  217 +
  218 +Order.Data.activity = 0;
  219 +Order.Data.carriage = 0;
  220 +
  221 +Order.UI.init();
  222 +Order.Submit.init();
1 -$order: sprite-map("order/save/*.png", $spacing: 10px);  
2 -  
3 -@import "save";  
  1 +$order: sprite-map("order/save/*.png", $spacing: 10px);
  2 +
  3 +@import "save";
  4 +@import "pay";
  1 +.order-pay{
  2 + font-size: 12px;
  3 + line-height: 150%;
  4 + .pay-wapper{
  5 + border: 1px solid #ccc;
  6 + }
  7 + table{
  8 + width: 100%;
  9 + td{
  10 + border: 1px solid #ccc;
  11 + border-left: 0 none;
  12 + padding: 10px;
  13 + text-align: center;
  14 + }
  15 + }
  16 + thead{
  17 + background: #000;
  18 + th{
  19 + height: 32px;
  20 + line-height: 32px;
  21 + color: #fff;
  22 + vertical-align: middle;
  23 + text-align: center;
  24 + font-weight: bold;
  25 + }
  26 + .clo1{
  27 + width: 10%;
  28 + }
  29 + .clo2{
  30 + width: 20%;
  31 + }
  32 + .clo4{
  33 + width: 40%;
  34 + }
  35 + }
  36 + .pay-pro{
  37 + .pay-pro-icon{
  38 + float: left;
  39 + display: inline;
  40 + width: 60px;
  41 + height: 60px;
  42 + display: block;
  43 + }
  44 + .pay-pro-info{
  45 + color: #999;
  46 + margin-left:70px;
  47 + padding-top: 15px;
  48 + text-align: left;
  49 + a{
  50 + color: #468fa2;
  51 + text-decoration: none;
  52 + display: block;
  53 + &:hover{
  54 + text-decoration: underline;
  55 + }
  56 + }
  57 + }
  58 + }
  59 + .play-content{
  60 + padding: 10px;
  61 + .red{
  62 + color: #e8044f!important;
  63 + }
  64 + .orange{
  65 + color: #f60!important;
  66 + }
  67 + .strong{
  68 + font-weight: bold;
  69 + color: #000;
  70 + }
  71 + .pan{
  72 + dt{
  73 + width: 105px;
  74 + height: 30px;
  75 + padding: 0px 0px 0px 30px;
  76 + line-height: 30px;
  77 + text-align: left;
  78 + border: 0px;
  79 + color: #fff;
  80 + display: inline-block;
  81 + cursor: pointer;
  82 + background: url(http://static.yohobuy.com/images/btn_openclose.png) no-repeat 0px -60px;
  83 + margin-bottom:5px;
  84 + }
  85 + dd{
  86 + display: none;
  87 + border: 1px #ccc solid;
  88 + padding: 10px 15px;
  89 + margin-bottom: 10px;
  90 + }
  91 + }
  92 + .textbox{
  93 + height: 20px;
  94 + line-height: 20px;
  95 + color: #333;
  96 + border: 1px #c9c9c9 solid;
  97 + vertical-align: top;
  98 + }
  99 + .dropdown{
  100 + height: 20px;
  101 + line-height: 20px;
  102 + color: #333;
  103 + border: 1px #c9c9c9 solid;
  104 + vertical-align: top;
  105 + }
  106 + .btn-group{
  107 + text-align: right;
  108 + input{
  109 + display: inline-block;
  110 + background: none;
  111 + border: 1px solid #ccc;
  112 + border-radius: 2px;
  113 + height: 20px;
  114 + }
  115 + .ok{
  116 + background-color: #000;
  117 + color:#fff;
  118 + }
  119 + }
  120 + .play-left{
  121 + float: left;
  122 + width: 405px;
  123 + .pan{
  124 + text-align: left;
  125 + dt{
  126 + color: #000;
  127 + background: url(http://static.yohobuy.com/images/btn_openclose.png) no-repeat 0px 0px;
  128 + }
  129 + }
  130 +
  131 + }
  132 + .play-piao-pan{
  133 + li{
  134 + height: 25px;
  135 + padding: 10px 0px;
  136 + line-height: 22px;
  137 + label{
  138 + width: 65px;
  139 + display: inline-block;
  140 + }
  141 + .textbox{
  142 + width: 200px;
  143 + }
  144 + }
  145 + }
  146 + .play-remark-pan{
  147 + .textbox{
  148 + width: 369px;
  149 + height: 70px;
  150 + }
  151 + .note{
  152 + padding: 5px 0;
  153 + color: #999;
  154 + }
  155 + }
  156 + .play-right{
  157 + float: right;
  158 + width: 50%;
  159 + width: 405px;
  160 + .play-total{
  161 + text-align: right;
  162 + padding-bottom: 20px;
  163 + label{
  164 + padding-right: 10px;
  165 + }
  166 + em{
  167 + width: 80px;
  168 + text-align: left;
  169 + display: inline-block;
  170 + }
  171 + a{
  172 + color: #468fa2;
  173 + text-decoration: underline;
  174 + }
  175 + }
  176 + .pan{
  177 + text-align: right;
  178 + }
  179 +
  180 + }
  181 + .play-juan-pan{
  182 + dd{
  183 + text-align: left;
  184 + }
  185 +
  186 + .play-juan{
  187 + padding: 10px 0;
  188 + .textbox{
  189 + width: 70px;
  190 + }
  191 + }
  192 +
  193 + }
  194 + .play-bi-pan{
  195 + dd{
  196 + text-align: right;
  197 + }
  198 + .textbox{
  199 + width: 70px;
  200 + }
  201 + p{
  202 + padding: 10px 0;
  203 + }
  204 +
  205 + }
  206 +
  207 + }
  208 + .to-play{
  209 + p{
  210 + padding: 10px 0px;
  211 + font-size: 14px;
  212 + text-align: right;
  213 + color: #000;
  214 + em{
  215 + color: #e8044f;
  216 + font-size: 24px;
  217 + }
  218 + }
  219 + .btn-group{
  220 + padding: 10px 0px 40px 0px;
  221 + .submit{
  222 + float: right;
  223 + width: 133px;
  224 + height: 33px;
  225 + padding: 0px;
  226 + text-align: center;
  227 + border: 0px;
  228 + line-height: 33px;
  229 + font-size: 14px;
  230 + color: #fff;
  231 + font-weight: bold;
  232 + background: url(http://static.yohobuy.com/images/btns.png) no-repeat 0px -33px;
  233 + display: inline-block;
  234 + cursor: pointer;
  235 + }
  236 + }
  237 + }
  238 +
  239 +}
@@ -9,14 +9,28 @@ class SaveController extends AbstractAction @@ -9,14 +9,28 @@ class SaveController extends AbstractAction
9 */ 9 */
10 public function indexAction() 10 public function indexAction()
11 { 11 {
  12 + $src="http://img04.static.yohobuy.com/thumb/2015/08/25/08/012622ad14f32470d56a0b1da5d533a7e2-0060x0060-2-goodsimg.jpg";
12 $data = array( 13 $data = array(
13 'orderSavePage' => true, 14 'orderSavePage' => true,
14 - 'orderSave' => true,  
15 - 'hasAddress' => array(  
16 - array(  
17 - 'user' => '王成龙',  
18 - 'address' => '江苏省南京市建邺区嘉陵江东街18号，国家广告产业园5栋17楼，YOHO 18605269243',  
19 - 'checked' => true 15 + 'orderSave'=>array(
  16 + 'hasAddress' => array(
  17 + array(
  18 + 'user' => '王成龙',
  19 + 'address' => '江苏省南京市建邺区嘉陵江东街18号，国家广告产业园5栋17楼，YOHO 18605269243',
  20 + 'checked' => true
  21 + )
  22 + ),
  23 + 'orderProducts'=>array(
  24 + array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色：蓝色 尺码：L",'src'=>$src,'href'=>'','price'=>'179.00','coin'=>'0','count'=>'1'),
  25 + array('name' =>"Eight Guys 破洞束口牛仔裤",'tip'=>"颜色：蓝色 尺码：L",'src'=>$src,'href'=>'','price'=>'179.00','coin'=>'0','count'=>'1')
  26 + ),
  27 + 'piaotypes'=>array(
  28 + array('name'=>'个人','value'=>'001'),
  29 + array('name'=>'公司','value'=>'002')
  30 + ),
  31 + 'juanlist'=>array(
  32 + array('name'=>'YOHOXXXXXX优惠卷','value'=>'001'),
  33 + array('name'=>'爽1111优惠卷','value'=>'002')
20 ) 34 )
21 ) 35 )
22 ); 36 );
@@ -24,4 +38,21 @@ class SaveController extends AbstractAction @@ -24,4 +38,21 @@ class SaveController extends AbstractAction
24 $this->_view->display('index', $data); 38 $this->_view->display('index', $data);
25 } 39 }
26 40
  41 + /*获取优惠卷的面额*/
  42 + public function priceByCodeAction()
  43 + {
  44 + $result = array();
  45 +
  46 + do {
  47 +
  48 + $result=array(
  49 + 'code'=>200,
  50 + 'msg'=>'成功',//卷不存在，过期等等
  51 + 'price'=>'10'
  52 + );
  53 + } while (false);
  54 +
  55 + $this->echoJson($result);
  56 + }
  57 +
27 } 58 }