|
|
@@ -1,41 +1,81 @@
|
|
|
<template>
|
|
|
<div class="mobile-content commodity-detail">
|
|
|
<div class="logo-wrap">
|
|
|
+ <div class="wrap-title"><span class="line"></span>图片信息</div>
|
|
|
<img :src="commodity.img || '/images/store/common/default.png'" alt="">
|
|
|
</div>
|
|
|
- <div class="content-wrap">
|
|
|
- <div class="content-line cl-title">
|
|
|
- <span class="code text-ellipse inline-block">{{commodity.code}}</span>
|
|
|
- <div class="focus-wrap inline-block" :class="{'active': isFocus}">
|
|
|
- <i class="iconfont icon-shoucang" @click="collectStore"></i>
|
|
|
- <span>店铺关注</span>
|
|
|
+ <div class="product-info">
|
|
|
+ <div class="wrap-title"><span class="line"></span>产品信息</div>
|
|
|
+ <div class="middle">
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">品牌:</div>
|
|
|
+ <div class="text">{{commodity.brandNameEn}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="content-line cl-price1">
|
|
|
- <div class="fl">
|
|
|
- <p class="price-tag">价格:</p>
|
|
|
- <span>数量:</span>
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">类目(产品名称):</div>
|
|
|
+ <div class="text">{{commodity.kindNameCn || '-'}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <ul>
|
|
|
- <li class="text-ellipse inline-block price-level" v-for="price in priceLevel1">
|
|
|
- <p><span>{{isRMB ? '¥' : '$'}}</span>
|
|
|
- {{isRMB ? price.rMBPrice : price.uSDPrice}}
|
|
|
- </p>
|
|
|
- <span>{{price.start}}+</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <i :class="`iconfont icon-arrow-${isMore ? 'up' : 'down'}`" @click="isMore = !isMore" v-if="priceLevel2.length"></i>
|
|
|
- </div>
|
|
|
- <div class="content-line cl-price2" v-if="priceLevel2.length && isMore">
|
|
|
- <ul>
|
|
|
- <li class="text-ellipse inline-block price-level" v-for="price in priceLevel2">
|
|
|
- <p><span>$</span>159.00</p>
|
|
|
- <span>1+</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">规格:</div>
|
|
|
+ <div class="text">{{commodity.spec || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">包装方式:</div>
|
|
|
+ <div class="text">{{commodity.packaging || '无包装信息'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">最小包装数:</div>
|
|
|
+ <div class="text">{{commodity.minPackQty}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="com-info">
|
|
|
+ <span class="name">库存</span>:<span v-text="commodity.reserve || 0"></span><em style="margin-left: 3px;">PCS</em>
|
|
|
+ (<span v-text="commodity.minBuyQty || 1"></span>个起订)
|
|
|
+ <span class="can-div-sell" v-if="commodity.breakUp">可拆卖</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">交期(天):</div>
|
|
|
+ <div class="text red" v-if="commodity.b2cMaxDelivery && (commodity.b2cMaxDelivery != commodity.b2cMinDelivery)" v-text="commodity.b2cMinDelivery + '-'+ commodity.b2cMaxDelivery"></div>
|
|
|
+ <div class="text rd" v-if="commodity.b2cMaxDelivery && (commodity.b2cMaxDelivery == commodity.b2cMinDelivery)" v-text="commodity.b2cMinDelivery"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--<div class="list">-->
|
|
|
+ <!--<div class="name">最小起订量:</div>-->
|
|
|
+ <!--<div class="text" style="color: #f31919">{{commodity.minBuyQty}}</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+
|
|
|
+ <!--<div class="list">-->
|
|
|
+ <!--<div class="name">生产日期:</div>-->
|
|
|
+ <!--<div class="text" :title="item.produceDate">{{commodity.produceDate || '-'}}</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="name left">价格梯度:</div>
|
|
|
+ <div class="table left">
|
|
|
+ <ul>
|
|
|
+ <li class="title">
|
|
|
+ <div>分段数量/PCS</div>
|
|
|
+ <div>分段单价</div>
|
|
|
+ </li>
|
|
|
+ <li v-for="price in commodity.prices">
|
|
|
+ <div>{{price.start}}+</div>
|
|
|
+ <div v-if="commodity.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
|
|
|
+ <div v-else>${{price.rMBPrice}}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
<div class="content-line link cl-price2">
|
|
|
- <ul>
|
|
|
+ <ul class="clearfix">
|
|
|
<nuxt-link :to="`/mobile/shop/${storeInfo.uuid}`" tag="li" class="text-ellipse inline-block price-level">
|
|
|
<i class="iconfont icon-shouye-copy"></i>
|
|
|
<p>店铺</p>
|
|
|
@@ -51,38 +91,6 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="item-wrap">
|
|
|
- <p>产品信息</p>
|
|
|
- <div class="com-info">
|
|
|
- <span class="name">品牌</span>:<span v-text="commodity.brandNameEn"></span>
|
|
|
- </div>
|
|
|
- <div class="com-info">
|
|
|
- <span class="name no-letter">类目(产品名称)</span>:<span v-text="commodity.kindNameCn || '无类目信息'"></span>
|
|
|
- </div>
|
|
|
- <div class="com-info">
|
|
|
- <span class="name">规格</span>:<span v-text="commodity.spec || '无规格信息'"></span>
|
|
|
- </div>
|
|
|
- <div class="com-info">
|
|
|
- <span class="name">包装</span>:<span v-text="commodity.packaging || '无包装信息'"></span>
|
|
|
- </div>
|
|
|
- <div class="com-info">
|
|
|
- <span class="name">最小包装数</span>:<span v-text="commodity.minPackQty || '无最小包装数信息'"></span>
|
|
|
- </div>
|
|
|
- <div class="com-info">
|
|
|
- <span class="name">库存</span>:<span v-text="commodity.reserve || 0"></span><em style="margin-left: 3px;">PCS</em>
|
|
|
- (<span v-text="commodity.minBuyQty || 1"></span>个起订)
|
|
|
- <span class="can-div-sell" v-if="commodity.breakUp">可拆卖</span>
|
|
|
- </div>
|
|
|
- <div class="com-info">
|
|
|
- <span class="name">交期</span>:
|
|
|
- <div class="delivery inline-block">
|
|
|
- <span v-text="commodity.b2cMinDelivery || 0"></span>
|
|
|
- <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery">-</span>
|
|
|
- <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery" v-text="commodity.b2cMaxDelivery || 0"></span>
|
|
|
- <span>(天)</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<div class="params-wrap">
|
|
|
<p>产品参数</p>
|
|
|
<ul v-if="component.properties && component.properties.length">
|
|
|
@@ -140,6 +148,7 @@
|
|
|
},
|
|
|
computed: {
|
|
|
commodity () {
|
|
|
+ console.log(this.$store.state.shop.storeInfo.commodity.data)
|
|
|
return this.$store.state.shop.storeInfo.commodity.data
|
|
|
},
|
|
|
isRMB () {
|
|
|
@@ -215,144 +224,232 @@
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.commodity-detail {
|
|
|
- .logo-wrap {
|
|
|
- height: 5.18rem;
|
|
|
- line-height: 5.18rem;
|
|
|
- background: #fff;
|
|
|
- text-align: center;
|
|
|
- img {
|
|
|
- /* border: .01rem solid #ccc;*/
|
|
|
- max-width: 4.06rem;
|
|
|
- max-height: 3.27rem;
|
|
|
+ background: #f1f3f6;
|
|
|
+ .wrap-title {
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ border-bottom: 1px solid #d3d3d3;
|
|
|
+ height: 0.5rem;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 0 0.1rem 0.05rem;
|
|
|
+ margin: 0.17rem 0.25rem 0.13rem 0.25rem;
|
|
|
+ line-height: 0.5rem;
|
|
|
+ .line{
|
|
|
+ width: 0.05rem;
|
|
|
+ background: #3f84f6;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-right: 0.08rem;
|
|
|
+ height: 0.28rem;
|
|
|
+ margin-top: 0.09rem;
|
|
|
}
|
|
|
}
|
|
|
- .content-wrap {
|
|
|
- -webkit-box-shadow: 0 -2px 7px 0 rgba(143, 141, 141, 0.25);
|
|
|
- -moz-box-shadow: 0 -2px 7px 0 rgba(143, 141, 141, 0.25);
|
|
|
- box-shadow: 0 -2px 7px 0 rgba(143, 141, 141, 0.25);
|
|
|
- border-bottom: .1rem solid #f4f4f4;
|
|
|
- .content-line {
|
|
|
- height: 1.04rem;
|
|
|
- border-bottom: .01rem solid #d9d9d9;
|
|
|
- &.cl-title {
|
|
|
- padding: .14rem 0 .14rem .2rem;
|
|
|
- .code {
|
|
|
- font-size: .3rem;
|
|
|
- font-weight: bold;
|
|
|
- width: 6.22rem;
|
|
|
- padding-right: .3rem;
|
|
|
- border-right: .01rem solid #e1e1e1;
|
|
|
- line-height: .76rem;
|
|
|
+ .product-info {
|
|
|
+ background: #fff;
|
|
|
+ margin: 0.2rem;
|
|
|
+ border: 1px solid #e3e5e8;
|
|
|
+ padding-bottom: 0.2rem;
|
|
|
+ .middle {
|
|
|
+ padding: 0.24rem 0.24rem 0px;
|
|
|
+ background: #fff;
|
|
|
+ .pms {
|
|
|
+ color: #f57710;
|
|
|
+ border: 1px solid #f57710;
|
|
|
+ border-radius: 0.4rem;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ height: 0.4rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ width: 0.8rem;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ .left {
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .textinfo {
|
|
|
+ color: #0067e7;
|
|
|
+ font-size: 0.3rem;
|
|
|
}
|
|
|
- .focus-wrap {
|
|
|
- width: .9rem;
|
|
|
+ .button {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #1a58dd;
|
|
|
+ width: 0.92rem;
|
|
|
text-align: center;
|
|
|
- margin-left: .15rem;
|
|
|
- i {
|
|
|
- font-size: .4rem;
|
|
|
- display: block;
|
|
|
- color: #dddddd;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: .2rem;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- i {
|
|
|
- color: #ff7803;
|
|
|
- }
|
|
|
- }
|
|
|
+ border-radius: 5px;
|
|
|
+ border:1px solid #1a58dd;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 0.2rem;
|
|
|
}
|
|
|
- }
|
|
|
- .price-level {
|
|
|
- text-align: center;
|
|
|
- font-size: .24rem;
|
|
|
- border-right: .01rem solid #b0b0b0;
|
|
|
- &:last-child {
|
|
|
- border-right: none;
|
|
|
+ margin-bottom: 0.18rem;
|
|
|
+ &::after{
|
|
|
+ clear: both;
|
|
|
+ display: block;
|
|
|
+ content: ' ';
|
|
|
+ visibility: hidden;
|
|
|
+ zoom: 1;
|
|
|
}
|
|
|
- p {
|
|
|
- font-size: .38rem;
|
|
|
- color: #f42d29;
|
|
|
+ .fl {
|
|
|
+ width: 3.8rem;
|
|
|
+ float: left;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
- max-width: 1.88rem;
|
|
|
- margin: 0 auto;
|
|
|
- span {
|
|
|
- font-size: .22rem;
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- &.cl-price1 {
|
|
|
- padding: .1rem .18rem 0;
|
|
|
- .fl {
|
|
|
- font-size: .24rem;
|
|
|
- text-align: center;
|
|
|
- margin-top: .08rem;
|
|
|
- .price-tag {
|
|
|
- width: .69rem;
|
|
|
- height: .34rem;
|
|
|
- line-height: .34rem;
|
|
|
- text-align: center;
|
|
|
- background: #f42d29;
|
|
|
- border-radius: .1rem;
|
|
|
- color: #fff;
|
|
|
- margin: .02rem 0 .06rem;
|
|
|
- }
|
|
|
+ .fr {
|
|
|
+ text-align: left;
|
|
|
+ width: 2rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
- ul {
|
|
|
- display: inline-block;
|
|
|
- li {
|
|
|
- width: 1.96rem;
|
|
|
+ &.list-long {
|
|
|
+ .fl {
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
}
|
|
|
- i {
|
|
|
- font-size: .32rem;
|
|
|
+ .name {
|
|
|
+ color: #666;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
- }
|
|
|
- &.cl-price2 {
|
|
|
- padding-top: .1rem;
|
|
|
- ul {
|
|
|
- text-align: center;
|
|
|
- li {
|
|
|
- width: 2.83rem;
|
|
|
+ .text {
|
|
|
+ display: inline-block;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ &.red {
|
|
|
+ color: #e6353d;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- &.link {
|
|
|
- padding-top: .18rem;
|
|
|
- ul {
|
|
|
+ .table {
|
|
|
+ width: 4.8rem;
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-top: 0;
|
|
|
li {
|
|
|
- width: 33%;
|
|
|
- &.active {
|
|
|
- i {
|
|
|
- color: #d81e06;
|
|
|
- }
|
|
|
+ height: 0.43rem;
|
|
|
+ line-height: 0.43rem;
|
|
|
+ border-left: .01rem solid #c5c5c5;
|
|
|
+ font-size: .28rem;
|
|
|
+ &::after {
|
|
|
+ clear: both;
|
|
|
+ display: block;
|
|
|
+ content: ' ';
|
|
|
+ visibility: hidden;
|
|
|
+ zoom: 1;
|
|
|
}
|
|
|
- }
|
|
|
- i {
|
|
|
- font-size: .39rem;
|
|
|
- &.icon-kefu1 {
|
|
|
- font-size: .44rem;
|
|
|
- position: relative;
|
|
|
- top: -.05rem;
|
|
|
- color: #ff6000;
|
|
|
- & + p {
|
|
|
- margin-top: -.07rem;
|
|
|
- }
|
|
|
+ div {
|
|
|
+ text-align: center;
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ border-right: .01rem solid #c5c5c5;
|
|
|
+ border-bottom: .01rem solid #c5c5c5;
|
|
|
}
|
|
|
- &.icon-shouye-copy {
|
|
|
- color: #3f84f6;
|
|
|
+ &:nth-child(odd) {
|
|
|
+ background: #ddd;
|
|
|
+ color: #666;
|
|
|
+ font-size: 0.28rem;
|
|
|
}
|
|
|
+ &:nth-child(even) {
|
|
|
+ background: #fcfcfc;
|
|
|
+ color: #666;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ }
|
|
|
+ &:nth-last-of-type(1){
|
|
|
+ color: #f31919;
|
|
|
+ }
|
|
|
+ &.title {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .com-info {
|
|
|
+ line-height: .5rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ .name {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .can-div-sell {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ margin-left: 0.1rem;
|
|
|
+ display: inline-block;
|
|
|
+ height: .3rem;
|
|
|
+ line-height: .3rem;
|
|
|
+ width: .7rem;
|
|
|
+ text-align: center;
|
|
|
+ background: #3f84f6;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-line {
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ width: 2rem;
|
|
|
+ height:0.54rem;
|
|
|
+ line-height: 0.54rem;
|
|
|
+ float: left;
|
|
|
+ margin-right: 0.25rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 0.08rem;
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 0.1rem;
|
|
|
+ margin-left: 0.1rem;
|
|
|
+ }
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
+ margin-right: 0;
|
|
|
+ background: #fff;
|
|
|
+ color: #3f84f6;
|
|
|
+ border: 1px solid #3f84f6;
|
|
|
+ }
|
|
|
+ &:nth-child(1) {
|
|
|
+ background: #3f84f6;
|
|
|
+ border: 1px solid #3f84f6;
|
|
|
+ margin-left: 0.2rem;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ background: #ff6000;
|
|
|
+ border: 1px solid #ff6000;
|
|
|
}
|
|
|
p {
|
|
|
- font-size: .2rem;
|
|
|
- color: #333;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0.5rem;
|
|
|
+ vertical-align: top;
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-left: 0.25rem;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .logo-wrap {
|
|
|
+ height: 5.18rem;
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0.2rem;
|
|
|
+ border: 1px solid #e3e5e8;
|
|
|
+ img {
|
|
|
+ /* border: .01rem solid #ccc;*/
|
|
|
+ max-width: 4.06rem;
|
|
|
+ max-height: 3.27rem;
|
|
|
+ margin-top: 0.4rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
.params-wrap {
|
|
|
background: #fff;
|
|
|
padding: .29rem .23rem;
|
|
|
@@ -385,40 +482,6 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .item-wrap {
|
|
|
- padding: .3rem 0;
|
|
|
- border-bottom: .1rem solid #f4f4f4;
|
|
|
- p {
|
|
|
- font-size: .26rem;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: .24rem;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .com-info {
|
|
|
- padding-left: .5rem;
|
|
|
- padding-right: .2rem;
|
|
|
- line-height: .5rem;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- .name {
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- .can-div-sell {
|
|
|
- font-size: 0.18rem;
|
|
|
- margin-left: 0.1rem;
|
|
|
- display: inline-block;
|
|
|
- height: .3rem;
|
|
|
- line-height: .3rem;
|
|
|
- width: .7rem;
|
|
|
- text-align: center;
|
|
|
- background: #3f84f6;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.com-none-state {
|
|
|
padding: .2rem 0;
|