epc/pages/mobile/OemDetail.vue

<template>
	<view class="box">

		<scroll-view scroll-x="true" class="scroll-Y">

			<view class="tab" v-for="(item,index) in tabList" @click="topClick(index)">
				<view class="tabLine" :class="{tabActive:tabIndex==index}">{{item}}
					<view class="line" :class="{lineBlue:tabIndex==index}"></view>
				</view>

			</view>
		</scroll-view>

		<!-- 配件信息 -->
		<view class="mainBox" v-if="tabIndex==0">
			<view class="comtent">
				<view class="left">零件编号</view>
				<view class="right">{{mesData.partsnum}}</view>
			</view>
			<view class="comtent">
				<view class="left">名称</view>
				<view class="right">{{mesData.caption}}</view>
			</view>
			<view class="comtent">
				<view class="left">位置</view>
				<view class="right">{{weizhi}}</view>
			</view>
			<view class="comtent">
				<view class="left">用量</view>
				<view class="right">{{yongliang}}</view>
			</view>
			<view class="comtent">
				<view class="left">备注</view>
				<view class="right">{{mesData.remark}}</view>
			</view>
			<view class="comtent">
				<view class="left">英文名称</view>
				<view class="right">{{mesData.remark}}</view>
			</view>
			<view class="comtent">
				<view class="left">适用车型代码</view>
				<view class="right"></view>
			</view>
			<view class="comtent">
				<view class="left">是否颜色配件</view>
				<view class="right">否</view>
			</view>
			<view class="comtent">
				<view class="left">4S价格</view>
				<view class="right" style="color: #FF4F00; font-weight: bold;">¥{{mesData.price}}</view>
			</view>

		</view>

		<!-- 维修工时 -->
		<!-- <view class="mainBox" v-if="tabIndex==1">
				<view class="workBox" v-for="(item,index) in workHourseList" :key="index">
					<view class="oneBox">
						<view class="comtent2">
							<view class="left">工时代号：</view>
							<view class="right">1201D0</view>
						</view>
						<view class="comtent2">
							<view class="left">工时：</view>z
							<view class="right">12</view>
						</view>
					</view>
					
					<view class="oneBox">
						<view class="comtent2">
							<view class="left">相关参考号：</view>
							<view class="right">1201D0</view>
						</view>
						<view class="comtent2">
							<view class="left">工时包含：</view>
							<view class="right">12</view>
						</view>
					</view>
					
					<view class="comtent2" style="width: 100%;">
						<view class="left" style="width: 10%;" >说明：</view>
						<view class="right" style="width: 90%;" >净化控制电磁阀 - 更换净化控制电磁阀 - 更换净化控制电磁阀 - 更换</view>
					</view>
					
				</view>
		</view>
 -->
		
		<!-- 通用件 -->
		<view class="mainBox" v-if="tabIndex==1" style="margin-top: 0rpx; padding: 0rpx">
			<view class="topTitle"><span style="color: #FF3B30;">*</span>通用件数据仅供参考，采购前请谨慎核对是否为相同配件</view>
			
			<view class="workBox2" v-for="(item,index) in tongyongList" :key="index">
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">品牌：</view>
						<view class="right2">{{item.brand}}</view>
					</view>
					<view class="comtent2">
						<view class="left2" style="width: 26%;">零件号：</view>z
						<view class="right2">{{item.partsnum}}</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">名称：</view>
						<view class="right2">{{item.description}}</view>
					</view>
					<view class="comtent2">
						<view class="left2">价格：</view>
						<view class="right2">{{item.price}}</view>
					</view>
				</view>
				
				
			</view>
		</view>

		<!-- EPC车型 -->
		<view class="mainBox" v-if="tabIndex==2" style="margin-top: 0rpx; padding: 0rpx">
			<view class="topTitle">共<span style="color: #FF3B30;">{{epc_Count}}</span>条</view>
			
			<view class="workBox2" v-for="(item,index) in epcList" :key="index">
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">名称：</view>
						<view class="right2">{{item.caption}}</view>
					</view>
					<view class="comtent2">
						<view class="left2">车型：</view>z
						<view class="right2">{{item.vin_11}}</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">年份：</view>
						<view class="right2">{{item.year}}</view>
					</view>
					<view class="comtent2">
						<view class="left2" style="width: 28%;">发动机：</view>
						<view class="right2">{{item.engine_prefix}}</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2" style="width: 28%;">变数箱：</view>
						<view class="right2">{{item.trans}}</view>
					</view>
					<view class="comtent2">
						<view class="left2">地区：</view>
						<view class="right2">{{item.area}}</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2">配置：</view>
						<view class="right2">{{item.equips}}</view>
					</view>
					<view class="comtent2">
						<view class="left2">级别：</view>
						<view class="right2">{{item.grade}}</view>
					</view>
				</view>
				
				<view class="oneBox">
					<view class="comtent2">
						<view class="left2" style="width: 35%;">模型代码：</view>
						<view class="right2">{{item.model_code}}</view>
					</view>
					
				</view>
			</view>
		</view>

		<!-- 4S销售车型 -->
		<!-- <view class="mainBox" v-if="tabIndex==4" style="margin-top: 0rpx; padding: 0rpx">
			<view class="topTitle">共<span style="color: #FF3B30;">999</span>条</view>
			
			<view class="workBox3" v-for="(item,index) in xiaoshouList" :key="index">
				<view class="carMode">2009 手自一体变速器（MT）模拟7档 前置四驱 S5 </view>
			</view>
		</view>
 -->








	</view>
