shell/pages/index/gearboxOil.vue

<template>
	<view class="content">
		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'变速箱油'"></homenav>
		<view class="box">
			<view class="historyLine">
				<view class="historyLogoBox">
					<image :src="optdata.logo" mode="" class="historylinecarImg"></image>
				</view>
				<view>
					<view class="historylinecar">{{optdata.value}}</view>
					<view class="historyLineVin" v-if="optdata.isVin==1">
						<!-- <view class="vinms">VIN</view> -->
						<view class="vinNum">{{optdata.vin}}</view>
							<view class="copyBox" @click="copyFn(optdata.vin)">复制</view>
					</view>
				</view>
				 <view class="carFn" @click="gopz" style="margin-left: 20rpx;">车辆详情</view>
			</view>
		</view>
		<view class="cont">
			<view class="qiehuanBox">
				<view class="qiehuanLeft">变速箱油</view>
				<view class="qiehuanRight" @click="goback">切换分类</view>
			</view>
			<view class="qiehuanBox">
				<view class="qiehuanLeft">
						<view class="fenlei" v-for="(item,index) in codelist"
						  @click="fenleiFN(item)" :class="{'fenleiActive':item.code==componentCode}">
							{{item.name}}
						</view>
				</view>
			</view>
			<!-- 养护信息 -->
			<view class="jiyouBox">
				<view class="jiyouTop">
					<view class="jiyoutopTitle">养护信息</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">型号/厂家</view>
					<view class="yhxxlineRight">
						{{ detail.carmodelGroupGearbox&&detail.carmodelGroupGearbox.model ||'--' }} 
					</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">原厂加注量</view>
					<view class="yhxxlineRight">
						{{ detail.carmodelGroupGearbox&&detail.carmodelGroupGearbox.fillingcapacity ||'--' }}
					</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">换油量(L)</view>
					<view class="yhxxlineRight">
						重力：{{ detail.carmodelGroupGearbox&&detail.carmodelGroupGearbox.gravity ||'--' }} 机器：{{ detail.carmodelGroupGearbox&&detail.carmodelGroupGearbox.machine ||'--' }}
					</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">换油接头</view>
					<view class="yhxxlineRight">
						 {{ detail.carmodelGroupGearbox&&detail.carmodelGroupGearbox.oilchangeConnector ||'--' }}
					</view>
				</view>
				<view class="yhxxline">
					<view class="yhxxlineLeft">养护指导</view>
					<view class="yhxxlineRight">{{detail.carmodelGroupGearbox.guidance}}</view>
				</view>
				
				<view class="yhxxImgBox">
					<view class="yhxxImglineBox" v-if="detail.oilchangeConnectorPhoto.length>0">
						<view class="yhxxImgBorder" @click="showImgList(detail.oilchangeConnectorPhoto)">
							<image :src="detail.oilchangeConnectorPhoto[0]" mode="" class="yhxxImg"></image>
						    <view class="yhxxCkdt">
								<image src="../../static/img/icon_pic.png" mode="" class="iconpic"></image>
								<view class="yhxxCkdtNum">{{detail.oilchangeConnectorPhoto.length}}</view>
							</view>
						</view>
						<view class="yhxximgName">接头位置</view>
					</view>
					<view class="yhxxImglineBox" v-if="detail.guidancePhoto.length>0">
						<view class="yhxxImgBorder" @click="showImgList(detail.guidancePhoto)">
							<image :src="detail.guidancePhoto[0]" mode="" class="yhxxImg"></image>
						    <view class="yhxxCkdt">
								<image src="../../static/img/icon_pic.png" mode="" class="iconpic"></image>
								<view class="yhxxCkdtNum">{{detail.guidancePhoto.length}}</view>
							</view>
						</view>
						<view class="yhxximgName">养护指导</view>
					</view>
					<view class="yhxxImglineBox" v-if="detail.inspectionPhoto.length>0">
						<view class="yhxxImgBorder" @click="showImgList(detail.inspectionPhoto)">
							<image :src="detail.inspectionPhoto[0]" mode="" class="yhxxImg"></image>
						    <view class="yhxxCkdt">
								<image src="../../static/img/icon_pic.png" mode="" class="iconpic"></image>
								<view class="yhxxCkdtNum">{{detail.inspectionPhoto.length}}</view>
							</view>
						</view>
						<view class="yhxximgName">检查口/加注/放油口</view>
					</view>
					<view class="yhxxImglineBox" v-if="detail.boxPhoto.length>0">
						<view class="yhxxImgBorder" @click="showImgList(detail.boxPhoto)">
							<image :src="detail.boxPhoto[0]" mode="" class="yhxxImg"></image>
						    <view class="yhxxCkdt">
								<image src="../../static/img/icon_pic.png" mode="" class="iconpic"></image>
								<view class="yhxxCkdtNum">{{detail.boxPhoto.length}}</view>
							</view>
						</view>
						<view class="yhxximgName">变速箱图片</view>
					</view>
				</view>
				
			</view>
			<view class="jiyouBox" v-if="loading&&MaintainPartList.length!=0">
				<view class="jiyouTop">
					<view class="jiyoutopTitle">{{mrName}}</view>
					
				</view>
				<view class="jylineBox">
					<view class="jyline" v-for="(item,index) in MaintainPartList" @click="godetail(item)">
						<view class="jyimgBox">
							<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="jyName">
							<!-- <span class="best">最佳</span> -->
							<span class="jyNametxt">{{item.name}} | {{item.specificationModel}} | {{item.partsCode}} </span>
						</view>
						<view class="ruleList">
							<view class="ruleListSpan" v-for="(v,i) in item.ruleList"><span style="">{{v.version}}:</span>{{v.versionvalue}} ; </view>
						</view>
					</view>
				</view>
				<!-- <nodata v-if="MaintainPartList.length==0"></nodata> -->
			</view>
	

		</view>



	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	import homenav from "../../components/homenav/nav.vue"
	export default {
		components: {
            nodata,homenav
		},
		data() {
			return {
                optdata:'',
                MaintainPartList:[],
				detail:'',
				iStatusBarHeight:'',
				componentCode:'007005',
				loading:false,
				codelist:[
					{name:'变速箱油',code:'007005',}
					/* {name:'前减速器油',code:'015013',},
					{name:'后减速器油',code:'015014',},
					{name:'阀体油',code:'007014',}, */
				],
				mrName:'变速箱油',
			}
		},
		onLoad(opt) {
			  this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
              this.optdata=opt;
			  this.queryMaintainPartList();
			  this.queryGearbox()
			  this.init()
		},
		methods: {
		 init(){
			    var obj={name:'前减速器油',code:'015013',}
				this.$http('partsByOpen/queryMaintainPartList', {
				  groupId:this.optdata.id,
				  componentCode:'015013',
				 },'POST').then(res => {
					var List=res.data
					if(List.length>0){
						this.codelist.push(obj)
					}
				})
				var obj={name:'后减速器油',code:'015014',}
				this.$http('partsByOpen/queryMaintainPartList', {
				  groupId:this.optdata.id,
				  componentCode:'015014',
				 },'POST').then(res => {
					var List=res.data
					if(List.length>0){
						this.codelist.push(obj)
					}
				})
				var obj={name:'阀体油',code:'007014',}
				this.$http('partsByOpen/queryMaintainPartList', {
				  groupId:this.optdata.id,
				  componentCode:'007014',
				 },'POST').then(res => {
					var List=res.data
					if(List.length>0){
						this.codelist.push(obj)
					}
				})
		 },
		  showImgList(arr){
			  uni.previewImage({
				urls: arr,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		  },
		  fenleiFN(item){
			  this.componentCode=item.code
			  this.mrName=item.name
			  this.queryMaintainPartList()
		  },
          queryMaintainPartList(){
			  //2-1变速箱油007005     2-2前减速器油015013、2-3后减速器油015014  2-4阀体油007014
			 uni.showLoading({ title: '加载中'});
			 this.loading=false;
			 this.$http('partsByOpen/queryMaintainPartList', {
			   groupId:this.optdata.id,
			   componentCode:this.componentCode,
			   
			  },'POST').then(res => {
				  this.loading=true;
				uni.hideLoading();
				this.MaintainPartList=res.data
			 })
          },
		  queryGearbox(){
			  this.$http('partsByOpen/queryGearbox', {
			    groupId:this.optdata.id,
			   
			   },'POST').then(res => {
			  				
			  		this.detail=res.data
			  })
		  },
		  godetail(e){
		  				 uni.navigateTo({
		  				 	url:'/pages/index/goodsDetail?id='+e.id
		  				 })
		  },
		  gopz(){
		  				 uni.navigateTo({
		  				 	url:'/pages/index/carConfiguration?nLevelID='+this.optdata.nLevelID
		  				 })
		  },
		  goback(){
		  	 uni.navigateBack()
		  },
		  copyFn(e){
		  				uni.setClipboardData({
		  				   data: e,
		  				   success: function () {
		  					 uni.showToast({
		  					   title: '复制成功',
		  					   icon: 'success',
		  					   duration: 2000
		  					 });
		  				   },
		  				   fail: function () {
		  					 console.log('复制失败');
		  					
		  				   }
		  				 });
		  }
		}
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		background: #F4F5F7;
	}
    .jyimgBox{
    	border: 1px solid #EEEEEE;    width: 302rpx;border-radius: 10rpx;
    }
	.box {
		padding: 0 24rpx;color: #ffffff;
	background: linear-gradient( 132deg, #FF641E 0%, #FF4F00 100%), linear-gradient( 132deg, #FB771F 0%, #FF4828 100%);
	}

	.historylinecarImg{
		width: 54rpx;
		height: 54rpx;
	}
	.historyLogoBox{
			display: flex;align-items: center;
			padding-right: 14rpx;
		}

	.historylinecar {
		font-weight: 500;
		font-size: 26rpx;
	
		line-height: 46rpx;
		width: 490rpx;
	}

	.historyLine {
		display: flex;
		padding: 30rpx 0;
		/* border-top: 1rpx solid #EEEEEE; */
	}

	.cont {
		padding:0 24rpx 30rpx 24rpx;
	}
	.toplineImg{
		width: 35rpx;
		height: 34rpx;
	}
	.topName{
		line-height: 34rpx;font-weight: 400;
color: #FFFFFF;font-size: 28rpx;padding-left: 16rpx;
	}
	.topBox{
		width: 702rpx;
		height: 98rpx;
		background: #FFFFFF linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
		border-radius: 16rpx;
		display: flex;justify-content: space-around;
	}
	.topsx{
		width: 2rpx;background: #ffffff;
		height: 54rpx;margin-top: 22rpx;
	}
	.topLine{
		display: flex;padding-top: 32rpx;
	}
	.jiyouTop{
		display: flex;justify-content: space-between;
	}
	.jiyouBox{
		margin-top: 30rpx;border-radius: 16rpx;
		background: #ffffff;padding: 30rpx;
		padding-bottom: 10rpx;
	}
	.jiyoutopTitle{
		font-weight: 500;font-size: 28rpx;
		color: #1A1A1A;
		line-height: 40rpx;
	}
	.jyzl{
		font-weight: 400;line-height: 40rpx;
		color: #666666;font-size: 24rpx;
	}
	.jyimg{
		width: 302rpx;
		height: 302rpx;
		border-radius: 10rpx;
	}
	.jyline{
		width: 302rpx;padding-top: 30rpx;
	}
	.jyName{
		font-weight: 400;font-size: 22rpx;
		color: #1A1A1A;
		line-height:36rpx ;
		overflow: hidden; 
		text-overflow: ellipsis; 
		display: -webkit-box; 
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 2;
		padding-top: 10rpx;
	}
	.best{
		color: #FF4F00;border-radius: 6rpx;
		padding: 0 8rpx;border: 1px solid #FF4F00;
	}
	.jylineBox{
		display: flex;justify-content: space-between;flex-wrap: wrap;
	}
	.yhxxline{
		 display: flex;font-size: 26rpx;line-height: 36rpx;padding: 20rpx 0;
	}
	.yhxxlineLeft{
		color: #999999;width: 174rpx;
	}
	.yhxxlineRight{
		color: #3C3C3C;width: 458rpx;
	}
	.yhxxImg{
		width: 138rpx;
		height: 138rpx;
	}
	.yhxxImgBorder{
		width: 138rpx;
		height: 138rpx;
		border-radius: 7rpx;
		border: 1rpx solid #EEEEEE;
		overflow: hidden;
		position: relative;
	}
	.yhxximgName{
		width: 138rpx;font-weight: 400;
color: #3C3C3C;font-size: 24rpx;
line-height: 34rpx;padding-top: 16rpx;
	}
	.iconpic{
		width: 18rpx;
		height: 15rpx;
		
	}
	.yhxxCkdt{
		width: 62rpx;
		height: 30rpx;
		border-radius: 15rpx;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		bottom: 10rpx;right: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.yhxxCkdtNum{
		color: #ffffff;font-weight: 500;font-size: 20rpx;padding-left: 5rpx;    padding-bottom: 6rpx;
	}
	.yhxxImgBox{
	 display: flex;
	}
	.yhxxImglineBox{
		margin-right: 30rpx;
	}
	.yhxxImglineBox:nth-child(4){
		margin-right: 0rpx;
	}
	.historyLineVin{
		display: flex;
	}
	.historyLineCar{
		display: flex;justify-content: space-between;
	}
	.vinNum{
		font-weight: 400;font-size: 22rpx;/* padding-left: 10rpx; */
	   line-height: 30rpx;
	}
	.vinms{
		width: 38rpx;
		height: 26rpx;
		background: linear-gradient(224deg, #FFDA28 0%, #FFBF35 100%);
		border-radius: 4rpx;
		text-align: center;
		line-height: 26rpx;
		font-weight: 600;
		color: #FFFFFF;
		font-size: 18rpx;
		margin-top: 2rpx;
	}
	.ruleListSpan{
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		line-height: 36rpx;
		padding-right: 6rpx;
	}
	.qiehuanBox{
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		    color: #1A1A1A;
			padding-top: 20rpx;
	}
	.qiehuanRight{
	  color: #1576ff;
	}
	.carFn{
	background: #FFFFFF;
	color: #FF4F00;
	font-size: 24rpx;
	height: 50rpx;
	line-height: 49rpx;
	width: 120rpx;
	text-align: center;
	border-radius: 10rpx;
	margin-top: 10rpx;
	margin-left: 20rpx;
	}
	.copyBox{
		    color: #FFFFFF;
		    font-weight: 400;
		    font-size: 22rpx;
		    border: 1px solid #FFFFFF;
		    padding: 0 10rpx;
		    border-radius: 6rpx;
		    margin-left: 20rpx;
			height: 26rpx;
			    line-height: 26rpx;
	}
	.qiehuanLeft{
		display: flex;
	}
.fenlei{
	padding-right: 12rpx;
}
.fenleiActive{
	color: #1576ff;
}
</style>