|
...
|
...
|
@@ -37,152 +37,169 @@ |
|
|
|
<li><i class="icon icon-onlineservice"></i>便捷在线客服</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</show-box>
|
|
|
|
<show-box v-if="intro.productDescBo">
|
|
|
|
<h2>商品信息</h2>
|
|
|
|
<i>DESCRIPTION</i>
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
<ul class="description">
|
|
|
|
<li>
|
|
|
|
<span class="desc-caption">编号：</span>
|
|
|
|
<span>{{intro.productDescBo.erpProductId}}</span>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<span class="desc-caption">颜色：</span>
|
|
|
|
<span>{{intro.productDescBo.colorName}}</span>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<span class="desc-caption">性别：</span>
|
|
|
|
<span>{{intro.productDescBo.gender | clothingGenderIdentity}}</span>
|
|
|
|
</li>
|
|
|
|
<li v-for="item in intro.productDescBo.standardBos">
|
|
|
|
<span class="desc-caption">{{item.standardName}}：</span> <span>{{item.standardVal}}</span>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="add-cart">
|
|
|
|
<ul class="cart-detail">
|
|
|
|
<li>
|
|
|
|
<span class="color">颜色 <i class="icon icon-sort-up"></i></span>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<span class="size">尺码 <i class="icon icon-sort-down"></i></span>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<hr>
|
|
|
|
<a class="add-btn">加入购物车</a>
|
|
|
|
</div>
|
|
|
|
</show-box>
|
|
|
|
<show-box>
|
|
|
|
<!--商品信息-->
|
|
|
|
<div v-if="intro.productDescBo">
|
|
|
|
<i class="box-toggle icon icon-sort-up" :class=""></i>
|
|
|
|
<h2>商品信息</h2>
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
|
|
<show-box v-if="intro.sizeInfoBo">
|
|
|
|
<h2>尺码信息</h2>
|
|
|
|
<i>SIZE INFO</i>
|
|
|
|
<hr>
|
|
|
|
<div class="horizon-wrapper">
|
|
|
|
<table class="table">
|
|
|
|
<thead>
|
|
|
|
<th>吊牌尺码</th>
|
|
|
|
<th v-for="header in intro.sizeInfoBo.sizeAttributeBos">{{header.attributeName}}</th>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
|
|
|
|
<tr v-for="size in intro.sizeInfoBo.sizeBoList">
|
|
|
|
<td>{{size.sizeName}}</td>
|
|
|
|
<td v-for="item in size.sortAttributes">{{item.sizeValue}}</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<ul class="description" v-show="toggleSwitch.productInfo">
|
|
|
|
<li>
|
|
|
|
<span class="desc-caption">编号：</span>
|
|
|
|
<span>{{intro.productDescBo.erpProductId}}</span>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<span class="desc-caption">颜色：</span>
|
|
|
|
<span>{{intro.productDescBo.colorName}}</span>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<span class="desc-caption">性别：</span>
|
|
|
|
<span>{{intro.productDescBo.gender | clothingGenderIdentity}}</span>
|
|
|
|
</li>
|
|
|
|
<li v-for="item in intro.productDescBo.standardBos">
|
|
|
|
<span class="desc-caption">{{item.standardName}}：</span> <span>{{item.standardVal}}</span>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<i class="info">提示：左滑查看完整表格信息</i>
|
|
|
|
</show-box>
|
|
|
|
<!--尺码信息-->
|
|
|
|
<div v-if="intro.sizeInfoBo">
|
|
|
|
<h2>尺码信息</h2>
|
|
|
|
<hr>
|
|
|
|
<div v-show="toggleSwitch.sizeInfo">
|
|
|
|
<div class="horizon-wrapper">
|
|
|
|
<table class="table">
|
|
|
|
<thead>
|
|
|
|
<th>吊牌尺码</th>
|
|
|
|
<th v-for="header in intro.sizeInfoBo.sizeAttributeBos">{{header.attributeName}}</th>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
|
|
|
|
<tr v-for="size in intro.sizeInfoBo.sizeBoList">
|
|
|
|
<td>{{size.sizeName}}</td>
|
|
|
|
<td v-for="item in size.sortAttributes">{{item.sizeValue}}</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<show-box v-if="intro.sizeImage">
|
|
|
|
<h2>测量方式</h2>
|
|
|
|
<i>MEASUREMENT METHOD</i>
|
|
|
|
<hr>
|
|
|
|
<img v-if="intro.sizeImage" :src="intro.sizeImage"/>
|
|
|
|
</show-box>
|
|
|
|
<i class="info">提示：左滑查看完整表格信息</i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<show-box v-if="intro.modelBos && intro.modelBos.length > 0">
|
|
|
|
<h2>模特试穿</h2>
|
|
|
|
<i>REFERENCE</i>
|
|
|
|
<hr>
|
|
|
|
<div class="horizon-wrapper">
|
|
|
|
<table class="table">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>模特</th>
|
|
|
|
<th>身高</th>
|
|
|
|
<th>体重</th>
|
|
|
|
<th>三围</th>
|
|
|
|
<th>吊牌尺码</th>
|
|
|
|
<th>试穿描述</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr v-for="item in intro.modelBos">
|
|
|
|
<td>
|
|
|
|
<img class="model-avatar" :src="item.avatar"/>
|
|
|
|
<span class="model-name">{{item.modelName}}</span>
|
|
|
|
</td>
|
|
|
|
<td>{{item.height}}</td>
|
|
|
|
<td>{{item.weight}}</td>
|
|
|
|
<td>{{item.vitalStatistics}}</td>
|
|
|
|
<td>{{item.fitModelBo.fit_size}}</td>
|
|
|
|
<td>{{item.fitModelBo.feel}}</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<!--测量方式-->
|
|
|
|
<div v-if="intro.sizeImage">
|
|
|
|
<h2>测量方式</h2>
|
|
|
|
<hr>
|
|
|
|
<img v-if="intro.sizeImage" :src="intro.sizeImage"/>
|
|
|
|
</div>
|
|
|
|
<i class="info">提示：左滑查看完整表格信息</i>
|
|
|
|
</show-box>
|
|
|
|
|
|
|
|
<show-box>
|
|
|
|
<div v-if="intro.productMaterialList && intro.productMaterialList.length > 0">
|
|
|
|
<h2>商品材质</h2>
|
|
|
|
<i>MATERIALS</i>
|
|
|
|
<!--模特试穿-->
|
|
|
|
<div v-if="intro.modelBos && intro.modelBos.length > 0">
|
|
|
|
<h2>模特试穿</h2>
|
|
|
|
<hr>
|
|
|
|
<div class="horizon-wrapper">
|
|
|
|
<table class="table">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>模特</th>
|
|
|
|
<th>身高</th>
|
|
|
|
<th>体重</th>
|
|
|
|
<th>三围</th>
|
|
|
|
<th>吊牌尺码</th>
|
|
|
|
<th>试穿描述</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr v-for="item in intro.modelBos">
|
|
|
|
<td>
|
|
|
|
<img class="model-avatar" :src="item.avatar"/>
|
|
|
|
<span class="model-name">{{item.modelName}}</span>
|
|
|
|
</td>
|
|
|
|
<td>{{item.height}}</td>
|
|
|
|
<td>{{item.weight}}</td>
|
|
|
|
<td>{{item.vitalStatistics}}</td>
|
|
|
|
<td>{{item.fitModelBo.fit_size}}</td>
|
|
|
|
<td>{{item.fitModelBo.feel}}</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<i class="info">提示：左滑查看完整表格信息</i>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="intro.productMaterialList">
|
|
|
|
<ul v-for="item in intro.productMaterialList">
|
|
|
|
<div>
|
|
|
|
<div class="image-box">
|
|
|
|
<img :src="item.imageUrl | resize 86 35" width="86" height="35"/>
|
|
|
|
</div>
|
|
|
|
<div class="text-box">
|
|
|
|
<div>{{item.caption}}</div>
|
|
|
|
<div>{{item.encaption}}</div>
|
|
|
|
<!--商品材质-->
|
|
|
|
<div>
|
|
|
|
<div v-if="intro.productMaterialList && intro.productMaterialList.length > 0">
|
|
|
|
<h2>商品材质</h2>
|
|
|
|
<hr>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="intro.productMaterialList">
|
|
|
|
<ul v-for="item in intro.productMaterialList">
|
|
|
|
<div>
|
|
|
|
<div class="image-box">
|
|
|
|
<img :src="item.imageUrl | resize 86 35" width="86" height="35"/>
|
|
|
|
</div>
|
|
|
|
<div class="text-box">
|
|
|
|
<div>{{item.caption}}</div>
|
|
|
|
<div>{{item.encaption}}</div>
|
|
|
|
</div>
|
|
|
|
<div class="clear-fix"></div>
|
|
|
|
</div>
|
|
|
|
<div class="clear-fix"></div>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
{{item.remark}}
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<hr/>
|
|
|
|
<p>
|
|
|
|
{{item.remark}}
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<hr/>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<ul class="wash-condition">
|
|
|
|
<li class="wash-condition-item" v-for="item in intro.washTipsBoList">
|
|
|
|
<img :src="item.img" width="25" height="25"/>
|
|
|
|
<div>{{item.caption}}</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<ul class="wash-condition">
|
|
|
|
<li class="wash-condition-item" v-for="item in intro.washTipsBoList">
|
|
|
|
<img :src="item.img" width="25" height="25"/>
|
|
|
|
<div>{{item.caption}}</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</show-box>
|
|
|
|
|
|
|
|
<show-box class="brand-detail-desc">
|
|
|
|
<div class="brand-detail-header">
|
|
|
|
<h2>品牌介绍</h2>
|
|
|
|
<i>DETAILS</i>
|
|
|
|
<!--品牌介绍-->
|
|
|
|
<hr>
|
|
|
|
<div class="brand-detail-desc">
|
|
|
|
<div class="brand-detail-header">
|
|
|
|
<h2>品牌介绍</h2>
|
|
|
|
</div>
|
|
|
|
<p v-if="brand && brand.brand_intro" v-lazy-html="brand.brand_intro">
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<p v-if="brand && brand.brand_intro" v-lazy-html="brand.brand_intro">
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</show-box>
|
|
|
|
|
|
|
|
<show-box class="product-detail-desc" :is-last="true">
|
|
|
|
<div class="product-detail-header">
|
|
|
|
<h2>商品详情</h2>
|
|
|
|
<i>DETAILS</i>
|
|
|
|
<!--商品介绍-->
|
|
|
|
<hr>
|
|
|
|
<div class="brand-detail-desc">
|
|
|
|
<div class="product-detail-header">
|
|
|
|
<h2>商品介绍</h2>
|
|
|
|
</div>
|
|
|
|
<p v-if="intro && intro.productIntroBo" v-lazy-html="intro.productIntroBo.productIntro">
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<p v-if="intro && intro.productIntroBo" v-lazy-html="intro.productIntroBo.productIntro">
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</show-box>
|
|
|
|
|
|
|
|
<show-box v-if="showPrefer" class="prefer-detail" :is-last="true">
|
|
|
|
<show-box class="prefer-detail" :is-last="true">
|
|
|
|
<prefer-list :title="preferTitle" :list="preferList"></prefer-list>
|
|
|
|
</show-box>
|
|
|
|
|
|
...
|
...
|
@@ -285,6 +302,56 @@ |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.add-cart {
|
|
|
|
.cart-detail {
|
|
|
|
font-size: 0;
|
|
|
|
|
|
|
|
li {
|
|
|
|
position: relative;
|
|
|
|
display: inline-block;
|
|
|
|
width: 50%;
|
|
|
|
font-size: 32px;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
position: absolute;
|
|
|
|
font-size: 40px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
padding-right: 25px;
|
|
|
|
border-right: 1px solid #e0e0e0;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
top: 16px;
|
|
|
|
right: 25px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
padding-left: 30px;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
top: -4px;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.add-btn {
|
|
|
|
display: inline-block;
|
|
|
|
width: 100%;
|
|
|
|
height: 85px;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 32px;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 82px;
|
|
|
|
background-color: #000;
|
|
|
|
border: 1px solid #7a7a7a;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.brand-detail-desc {
|
|
|
|
padding-top: 0 !important;
|
|
|
|
|
|
...
|
...
|
@@ -623,9 +690,33 @@ |
|
|
|
isApp: yoho.isApp,
|
|
|
|
isSoldOut: false,
|
|
|
|
isReady: false,
|
|
|
|
showPrefer: false, // TODO 为你优选大数据暂未实现，本期暂时屏蔽
|
|
|
|
preferTitle: '为你优选',
|
|
|
|
preferList: []
|
|
|
|
preferTitle: 'You Might Also Like',
|
|
|
|
preferList: [{
|
|
|
|
default_images: '//img10.static.yhbimg.com/goodsimg/2016/08/06/13/0101aa9919209533844b28411f5e8460c1.png?imageMogr2/thumbnail/580x773/extent/250x330/background/d2hpdGU=/position/center/quality/80/interlace/1',
|
|
|
|
sales_price: '100',
|
|
|
|
market_price: '200',
|
|
|
|
product_name: 'dfdfs哈哈哈上的符号倒计时的的胜多负少'
|
|
|
|
}, {
|
|
|
|
default_images: '//img10.static.yhbimg.com/goodsimg/2016/08/06/13/0101aa9919209533844b28411f5e8460c1.png?imageMogr2/thumbnail/580x773/extent/250x330/background/d2hpdGU=/position/center/quality/80/interlace/1',
|
|
|
|
sales_price: '100',
|
|
|
|
market_price: '200',
|
|
|
|
product_name: 'dfdfs哈哈哈上的符号倒计时的的胜多负少'
|
|
|
|
}, {
|
|
|
|
default_images: '//img11.static.yhbimg.com/goodsimg/2016/08/03/16/01be618979e3a88f2cc0b9ac04be381525.jpg?imageMogr2/thumbnail/580x773/extent/250x330/background/d2hpdGU=/position/center/quality/80/interlace/1',
|
|
|
|
sales_price: '100',
|
|
|
|
market_price: '200',
|
|
|
|
product_name: 'dfdfs哈哈哈上的符号倒计时的的胜多负少'
|
|
|
|
}, {
|
|
|
|
default_images: '//img11.static.yhbimg.com/goodsimg/2016/08/03/16/01be618979e3a88f2cc0b9ac04be381525.jpg?imageMogr2/thumbnail/580x773/extent/250x330/background/d2hpdGU=/position/center/quality/80/interlace/1',
|
|
|
|
sales_price: '100',
|
|
|
|
market_price: '200',
|
|
|
|
product_name: 'dfdfs哈哈哈上的符号倒计时的的胜多负少'
|
|
|
|
}],
|
|
|
|
toggleSwitch: {
|
|
|
|
productInfo: false,
|
|
|
|
sizeInfo: false
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
...
|
...
|
|
