|
|
@@ -12,19 +12,24 @@
|
|
|
搜索
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="cont">
|
|
|
+ <view class="goodscont">
|
|
|
|
|
|
- <view class="jiyouBox" v-if="loading">
|
|
|
-
|
|
|
- <view class="jylineBox">
|
|
|
- <view class="jyline" v-for="(item,index) in 5" @click="godetail(item)"><!-- MaintainPartList -->
|
|
|
+ <view class="jiyouBox" >
|
|
|
+ <view class="brandBox">
|
|
|
+ <view class="brandBtn" v-for="(item,index) in brandList" :class="{brandActive:item.ck}" @click="ckBrand(item)">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="jylineBox" >
|
|
|
+ <view class="jyline" v-for="(item,index) in MaintainPartList" @click="godetail(item)"><!-- MaintainPartList -->
|
|
|
<view class="jyimgBox">
|
|
|
- <!-- <image v-if="item.imgs.split(',')[0]" :src="item.imgs.split(',')[0]" mode="aspectFit" class="jyimg"></image> -->
|
|
|
- <image src="../../static/img/noimg.png" mode="aspectFit" class="jyimg"></image>
|
|
|
+ <image v-if="item.imgs.split(',')[0]" :src="item.imgs.split(',')[0]" mode="aspectFit" class="jyimg"></image>
|
|
|
+ <image v-else src="../../static/img/noimg.png" mode="aspectFit" class="jyimg"></image>
|
|
|
</view>
|
|
|
<view class="lineRgiht">
|
|
|
- <view class="goodsName">品牌 规格型号</view>
|
|
|
- <view class="goodsMs">长了就换行显示，不要省略,长了就换行显示，不要省略,长了就换行显示，不要省略</view>
|
|
|
+ <!-- <view class="goodsName">{{item.name}}| {{item.partsCode}}</view> -->
|
|
|
+ <view class="goodsName">附属型号：{{item.factoryNumber}} </view>
|
|
|
+ <view class="goodsMs">电池型号：{{item.specificationModel}} </view>
|
|
|
+ <view class="goodsMs">系列：{{item.brand}} <span>{{item.GeneralpurposeName}}</span> <span class="englishname" v-if="item.englishname">{{item.englishname}}</span> </view>
|
|
|
+ <view class="goodsMs" v-if="item.carmodelremark">适用车型:{{item.carmodelremark}} </view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
@@ -59,6 +64,15 @@
|
|
|
spec:'',
|
|
|
modelRemarkNum:1,
|
|
|
oldMaintainPartList:'',
|
|
|
+ brandList:[
|
|
|
+ {name:'三冠',id:'fc89e243-3358-4037-80ed-67c5d8c35085',ck:false},
|
|
|
+ {name:'威斯康',id:'ee21a0d0-f181-42be-990b-73eb692c196d',ck:false},
|
|
|
+ {name:'阿诺德',id:'a136f3b8-0586-4fe5-ac49-389aa4cc990b',ck:false},
|
|
|
+ {name:'鸿雁',id:'8fa5f395-86c7-4488-b4ea-ac058c7ae330',ck:false},
|
|
|
+ ],
|
|
|
+ brandId:'',
|
|
|
+ pageIndex:1,
|
|
|
+ value:'',
|
|
|
}
|
|
|
},
|
|
|
onLoad(opt) {
|
|
|
@@ -66,9 +80,46 @@
|
|
|
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
|
this.optdata=opt;
|
|
|
this.queryMaintainPartList()
|
|
|
- this.queryOilInfoByGroupID()
|
|
|
+ // this.queryOilInfoByGroupID()
|
|
|
},
|
|
|
methods: {
|
|
|
+ queryMaintainPartList(){
|
|
|
+ this.loading=false;
|
|
|
+ uni.showLoading({ title: '加载中'});
|
|
|
+ this.$http('partsByOpen/queryPartsListV2', {
|
|
|
+ pageSize:20,
|
|
|
+ pageIndex:this.pageIndex,
|
|
|
+ categoryCodes:'',
|
|
|
+ name:this.value,
|
|
|
+ brandId:this.brandId
|
|
|
+
|
|
|
+ },'POST').then(res => {
|
|
|
+ this.loading=true;
|
|
|
+ uni.hideLoading();
|
|
|
+ this.MaintainPartList=this.MaintainPartList.concat(res.data)
|
|
|
+ // this.oldMaintainPartList=res.data
|
|
|
+ // this.modelRemarkTab(1)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ckBrand(item){
|
|
|
+ item.ck=!item.ck
|
|
|
+ //this.type=num
|
|
|
+ var ids=[]
|
|
|
+ this.brandList.forEach(item=>{
|
|
|
+ if(item.ck){
|
|
|
+ ids.push(item.id)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.brandId=ids.join(',')
|
|
|
+ this.MaintainPartList=[];
|
|
|
+ this.pageIndex=1
|
|
|
+ this.queryMaintainPartList()
|
|
|
+ },
|
|
|
+ searchFn(){
|
|
|
+ this.MaintainPartList=[];
|
|
|
+ this.pageIndex=1
|
|
|
+ this.queryMaintainPartList()
|
|
|
+ },
|
|
|
goinstallation(){
|
|
|
uni.navigateTo({
|
|
|
url:'installation?groupIds='+this.optdata.id+'&componentId='
|
|
|
@@ -111,21 +162,7 @@
|
|
|
//this.MaintainPartList= this.oldMaintainPartList.filter(item => item.modelRemark.includes(name))
|
|
|
}
|
|
|
},
|
|
|
- queryMaintainPartList(){
|
|
|
- this.loading=false;
|
|
|
- uni.showLoading({ title: '加载中'});
|
|
|
- this.$http('partsByOpen/queryMaintainPartList', {
|
|
|
- groupId:this.optdata.id,
|
|
|
- componentCode:'015001',
|
|
|
-
|
|
|
- },'POST').then(res => {
|
|
|
- this.loading=true;
|
|
|
- uni.hideLoading();
|
|
|
- this.MaintainPartList=res.data
|
|
|
- this.oldMaintainPartList=res.data
|
|
|
- // this.modelRemarkTab(1)
|
|
|
- })
|
|
|
- },
|
|
|
+
|
|
|
queryOilInfoByGroupID(){
|
|
|
var that=this;
|
|
|
this.$http('matchingByOpen/queryOilInfoByGroupID', {
|
|
|
@@ -159,7 +196,12 @@
|
|
|
url:'/pages/index/carConfiguration?nLevelID='+this.optdata.nLevelID
|
|
|
})
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 上拉加载更多
|
|
|
+ onReachBottom() {
|
|
|
+ this.pageIndex++;
|
|
|
+ this.queryMaintainPartList()
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -179,8 +221,8 @@
|
|
|
background: #F4F5F7; */
|
|
|
}
|
|
|
.jyimgBox{
|
|
|
- border: 1px solid #EEEEEE; width: 90rpx;border-radius: 10rpx;
|
|
|
- height: 90rpx;
|
|
|
+ border: 1px solid #EEEEEE; width: 120rpx;border-radius: 10rpx;
|
|
|
+ height: 120rpx;
|
|
|
}
|
|
|
.box {
|
|
|
padding: 0 24rpx;
|
|
|
@@ -244,7 +286,7 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
|
|
|
|
|
|
background: #ffffff;
|
|
|
padding: 30rpx;
|
|
|
- padding-top: 0;
|
|
|
+
|
|
|
}
|
|
|
.jiyoutopTitle{
|
|
|
font-weight: 500;font-size: 28rpx;
|
|
|
@@ -255,9 +297,9 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
|
|
|
font-weight: 400;line-height: 40rpx;
|
|
|
color: #666666;font-size: 24rpx;
|
|
|
}
|
|
|
- .jyimg{
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
+.jyimg{
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
.jyline{
|
|
|
@@ -371,15 +413,29 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
|
|
|
padding-left: 16rpx;
|
|
|
}
|
|
|
.goodsName{
|
|
|
- font-size: 28rpx;
|
|
|
- color: #3C3C3C;
|
|
|
- line-height: 40rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #254A90;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .goodsMs{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 33rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ }
|
|
|
+ .brandActive{
|
|
|
+ background: #254A90;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .glActive{
|
|
|
+ background: #ffffff;
|
|
|
}
|
|
|
- .goodsMs{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- line-height: 33rpx;
|
|
|
- padding-top: 10rpx;
|
|
|
+ .glActive .glName{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #E60006;
|
|
|
+ /* border-left:4rpx solid #E60006; */
|
|
|
}
|
|
|
.sTopBox{
|
|
|
display: flex;padding: 30rpx 24rpx;
|
|
|
@@ -390,7 +446,7 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
|
|
|
color: #1A1A1A;line-height: 80rpx;
|
|
|
}
|
|
|
.searchInputBox{
|
|
|
- width: 622rpx;display: flex;
|
|
|
+ width: 600rpx;display: flex;
|
|
|
height: 80rpx;position: relative;
|
|
|
background: #F9F9F9;
|
|
|
border-radius: 16rpx;
|
|
|
@@ -407,4 +463,14 @@ color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
|
|
|
.simg{
|
|
|
width: 36rpx;height: 34rpx;margin-top: 23rpx;margin-left:30rpx;
|
|
|
}
|
|
|
+.englishname{
|
|
|
+ padding: 0 6rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ /* border:1px solid #254A90; */
|
|
|
+ margin-left: 10rpx;
|
|
|
+ display: inline-block;
|
|
|
+ background: #254A90;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
</style>
|
