Authored by uedxwg

结算页面UI重构

@@ -13,7 +13,141 @@ @@ -13,7 +13,141 @@
13 font-size: 26rem / $pxConvertRem; 13 font-size: 26rem / $pxConvertRem;
14 font-weight: bold; 14 font-weight: bold;
15 } 15 }
  16 + /*xwg 2016-3-19 10:53*/
  17 + .address{
  18 + display: block;
  19 + position: relative;
  20 + margin-top: 0;
  21 + border-top: none;
  22 + .info{
  23 + width: 90%;
  24 + height: auto;
  25 + overflow: hidden;
  26 + padding-left: 10%;
  27 + padding-bottom: 12rem / $pxConvertRem;
  28 + position: relative;
  29 + span{
  30 + display: inline-block;
  31 + }
  32 + i{
  33 + position: absolute;
  34 + left: 0;
  35 + top: 20%;
  36 + font-size: 48rem / $pxConvertRem;
  37 + }
  38 + }
  39 + .info-name{
  40 + width: 48%;
  41 + font-size: 32rem / $pxConvertRem;
  42 + }
  43 + .info-phone{
  44 + width: 48%;
  45 + font-size: 24rem / $pxConvertRem;
  46 + text-align: right;
  47 + }
  48 + .info-address{
  49 + width: 100%;
  50 + font-size: 24rem / $pxConvertRem;
  51 + line-height: 38rem / $pxConvertRem;
  52 + }
  53 + > a{
  54 + position: absolute;
  55 + right: 32rem / $pxConvertRem;
  56 + bottom:8rem / $pxConvertRem;
  57 + color: #f00;
  58 + font-size: 24rem / $pxConvertRem;
  59 + span{
  60 + font-size: 24rem / $pxConvertRem;
  61 + }
  62 + }
  63 + }
  64 + .dispatch{
  65 + padding:0%;
  66 + margin:0;
  67 + .sub-block{
  68 + color: #444;
  69 + &:last-child h3{
  70 + border-bottom:none;
  71 + }
  72 + h3{
  73 + width: 95%;
  74 + height: 80rem / $pxConvertRem;
  75 + overflow: hidden;
  76 + line-height: 80rem / $pxConvertRem;
  77 + font-size: 32rem / $pxConvertRem;
  78 + margin-left: 5%;
  79 + border-bottom:1px solid #e0e0e0;
  80 + p{
  81 + display: inline-block;
  82 + }
  83 + i{
  84 + font-size: 36rem / $pxConvertRem;
  85 + margin-left: 8rem / $pxConvertRem;
  86 + }
  87 + span{
  88 + display: inline-block;
  89 + width: 65%;
  90 + text-align: right;
  91 + font-size: 28rem / $pxConvertRem;
  92 + }
  93 + }
  94 + ul{
  95 + width: 90%;
  96 + height:auto;
  97 + overflow: hidden;
  98 + line-height: 80rem / $pxConvertRem;
  99 + font-size: 28rem / $pxConvertRem;
  100 + background: #e0e0e0;
  101 + padding-left:10%;
  102 + display: none;
  103 + padding-bottom: 8rem / $pxConvertRem;
  104 + .right{
  105 + float: right;
  106 + margin-right: 40rem / $pxConvertRem;
  107 + }
  108 + li{
  109 + border-bottom:1px solid #fff;
  110 + &:last-child{
  111 + border-bottom:none;
  112 + }
  113 + }
  114 + }
  115 + }
16 116
  117 + }
  118 + .goods-num{
  119 + width: 100%;
  120 + height: 52rem / $pxConvertRem;
  121 + color: #b0b0b0;
  122 + background:#fff;
  123 + padding:20rem / $pxConvertRem 0;
  124 + text-align: right;
  125 + font-size: 28rem / $pxConvertRem;
  126 + line-height: 52rem / $pxConvertRem;
  127 + span{
  128 + padding-right:20rem / $pxConvertRem;
  129 + color: #f00;
  130 + }
  131 + }
  132 + .price-cal{
  133 + margin-bottom: 0;
  134 + font-size: 28rem / $pxConvertRem;
  135 + position: relative;
  136 + span{
  137 + position: absolute;
  138 + right: 28rem / $pxConvertRem;
  139 + text-align: right;
  140 + }
  141 + li{
  142 + font-size: 28rem / $pxConvertRem;
  143 + p{
  144 + display: inline-block;
  145 + }
  146 + span{
  147 + display: inline-block;
  148 + }
  149 + }
  150 + }
