|
|
@@ -9,10 +9,10 @@
|
|
|
<span>类目(产品名称):</span>
|
|
|
<span>{{component.kind.nameCn || '-'}}</span>
|
|
|
</div>
|
|
|
- <div class="base-detail-item">
|
|
|
- <span>规 格:</span>
|
|
|
- <span>{{component.spec || '-'}}</span>
|
|
|
- </div>
|
|
|
+ <!--<div class="base-detail-item">-->
|
|
|
+ <!--<span>规 格:</span>-->
|
|
|
+ <!--<span>{{component.spec || '-'}}</span>-->
|
|
|
+ <!--</div>-->
|
|
|
<div class="base-detail-item attach" @click="goAttach(component.attach)">
|
|
|
<span v-if="component.attach">规格书:<img src="/images/mobile/@2x/productDetail/pdf.png" alt=""><span>查看</span></span>
|
|
|
<span v-else>规格书:-</span>
|
|
|
@@ -33,63 +33,77 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="product-store" v-if="activeType == 'store'">
|
|
|
- <table v-if="searchLists&&searchLists.length > 0">
|
|
|
- <thead id="product-head">
|
|
|
- <tr>
|
|
|
- <th style="width: 1.55rem;">商家</th>
|
|
|
- <th style="width: 1.59rem;">生产日期</th>
|
|
|
- <th style="width: 2.58rem;">价格梯度</th>
|
|
|
- <th style="width: 1.77rem;">交期(天)</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <thead class="active" v-show="isScrollOverTab">
|
|
|
- <tr>
|
|
|
- <th style="width: 1.55rem;">商家</th>
|
|
|
- <th style="width: 1.59rem;">生产日期</th>
|
|
|
- <th style="width: 2.58rem;">价格梯度</th>
|
|
|
- <th style="width: 1.77rem;">交期(天)</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="product-body">
|
|
|
- <tr v-for="store in searchLists">
|
|
|
- <td class="store-name">
|
|
|
- <nuxt-link :to="'/mobile/shop/' + store.storeid">
|
|
|
- {{store.storeName || '-' | storeNameFilter}}
|
|
|
- </nuxt-link>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <div v-if="!store.packaging && !store.breakUp && !store.produceDate">-</div>
|
|
|
- <div>{{store.produceDate}}</div>
|
|
|
- <div>{{store.packaging}}</div>
|
|
|
- <div>{{store.breakUp?'可拆卖':'不可拆卖'}}</div>
|
|
|
- </td>
|
|
|
- <td class="price-level-wrap">
|
|
|
- <div v-if="!store.prices || store.prices.length == 0">-</div>
|
|
|
- <div class="price-number fl">
|
|
|
- <div v-for="price in store.prices">{{price.start}}+</div>
|
|
|
- </div>
|
|
|
- <div class="price-number fr">
|
|
|
- <div v-for="price in store.prices" class="price-level">
|
|
|
- <span v-if="store.currencyName.indexOf('RMB')!==-1">¥{{price.rMBPrice | currency}}</span>
|
|
|
- <span v-if="store.currencyName.indexOf('USD')!==-1">${{price.uSDPrice | currency}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td class="push-date">
|
|
|
- <div v-if="store.b2cMinDelivery">
|
|
|
- <span>{{store.b2cMinDelivery}}</span>
|
|
|
- <span v-if="store.b2cMaxDelivery && store.b2cMaxDelivery !== store.b2cMinDelivery">-</span>
|
|
|
- <span v-if="store.b2cMaxDelivery && store.b2cMaxDelivery !== store.b2cMinDelivery">{{store.b2cMaxDelivery}}</span>
|
|
|
- </div>
|
|
|
- <div v-if="store.minBuyQty"><span class="order-tag">订</span>{{store.minBuyQty}}起订</div>
|
|
|
- <div v-if="store.reserve"><span class="order-tag reserve-tag">库</span>{{store.reserve}}</div>
|
|
|
- <div v-if="!store.b2cMinDelivery">
|
|
|
- <span>—</span>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ <div v-for="(item, index) in searchLists">
|
|
|
+ <div class="middle">
|
|
|
+ <div class="storeName" @click="goProductDetail(item)">
|
|
|
+ {{item.storeName || '-' | storeNameFilter}}
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">品牌:</div>
|
|
|
+ <div class="text">{{item.brandNameEn}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl" style="width: 100%">
|
|
|
+ <div class="name">类目(产品名称):</div>
|
|
|
+ <div class="text" style="color: #3f84f6">{{item.kindNameCn || '-'}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl" style="width: 100%">
|
|
|
+ <div class="name">型号:</div>
|
|
|
+ <div class="text">{{item.code || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl" style="width: 100%">
|
|
|
+ <div class="name">规格:</div>
|
|
|
+ <div class="text">{{item.spec || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl" style="width: 100%">
|
|
|
+ <div class="name">包装:</div>
|
|
|
+ <div class="text">{{item.packaging || '无包装信息'}}</div>
|
|
|
+ <div class="textinfo" v-if="item.breakUp">可拆卖</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="name">生产日期:</div>
|
|
|
+ <div class="text" :title="item.produceDate">{{item.produceDate || '-'}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="fl" style="width: 100%; ">
|
|
|
+ <div class="name">交期(天):</div>
|
|
|
+ <div class="text" style="color: #ef5042" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery != item.b2cMinDelivery)" v-text="item.b2cMinDelivery + '-'+ item.b2cMaxDelivery"></div>
|
|
|
+ <div class="text" style="color: #ef5042" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery == item.b2cMinDelivery)" v-text="item.b2cMinDelivery"></div>
|
|
|
+ <div v-if="item.minBuyQty" style="display: inline-block;margin-left: 0.2rem"><span class="order-tag">订</span>{{item.minBuyQty}}起订</div>
|
|
|
+ <div v-if="item.reserve" style="display: inline-block;margin-left: 0.2rem"><span class="order-tag reserve-tag">库</span>{{item.reserve}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="name left">价格梯度<p>(pcs):</p></div>
|
|
|
+ <div class="table left">
|
|
|
+ <ul>
|
|
|
+ <li class="title">
|
|
|
+ <div>分段数量/PCS</div>
|
|
|
+ <div>分段单价</div>
|
|
|
+ </li>
|
|
|
+ <li v-for="price in item.prices">
|
|
|
+ <div>{{price.start}}+</div>
|
|
|
+ <div v-if="item.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
|
|
|
+ <div v-else>${{price.rMBPrice}}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div v-if="(storeList.totalElements == 0 && activeType == 'store') || (component.properties && component.properties.length == 0 && activeType == 'param')" class="no-store">
|
|
|
<img src="/images/mobile/@2x/car@2x.png" alt="">
|
|
|
@@ -100,10 +114,11 @@
|
|
|
<remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
|
|
|
<loading v-show="isSearchingMore"></loading>
|
|
|
<login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
|
|
|
+ <pull-up :searchMore="fetching" :allPage="allPage" :page="params.page" @pullUpAction="getMoreStore"></pull-up>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import {RemindBox, Loading, LoginBox} from '~components/mobile/common'
|
|
|
+ import {RemindBox, Loading, LoginBox, PullUp} from '~components/mobile/common'
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
@@ -134,17 +149,21 @@
|
|
|
components: {
|
|
|
RemindBox,
|
|
|
Loading,
|
|
|
- LoginBox
|
|
|
+ LoginBox,
|
|
|
+ PullUp
|
|
|
},
|
|
|
mounted: function () {
|
|
|
- let _this = this
|
|
|
- _this.$nextTick(function () {
|
|
|
- window.addEventListener('scroll', function () {
|
|
|
- _this.scroll()
|
|
|
- }, false)
|
|
|
- })
|
|
|
+ // let _this = this
|
|
|
+ // _this.$nextTick(function () {
|
|
|
+ // window.addEventListener('scroll', function () {
|
|
|
+ // _this.scroll()
|
|
|
+ // }, false)
|
|
|
+ // })
|
|
|
},
|
|
|
computed: {
|
|
|
+ fetching () {
|
|
|
+ return this.$store.state.componentInformation.information.fetching
|
|
|
+ },
|
|
|
component () {
|
|
|
return this.$store.state.componentDetail.detail.data
|
|
|
},
|
|
|
@@ -244,16 +263,19 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ goProductDetail: function (com) {
|
|
|
+ this.$router.push('/mobile/shop/' + com.storeid)
|
|
|
+ },
|
|
|
scroll: function () {
|
|
|
let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
|
|
|
if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.params.page < this.allPage) {
|
|
|
this.getMoreStore()
|
|
|
}
|
|
|
- let tbodyObj = document.getElementById('product-body')
|
|
|
- let theadObj = document.getElementById('product-head')
|
|
|
- if (theadObj) {
|
|
|
- this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
|
|
|
- }
|
|
|
+ // let tbodyObj = document.getElementById('product-body')
|
|
|
+ // let theadObj = document.getElementById('product-head')
|
|
|
+ // if (theadObj) {
|
|
|
+ // this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
|
|
|
+ // }
|
|
|
},
|
|
|
getMoreStore: function () {
|
|
|
if (!this.isSearchingMore) {
|
|
|
@@ -300,19 +322,21 @@
|
|
|
<style lang="scss" scoped>
|
|
|
.component-detail {
|
|
|
font-size: .28rem;
|
|
|
- margin-bottom: 1.2rem;
|
|
|
+ margin-bottom: 0.98rem;
|
|
|
background: #f7f7f7;
|
|
|
padding-top: .2rem;
|
|
|
+ padding-bottom: 0.2rem;
|
|
|
.base-detail {
|
|
|
- margin: 0 .27rem .2rem .27rem;
|
|
|
+ /*margin: 0 .27rem .2rem .27rem;*/
|
|
|
padding: .18rem .36rem 0 .36rem;
|
|
|
- border-radius: .1rem;
|
|
|
- background: url('/images/mobile/@2x/productDetail/desc-bg.png')no-repeat;
|
|
|
+ /*border-radius: .1rem;*/
|
|
|
+ background: url('/images/mobile/@2x/productDetail/desc-bg2.jpg')no-repeat;
|
|
|
background-size: cover;
|
|
|
- height: 3.96rem;
|
|
|
+ height: 4.11rem;
|
|
|
position: relative;
|
|
|
+ box-shadow: 0 0 5px #8a8a8a;
|
|
|
.base-detail-item {
|
|
|
- margin-top: .14rem;
|
|
|
+ margin-top: 0.3rem;
|
|
|
position: relative;
|
|
|
color: #fff;
|
|
|
&:nth-child(1) {
|
|
|
@@ -340,7 +364,7 @@
|
|
|
}
|
|
|
&.product-description {
|
|
|
height: 1.58rem;
|
|
|
- margin-top: .2rem;
|
|
|
+ margin-top: .6rem;
|
|
|
}
|
|
|
.description {
|
|
|
line-height: .4rem;
|
|
|
@@ -369,11 +393,13 @@
|
|
|
}
|
|
|
}
|
|
|
.product-switch-item {
|
|
|
+ margin-top: 0.15rem;
|
|
|
text-align: center;
|
|
|
background: #fff;
|
|
|
+ border-bottom: 1px solid #d8d8d8;
|
|
|
.mobile-switch-btn {
|
|
|
background: #fff;
|
|
|
- color: #666;
|
|
|
+ color: #333;
|
|
|
display: inline-block;
|
|
|
height: .64rem;
|
|
|
line-height: .64rem;
|
|
|
@@ -421,95 +447,164 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .product-store {
|
|
|
- margin: .2rem 0;
|
|
|
- table {
|
|
|
- width: 100%;
|
|
|
- font-size: .28rem;
|
|
|
- thead {
|
|
|
- background: #d5e5fb;
|
|
|
- &.active {
|
|
|
- position: fixed;
|
|
|
- top: .88rem;
|
|
|
- z-index: 2;
|
|
|
+ .middle {
|
|
|
+ .order-tag {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: .18rem;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #ee1717;
|
|
|
+ height: .27rem;
|
|
|
+ width: .27rem;
|
|
|
+ line-height: .27rem;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: .05rem;
|
|
|
+ position: relative;
|
|
|
+ top: -.05rem;
|
|
|
+ margin-right: .05rem;
|
|
|
+ &.reserve-tag {
|
|
|
+ background: #07bb1c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 0 0.24rem;
|
|
|
+ background: #fff;
|
|
|
+ margin: 0.24rem 0.24rem 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #e3e5e8;
|
|
|
+ .storeName{
|
|
|
+ color: #3f84f6;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ line-height: 0.6rem;
|
|
|
+ border-bottom: 1px solid #d3d3d3;
|
|
|
+ margin-bottom: 0.18rem;
|
|
|
+ padding-left: 0.24rem;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .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 {
|
|
|
+ padding: 0 0.24rem;
|
|
|
+ .left {
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .textinfo {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ margin-left: 0.1rem;
|
|
|
+ display: inline-block;
|
|
|
+ background: #3f84f6;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ border-radius: 3px;
|
|
|
+ width: 0.8rem;
|
|
|
+ height: 0.32rem;
|
|
|
+ line-height: 0.32rem;
|
|
|
+ text-align: center
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ font-size: 0.3rem;
|
|
|
+ color: #1a58dd;
|
|
|
+ width: 0.92rem;
|
|
|
+ height: 0.43rem;
|
|
|
+ line-height: 0.43rem;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ border:1px solid #1a58dd;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 0.2rem;
|
|
|
+ }
|
|
|
+ margin-bottom: 0.18rem;
|
|
|
+ &::after{
|
|
|
+ clear: both;
|
|
|
+ display: block;
|
|
|
+ content: ' ';
|
|
|
+ visibility: hidden;
|
|
|
+ zoom: 1;
|
|
|
+ }
|
|
|
+ .fl {
|
|
|
+ width: 4.4rem;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .fr {
|
|
|
+ text-align: left;
|
|
|
+ width: 2.6rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ &.list-long {
|
|
|
+ .fl {
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
- tr {
|
|
|
- th {
|
|
|
- font-weight: bold;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ display: inline-block;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.28rem
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ width: 5rem;
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-left: 0.1rem;
|
|
|
+ li {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ div {
|
|
|
text-align: center;
|
|
|
- height: .78rem;
|
|
|
- line-height: .78rem;
|
|
|
- >span {
|
|
|
- font-size: .22rem;
|
|
|
- }
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ border-right: .01rem solid #c5c5c5;
|
|
|
+ border-bottom: .01rem solid #c5c5c5;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- tbody {
|
|
|
- background: #fff;
|
|
|
- tr {
|
|
|
- border-bottom: 0.2rem solid #f7f7f7;
|
|
|
- td {
|
|
|
- padding: .2rem .1rem;
|
|
|
- &.store-name {
|
|
|
- color: #418bf6;
|
|
|
- a {
|
|
|
- padding: 0;
|
|
|
- display: block;
|
|
|
- width: 1.2rem;
|
|
|
- overflow: hidden;
|
|
|
- margin-left: .16rem;
|
|
|
- }
|
|
|
- }
|
|
|
- &.price-level-wrap {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- > div {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- max-width: 1.58rem;
|
|
|
- }
|
|
|
- .price-number {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- margin-bottom: 0;
|
|
|
- width: .9rem;
|
|
|
- }
|
|
|
- div {
|
|
|
- margin-bottom: .2rem;
|
|
|
- text-align: left;
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- &.push-date {
|
|
|
- text-align: left;
|
|
|
- div {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
+ &:nth-child(odd) {
|
|
|
+ background: #ddd;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.28rem;
|
|
|
}
|
|
|
- .price-level:last-child {
|
|
|
- color: #fc5708;
|
|
|
- }
|
|
|
- .order-tag {
|
|
|
- display: inline-block;
|
|
|
- font-size: .18rem;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
- background: #ee1717;
|
|
|
- height: .27rem;
|
|
|
- width: .27rem;
|
|
|
- line-height: .27rem;
|
|
|
- text-align: center;
|
|
|
- border-radius: .05rem;
|
|
|
- position: relative;
|
|
|
- top: -.05rem;
|
|
|
- margin-right: .05rem;
|
|
|
- &.reserve-tag {
|
|
|
- background: #07bb1c;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:nth-child(even) {
|
|
|
+ background: #fcfcfc;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ }
|
|
|
+ &:nth-last-of-type(1){
|
|
|
+ color: #f31919;
|
|
|
+ }
|
|
|
+ &.title {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
}
|
|
|
}
|