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="pei">
				<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>

		<!-- 维修工时 -->
		<!-- <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">
			<view class="tong">
				<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>
		</view>

		<!-- EPC车型 -->
		<view class="mainBox" v-if="tabIndex==2">
			<view class="epc">
				<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>
							<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>
		</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: [],
				page: 1,
				total_page: 1
			}
		},
		onLoad(opt) {
			console.log('opt+',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/info', {
					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/replace', {
					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/findApplicableModels', {
					epc_id: this.epc_id,
					partnum: this.partsnum,
					page: this.page,
				}, 'GET').then(res => {
					uni.hideLoading();


					this.epc_Count = res.data.result.total_count;

					this.total_page = res.data.result.total_page;
					var list = res.data.result.list;
					if (list.length != 0) {
						this.epcList = this.epcList.concat(list)
					}
				});
			},
			topClick(index) {
				this.tabIndex = index
				this.page = 1;
				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();
				// }
			},
		},
		onReachBottom() {

			// 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车型
				if (this.page <= this.total_page) {
					this.page++;

					this.getCarModelData()()
				}
			}
			// else if (this.tabIndex == 4) {
			// 	// 4S销售车型
			// 	// this.getItemData();
			// }

		}
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		
	}

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

	.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 {
		background: #F4F5F7;
		min-height: 90vh;
		width: 100%;
		padding-top: 90rpx;
	}
	.pei{
		background: #FFFFFF;
		padding: 20rpx 24rpx;
		margin-top: 20rpx;
	}
	.tong{
		background: #FFFFFF;
		
	}
	.epc{
		background: #FFFFFF;
	}
	.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: baseline;
		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;
		margin-right: 20rpx;
	}

	.workBox3 {

		background: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 20rpx 24rpx;

		margin-bottom: 20rpx;
	}

	.carMode {
		color: #333333;
		font-size: 28rpx;

	}
</style>