fe / yoho-blk · Commits

Go to a project

Authored by htoooth
Commit 8717dd37c922852c01423d835a9fea75d04732df 2 parents 43d6252f daa0cc98 master ... develop feature/catch feature/docker feature/login-msg feature/login-ua-ip feature/removCamel feature/safe-bug feature/sessionKey feature/setting feature/vip feature/webpack2 feature/wsl5.3 gray release/2.0 release/fontBack2.0

Merge remote-tracking branch 'origin/release/1.0' into release/1.0 

# Conflicts:
#	apps/channel/views/partial/brand-img-box.hbs
#	apps/me/views/partial/refund-detail.hbs
#	apps/product/controllers/shop.js
#	apps/product/models/shop-service.js
#	public/img/layout/404.svg
#	public/img/layout/500.svg
#	public/img/layout/empty-bag.svg
#	public/img/product/search.svg
#	public/js/help/help.page.js
#	public/js/passport/back/back.js
#	public/scss/help/_index.css
#	public/scss/product/_shop.css
#	public/scss/shopping/_empty-cart.css
#	public/scss/shopping/_order.css
#	public/scss/shopping/_pay.css
#	public/scss/shopping/_statement.css
#	public/tpl/me/size-list.hbs
#	public/tpl/shopping/address-list.hbs
Inline Side-by-side
Showing 26 changed files with 2610 additions and 1188 deletions
... ... @@ -144,7 +144,7 @@ const favorite = {
retData.brandList.forEach(b => {
if (b.newProduct && b.newProduct.length > 0) {
b.newProduct.forEach(p => {
p.url = `${config.siteUrl}/product/pro_${p.productId}_${p.goods[0].id}/${p.cnAlphabet}.html`; // eslint-disable-line
p.url = `${config.siteUrl}/product/pro_${p.productId}_${p.goods[0].id}/${p.cnAlphabet}.html`; // eslint-disable-line
});
b.newProduct.push({
more: true
... ...
... ... @@ -43,7 +43,7 @@ const list = {
retData.filter = DataHelper.filterHandle(data.filter, q);
retData.filter.showPrice = data.total > 10;
retData.filter.showInfo = (retData.filter.style && retData.filter.style.length > 0)
|| (data.standard && data.standard.length > 0); //eslint-disable-line
|| (data.standard && data.standard.length > 0); //eslint-disable-line
nav = _.concat(nav, retData.filter.nav);
}
... ...
... ... @@ -46,7 +46,7 @@ const Query = {
retData.filter = DataHelper.filterHandle(data.filter, q);
retData.filter.showPrice = data.total > 10;
retData.filter.showInfo = (retData.filter.style && retData.filter.style.length > 0)
|| (data.standard && data.standard.length > 0); //eslint-disable-line
|| (data.standard && data.standard.length > 0); //eslint-disable-line
retData.filter.useSmallSort = 1;
}
... ...
<div class="blk-page yoho-product-list">
<div class="center-content">
{{# navPath}}
{{> path-nav}}
{{/ navPath}}
</div>
<div class="center-content clearfix">
{{#filter}}
<div class="left">
{{!-- 筛选区域 --}}
{{> list/filter}}
</div>
{{/filter}}
{{#if paginationData.total}}
<div class="right">
{{!-- 已选中条件 --}}
{{#filter}}
{{> list/filter-area}}
{{/filter}}
{{!-- 排序 --}}
{{> list/order-area}}
{{!-- 商品列表 --}}
{{> list/goods-box}}
{{!-- 分页 --}}
{{{ pagination paginationData }}}
</div>
{{^}}
{{!-- 空结果 --}}
{{> list/empty}}
{{/if}}
</div>
</div>
<div class="blk-page yoho-product-list">
<div class="center-content">
{{# navPath}}
{{> path-nav}}
{{/ navPath}}
</div>
<div class="center-content clearfix">
{{#filter}}
<div class="left">
{{!-- 筛选区域 --}}
{{> list/filter}}
</div>
{{/filter}}
{{#if paginationData.total}}
<div class="right">
{{!-- 已选中条件 --}}
{{#filter}}
{{> list/filter-area}}
{{/filter}}
{{!-- 排序 --}}
{{> list/order-area}}
{{!-- 商品列表 --}}
{{> list/goods-box}}
{{!-- 分页 --}}
{{{ pagination paginationData }}}
</div>
{{^}}
{{!-- 空结果 --}}
{{> list/empty}}
{{/if}}
</div>
</div>
... ...
<div class="yoho-ui-accordion">
<h3>适用人群</h3>
<div class="body sex-body">
{{#each people}}
<div class="input-radio" data-value="{{value}}">
{{> icon/radio}}
<label>{{name}}</label>
</div>
{{/each}}
</div>
</div>
<div class="blank-div"></div>
{{#if singleSort}}
<div class="yoho-ui-accordion">
<h3>全部品类</h3>
<div class="body">
<div class="list-body nano">
<div class="nano-content">
{{#each sortData}}
<div class="input-radio" data-value="{{relationParameter.sort}}" data-usesmall="{{../useSmallSort}}"
data-category="{{categoryId}}">
{{> icon/radio }}
<label>{{categoryName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
</div>
{{^}}
<div class="title">全部品类</div>
<div class="yoho-ui-accordion no-active">
{{#each sortData}}
<h3 {{#if checked}}class="active"{{/if}}>{{categoryName}}</h3>
<div class="body" data-value="{{categoryId}}">
<div class="list-body nano">
<div class="nano-content">
{{#each sub}}
<div class="input-radio" data-value="{{relationParameter.sort}}" data-usesmall="{{../../useSmallSort}}"
data-category="{{categoryId}}">
{{> icon/radio }}
<label>{{categoryName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</div>
{{/if}}
<div class="blank-div"></div>
{{#if brandData}}
<div class="yoho-ui-accordion">
<h3>品牌</h3>
<div class="body">
<div class="brand-body">
<input type="text" class="brand-search" placeholder="输入您要查找的品牌">
</div>
<div class="brand-letter-items">
<span class="item item-all" data-value="">全部</span>
{{#each letters}}
<span class="item" data-value="{{letter}}">{{letter}}</span>
{{/each}}
<span class="mulit-choose">
多选 ＋
</span>
</div>
<div class="brand-list nano">
<div class="nano-content">
{{#each brandData}}
<div class="input-radio {{#if checked}}default-check{{/if}}" data-value="{{id}}"
data-word="{{brandAlif}}">
{{> icon/radio}}
{{#if brandNameEn}}
<label>{{brandNameEn}}</label>
{{^}}
<label>{{brandName}}</label>
{{/if}}
</div>
{{/each}}
</div>
</div>
<div class="brand-btns">
<span class="btn disable large confirm">确定</span>
<span class="btn white large cancel">取消</span>
</div>
</div>
</div>
{{/if}}
{{#if showPrice}}
<div class="yoho-ui-accordion">
<h3>价格</h3>
<div class="body price-body">
{{#each priceRange}}
<div class="input-radio" data-value="{{lower}},{{higher}}">
{{> icon/radio }}
<label>¥{{lower}}-¥{{higher}}</label>
</div>
{{/each}}
<div class="price-btns">
<div class="price-input inline-block">
<span class="iconfont">&#xe63a;</span>
<input type="text" class="price-low" value="{{customPriceLow}}">
</div>
<span>－</span>
<div class="price-input inline-block">
<span class="iconfont">&#xe63a;</span>
<input type="text" class="price-high" value="{{customPriceHigh}}">
</div>
<span class="btn large confirm">确定</span>
</div>
</div>
</div>
{{/if}}
{{#if showSize}}
<div class="yoho-ui-accordion">
<h3>尺码</h3>
<div class="body">
<div class="size-body nano">
<div class="nano-content">
{{#each size}}
<div class="input-radio" data-value="{{sizeId}}">
{{> icon/radio }}
<label>{{sizeName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
</div>
{{/if}}
{{#if colors}}
<div class="yoho-ui-accordion">
<h3>颜色</h3>
<div class="body">
<div class="color-body nano">
<div class="nano-content">
{{#each colors}}
<div class="input-radio" data-value="{{id}}">
{{> round-color}}
<label>{{title}}</label>
</div>
{{/each}}
</div>
</div>
</div>
</div>
{{/if}}
{{#if showInfo}}
<div class="blank-div"></div>
<div class="title">商品属性</div>
<div class="yoho-ui-accordion no-active">
{{#if style}}
<h3>风格</h3>
<div class="body">
<div class="style-mulit-btn">
<span class="btn white">多选</span>
</div>
<div class="style-body nano">
<div class="nano-content">
{{#each style}}
<div class="input-radio {{#if checked}}default-check{{/if}}" data-value="{{styleId}}">
{{> icon/radio }}
<label>{{styleName}}</label>
</div>
{{/each}}
</div>
</div>
<div class="style-btns">
<span class="btn disable large confirm">确定</span>
<span class="btn white large cancel">取消</span>
</div>
</div>
{{/if}}
{{#each standard}}
<h3>{{standardName}}</h3>
<div class="body" data-value="{{standardId}}">
<div class="standard-body nano">
<div class="nano-content">
{{#each sub}}
<div class="input-radio" data-value="{{standardId}}">
{{> icon/radio }}
<label>{{standardName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</div>
{{/if}}
<div class="blank-div" style="margin-bottom: 10px;"></div>
<div class="yoho-ui-accordion">
<h3>适用人群</h3>
<div class="body sex-body">
{{#each people}}
<div class="input-radio" data-value="{{value}}">
{{> icon/radio}}
<label>{{name}}</label>
</div>
{{/each}}
</div>
</div>
<div class="blank-div"></div>
{{#if singleSort}}
<div class="yoho-ui-accordion">
<h3>全部品类</h3>
<div class="body">
<div class="list-body nano">
<div class="nano-content">
{{#each sortData}}
<div class="input-radio" data-value="{{relationParameter.sort}}" data-usesmall="{{../useSmallSort}}"
data-category="{{categoryId}}">
{{> icon/radio }}
<label>{{categoryName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
</div>
{{^}}
<div class="title">全部品类</div>
<div class="yoho-ui-accordion no-active">
{{#each sortData}}
<h3 {{#if checked}}class="active"{{/if}}>{{categoryName}}</h3>
<div class="body" data-value="{{categoryId}}">
<div class="list-body nano">
<div class="nano-content">
{{#each sub}}
<div class="input-radio" data-value="{{relationParameter.sort}}" data-usesmall="{{../../useSmallSort}}"
data-category="{{categoryId}}">
{{> icon/radio }}
<label>{{categoryName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</div>
{{/if}}
<div class="blank-div"></div>
{{#if brandData}}
<div class="yoho-ui-accordion">
<h3>品牌</h3>
<div class="body">
<div class="brand-body">
<input type="text" class="brand-search" placeholder="输入您要查找的品牌">
</div>
<div class="brand-letter-items">
<span class="item item-all" data-value="">全部</span>
{{#each letters}}
<span class="item" data-value="{{letter}}">{{letter}}</span>
{{/each}}
<span class="mulit-choose">
多选 ＋
</span>
</div>
<div class="brand-list nano">
<div class="nano-content">
{{#each brandData}}
<div class="input-radio {{#if checked}}default-check{{/if}}" data-value="{{id}}"
data-word="{{brandAlif}}">
{{> icon/radio}}
{{#if brandNameEn}}
<label>{{brandNameEn}}</label>
{{^}}
<label>{{brandName}}</label>
{{/if}}
</div>
{{/each}}
</div>
</div>
<div class="brand-btns">
<span class="btn disable large confirm">确定</span>
<span class="btn white large cancel">取消</span>
</div>
</div>
</div>
{{/if}}
{{#if showPrice}}
<div class="yoho-ui-accordion">
<h3>价格</h3>
<div class="body price-body">
{{#each priceRange}}
<div class="input-radio" data-value="{{lower}},{{higher}}">
{{> icon/radio }}
<label>¥{{lower}}-¥{{higher}}</label>
</div>
{{/each}}
<div class="price-btns">
<div class="price-input inline-block">
<span class="iconfont">&#xe63a;</span>
<input type="text" class="price-low" value="{{customPriceLow}}">
</div>
<span>－</span>
<div class="price-input inline-block">
<span class="iconfont">&#xe63a;</span>
<input type="text" class="price-high" value="{{customPriceHigh}}">
</div>
<span class="btn large confirm">确定</span>
</div>
</div>
</div>
{{/if}}
{{#if showSize}}
<div class="yoho-ui-accordion">
<h3>尺码</h3>
<div class="body">
<div class="size-body nano">
<div class="nano-content">
{{#each size}}
<div class="input-radio" data-value="{{sizeId}}">
{{> icon/radio }}
<label>{{sizeName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
</div>
{{/if}}
{{#if colors}}
<div class="yoho-ui-accordion">
<h3>颜色</h3>
<div class="body">
<div class="color-body nano">
<div class="nano-content">
{{#each colors}}
<div class="input-radio" data-value="{{id}}">
{{> round-color}}
<label>{{title}}</label>
</div>
{{/each}}
</div>
</div>
</div>
</div>
{{/if}}
{{#if showInfo}}
<div class="blank-div"></div>
<div class="title">商品属性</div>
<div class="yoho-ui-accordion no-active">
{{#if style}}
<h3>风格</h3>
<div class="body">
<div class="style-mulit-btn">
<span class="btn white">多选</span>
</div>
<div class="style-body nano">
<div class="nano-content">
{{#each style}}
<div class="input-radio {{#if checked}}default-check{{/if}}" data-value="{{styleId}}">
{{> icon/radio }}
<label>{{styleName}}</label>
</div>
{{/each}}
</div>
</div>
<div class="style-btns">
<span class="btn disable large confirm">确定</span>
<span class="btn white large cancel">取消</span>
</div>
</div>
{{/if}}
{{#each standard}}
<h3>{{standardName}}</h3>
<div class="body" data-value="{{standardId}}">
<div class="standard-body nano">
<div class="nano-content">
{{#each sub}}
<div class="input-radio" data-value="{{standardId}}">
{{> icon/radio }}
<label>{{standardName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</div>
{{/if}}
<div class="blank-div" style="margin-bottom: 10px;"></div>
... ...
{{> settle-header}}
<div class="shopping-order-page blk-page">
{{# content}}
<div class="center-content">
{{> bc-nav}}
<div class="address-info order-block">
<p class="title">
收货信息
<span class="right new-address">
新增收货地址
<i class="iconfont">&#xe61f;</i>
</span>
</p>
<div class="content">
<ul id="address-list" class="clearfix address-list shrink"></ul>
<p class="address-all vhide">
显示全部地址
<span class="iconfont">&#xe616;</span>
</p>
</div>
</div>
<div class="payment-type order-block">
<p class="title">支付方式</p>
<ul class="content">
<li class="chose-row clearfix focus">
<span class="chose-block">在线支付</span>
<span class="tip-text">支持主流银行卡、微信、支付宝、银联等平台付款，方便快捷</span>
</li>
</ul>
</div>
<div class="dispatch-type order-block">
<p class="title">配送方式</p>
<ul class="content">
{{#each delivery_way}}
<li class="chose-row clearfix{{#if @first}} focus{{/if}}" data-id="{{delivery_way_id}}">
<span class="chose-block">{{delivery_way_name}}：运费¥{{round delivery_way_cost 2}}</span>
</li>
{{/each}}
</ul>
</div>
<div class="order-info order-block">
<div class="order-inner">
<p class="title">
订单信息
<a class="right go-cart-link" href="{{goCartLink}}">
返回购物袋修改
<span class="iconfont">&#xe61e;</span>
</a>
</p>
{{#with shopping_cart_data}}
{{#isY is_multi_package}}
<div class="multi-package-row">
温馨提示：您购买的商品<em class="blue">分属不同仓库</em>，需要调拨，将被拆分成多个包裹送达
<span class="iconfont show-package">&#xe643;</span>
<div class="package-list hide">
<div class="package-up-icon"></div>
{{#each ../package_list}}
<div class="package-item">
<p class="package-title bold">包裹{{math @index '+' 1}}:{{#if @first}}总仓发货{{^}}异地调拨{{/if}}</p>
{{#if showToggle}}
<span class="iconfont toggle-icon left-icon">&#xe607;</span>
<span class="iconfont toggle-icon right-icon">&#xe61e;</span>
{{/if}}
<div class="package-goods-wrap">
<ul class="package-goods clearfix">
{{#each goods_list}}
<li class="left">
<img class="lazy package-goods-img" data-original="{{image goods_images 100 134}}">
</li>
{{/each}}
</ul>
</div>
<p class="package-shipping">运费：¥{{shopping_cost}}元（原价{{shopping_orig_cost}}元，优惠{{shopping_cut_cost}}元）</p>
</div>
{{/each}}
</div>
</div>
{{/isY}}
{{/with}}
<div class="content">
<p class="order-table-head clearfix">
<span class="info">商品信息</span>
<span class="color-size">颜色尺码</span>
<span class="price">单价</span>
<span class="number">数量</span>
</p>
<ul class="order-table-body">
{{#each goods_list}}
<li class="order-goods clearfix">
<a class="goods-img inline-block" href="{{link}}" target="_blank">
<img class="lazy" data-original="{{image goods_images 100 148}}">
{{#if isGift}}
<span class="gift-tag">赠品</span>
{{/if}}
</a>
<p class="brand-and-name inline-block">
<a class="brand-name" href="{{brandUrl}}" target="_blank">{{brand_name}}</a>
<a class="name" href="{{link}}" target="_blank">{{product_name}}</a>
</p>
<p class="color-size">
<span class="color">颜色：{{color_name}}</span>
<span class="size">尺码：{{size_name}}</span>
</p>
<p class="price">
¥{{round last_price 2}}
</p>
<p class="number">
<span class="iconfont">&#xe61d;</span>
{{buy_number}}
</p>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="invoice-info order-block">
<p class="title">发票信息</p>
<div id="invoice-content" class="content">
<div class="invoice-radio">
{{> icon/radio}}
<label>发票开具</label>
</div>
</div>
</div>
<div class="coin-and-remark">
<div class="coin">
<p class="title">
<span class="iconfont coin-ctrl">&#xe639;</span>
<span class="coin-ctrl">使用有货币</span>
</p>
<div class="content hide">
<div class="using-coin">
本次使用有货币
<input id="input-coin" class="input coin-input" type="text" data-max="{{yoho_coin}}">
个
您当前共有有货币<em class="blue">{{yoho_coin}}</em>个
<span id="coin-tip" class="coin-tip block blue vhide">抵扣¥<em class="balance-coin"></em></span>
<span id="coin-sure" class="btn disable">确定</span>
</div>
<div class="used-coin hide">
本次使用有货币<em id="coin-used" class="blue"></em>个，本次抵扣<span class="blue">¥<em id="coin-deduction"></em></span>
<span class="btn white modify">修改</span>
<span class="btn white cancel">取消使用</span>
</div>
</div>
</div>
<div class="remark">
<p class="title">
<span class="iconfont remark-ctrl">&#xe639;</span>
<span class="remark-ctrl">添加备注信息</span>
</p>
<div class="content hide">
<textarea id="remark-content" class="remark-content" placeholder="声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效"></textarea>
<div id="print-price" class="print-price">
是否打印价格：
<div class="print-price-radio-group">
{{#each printPriceRadio}}
<div class="print-price-radio" data-value="{{value}}">
<label>{{name}}</label>
{{> icon/radio}}
</div>
{{/each}}
<span class="remark-tip">（如：送朋友的商品可不打印价格哦！）</span>
</div>
</div>
</div>
</div>
</div>
<div class="balance clearfix">
{{# shopping_cart_data}}
<div class="balance-info left">
<p class="receiver-wrap">
{{#with ../delivery_address}}
<i>收货信息：</i>
<em id="receiver">{{consignee}} {{mobile}} {{area}} {{address}}</em>
{{/with}}
<span class="right">{{selected_goods_count}}件商品</span>
</p>
<p>
支付方式：<em id="balance-pay-type">在线支付</em>
</p>
</div>
<ul id="balance-list" class="balance-list right">
{{#each promotion_formula_list}}
<li>
<span class="balance-title">
{{promotion}}
{{#if shippingCut}}
<em>(原价：{{shippingOrigin}}元，优惠：{{shippingCut}}元)</em>
{{/if}}
</span>
<span class="balance-cost">{{promotion_amount}}</span>
</li>
{{/each}}
<li class="need-pay">
<span class="balance-title">应付金额{{#if shipping_cost}}（含运费）{{/if}}：</span>
<span id="balance-cost" class="balance-cost" data-cost="{{last_order_amount}}">¥<em>{{round last_order_amount 2}}</em></span>
</li>
<li>
<span id="submit-order" class="btn submit-order">提交订单</span>
</li>
</ul>
{{/ shopping_cart_data}}
</div>
{{!-- 服务端渲染,客户端使用 --}}
<script id="invoice-dialog-tpl" type="text/html">
<p class="dialog-title">发票信息</p>
<ul class="invoice-tab">
<li class="btn paper-invoice">纸质发票</li>
</ul>
<div class="invoice-entity el">
<div class="row clearfix">
<span class="label">
<em class="required-mark">*</em>
发票抬头：
</span>
<div class="row-content">
<div class="invoice-title-radio-group">
{{#each invoices.invoiceTitle}}
<div class="invoice-title-radio{{#if myClass}} {{myClass}}{{/if}}" data-value="{{value}}">
{{> icon/radio}}
<label>{{name}}</label>
</div>
{{/each}}
</div>
<div>
<input class="input invoice-title-input hide" type="text" maxlength="30" placeholder="请填写单位名称">
<span class="input-tip invoice-title-tip blue hide">
<span class="iconfont">&#xe60c;</span>
请填写发票抬头
</span>
</div>
</div>
</div>
<div class="row clearfix">
<span class="label">
<em class="required-mark">*</em>
发票内容：
</span>
<div class="row-content">
<div class="invoice-content-radio-group">
{{#each invoices.invoiceContentList}}
<div class="invoice-content-radio" data-value="{{invoices_type_id}}">
{{> icon/radio}}
<label>{{invoices_type_name}}</label>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</script>
</div>
{{/ content}}
{{> settle-header}}
<div class="shopping-order-page blk-page">
{{# content}}
<div class="center-content">
{{> bc-nav}}
<div class="address-info order-block">
<p class="title">
收货信息
<span class="right new-address">
新增收货地址
<i class="iconfont">&#xe61f;</i>
</span>
</p>
<div class="content">
<ul id="address-list" class="clearfix address-list shrink"></ul>
<p class="address-all vhide">
显示全部地址
<span class="iconfont">&#xe616;</span>
</p>
</div>
</div>
<div class="payment-type order-block">
<p class="title">支付方式</p>
<ul class="content">
<li class="chose-row clearfix focus">
<span class="chose-block">在线支付</span>
<span class="tip-text">支持主流银行卡、微信、支付宝、银联等平台付款，方便快捷</span>
</li>
</ul>
</div>
<div class="dispatch-type order-block">
<p class="title">配送方式</p>
<ul class="content">
{{#each delivery_way}}
<li class="chose-row clearfix{{#if @first}} focus{{/if}}" data-id="{{delivery_way_id}}">
<span class="chose-block">{{delivery_way_name}}：运费¥{{round delivery_way_cost 2}}</span>
</li>
{{/each}}
</ul>
</div>
<div class="order-info order-block">
<div class="order-inner">
<p class="title">
订单信息
<a class="right go-cart-link" href="{{goCartLink}}">
返回购物袋修改
<span class="iconfont">&#xe61e;</span>
</a>
</p>
{{#with shopping_cart_data}}
{{#isY is_multi_package}}
<div class="multi-package-row">
温馨提示：您购买的商品<em class="blue">分属不同仓库</em>，需要调拨，将被拆分成多个包裹送达
<span class="iconfont show-package">&#xe643;</span>
<div class="package-list hide">
<div class="package-up-icon"></div>
{{#each ../package_list}}
<div class="package-item">
<p class="package-title bold">包裹{{math @index '+' 1}}:{{#if @first}}总仓发货{{^}}异地调拨{{/if}}</p>
{{#if showToggle}}
<span class="iconfont toggle-icon left-icon">&#xe607;</span>
<span class="iconfont toggle-icon right-icon">&#xe61e;</span>
{{/if}}
<div class="package-goods-wrap">
<ul class="package-goods clearfix">
{{#each goods_list}}
<li class="left">
<img class="lazy package-goods-img" data-original="{{image goods_images 100 134}}">
</li>
{{/each}}
</ul>
</div>
<p class="package-shipping">运费：¥{{shopping_cost}}元（原价{{shopping_orig_cost}}元，优惠{{shopping_cut_cost}}元）</p>
</div>
{{/each}}
</div>
</div>
{{/isY}}
{{/with}}
<div class="content">
<p class="order-table-head clearfix">
<span class="info">商品信息</span>
<span class="color-size">颜色尺码</span>
<span class="price">单价</span>
<span class="number">数量</span>
</p>
<ul class="order-table-body">
{{#each goods_list}}
<li class="order-goods clearfix">
<a class="goods-img inline-block" href="{{link}}" target="_blank">
<img class="lazy" data-original="{{image goods_images 100 148}}">
{{#if isGift}}
<span class="gift-tag">赠品</span>
{{/if}}
</a>
<p class="brand-and-name inline-block">
<a class="brand-name" href="{{brandUrl}}" target="_blank">{{brand_name}}</a>
<a class="name" href="{{link}}" target="_blank">{{product_name}}</a>
</p>
<p class="color-size">
<span class="color">颜色：{{color_name}}</span>
<span class="size">尺码：{{size_name}}</span>
</p>
<p class="price">
¥{{round last_price 2}}
</p>
<p class="number">
<span class="iconfont">&#xe61d;</span>
{{buy_number}}
</p>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="invoice-info order-block">
<p class="title">发票信息</p>
<div id="invoice-content" class="content">
<div class="invoice-radio">
{{> icon/radio}}
<label>发票开具</label>
</div>
</div>
</div>
<div class="coin-and-remark">
<div class="coin">
<p class="title">
<span class="iconfont coin-ctrl">&#xe639;</span>
<span class="coin-ctrl">使用有货币</span>
</p>
<div class="content hide">
<div class="using-coin">
本次使用有货币
<input id="input-coin" class="input coin-input" type="text" data-max="{{yoho_coin}}">
个
您当前共有有货币<em class="blue">{{yoho_coin}}</em>个
<span id="coin-tip" class="coin-tip block blue vhide">抵扣¥<em class="balance-coin"></em></span>
<span id="coin-sure" class="btn disable">确定</span>
</div>
<div class="used-coin hide">
本次使用有货币<em id="coin-used" class="blue"></em>个，本次抵扣<span class="blue">¥<em id="coin-deduction"></em></span>
<span class="btn white modify">修改</span>
<span class="btn white cancel">取消使用</span>
</div>
</div>
</div>
<div class="remark">
<p class="title">
<span class="iconfont remark-ctrl">&#xe639;</span>
<span class="remark-ctrl">添加备注信息</span>
</p>
<div class="content hide">
<textarea id="remark-content" class="remark-content" placeholder="声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效"></textarea>
<div id="print-price" class="print-price">
是否打印价格：
<div class="print-price-radio-group">
{{#each printPriceRadio}}
<div class="print-price-radio" data-value="{{value}}">
<label>{{name}}</label>
{{> icon/radio}}
</div>
{{/each}}
<span class="remark-tip">（如：送朋友的商品可不打印价格哦！）</span>
</div>
</div>
</div>
</div>
</div>
<div class="balance clearfix">
{{# shopping_cart_data}}
<div class="balance-info left">
<p class="receiver-wrap">
{{#with ../delivery_address}}
<i>收货信息：</i>
<em id="receiver">{{consignee}} {{mobile}} {{area}} {{address}}</em>
{{/with}}
<span class="right">{{selected_goods_count}}件商品</span>
</p>
<p>
支付方式：<em id="balance-pay-type">在线支付</em>
</p>
</div>
<ul id="balance-list" class="balance-list right">
{{#each promotion_formula_list}}
<li>
<span class="balance-title">
{{promotion}}
{{#if shippingCut}}
<em>(原价：{{shippingOrigin}}元，优惠：{{shippingCut}}元)</em>
{{/if}}
</span>
<span class="balance-cost">{{promotion_amount}}</span>
</li>
{{/each}}
<li class="need-pay">
<span class="balance-title">应付金额{{#if shipping_cost}}（含运费）{{/if}}：</span>
<span id="balance-cost" class="balance-cost" data-cost="{{last_order_amount}}">¥<em>{{round last_order_amount 2}}</em></span>
</li>
<li>
<span id="submit-order" class="btn submit-order">提交订单</span>
</li>
</ul>
{{/ shopping_cart_data}}
</div>
{{!-- 服务端渲染,客户端使用 --}}
<script id="invoice-dialog-tpl" type="text/html">
<p class="dialog-title">发票信息</p>
<ul class="invoice-tab">
<li class="btn paper-invoice">纸质发票</li>
</ul>
<div class="invoice-entity el">
<div class="row clearfix">
<span class="label">
<em class="required-mark">*</em>
发票抬头：
</span>
<div class="row-content">
<div class="invoice-title-radio-group">
{{#each invoices.invoiceTitle}}
<div class="invoice-title-radio{{#if myClass}} {{myClass}}{{/if}}" data-value="{{value}}">
{{> icon/radio}}
<label>{{name}}</label>
</div>
{{/each}}
</div>
<div>
<input class="input invoice-title-input hide" type="text" maxlength="30" placeholder="请填写单位名称">
<span class="input-tip invoice-title-tip blue hide">
<span class="iconfont">&#xe60c;</span>
请填写发票抬头
</span>
</div>
</div>
</div>
<div class="row clearfix">
<span class="label">
<em class="required-mark">*</em>
发票内容：
</span>
<div class="row-content">
<div class="invoice-content-radio-group">
{{#each invoices.invoiceContentList}}
<div class="invoice-content-radio" data-value="{{invoices_type_id}}">
{{> icon/radio}}
<label>{{invoices_type_name}}</label>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</script>
</div>
{{/ content}}
</div>
\ No newline at end of file
... ...
{{> settle-header}}
<div class="center-content pay-online-wrapper">
{{# order}}
<div class="title">
<div class="content">
<span class="desc left">订单已提交成功，请您尽快付款！订单编号：{{orderCode}}</span>
<span class="cash right">应付金额：{{paymentAmount}}</span>
</div>
<div class="footer">
<span class="desc pay-notice left">{{../username}}如果<span class="blue">2小时</span>内您无法完成付款，系统会将您的订单取消</span>
<span id="order-detail-ctrl" class="right order-detail-ctrl">
<em>收起详情</em>
<i class="iconfont down">&#xe616;</i>
<i class="iconfont up">&#xe617;</i>
</span>
</div>
</div>
<div class="order-detail">
<div class="row">
<div class="item receiver-address">
<span class="label"> 收货地址：</span>
<span>{{area}} {{address}}</span>
</div>
</div>
<div class="row">
<div class="item">
<span class="label">收&nbsp;&nbsp;货&nbsp;&nbsp;人：</span>
<span>{{userName}}</span>
</div>
<div class="item">
<span class="label">联系方式：</span>
<span>{{mobile}}</span>
</div>
</div>
<div class="row">
<div class="item">
<span class="label">支付方式：</span>
<span>在线支付</span>
</div>
<div class="item">
<span class="label">送货时间：</span>
<span>{{deliveryTime}}</span>
</div>
</div>
</div>
{{/order}}
{{# pay}}
<div class="pay-type">
<div class="pay-nav">
<ul class="tabs clearfix">
{{#each type}}
<li{{#if selected}} class="active"{{/if}} data-type="{{id}}">{{name}}</li>
{{/each}}
</ul>
</div>
<div id="online">
{{# onlinePay}}
<div class="pay-type-icon online-pay{{#if selected}} active{{/if}}" data-name="{{name}}" data-id="{{id}}">
<img src="{{img}}">
<span class="choose-tag iconfont">&#xe63b;</span>
</div>
{{/ onlinePay}}
</div>
</div>
{{/ pay}}
<div class="pay-ctrl">
<span id="go-pay-btn" class="btn btn-shape right" data-order="{{order.orderCode}}">去<em id="pay-type-name">支付宝</em>支付</span>
</div>
</div>
{{> settle-header}}
<div class="center-content pay-online-wrapper">
{{# order}}
<div class="title">
<div class="content">
<span class="desc left">订单已提交成功，请您尽快付款！订单编号：{{orderCode}}</span>
<span class="cash right">应付金额：{{paymentAmount}}</span>
</div>
<div class="footer">
<span class="desc pay-notice left">{{../username}}如果<span class="blue">2小时</span>内您无法完成付款，系统会将您的订单取消</span>
<span id="order-detail-ctrl" class="right order-detail-ctrl">
<em>收起详情</em>
<i class="iconfont down">&#xe616;</i>
<i class="iconfont up">&#xe617;</i>
</span>
</div>
</div>
<div class="order-detail">
<div class="row">
<div class="item receiver-address">
<span class="label"> 收货地址：</span>
<span>{{area}} {{address}}</span>
</div>
</div>
<div class="row">
<div class="item">
<span class="label">收&nbsp;&nbsp;货&nbsp;&nbsp;人：</span>
<span>{{userName}}</span>
</div>
<div class="item">
<span class="label">联系方式：</span>
<span>{{mobile}}</span>
</div>
</div>
<div class="row">
<div class="item">
<span class="label">支付方式：</span>
<span>在线支付</span>
</div>
<div class="item">
<span class="label">送货时间：</span>
<span>{{deliveryTime}}</span>
</div>
</div>
</div>
{{/order}}
{{# pay}}
<div class="pay-type">
<div class="pay-nav">
<ul class="tabs clearfix">
{{#each type}}
<li{{#if selected}} class="active"{{/if}} data-type="{{id}}">{{name}}</li>
{{/each}}
</ul>
</div>
<div id="online">
{{# onlinePay}}
<div class="pay-type-icon online-pay{{#if selected}} active{{/if}}" data-name="{{name}}" data-id="{{id}}">
<img src="{{img}}">
<span class="choose-tag iconfont">&#xe63b;</span>
</div>
{{/ onlinePay}}
</div>
</div>
{{/ pay}}
<div class="pay-ctrl">
<span id="go-pay-btn" class="btn btn-shape right" data-order="{{order.orderCode}}">去<em id="pay-type-name">支付宝</em>支付</span>
</div>
</div>
... ...
... ... @@ -39,4 +39,4 @@ if (!$cate.hasClass('big-category')) {
$('.cateId-' + parentID).find('.plus').css('background-image', 'url(\'../img/help/minus.png\')');
}
$('.center-content').css('border-top-color', '#fff');
$('.center-content').css('border-top-color', '#fff');
\ No newline at end of file
... ...
... ... @@ -8,6 +8,8 @@ var $ = require('yoho-jquery'),
regx = require('../common/mail-phone-regx'),
EventProxy = require('yoho-eventproxy');
var emailAc = require('../common/ac-email'); // 邮箱自动完成
var $regionCodeText = $('#country-code'),
$phoneNumInput = $('.phone-num'),
$imgCaptchaInput = $('#verifyCode'),
... ... @@ -16,7 +18,8 @@ var $regionCodeText = $('#country-code'),
$nextBtn = $('#find-btn'),
$form = $('#back-form');
var phoneRegx = regx.phoneRegx;
var emailRegx = regx.emailRegx,
phoneRegx = regx.phoneRegx;
var ep = new EventProxy();
... ... @@ -93,6 +96,7 @@ function validatePhoneNumLocal() {
if (val !== '') {
if (/^[0-9]+$/.test(val)) {
// 这里只做中国区验证
if ($regionCodeText.text() === '+86') {
if (val.length === 11 && phoneRegx['+86'].test(val)) {
... ... @@ -105,8 +109,12 @@ function validatePhoneNumLocal() {
return true;
} else {
errTip($phoneNumInput, '手机号码不正确，请重新输入');
return false;
if (emailRegx.test(val)) {
return true;
} else {
errTip($phoneNumInput, '邮箱格式不正确，请重新输入');
return false;
}
}
} else {
errTip($phoneNumInput, '请输入帐号');
... ... @@ -216,6 +224,13 @@ function validateImgCaptcha() {
});
}
/**
* 邮箱自动补全
*/
emailAc($phoneNumInput, function() {
validatePhoneNum();
});
$imgCaptchaInput.attr('maxlength', 4);
// IE8 placeholder
... ... @@ -262,7 +277,6 @@ exports.init = function() {
}).on('blur', function() {
$phoneNumInput.removeClass('focus');
$('.phone').removeClass('focus');
validatePhoneNum();
});
$nextBtn.on('click', function() {
... ...
... ... @@ -360,7 +360,7 @@ var YohoListPage = {
},
filterBrand: function(letter) {
$('.yoho-product-list .brand-list .input-radio').each(function() {
var first = $(this).data('word').toString(); // eslint-disable-line
var first = $(this).data('word').toString(); // eslint-disable-line
var name = $(this).find('label').text().toLowerCase();
first = first.toLowerCase();
... ...
.share {
height: 25px;
width: 300px;
line-height: 25px;
position: relative;
.share-title {
font-size: 14px;
float: left;
}
.share-wrapper {
i {
float: left;
margin-right: 15px;
cursor: pointer;
font-size: 20px;
}
}
.weixin-share-box {
position: absolute;
margin-top: 9px;
text-align: center;
top: 15px;
left: 26px;
z-index: 2;
h2 {
display: block;
height: 46px;
line-height: 46px;
color: #000;
font-size: 18px;
}
img {
width: 140px;
height: 140px;
}
.top {
position: absolute;
color: #bbb;
background: #fff;
width: 12px;
left: 89px;
z-index: 100;
height: 12px;
display: block;
background-image: resolve("layout/up.png");
top: 9px;
}
}
.con {
width: 250px;
height: 310px;
position: relative;
overflow: hidden;
background-color: #fff;
border: 1px solid #bbb;
box-shadow: 0 2px 4px #d1d1d1;
margin-top: 15px;
}
.hide {
display: none;
}
.pic {
overflow: hidden;
margin: 30px auto;
}
.w {
font-size: 13px;
color: #9f9f9f;
line-height: 20px;
}
}
.share {
height: 25px;
width: 300px;
line-height: 25px;
position: relative;
.share-title {
font-size: 14px;
float: left;
}
.share-wrapper {
i {
float: left;
margin-right: 15px;
cursor: pointer;
font-size: 20px;
}
}
.weixin-share-box {
position: absolute;
margin-top: 9px;
text-align: center;
top: 15px;
left: 26px;
z-index: 2;
h2 {
display: block;
height: 46px;
line-height: 46px;
color: #000;
font-size: 18px;
}
img {
width: 140px;
height: 140px;
}
.top {
position: absolute;
color: #bbb;
background: #fff;
width: 12px;
left: 89px;
z-index: 100;
height: 12px;
display: block;
background-image: resolve("layout/up.png");
top: 9px;
}
}
.con {
width: 250px;
height: 310px;
position: relative;
overflow: hidden;
background-color: #fff;
border: 1px solid #bbb;
box-shadow: 0 2px 4px #d1d1d1;
margin-top: 15px;
}
.hide {
display: none;
}
.pic {
overflow: hidden;
margin: 30px auto;
}
.w {
font-size: 13px;
color: #9f9f9f;
line-height: 20px;
}
}
... ...
.content-msg {
margin-top: 40px;
margin-left: 110px;
.msg-left {
position: relative;
float: left;
width: 200px;
height: 30px;
margin-right: 90px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid #bbb;
color: #999;
}
.msg-right {
float: left;
width: 643px;
border-bottom: 1px solid #eee;
margin-top: 2px;
padding-bottom: 5px;
a {
img {
margin-top: 10px;
}
}
}
.msg-title {
font-size: 20px;
color: #1b1b1b;
line-height: 30px;
max-height: 64px;
overflow: hidden;
word-wrap: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.msg-title:hover {
color: #666;
}
.lazy {
width: 640px;
height: 430px;
margin-top: 15px;
}
.content {
display: block;
font-size: 14px;
line-height: 24px;
word-wrap: break-word;
margin-top: 15px;
overflow: hidden;
word-wrap: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.msg-app {
height: 50px;
line-height: 50px;
font-size: 14px;
}
.time {
color: #a6a6a6;
margin-left: 3px;
}
.iconfont {
font-size: 14px;
margin-top: 0;
}
.time-word {
font-weight: normal;
}
.like-comment {
color: #999;
cursor: pointer;
font-size: 14px;
.like-icon {
cursor: pointer;
&.liked {
color: #000;
}
}
}
.like-num {
font-weight: normal;
}
}
.content-msg {
margin-top: 40px;
margin-left: 110px;
.msg-left {
position: relative;
float: left;
width: 200px;
height: 30px;
margin-right: 90px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid #bbb;
color: #999;
}
.msg-right {
float: left;
width: 643px;
border-bottom: 1px solid #eee;
margin-top: 2px;
padding-bottom: 5px;
a {
img {
margin-top: 10px;
}
}
}
.msg-title {
font-size: 20px;
color: #1b1b1b;
line-height: 30px;
max-height: 64px;
overflow: hidden;
word-wrap: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.msg-title:hover {
color: #666;
}
.lazy {
width: 640px;
height: 430px;
margin-top: 15px;
}
.content {
display: block;
font-size: 14px;
line-height: 24px;
word-wrap: break-word;
margin-top: 15px;
overflow: hidden;
word-wrap: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.msg-app {
height: 50px;
line-height: 50px;
font-size: 14px;
}
.time {
color: #a6a6a6;
margin-left: 3px;
}
.iconfont {
font-size: 14px;
margin-top: 0;
}
.time-word {
font-weight: normal;
}
.like-comment {
color: #999;
cursor: pointer;
font-size: 14px;
.like-icon {
cursor: pointer;
&.liked {
color: #000;
}
}
}
.like-num {
font-weight: normal;
}
}
... ...
.favorite-brands {
position: relative;
.num {
position: absolute;
top: -30px;
left: 600px;
font-size: 16px;
color: #666;
}
.brand-raw > div {
float: left;
}
.brand-raw {
padding: 30px 0;
border-bottom: 1px solid #eee;
.check {
padding: 56px 0;
margin-right: 20px;
cursor: pointer;
.iconfont {
font-size: 14px;
color: #666;
}
}
.brand-info {
.brand-icon {
border: 1px solid #eee;
}
.brand-name {
text-align: center;
background-color: #eee;
padding: 5px;
font-size: 14px;
width: 147px;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tool-area {
height: 26px;
margin-top: 15px;
}
.tool-area > .btn {
display: none;
}
}
.brand-info:hover {
.btn {
display: block;
float: left;
}
.btn.cancel {
display: block;
float: right;
}
}
.brand-products {
float: right;
width: 685px;
position: relative;
}
.no-product-info {
text-align: center;
margin-top: 65px;
a {
color: #379ed6;
}
}
}
.goods-info {
float: left;
width: 148px;
margin: 0 5px;
img {
width: 148px;
height: 195px;
}
.name {
display: block;
height: 36px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 18px;
margin-top: 10px;
padding: 0 15px;
}
.price {
margin-top: 15px;
}
}
.goods-more {
float: left;
width: 147px;
height: 195px;
background-color: #eee;
margin: 0 7px 67px;
text-align: center;
position: relative;
.more-text {
position: absolute;
top: 70px;
color: #fff;
width: 55px;
left: 46px;
font-size: 18px;
background-color: #000;
}
p {
position: relative;
top: 93px;
font-size: 12px;
}
}
.slide-container {
.slide-switch {
display: block;
position: absolute;
top: 90px;
width: 100%;
.iconfont {
color: #fff;
}
}
.slide-wrap {
overflow: hidden;
width: 625px;
margin: 0 auto;
ul {
position: relative;
li {
float: left;
width: 635px;
overflow: hidden;
margin: 0 -5px;
display: none;
}
li.show {
display: block;
}
}
}
}
}
.favorite-brands {
position: relative;
.num {
position: absolute;
top: -30px;
left: 600px;
font-size: 16px;
color: #666;
}
.brand-raw > div {
float: left;
}
.brand-raw {
padding: 30px 0;
border-bottom: 1px solid #eee;
.check {
padding: 56px 0;
margin-right: 20px;
cursor: pointer;
.iconfont {
font-size: 14px;
color: #666;
}
}
.brand-info {
.brand-icon {
border: 1px solid #eee;
}
.brand-name {
text-align: center;
background-color: #eee;
padding: 5px;
font-size: 14px;
width: 147px;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tool-area {
height: 26px;
margin-top: 15px;
}
.tool-area > .btn {
display: none;
}
}
.brand-info:hover {
.btn {
display: block;
float: left;
}
.btn.cancel {
display: block;
float: right;
}
}
.brand-products {
float: right;
width: 685px;
position: relative;
}
.no-product-info {
text-align: center;
margin-top: 65px;
a {
color: #379ed6;
}
}
}
.goods-info {
float: left;
width: 148px;
margin: 0 5px;
img {
width: 148px;
height: 195px;
}
.name {
display: block;
height: 36px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 18px;
margin-top: 10px;
padding: 0 15px;
}
.price {
margin-top: 15px;
}
}
.goods-more {
float: left;
width: 147px;
height: 195px;
background-color: #eee;
margin: 0 7px 67px;
text-align: center;
position: relative;
.more-text {
position: absolute;
top: 70px;
color: #fff;
width: 55px;
left: 46px;
font-size: 18px;
background-color: #000;
}
p {
position: relative;
top: 93px;
font-size: 12px;
}
}
.slide-container {
.slide-switch {
display: block;
position: absolute;
top: 90px;
width: 100%;
.iconfont {
color: #fff;
}
}
.slide-wrap {
overflow: hidden;
width: 625px;
margin: 0 auto;
ul {
position: relative;
li {
float: left;
width: 635px;
overflow: hidden;
margin: 0 -5px;
display: none;
}
li.show {
display: block;
}
}
}
}
}
... ...
.order-dialog {
$bigSpace: 30px;
$smallSpace: 10px;
$space: 20px;
$normalSize: 14px;
$borderColor: #f1f1f1;
$skyBlue: #379ed6;
.cancel-btn {
background-color: #fff;
color: #1b1b1b;
border: 1px solid #1b1b1b;
}
.btns,
.btn {
text-align: center !important;
}
.dialog-title {
padding-bottom: $space;
border-bottom: 1px solid #f1f1f1;
font-size: 16px;
}
&.alert {
h1 {
margin-bottom: $space;
font-size: 22px;
font-weight: bold;
}
span {
font-size: $normalSize;
}
}
&.delete-dialog {
.content {
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 24px;
}
p {
height: 18px;
font-size: 12px;
color: #a3a3a3;
}
}
.btns {
margin-top: 5px;
}
}
&.cancel-dialog {
min-width: 660px;
* {
text-align: left;
color: #1b1b1b;
}
.btn {
&.confirm {
color: #fff;
}
}
.tip {
display: block;
margin: $space 0 10px;
font-size: 12px;
font-weight: bold;
}
.tip-item {
height: $space;
margin-bottom: $smallSpace;
line-height: $space;
font-size: $normalSize;
}
.radio {
color: #ccc !important;
&.checked {
color: #1b1b1b !important;
}
}
.row {
height: $bigSpace;
line-height: $bigSpace;
.other {
width: 90%;
p {
width: 20%;
}
input {
height: 25px;
width: 50%;
padding: 5px;
}
}
p {
width: 49%;
display: inline-block;
box-sizing: border-box;
font-size: $normalSize;
}
.iconfont {
display: inline-block;
margin-right: 3px;
font-size: $normalSize;
cursor: pointer;
}
}
}
&.edit-dialog {
min-width: 750px;
background-color: #fff;
* {
text-align: left;
}
.form {
margin: $bigSpace 0 $space;
}
}
.cascading-address {
display: inline-block;
border: 1px solid #f0f0f0;
.dist-item {
height: 32px;
margin-right: 0;
border: none;
background-color: #fff;
}
.items-panel {
border-color: #f0f0f0;
}
}
.form {
.input-row {
height: 25px;
line-height: 25px;
margin-bottom: $space;
font-size: $normalSize;
label {
display: inline-block;
width: 70px;
text-align: left;
span {
margin-right: 7px;
}
}
input {
width: 190px;
&.long {
width: 270px;
}
}
&.selector {
height: 32px;
line-height: 1;
> span,
> label {
position: relative;
top: -12px !important;
}
}
}
}
}
.order-dialog {
$bigSpace: 30px;
$smallSpace: 10px;
$space: 20px;
$normalSize: 14px;
$borderColor: #f1f1f1;
$skyBlue: #379ed6;
.cancel-btn {
background-color: #fff;
color: #1b1b1b;
border: 1px solid #1b1b1b;
}
.btns,
.btn {
text-align: center !important;
}
.dialog-title {
padding-bottom: $space;
border-bottom: 1px solid #f1f1f1;
font-size: 16px;
}
&.alert {
h1 {
margin-bottom: $space;
font-size: 22px;
font-weight: bold;
}
span {
font-size: $normalSize;
}
}
&.delete-dialog {
.content {
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 24px;
}
p {
height: 18px;
font-size: 12px;
color: #a3a3a3;
}
}
.btns {
margin-top: 5px;
}
}
&.cancel-dialog {
min-width: 660px;
* {
text-align: left;
color: #1b1b1b;
}
.btn {
&.confirm {
color: #fff;
}
}
.tip {
display: block;
margin: $space 0 10px;
font-size: 12px;
font-weight: bold;
}
.tip-item {
height: $space;
margin-bottom: $smallSpace;
line-height: $space;
font-size: $normalSize;
}
.radio {
color: #ccc !important;
&.checked {
color: #1b1b1b !important;
}
}
.row {
height: $bigSpace;
line-height: $bigSpace;
.other {
width: 90%;
p {
width: 20%;
}
input {
height: 25px;
width: 50%;
padding: 5px;
}
}
p {
width: 49%;
display: inline-block;
box-sizing: border-box;
font-size: $normalSize;
}
.iconfont {
display: inline-block;
margin-right: 3px;
font-size: $normalSize;
cursor: pointer;
}
}
}
&.edit-dialog {
min-width: 750px;
background-color: #fff;
* {
text-align: left;
}
.form {
margin: $bigSpace 0 $space;
}
}
.cascading-address {
display: inline-block;
border: 1px solid #f0f0f0;
.dist-item {
height: 32px;
margin-right: 0;
border: none;
background-color: #fff;
}
.items-panel {
border-color: #f0f0f0;
}
}
.form {
.input-row {
height: 25px;
line-height: 25px;
margin-bottom: $space;
font-size: $normalSize;
label {
display: inline-block;
width: 70px;
text-align: left;
span {
margin-right: 7px;
}
}
input {
width: 190px;
&.long {
width: 270px;
}
}
&.selector {
height: 32px;
line-height: 1;
> span,
> label {
position: relative;
top: -12px !important;
}
}
}
}
}
... ...
.brand-banner {
position: relative;
.banner-img {
min-height: 45px;
}
.opt-wrap {
width: 100%;
height: 45px;
position: absolute;
top: 50%;
margin-top: -23px;
.brand-logo {
display: inline-block;
height: 45px;
> img {
height: 100%;
}
}
.opt > * {
height: 32px;
line-height: 32px;
padding: 0 10px;
margin: 6px 0 0 5px;
color: #fff;
font-size: 14px;
border: 1px solid #fff;
display: inline-block;
}
.brand-info {
cursor: pointer;
}
.brand-fav {
cursor: pointer;
}
.coll {
color: #fc0d1b;
}
.iconfont {
font-size: 12px;
}
}
}
.brand-banner {
position: relative;
.banner-img {
min-height: 45px;
}
.opt-wrap {
width: 100%;
height: 45px;
position: absolute;
top: 50%;
margin-top: -23px;
.brand-logo {
display: inline-block;
height: 45px;
> img {
height: 100%;
}
}
.opt > * {
height: 32px;
line-height: 32px;
padding: 0 10px;
margin: 6px 0 0 5px;
color: #fff;
font-size: 14px;
border: 1px solid #fff;
display: inline-block;
}
.brand-info {
cursor: pointer;
}
.brand-fav {
cursor: pointer;
}
.coll {
color: #fc0d1b;
}
.iconfont {
font-size: 12px;
}
}
}
... ...
.yoho-product-list,
.yoho-shop-index {
.yoho-product-list-content {
margin-top: 30px;
}
.brand-banner {
width: 100%;
height: 150px;
background-size: 100% 100%;
position: relative;
.shop-name {
display: block;
position: absolute;
left: 20px;
bottom: 15px;
font-size: 35px;
color: #fff;
}
p.opts {
display: block;
position: absolute;
right: 20px;
bottom: 30px;
font-size: 14px;
a,
.brand-fav {
color: #fff;
border: 1px solid #fff;
padding: 10px;
margin-left: 10px;
cursor: pointer;
.iconfont {
font-size: 14px;
}
}
.brand-fav.coled .iconfont {
color: #fc0d1b;
}
}
}
.shop-menu {
border-bottom: 1px solid #eee;
li {
display: inline-block;
margin: 10px 30px;
a {
font-size: 12px;
font-weight: 500;
}
.iconfont {
font-size: 14px;
}
}
}
.brand-info-wrapper {
display: none;
}
}
.yoho-shop-index {
font-size: 14px;
@import "order-area";
.slide-warp {
margin-bottom: 80px;
margin-top: 30px;
.slide-left {
float: left;
width: 375px;
height: 400px;
margin-right: 20px;
}
.slide-right {
float: right;
width: 360px;
height: 400px;
a {
display: block;
img {
width: 100%;
height: 190px;
}
}
a:first-child {
margin-bottom: 20px;
}
}
}
.new-arrival-warp,
.hot-product-warp,
.all-product-warp {
margin-bottom: 75px;
}
.new-arrival-warp,
.all-product-warp {
.goods-wrap {
margin: 0 -10px;
.goods-info {
float: left;
width: 274px;
margin: 26px 9px;
border-width: 1px;
.desc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.hot-product-warp {
.goods-wrap {
margin: 30px -10px 0;
.goods-info {
position: relative;
display: inline-block;
width: 369px;
height: 495px;
margin: 10px 9px;
border-width: 1px;
img {
height: 495px;
}
.desc-cover {
position: absolute;
bottom: 0;
width: 100%;
background-color: #000;
opacity: 0.2;
height: 100px;
z-index: 1;
}
.desc {
position: absolute;
bottom: 0;
width: 100%;
padding: 17px 0;
color: #fff;
z-index: 2;
}
}
}
.desc {
.name {
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.editorial-wrap {
margin: 0 -10px;
.editorial-info {
position: relative;
float: left;
width: 368px;
margin: 25px 10px;
border-width: 1px;
.desc {
margin-top: 10px;
text-align: center;
overflow: hidden;
line-height: 25px;
}
.name,
.intro {
padding: 10px 0;
}
}
}
.floor-header {
position: relative;
margin-bottom: 7px;
.floor-more {
position: absolute;
right: 0;
bottom: 3px;
font-size: 14px;
font-weight: 700;
}
}
.shop-sort {
margin: 30px 0;
height: 30px;
vertical-align: middle;
font-size: 14px;
.all {
color: #f31a2a;
height: 30px;
line-height: 30px;
float: left;
border-right: 1px solid #bbb;
padding-right: 15px;
font-weight: 700;
}
.more {
height: 30px;
line-height: 30px;
float: right;
font-weight: 700;
}
.sort-list {
float: left;
height: 30px;
line-height: 30px;
width: 1000px;
overflow: hidden;
div {
float: left;
margin: 0 5px;
padding: 0 10px;
height: 30px;
}
div:hover {
background-color: #000;
a {
color: #fff !important;
}
}
}
}
}
.yoho-dialog.brand-info-dialog {
width: 900px;
height: 600px;
.brand-info {
height: 520px;
width: 100%;
padding: 0 20px;
.nano-content {
width: 100%;
}
.brand-info-title {
text-align: left;
margin: 20px 0 50px;
h2 {
font-size: 18px;
font-weight: 700;
padding: 10px 0;
}
}
.brand-info-content {
text-align: left;
font-size: 12px;
line-height: 20px;
p {
font-size: 12px;
line-height: 20px;
text-align: left;
img {
margin: 20px 0;
}
}
}
}
}
... ...
.blk-cart-page {
.empty-cart {
width: 400px;
margin: 100px auto 200px;
text-align: center;
.empty-cart-bg {
background: resolve("layout/empty-bag.svg") no-repeat center center;
width: 115px;
height: 130px;
margin: 0 auto 30px;
}
.empty-cart-info {
font-size: 20px;
color: #1b1b1b;
text-align: center;
margin-bottom: 20px;
}
.go-to-shop {
text-align: center;
display: inline-block;
span {
width: 130px;
height: 40px;
color: #1b1b1b;
font-size: 14px;
padding: 12px 0;
line-height: 14px;
}
}
}
}
... ...
.shopping-order-page {
.order-block {
border-bottom: 1px solid #eee;
padding-bottom: 30px;
}
.radio {
font-size: 16px;
}
.address-info {
padding-bottom: 15px;
ul {
width: 1173px;
&.shrink {
height: 195px;
overflow: hidden;
}
}
.new-address {
cursor: pointer;
height: 52px;
}
}
.address {
cursor: pointer;
.address-chosed {
display: none;
}
&.focus .address-chosed {
display: block;
}
}
.new-address .iconfont {
font-size: 12px;
}
.address-header {
height: 11px;
background: #eee url(/shopping/address-tag.png);
}
.new-address-block {
float: left;
width: 270px;
height: 180px;
margin-right: 23px;
border: 1px solid #eee;
margin-bottom: 15px;
height: 180px;
text-align: center;
color: #999;
cursor: pointer;
.iconfont {
display: block;
color: #eee;
font-size: 60px;
line-height: 80px;
margin-top: 30px;
}
}
.address {
position: relative;
float: left;
width: 270px;
height: 180px;
margin-right: 23px;
border: 1px solid #eee;
margin-bottom: 15px;
&.focus {
border-color: #000;
.address-header {
background-image: url(/shopping/address-tag-chosed.png);
}
}
.default-or-not {
text-align: right;
font-size: 12px;
height: 40px;
line-height: 40px;
}
&.default .default-or-not {
line-height: normal;
.set-default {
display: none;
}
.default-tag {
display: inline-block;
}
}
&.default .delete {
display: none;
}
.set-default {
display: inline-block;
color: #ccc;
cursor: pointer;
&:hover {
color: #379ed6;
}
}
.default-tag {
display: none;
border: 1px solid #ccc;
color: #000;
padding: 5px;
margin-top: 8px;
}
.consignee {
display: block;
float: left;
max-width: 140px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.address-chosed {
position: absolute;
bottom: 0;
bottom: -1px\9; /* stylelint-disable-line */
right: 0;
}
.address-content {
padding: 0 15px;
}
.address-area {
line-height: 40px;
border-top: 1px solid #ccc;
margin-top: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.address-detail {
line-height: 15px;
height: 30px;
}
.address-detail,
.address-opration {
font-size: 12px;
color: #999;
}
.address-opration {
cursor: pointer;
line-height: 30px;
text-align: right;
> span:hover {
color: #379ed6;
}
}
.address-all {
font-size: 12px;
color: #7e7e7e;
cursor: pointer;
.iconfont {
font-size: 12px;
}
}
.payment-type,
.dispatch-type {
padding-bottom: 10px;
}
.title {
line-height: 52px;
}
.chose-row {
color: #ccc;
line-height: 40px;
&.focus {
color: #000;
.chose-block {
border-color: #000;
}
}
}
.chose-block {
float: left;
display: block;
height: 40px;
margin-right: 20px;
text-align: center;
border: 1px solid #ccc;
cursor: pointer;
}
.payment-type .chose-block {
width: 160px;
}
.dispatch-type .chose-block {
width: 200px;
}
ul.content > li {
margin-bottom: 20px;
}
.dispatch-call {
margin-top: 30px;
}
.call-before-dispatch-tip {
color: #ccc;
margin-left: 75px;
}
.go-cart-link:hover {
color: #379ed6;
.iconfont {
color: #379ed6;
}
}
.go-cart-link .iconfont {
font-size: 16px;
}
.order-info {
margin-top: 50px;
}
.order-inner {
border: 1px solid #ccc;
.title {
padding: 0 15px;
border-bottom: 1px solid #eee;
overflow: hidden;
}
.block {
margin: 0 15px;
}
.info {
width: 548px;
}
/* [表格内容]商品图片 */
.goods-img {
position: relative;
width: 180px;
padding: 0 40px;
img {
width: 100px;
height: 148px;
}
.gift-tag {
position: absolute;
bottom: 0;
left: 40px;
right: 40px;
height: 25px;
color: #fff;
background: #379ed6;
font-size: 12px;
text-align: center;
line-height: 25px;
}
}
/* [表格内容]品牌和商品名称 */
.brand-and-name {
width: 368px;
text-align: left;
padding-right: 30px;
> a:hover {
color: #379ed6;
}
}
.color-size {
width: 190px;
}
.price {
width: 190px;
}
.number {
width: 190px;
}
}
.multi-package-row {
position: relative;
height: 40px;
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #eee;
text-align: center;
background: #f4fbff;
.show-package {
font-size: 16px;
cursor: pointer;
}
.package-up-icon {
position: absolute;
width: 10px;
height: 7px;
background: url(/shopping/package-up.png);
top: -7px;
left: 282px;
+ .package-item .package-title {
border-top: none;
}
}
.package-item {
position: relative;
.toggle-icon {
position: absolute;
font-size: 34px;
top: 106px;
cursor: pointer;
}
.left-icon {
left: -24px;
}
.right-icon {
right: -24px;
}
}
.package-goods-wrap {
height: 134px;
overflow: hidden;
}
.package-list {
position: absolute;
background: #fff;
border: 2px solid #bbb;
width: 586px;
right: 36px;
padding: 0 50px;
}
.package-title,
.package-shipping {
text-align: left;
margin-left: 10px;
}
.package-title {
border-top: 1px solid #eee;
line-height: 55px;
}
.package-shipping {
color: #595959;
margin-top: 20px;
margin-bottom: 30px;
}
.package-goods li {
width: 120px;
}
.package-goods-img {
display: block;
width: 100px;
height: 134px;
margin: 0 auto;
}
}
.order-table-head {
height: 50px;
line-height: 50px;
margin: 0 15px;
> span {
display: block;
float: left;
text-align: center;
}
}
.order-table-body {
display: table;
}
.order-goods {
border-top: 1px solid #eee;
padding: 20px 0;
margin: 0 15px;
text-align: center;
.brand-name {
display: block;
line-height: 50px;
width: 338px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.name {
display: inline-block;
font-size: 14px;
line-height: 16px;
max-height: 32px;
}
> * {
display: table-cell;
vertical-align: middle;
}
.number > .iconfont {
font-size: 14px;
}
}
.invoice-info .content {
> * {
display: inline-block;
}
.invoice-detail {
margin-left: 40px;
}
em {
margin-right: 20px;
}
.modify-invoice {
display: inline-block;
width: 40px;
height: 20px;
line-height: 20px;
}
}
.invoice-radio {
cursor: pointer;
color: #666;
label {
font-size: 14px;
}
}
.coin-and-remark {
padding: 20px 0;
}
.coin .title,
.remark .title {
line-height: 30px;
}
.coin-ctrl,
.remark-ctrl {
cursor: pointer;
&.iconfont {
font-size: 16px;
}
}
.balance {
padding: 10px 20px;
border: 1px solid #ccc;
font-size: 14px;
margin-bottom: 80px;
}
.balance-info {
line-height: 30px;
width: 670px;
}
.receiver-wrap {
position: relative;
i {
position: absolute;
width: 70px;
}
em {
display: inline-block;
width: 480px;
margin-left: 70px;
}
}
.balance-list {
width: 364px;
li {
line-height: 30px;
}
}
.balance-cost {
float: right;
}
li.need-pay {
border-top: 1px solid #000;
line-height: 50px;
margin-top: 10px;
}
.submit-order {
width: 160px;
height: 40px;
line-height: 40px;
}
/* 使用有货币&备注 */
.coin-and-remark .content {
background: #f5f5f5;
padding: 15px 20px;
margin: 20px 0;
font-size: 14px;
}
.coin-input {
width: 70px;
margin-left: 20px;
}
.coin-tip {
line-height: 30px;
}
.used-coin .btn {
display: inline-block;
width: auto;
height: 20px;
line-height: 20px;
padding: 0 5px;
border: none;
cursor: pointer;
&.modify {
margin-left: 130px;
margin-right: 10px;
}
}
.remark-content {
width: 1110px;
height: 118px;
padding: 10px;
resize: none;
}
.print-price-radio-group {
display: inline-block;
}
.print-price {
margin: 20px 0 10px;
}
.print-price-radio {
display: inline-block;
cursor: pointer;
> .iconfont {
font-size: 16px;
}
}
.remark-tip {
color: #b1b1b1;
}
.checked {
position: relative;
top: 2px;
}
}
.yoho-dialog.address,
.yoho-dialog.invoice {
background: #fff;
.content {
text-align: left;
}
.btns .btn {
width: 140px;
height: 40px;
line-height: 40px;
&.white {
border-color: #000;
color: #000;
}
}
}
.yoho-dialog.address {
width: 765px;
padding: 0 40px 10px;
.label-name {
text-align: right;
}
.dialog-title {
margin: 25px 0;
font-size: 18px;
}
&.is-init .cancel-address {
display: none;
}
.cascading-address {
float: left;
margin-left: 0 !important;
}
}
.yoho-dialog.invoice {
width: 702px;
.dialog-title {
color: #777;
line-height: 50px;
border-bottom: 1px solid #eee;
}
.invoice-tab {
margin: 17px 0;
.btn {
width: 85px;
height: 26px;
line-height: 26px;
}
}
.tip {
background: #f5f5f5;
padding: 20px;
font-size: 15px;
line-height: 18px;
}
.required-mark {
color: #f00;
}
.invoice-title-radio,
.invoice-content-radio {
display: inline-block;
cursor: pointer;
width: 115px;
}
.row {
margin: 18px 0;
line-height: 30px;
.iconfont {
font-size: 16px;
color: #e0e0e0;
}
.checked {
color: #1b1b1b;
}
.input {
width: 200px;
height: 30px;
border-color: #eee;
background: #f5f5f5;
}
.label {
float: left;
font-size: 14px;
width: 100px;
}
.row-content {
float: left;
width: 520px;
}
}
}
.address-confirm-dialog {
.content {
padding-top: 0 !important;
p {
position: static !important;
}
p.main {
line-height: 100px;
font-size: 28px;
}
}
}
... ...
$width: 1150px;
$liWidth: 140px;
$liHeight: 40px;
$liBorderColor: #e6e6e6;
$fontColor: #616161;
.pay-online-wrapper {
.title {
margin-top: 35px;
margin-bottom: 20px;
height: 60px;
.content {
font-weight: bold;
height: 40px;
}
.footer {
height: 20px;
}
}
.pay-notice {
color: #999;
font-size: 14px;
}
.order-detail-ctrl {
font-size: 14px;
cursor: pointer;
.up {
display: none;
}
.down {
display: inline-block;
}
/* 默认情况为展开状态 箭头方向为下 */
&.shrink {
.up {
display: inline-block;
}
.down {
display: none;
}
}
.iconfont {
font-size: 12px;
margin-left: 10px;
}
}
.order-detail {
border: 1px solid $liBorderColor;
margin-bottom: 30px;
height: calc(135px + 2px);
padding: 20px 30px;
.row {
height: 30px;
line-height: @height;
font-weight: bold;
.item {
float: left;
width: calc($width / 2 - 31px);
}
}
.item.receiver-address {
width: 100%;
}
}
.pay-nav {
height: calc($liHeight + 2px);
line-height: calc($liHeight + 2px);
border-bottom: 1px solid $liBorderColor;
z-index: 0;
clear: both;
.tabs {
display: inline-block;
height: $liHeight;
li {
width: $liWidth;
height: $liHeight;
line-height: $liHeight;
float: left;
font-size: 16px;
text-align: center;
background-color: #fff;
color: $fontColor;
cursor: pointer;
position: relative;
&.active {
border: 1px solid $liBorderColor;
height: calc($liHeight + 1px);
line-height: calc($liHeight - 2px);
top: 1px;
border-bottom: none;
color: #000;
z-index: 3;
}
}
}
}
.pay-type-icon {
position: relative;
float: left;
width: 250px;
height: 80px;
margin-bottom: 30px;
margin-right: 50px;
margin-top: 30px;
cursor: pointer;
border: 1px solid $liBorderColor;
text-align: center;
img {
display: inline-block;
margin-top: 19px;
}
.choose-tag {
display: none;
position: absolute;
bottom: 0;
right: 0;
height: 22px;
width: 23px;
}
&.active {
border: 2px solid black;
.choose-tag {
display: inline-block;
}
}
}
.pay-ctrl {
height: 40px;
margin-top: 20px;
margin-bottom: 20px;
clear: both;
.btn-shape {
width: 160px;
height: 40px;
line-height: @height;
}
}
}
.pay-info-dialog {
.pay-page-tips {
text-align: center;
h3 {
font-size: 18px;
font-weight: 700;
margin: 30px 0;
}
p {
font-size: 14px;
color: #999;
margin: 10px 0;
}
.btn {
margin-top: 20px;
}
}
}
... ...
.blk-cart-page {
.fregit-remark {
margin: 50px 0 20px;
padding-left: 30px;
font-size: 12px;
span {
display: inline-block;
width: 50px;
height: 20px;
line-height: 22px;
text-align: center;
background: #424242;
border-radius: 12px;
color: #fff;
margin-right: 10px;
}
}
.cart-statement {
margin-bottom: 50px;
width: 100%;
height: 194px;
padding: 30px;
border: 1px solid #eee;
.toggle-chk {
.not-checked {
color: #999;
}
}
.checked {
display: none;
}
.chk-group {
.checked {
display: inline-block;
}
.not-checked {
display: none;
}
}
.iconfont {
font-size: 14px;
line-height: 14px;
}
.action {
display: inline-block;
margin-right: 40px;
font-size: 14px;
line-height: 16px;
padding: 1px 0;
color: #1b1b1b;
&:hover {
cursor: pointer;
}
label {
&:hover {
cursor: pointer;
}
}
}
.selected-num {
display: inline-block;
font-size: 14px;
color: #1b1b1b;
font-weight: bold;
margin: 0 60px 0 224px;
}
.checkout-total {
position: relative;
float: right;
font-size: 14px;
color: #1b1b1b;
font-weight: bold;
width: 350px;
div {
display: inline-block;
}
.total-money {
position: absolute;
right: 0;
}
}
.pay-total {
float: right;
border-top: 2px solid #1b1b1b;
padding-top: 15px;
}
.calculate {
margin-top: 15px;
height: 31px;
}
.checkout {
margin-top: 40px;
float: right;
margin-right: 192px;
.btn {
padding: 14px 59px;
width: 160px;
display: inline-block;
height: 40px;
font-size: 14px;
line-height: 14px;
}
}
.hoverable {
&:hover {
cursor: pointer;
color: #379ed6;
}
}
}
}
... ...