|
|
@@ -1,17 +1,20 @@
|
|
|
<template>
|
|
|
<div class="store-detail mobile-content">
|
|
|
+ <div class="lookjianjie" @click="activeType = 'detail'">简介<i class="iconfont icon-fanhui"></i></div>
|
|
|
<div class="store-logo">
|
|
|
<div class="store-logo-box">
|
|
|
<img :src="store.logoUrl || '/images/component/default.png'"/>
|
|
|
<i v-if="showIcon" class="iconfont icon-shoucang" :style="isFocus === 'true'?'color:#ff7800':'color: #ddd'" @click="collectStore"></i>
|
|
|
</div>
|
|
|
- <div class="store-switch-item">
|
|
|
- <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>
|
|
|
- <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">介绍</span>
|
|
|
- </div>
|
|
|
+ <!--<div class="store-switch-item">-->
|
|
|
+ <!--<span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>-->
|
|
|
+ <!--<span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">介绍</span>-->
|
|
|
+ <!--</div>-->
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="store-info" v-if="activeType=='detail'">
|
|
|
+ <div class="mobile-modal" @touchmove.self="preventTouchMove($event)" v-show="activeType==='detail'">
|
|
|
+ <div class="mobile-modal-box mobile-link-en mobile-link-en-content">
|
|
|
+ <div class="mobile-modal-header">企业信息|{{store.storeName}}<i @click="activeType = 'store'" class="icon-guanbi iconfont"></i></div>
|
|
|
+ <div class="store-info" >
|
|
|
<div class="store-description">
|
|
|
<h4>主营产品</h4>
|
|
|
<p class="content" v-if="store.description">
|
|
|
@@ -75,12 +78,14 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- <div class="com-none-state" v-if="activeType=='detail'">
|
|
|
<img src="/images/mobile/@2x/empty-collect.png">
|
|
|
<p>抱歉,暂无店铺简介</p>
|
|
|
<nuxt-link to="/">返回首页</nuxt-link>
|
|
|
</div>-->
|
|
|
- <div class="product-store" v-else>
|
|
|
+ <div class="product-store">
|
|
|
<div class="search-content">
|
|
|
<input type="text" v-model="keyword" placeholder="品牌/物料名称(类目)/型号/规格" @keyup.13="search">
|
|
|
<span @click="search" style="height:0.5rem;line-height:0.5rem;">
|
|
|
@@ -95,47 +100,52 @@
|
|
|
<div class="name">品牌:</div>
|
|
|
<div class="text">{{item.brandNameEn}}</div>
|
|
|
</div>
|
|
|
+ <div class="fl">
|
|
|
+ <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>
|
|
|
</div>
|
|
|
<div class="list">
|
|
|
- <div class="fl" style="width: 100%">
|
|
|
+ <div class="fl">
|
|
|
<div class="name">物料名称(类目):</div>
|
|
|
<div class="text" style="color: #3f84f6">{{item.kindNameCn || '-'}}</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">库存:</div>
|
|
|
+ <div class="text">{{item.reserve || '-'}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="list">
|
|
|
- <div class="fl" style="width: 100%">
|
|
|
+ <div class="fl">
|
|
|
<div class="name">型号:</div>
|
|
|
<div class="text">{{item.code || '-'}}</div>
|
|
|
</div>
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">起拍:</div>
|
|
|
+ <div class="text">{{item.minBuyQty || '-'}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="list">
|
|
|
- <div class="fl" style="width: 100%">
|
|
|
+ <div class="fl">
|
|
|
<div class="name">规格:</div>
|
|
|
<div class="text">{{item.spec || '-'}}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="list">
|
|
|
- <div class="fl" style="width: 100%">
|
|
|
+ <div class="fl">
|
|
|
<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 class="fl" @click="goAttach(item.attach)">
|
|
|
+ <div class="name">规格书:</div>
|
|
|
+ <div class="text">
|
|
|
+ <i class="iconfont icon-pdf" :class="{'active': item.attach && item.attach !== '' && item.attach !== '1'}"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="fl">
|
|
|
+ <div class="name">生产日期:</div>
|
|
|
+ <div class="text" :title="item.produceDate">{{item.produceDate || '-'}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="list">
|
|
|
@@ -154,7 +164,15 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <div class="list clearfix">
|
|
|
+ <div class="pull-left cancat" @click="cancatAlert(item)">
|
|
|
+ <i class="iconfont icon-kefu1"></i>联系买家
|
|
|
+ </div>
|
|
|
+ <div class="pull-right clearfix">
|
|
|
+ <div class="pull-left">加入购物车</div>
|
|
|
+ <div class="pull-left">立即购买</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -175,7 +193,7 @@
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
- activeType: 'product',
|
|
|
+ activeType: '',
|
|
|
collectResult: '收藏成功',
|
|
|
timeoutCount: 0,
|
|
|
clickTel: false,
|
|
|
@@ -263,6 +281,25 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ goAttach: function (url) {
|
|
|
+ if (this.user.logged) {
|
|
|
+ console.log(this.component)
|
|
|
+ if (url && url !== '1') {
|
|
|
+ window.open(url)
|
|
|
+ } else {
|
|
|
+ if (!url) {
|
|
|
+ this.collectResult = '该产品暂无数据手册'
|
|
|
+ this.timeoutCount++
|
|
|
+ } else {
|
|
|
+ this.collectResult = '数据手册地址错误'
|
|
|
+ this.timeoutCount++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.url = this.$route.fullPath
|
|
|
+ this.showLoginBox = true
|
|
|
+ }
|
|
|
+ },
|
|
|
scroll: function () {
|
|
|
let tbodyObj = document.getElementById('product-body')
|
|
|
let theadObj = document.getElementById('product-head')
|
|
|
@@ -335,6 +372,13 @@
|
|
|
.mobile-header {
|
|
|
border-bottom: 0px !important;
|
|
|
}
|
|
|
+ .mobile-modal .mobile-link-en-content {
|
|
|
+ width: 7.04rem;
|
|
|
+ margin-top: 0rem;
|
|
|
+ left: 0.2rem;
|
|
|
+ background: #f7f7f7;
|
|
|
+ top: 5%;
|
|
|
+ }
|
|
|
.store-detail {
|
|
|
margin: 0 auto;
|
|
|
margin-bottom: 1.2rem;
|
|
|
@@ -342,13 +386,13 @@
|
|
|
background: #f7f7f7;
|
|
|
height: 100%;
|
|
|
.store-logo {
|
|
|
- height: 4.49rem;
|
|
|
+ height: 3.27rem;
|
|
|
width: 100%;
|
|
|
display: inline-block;
|
|
|
line-height: 2.13rem;
|
|
|
background: #fff;
|
|
|
text-align: center;
|
|
|
- background: url('/images/mobile/@2x/brand-bg2.jpg') no-repeat;
|
|
|
+ background: url('/images/mobile/@2x/brand-bg2.png') no-repeat;
|
|
|
background-size: cover;
|
|
|
position: relative;
|
|
|
.store-logo-box {
|
|
|
@@ -408,6 +452,9 @@
|
|
|
.store-info {
|
|
|
background: #f7f7f7;
|
|
|
width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ overflow-y: scroll;
|
|
|
+ height: 9rem;
|
|
|
h4{
|
|
|
width: 100%;
|
|
|
text-align: left;
|
|
|
@@ -475,7 +522,7 @@
|
|
|
.store-description{
|
|
|
background: #fff;
|
|
|
width: 6.96rem;
|
|
|
- margin: .2rem auto;
|
|
|
+ margin: 0 auto .2rem;
|
|
|
border-radius: .1rem;
|
|
|
.content {
|
|
|
text-indent:2em;
|
|
|
@@ -570,7 +617,7 @@
|
|
|
zoom: 1;
|
|
|
}
|
|
|
.fl {
|
|
|
- width: 4.4rem;
|
|
|
+ width: 3.2rem;
|
|
|
float: left;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
@@ -599,7 +646,7 @@
|
|
|
font-size: 0.28rem
|
|
|
}
|
|
|
.table {
|
|
|
- width: 5rem;
|
|
|
+ width: 5.25rem;
|
|
|
margin-bottom: 0;
|
|
|
margin-top: 0;
|
|
|
margin-left: 0.1rem;
|
|
|
@@ -641,6 +688,33 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .pull-right {
|
|
|
+ div {
|
|
|
+ color: #3f84f6;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ border-radius: 0.07rem;
|
|
|
+ border: 1px solid #3f84f6;
|
|
|
+ background: #fff;
|
|
|
+ width: 2rem;
|
|
|
+ line-height: 0.54rem;
|
|
|
+ height: 0.54rem;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ div:last-child {
|
|
|
+ margin-left: 0.2rem;
|
|
|
+ color: #fff;
|
|
|
+ background: #3f84f6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ &.icon-pdf {
|
|
|
+ color: #929292;
|
|
|
+ font-size: 0.4rem;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: #eb062b;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.product-store {
|
|
|
@@ -781,4 +855,34 @@
|
|
|
border: 1px solid #376ff3;
|
|
|
}
|
|
|
}
|
|
|
+ .cancat {
|
|
|
+ height: 0.56rem;
|
|
|
+ line-height: 0.56rem;
|
|
|
+ border: 1px solid #3f84f6;
|
|
|
+ color: #3f84f6;
|
|
|
+ font-size: 0.26rem;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 0 0.1rem;
|
|
|
+ overflow: hidden;
|
|
|
+ width: auto;
|
|
|
+ i {
|
|
|
+ font-size: 0.26rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .lookjianjie {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ right: 0.4rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #fff;
|
|
|
+ z-index: 11;
|
|
|
+ line-height: 0.88rem;
|
|
|
+ i {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #fff;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|