|
@@ -1,52 +1,50 @@
|
|
|
<template>
|
|
|
- <iscroll-view class="scroll-view" @pullUp="load">
|
|
|
- <div class="search-list">
|
|
|
- <div class="search-item" v-if="productList.expose > 0 || productList.brands">
|
|
|
- <span :class="activeType=='store'?'active':''" @click="clickType('store')">所有器件</span>
|
|
|
- <span :class="activeType=='support'?'active':''" @click="clickType('support')">仅看有货</span>
|
|
|
- </div>
|
|
|
+ <div class="search-list">
|
|
|
+ <div class="search-item" v-if="productList.expose > 0 || productList.brands">
|
|
|
+ <span :class="activeType=='store'?'active':''" @click="clickType('store')">所有器件</span>
|
|
|
+ <span :class="activeType=='support'?'active':''" @click="clickType('support')">仅看有货</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="brand-list-content" v-if="(!productList.brands && brandList && brandList.length > 0) && productList.expose > 0">
|
|
|
- <div class="brand-list-top">
|
|
|
- <span>品牌墙</span>
|
|
|
- <span class="row-switch" @click="onclick()" v-if="brandList.length > 8">{{!isShow?'收起':'展开'}}<i :class="{'iconfont icon-arrow-down':isShow,'icon-icon-shang iconfont':!isShow}"></i></span>
|
|
|
- </div>
|
|
|
- <div class="brand-list-item" >
|
|
|
- <div v-for="item in isShow?brandList.slice(0, 8):brandList">
|
|
|
- <nuxt-link :to="'/mobile/brand/'+item.br_uuid">
|
|
|
- <img :src="item.logoUrl ||'/images/component/default.png'"/>
|
|
|
- </nuxt-link>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="brand-list-content" v-if="(!productList.brands && brandList && brandList.length > 0) && productList.expose > 0">
|
|
|
+ <div class="brand-list-top">
|
|
|
+ <span>品牌墙</span>
|
|
|
+ <span class="row-switch" @click="onclick()" v-if="brandList.length > 8">{{!isShow?'收起':'展开'}}<i :class="{'iconfont icon-arrow-down':isShow,'icon-icon-shang iconfont':!isShow}"></i></span>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="detail-brand-content" v-if="productList.brands" @click="goBrand(list.uuid)">
|
|
|
- <h4>主营产品</h4>
|
|
|
- <div class="brand-list">
|
|
|
- <div class="list-left">
|
|
|
- <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
|
|
|
- <span>{{list.nameCn}}</span>
|
|
|
- </div>
|
|
|
- <p>{{list.series | productDescFilter}}</p>
|
|
|
+ <div class="brand-list-item" >
|
|
|
+ <div v-for="item in isShow?brandList.slice(0, 8):brandList">
|
|
|
+ <nuxt-link :to="'/mobile/brand/'+item.br_uuid">
|
|
|
+ <img :src="item.logoUrl ||'/images/component/default.png'"/>
|
|
|
+ </nuxt-link>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
|
|
|
- <div class="brand-item" @click="goComponent(item.uuid)">
|
|
|
- <p>型号:<span>{{item.code}}</span></p>
|
|
|
- <p>品牌:<span>{{item.brand.nameCn}}</span></p>
|
|
|
- <p>产品描述:<span>{{item.kind.nameCn}}</span></p>
|
|
|
- <i class="iconfont icon-shoucang" :style="(item.isFocus)?'color:#ff7800':'color:#bbb'" @click="collect(item, $event)"></i>
|
|
|
+ <div class="detail-brand-content" v-if="productList.brands" @click="goBrand(list.uuid)">
|
|
|
+ <h4>主营产品</h4>
|
|
|
+ <div class="brand-list">
|
|
|
+ <div class="list-left">
|
|
|
+ <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
|
|
|
+ <span>{{list.nameCn}}</span>
|
|
|
</div>
|
|
|
+ <p>{{list.series | productDescFilter}}</p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="none-state" v-if="!productList.expose">
|
|
|
- <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
|
|
|
- <a @click="goLastPage">返回上一页</a>
|
|
|
+ <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
|
|
|
+ <div class="brand-item" @click="goComponent(item.uuid)">
|
|
|
+ <p>型号:<span>{{item.code}}</span></p>
|
|
|
+ <p>品牌:<span>{{item.brand.nameCn}}</span></p>
|
|
|
+ <p>产品描述:<span>{{item.kind.nameCn}}</span></p>
|
|
|
+ <i class="iconfont icon-shoucang" :style="(item.isFocus)?'color:#ff7800':'color:#bbb'" @click="collect(item, $event)"></i>
|
|
|
</div>
|
|
|
- <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
|
|
|
</div>
|
|
|
- </iscroll-view>
|
|
|
+
|
|
|
+ <div class="none-state" v-if="!productList.expose">
|
|
|
+ <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
|
|
|
+ <a @click="goLastPage">返回上一页</a>
|
|
|
+ </div>
|
|
|
+ <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -143,190 +141,185 @@
|
|
|
},
|
|
|
goLastPage: function () {
|
|
|
window.history.back(-1)
|
|
|
- },
|
|
|
- load: function (iscroll) {
|
|
|
- console.log(iscroll)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .scroll-view {
|
|
|
- .search-list{
|
|
|
+ .search-list{
|
|
|
+ width:100%;
|
|
|
+ padding-bottom: 1rem;
|
|
|
+ .none-state{
|
|
|
+ text-align: center;
|
|
|
+ margin-top:2rem;
|
|
|
width:100%;
|
|
|
- padding-bottom: 1rem;
|
|
|
- .none-state{
|
|
|
- text-align: center;
|
|
|
- margin-top:2rem;
|
|
|
- width:100%;
|
|
|
- img{
|
|
|
- margin:0 auto;
|
|
|
- width: 4.08rem;
|
|
|
- height: 4.13rem;
|
|
|
- }
|
|
|
- a {
|
|
|
- display: block;
|
|
|
- font-size: .28rem;
|
|
|
- color: #fff;
|
|
|
- width: 1.88rem;
|
|
|
- height: .54rem;
|
|
|
- line-height: .54rem;
|
|
|
- background: #418bf6;
|
|
|
- margin: .7rem auto 0;
|
|
|
- border-radius: .05rem;
|
|
|
- }
|
|
|
+ img{
|
|
|
+ margin:0 auto;
|
|
|
+ width: 4.08rem;
|
|
|
+ height: 4.13rem;
|
|
|
}
|
|
|
- .search-item{
|
|
|
- justify-content: space-around;
|
|
|
- text-align: center;
|
|
|
- display:flex;
|
|
|
- span{
|
|
|
- display:inline-block;
|
|
|
- width:1.41rem;
|
|
|
- line-height: .76rem;
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ font-size: .28rem;
|
|
|
+ color: #fff;
|
|
|
+ width: 1.88rem;
|
|
|
+ height: .54rem;
|
|
|
+ line-height: .54rem;
|
|
|
+ background: #418bf6;
|
|
|
+ margin: .7rem auto 0;
|
|
|
+ border-radius: .05rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-item{
|
|
|
+ justify-content: space-around;
|
|
|
+ text-align: center;
|
|
|
+ display:flex;
|
|
|
+ span{
|
|
|
+ display:inline-block;
|
|
|
+ width:1.41rem;
|
|
|
+ line-height: .76rem;
|
|
|
+ font-size:.32rem;
|
|
|
+ color:#666;
|
|
|
+ }
|
|
|
+ span.active{
|
|
|
+ color:#3976f4;
|
|
|
+ border-bottom:.02rem solid #3976f4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-list-content{
|
|
|
+ margin:0 auto;
|
|
|
+ border-top:.02rem solid #dedfdf;
|
|
|
+ border-bottom:.02rem solid #dedfdf;
|
|
|
+ width:7.1rem;
|
|
|
+ min-height:1.51rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: left;
|
|
|
+ padding-top:.33rem;
|
|
|
+ padding-bottom:.33rem;
|
|
|
+ .brand-list-top{
|
|
|
+ span:first-child{
|
|
|
font-size:.32rem;
|
|
|
- color:#666;
|
|
|
+ margin-right:4.98rem;
|
|
|
+ margin-left: .2rem;
|
|
|
}
|
|
|
- span.active{
|
|
|
- color:#3976f4;
|
|
|
- border-bottom:.02rem solid #3976f4;
|
|
|
+ span.row-switch{
|
|
|
+ font-size:.28rem;
|
|
|
+ color:#53a0f7;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .brand-list-content{
|
|
|
- margin:0 auto;
|
|
|
- border-top:.02rem solid #dedfdf;
|
|
|
- border-bottom:.02rem solid #dedfdf;
|
|
|
- width:7.1rem;
|
|
|
- min-height:1.51rem;
|
|
|
+ .brand-list-item{
|
|
|
+ flex-wrap: wrap;
|
|
|
+ display:inline-flex;
|
|
|
overflow: hidden;
|
|
|
- text-align: left;
|
|
|
- padding-top:.33rem;
|
|
|
- padding-bottom:.33rem;
|
|
|
- .brand-list-top{
|
|
|
- span:first-child{
|
|
|
- font-size:.32rem;
|
|
|
- margin-right:4.98rem;
|
|
|
- margin-left: .2rem;
|
|
|
- }
|
|
|
- span.row-switch{
|
|
|
- font-size:.28rem;
|
|
|
- color:#53a0f7;
|
|
|
+ margin:0 .2rem;
|
|
|
+ text-align: center;
|
|
|
+ >div {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: .14rem;
|
|
|
+ &:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
- }
|
|
|
- .brand-list-item{
|
|
|
- flex-wrap: wrap;
|
|
|
- display:inline-flex;
|
|
|
- overflow: hidden;
|
|
|
- margin:0 .2rem;
|
|
|
- text-align: center;
|
|
|
- >div {
|
|
|
+ a {
|
|
|
+ width: 1.57rem;
|
|
|
+ height: .77rem;
|
|
|
display: inline-block;
|
|
|
- margin-right: .14rem;
|
|
|
- &:nth-child(4n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- a {
|
|
|
- width: 1.57rem;
|
|
|
- height: .77rem;
|
|
|
- display: inline-block;
|
|
|
- margin-top: .2rem;
|
|
|
- border: .02rem solid #53a0f7;
|
|
|
- border-radius: .1rem;
|
|
|
- line-height: .77rem;
|
|
|
- img{
|
|
|
- max-width:1.07rem;
|
|
|
- max-height:.57rem;
|
|
|
- }
|
|
|
+ margin-top: .2rem;
|
|
|
+ border: .02rem solid #53a0f7;
|
|
|
+ border-radius: .1rem;
|
|
|
+ line-height: .77rem;
|
|
|
+ img{
|
|
|
+ max-width:1.07rem;
|
|
|
+ max-height:.57rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .detail-brand-content{
|
|
|
- margin:0 auto;
|
|
|
- border-top:.02rem solid #dedfdf;
|
|
|
- border-bottom:.02rem solid #dedfdf;
|
|
|
- width:7.1rem;
|
|
|
- height:3.02rem;
|
|
|
- padding-top:.18rem;
|
|
|
- h4{
|
|
|
- font-size:.32rem;
|
|
|
- line-height: .6rem;
|
|
|
- margin:0;
|
|
|
- margin-left:3.97rem;
|
|
|
- }
|
|
|
- .brand-list{
|
|
|
- display:flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin:0 .15rem;
|
|
|
- .list-left{
|
|
|
- border:.02rem solid #418ef7;
|
|
|
- border-radius: .05rem;
|
|
|
- width:2.03rem;
|
|
|
- height:1.73rem;
|
|
|
- img{
|
|
|
- display:block;
|
|
|
- width:100%;
|
|
|
- height:1.25rem;
|
|
|
- }
|
|
|
- span{
|
|
|
- display: block;
|
|
|
- font-size: .24rem;
|
|
|
- color:#fff;
|
|
|
- text-align: center;
|
|
|
- width:100%;
|
|
|
- background: #418ef7;
|
|
|
- line-height: .45rem;
|
|
|
- }
|
|
|
+ .detail-brand-content{
|
|
|
+ margin:0 auto;
|
|
|
+ border-top:.02rem solid #dedfdf;
|
|
|
+ border-bottom:.02rem solid #dedfdf;
|
|
|
+ width:7.1rem;
|
|
|
+ height:3.02rem;
|
|
|
+ padding-top:.18rem;
|
|
|
+ h4{
|
|
|
+ font-size:.32rem;
|
|
|
+ line-height: .6rem;
|
|
|
+ margin:0;
|
|
|
+ margin-left:3.97rem;
|
|
|
+ }
|
|
|
+ .brand-list{
|
|
|
+ display:flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin:0 .15rem;
|
|
|
+ .list-left{
|
|
|
+ border:.02rem solid #418ef7;
|
|
|
+ border-radius: .05rem;
|
|
|
+ width:2.03rem;
|
|
|
+ height:1.73rem;
|
|
|
+ img{
|
|
|
+ display:block;
|
|
|
+ width:100%;
|
|
|
+ height:1.25rem;
|
|
|
}
|
|
|
- p{
|
|
|
- width:4.3rem;
|
|
|
- font-size:.28rem;
|
|
|
- line-height: .4rem;
|
|
|
- padding:.12rem .46rem 0 .05rem;
|
|
|
+ span{
|
|
|
+ display: block;
|
|
|
+ font-size: .24rem;
|
|
|
+ color:#fff;
|
|
|
+ text-align: center;
|
|
|
+ width:100%;
|
|
|
+ background: #418ef7;
|
|
|
+ line-height: .45rem;
|
|
|
}
|
|
|
}
|
|
|
+ p{
|
|
|
+ width:4.3rem;
|
|
|
+ font-size:.28rem;
|
|
|
+ line-height: .4rem;
|
|
|
+ padding:.12rem .46rem 0 .05rem;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .detail-brand{
|
|
|
- background: #f8fcff;
|
|
|
- width:100%;
|
|
|
- min-height:1.5rem;
|
|
|
- padding-top:.2rem;
|
|
|
- .brand-item{
|
|
|
- width:7rem;
|
|
|
- margin:0 auto;
|
|
|
- border-radius:.1rem;
|
|
|
- background: #fff;
|
|
|
- padding:.2rem;
|
|
|
- position:relative;
|
|
|
- box-shadow: 0 0 0 .02rem #ddd;
|
|
|
- &:active{
|
|
|
- background: #e1e1e1;
|
|
|
- }
|
|
|
- p{
|
|
|
- font-size:.28rem;
|
|
|
- line-height:.4rem;
|
|
|
- color:#333;
|
|
|
- margin:0;
|
|
|
- span{}
|
|
|
- }
|
|
|
- i{
|
|
|
- display:block;
|
|
|
- position:absolute;
|
|
|
- top:.1rem;
|
|
|
- right:.34rem;
|
|
|
- font-size:.4rem;
|
|
|
- color:#ff7800;
|
|
|
- }
|
|
|
+ .detail-brand{
|
|
|
+ background: #f8fcff;
|
|
|
+ width:100%;
|
|
|
+ min-height:1.5rem;
|
|
|
+ padding-top:.2rem;
|
|
|
+ .brand-item{
|
|
|
+ width:7rem;
|
|
|
+ margin:0 auto;
|
|
|
+ border-radius:.1rem;
|
|
|
+ background: #fff;
|
|
|
+ padding:.2rem;
|
|
|
+ position:relative;
|
|
|
+ box-shadow: 0 0 0 .02rem #ddd;
|
|
|
+ &:active{
|
|
|
+ background: #e1e1e1;
|
|
|
}
|
|
|
- div.active{
|
|
|
- background: #d4d;
|
|
|
+ p{
|
|
|
+ font-size:.28rem;
|
|
|
+ line-height:.4rem;
|
|
|
+ color:#333;
|
|
|
+ margin:0;
|
|
|
+ span{}
|
|
|
+ }
|
|
|
+ i{
|
|
|
+ display:block;
|
|
|
+ position:absolute;
|
|
|
+ top:.1rem;
|
|
|
+ right:.34rem;
|
|
|
+ font-size:.4rem;
|
|
|
+ color:#ff7800;
|
|
|
}
|
|
|
}
|
|
|
+ div.active{
|
|
|
+ background: #d4d;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|