</template>

<script>
	export default {
		data() {
			return {
				epc_id:'',
				partsnum:'',
				tabIndex: 0,
				// tabList: ['配件信息', '维修工时', '通用件', 'EPC车型', '4S销售车型'],
				tabList: ['配件信息', '通用件', 'EPC车型'],
				mesData:{},
				weizhi:'',
				yongliang:'',
				workHourseList: [],
				tongyongList: [],
				epcList: [],
				epc_Count:'',
				xiaoshouList:[]
				
			}
		},
		onLoad(opt) {
			this.epc_id = opt.epc_id;
			this.partsnum = opt.partsnum;
			this.weizhi = opt.weizhi;
			this.yongliang = opt.yongliang;
			this.getItemData();
		},
		methods: {
			// 配件信息
			getItemData() {
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/generalEpc/infoPc', {
					epc_id:this.epc_id,
					partsnum:this.partsnum,
					
				}, 'GET').then(res => {
					uni.hideLoading();
					
					this.mesData = res.data.result;
				
					
			
				});
			},
			// 通用件
			getTongData() {
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/generalEpc/replacePc', {
					epc_id:this.epc_id,
					partsnum:this.partsnum,
					
				}, 'GET').then(res => {
					uni.hideLoading();
					
					this.tongyongList = res.data.result;
				
					
			
				});
			},
			// EPC车型
			getCarModelData() {
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/findApplicableModelsPc', {
					epc_id:this.epc_id,
					partnum:this.partsnum
				}, 'GET').then(res => {
					uni.hideLoading();
					
					this.epcList = res.data.result.list;
					this.epc_Count = res.data.result.total_count;
				});
			},
			topClick(index) {
				this.tabIndex = index
				
				if (this.tabIndex == 0) {
					// 配件信息
					this.getItemData();
				} 
				// else if (this.tabIndex == 1) {
				// 	// 维修工时
				// 	// this.getItemData();
				// }
				else if (this.tabIndex == 1) {
					// 通用件
					this.getTongData();
				}
				else if (this.tabIndex == 2) {
					// EPC车型
					this.getCarModelData();
				}
				// else if (this.tabIndex == 4) {
				// 	// 4S销售车型
				// 	// this.getItemData();
				// }
			},
		}
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
	}

	.scroll-Y {
		white-space: nowrap;
		width: 100%;
		height: 90rpx;
		background-color: #FFFFFF;
	}

	.tab {
		background: #FFFFFF;
		line-height: 87rpx;
		height: 87rpx;
		display: inline-block;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.tabLine {

		font-size: 32rpx;
		color: #999999;
		text-align: center;

	}

	.tabActive {
		color: #3F90F7;
		font-weight: bold;

	}

	.line {
		background: #FFFFFF;
		height: 4rpx;
		
	}

	.lineBlue {
		background: #3F90F7;
		width: 60rpx;
		margin-left: calc((100% - 60rpx)/2);
		
	}

	.mainBox {
		margin-top: 20rpx;
		background: #FFFFFF;
		min-height: 90vh;
		padding: 20rpx 24rpx;
	}

	.comtent {
		padding-bottom: 30rpx;
		display: flex;
		align-items: baseline;
		font-size: 26rpx;
	}

	.left {
		width: 40%;
		color: #999999;
		white-space: nowrap;
	}

	.right {
		width: 60%;
		color: #333333;
	}
	
	.workBox{
		
		background: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	.oneBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		padding-bottom: 20rpx;
	}
	.comtent2 {
		display: flex;
		align-items: baseline;
		font-size: 26rpx;
		width: 50%;
	}
	
	.topTitle{
		background-color: #F4F5F7;
		padding: 14rpx 24rpx;
		color: #666666;
		font-size: 24rpx;
	}
	.workBox2{
		
		background: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 20rpx 24rpx 0rpx;
		
		margin-bottom: 20rpx;
	}
	.left2 {
		width: 20%;
		color: #999999;
		white-space: nowrap;
	}
	
	.right2 {
		width: 80%;
		color: #333333;
	}
	.workBox3{
		
		background: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 20rpx 24rpx;
		
		margin-bottom: 20rpx;
	}
	.carMode{
		color: #333333;
		font-size: 28rpx;
		
	}
</style>