17 .address-wrap { 151 .address-wrap {
18 display: block; 152 display: block;
19 position: relative; 153 position: relative;
1 -{{> layout/header}} 1 +<!-- {{> layout/header}}
2 <div class="order-ensure-page yoho-page"> 2 <div class="order-ensure-page yoho-page">
3 {{# orderEnsure}} 3 {{# orderEnsure}}
4 <a class="address-wrap block" data-id="{{addressId}}" data-support="{{isSupport}}" href="/cart/index/selectAddress"> 4 <a class="address-wrap block" data-id="{{addressId}}" data-support="{{isSupport}}" href="/cart/index/selectAddress">
@@ -46,10 +46,6 @@ @@ -46,10 +46,6 @@
46 <a href="{{#if isLimit}}javascript:void(0);{{else}}/cart/index/selectCoupon{{/if}}"> 46 <a href="{{#if isLimit}}javascript:void(0);{{else}}/cart/index/selectCoupon{{/if}}">
47 <span class="title">优惠券</span> 47 <span class="title">优惠券</span>
48 {{# coupon}} 48 {{# coupon}}
49 - <!--<span class="coupon-count">  
50 - {{count}}张可用  
51 - </span>-->  
52 -  
53 {{#if couponName}} 49 {{#if couponName}}
54 <span class="used coupon-use" data-name="{{couponName}}"> 50 <span class="used coupon-use" data-name="{{couponName}}">
55 {{couponName}} 51 {{couponName}}
@@ -160,3 +156,166 @@ @@ -160,3 +156,166 @@
160 </ul> 156 </ul>
161 </script> 157 </script>
162 {{> layout/footer}} 158 {{> layout/footer}}
  159 + -->
  160 +
  161 + {{> layout/header}}
  162 +<div class="order-ensure-page yoho-page">
  163 + {{# orderEnsure}}
  164 + <div class="address block address-wrap" data-id ="{{addressId}}">
  165 + <div class="info">
  166 + <span class="info-name">{{name}}</span>
  167 + <span class="info-phone">{{phoneNum}}</span>
  168 + <span class="info-address">{{addressInfo}}</span>
  169 + <i class="iconfont">&#xe637;</i>
  170 + </div>
  171 + <a href="/cart/index/selectAddress">其他地址<span class="iconfont">&#xe614;</span></a>
  172 + </div>
  173 + <section class="dispatch block">
  174 + <div class="sub-block payment-type">
  175 + <h3>
  176 + <p>支付方式</p>
  177 + <span>在线支付 (推荐)</span>
  178 + <i class="iconfont">&#xe616;</i>
  179 + </h3>
  180 + <ul>
  181 + <li>
  182 + <span>在线支付 (推荐)</span>
  183 + <i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="1"></i>
  184 + </li>
  185 + <li>
  186 + <span>货到付款</span>
  187 + <i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="2"></i>
  188 + </li>
  189 + </ul>
  190 + </div>
  191 + <div class="sub-block delivery-id">
  192 + <h3>
  193 + <p>配送方式</p>
  194 + <span>普通快递 ¥0</span>
  195 + <i class="iconfont">&#xe616;</i>
  196 + </h3>
  197 + <ul>
  198 + {{#each dispatchMode}}
  199 + <li {{#if isSelected}}class="chosed"{{/if}}>
  200 + <span>{{name}}</span>
  201 + <i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="{{id}}"></i>
  202 + </li>
  203 + {{/each}}
  204 + </ul>
  205 + </div>
  206 + <div class="sub-block delivery-time">
  207 + <h3>
  208 + <p>送货时间</p>
  209 + <span>只在工作日送</span>
  210 + <i class="iconfont">&#xe616;</i>
  211 + </h3>
  212 + <ul>
  213 + {{#each dispatchTime}}
  214 + <li {{#if isSelected}}class="chosed"{{/if}} >
  215 + <span>{{name}}</span>
  216 + <i class="right iconfont radio {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="{{id}}"></i>
  217 + </li>
  218 + {{/each}}
  219 + </ul>
  220 + </div>
  221 + </section>
  222 + <section class="block" style="margin-bottom: 0;">
  223 + <div class="goods">
  224 + {{#each goods}}
  225 + {{> me/order/good}}
  226 + {{/each}}
  227 + </div>
  228 + </section>
  229 + <div class="goods-num">共{{num}}件商品 合计<span>¥{{price}}</span></div>
  230 +
  231 + <section class="block">
  232 + <ul class="sale-invoice">
  233 + {{#if isOrdinaryCart}}
  234 + <li class="coupon">
  235 + <a href="{{#if isLimit}}javascript:void(0);{{else}}/cart/index/selectCoupon{{/if}}">
  236 + <span class="title">优惠券</span>
  237 + {{# coupon}}
  238 + {{#if couponName}}
  239 + <span class="used coupon-use" data-name="{{couponName}}">
  240 + {{couponName}}
  241 + <i class="iconfont">&#xe614;</i>
  242 + </span>
  243 + {{^}}
  244 + <span class="not-used coupon-use">
  245 + {{#if isLimit}}该商品不可使用优惠券{{else}}未使用{{/if}}
  246 + <i class="iconfont">&#xe614;</i>
  247 + </span>
  248 + {{/if}}
  249 + {{/coupon}}
  250 + </a>
  251 + </li>
  252 + {{/if}}
  253 + <li class="coin" data-yoho-coin="{{yohoCoin}}">
  254 + <span class="title">YOHO币</span>
  255 +
  256 + {{#if yohoCoin}}
  257 + <span class="desc used {{#unless useYohoCoin}}hide{{/unless}}">已抵¥{{useYohoCoin}}</span>
  258 + <span class="desc can-use {{#if useYohoCoin}}hide{{/if}}">可抵¥{{yohoCoin}}</span>
  259 +
  260 + {{#if useYohoCoin}}
  261 + <span class="coin-check">
  262 + <em>- ¥ {{useYohoCoin}}</em>
  263 + <i class="iconfont checkbox icon-cb-radio"></i>
  264 + </span>
  265 + {{else}}
  266 + <span class="coin-check">
  267 + <em style="display: none;">- ¥ {{useYohoCoin}}</em>
  268 + <i class="iconfont checkbox icon-radio"></i>
  269 + </span>
  270 + {{/if}}
  271 + {{^}}
  272 + <span class="not-used coin-check">
  273 + 无YOHO币可用
  274 + </span>
  275 + {{/if}}
  276 + </li>
  277 +
  278 + {{#if invoice}}
  279 + <li class="invoice {{#if needInvoice}}focus{{/if}}">
  280 + <span class="title">发票</span>
  281 + <span class="iconfont checkbox {{#if needInvoice}}icon-cb-radio{{else}}icon-radio{{/if}}"></span>
  282 + <form id="invoice">
  283 + <input type="text" name="invoice-title" value="{{invoiceText}}" maxlength="30" placeholder="发票抬头">
  284 + <label>
  285 + 发票类型
  286 + <select class="invoice-type" name="invoice-type">
  287 + {{# invoice}}
  288 + <option value="{{id}}" {{#if isSelected}}selected{{/if}}>{{name}}</option>
  289 + {{/ invoice}}
  290 + </select>
  291 + </label>
  292 + </form>
  293 + </li>
  294 + {{/if}}
  295 + </ul>
  296 +
  297 + <form id="msg" action="" method="post">
  298 + <input type="text" name="msg" value="{{msg}}" maxlength="40" placeholder="留言">
  299 + </form>
  300 + </section>
  301 + <section class="price-cal block">
  302 + <ul>
  303 + {{#cartPayData}}
  304 + <li>
  305 + <p>{{promotion}}</p>
  306 + <span>{{promotion_amount}}</span>
  307 + </li>
  308 + {{/cartPayData}}
  309 + </ul>
  310 + <div class="price-cost">
  311 + 实付金额:
  312 + <span>¥{{price}}</span>
  313 + </div>
  314 + </section>
  315 + <div class="bill">
  316 + 您需要支付<span>¥{{price}}</span>
  317 + <a href="#">结算</a>
  318 + </div>
  319 + {{/ orderEnsure}}
  320 +</div>
  321 +{{> layout/footer}}