1.vin 查询

2.oem搜索

components/searchBox/searchBox.vue

@@ -0,0 +1,77 @@
+<template>
+	<view>
+		<!-- 搜索 -->
+		<view class="searchBox">
+			<image src="../../static/img/icon_search.png" class="searchImg"></image>
+			<input type="text" class="searchInput" :placeholder='placeholder' v-model="inputValue"
+				@confirm="search" />
+			<image src="../../static/img/icon_close.png" class="searchClose" v-if="inputValue!=''"
+				@click="clear"></image>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "searchBox",
+		props: {
+			placeholder: {
+				type: String,
+				default: '请输入搜索内容'
+			},
+			
+		},
+		data() {
+			return {
+				inputValue: '',
+			};
+		},
+		methods:{
+			search(){
+				if (!this.inputValue) return;
+				 //console.log(this.inputValue);
+				this.$emit('search',this.inputValue);
+				
+			},
+			clear(){
+				this.inputValue = ''
+				this.$emit('search','');
+			},
+		}
+	}
+</script>
+
+<style>
+	.searchBox {
+		height: 72rpx;
+		margin: 24rpx;
+		background-color: #F4F5F7;
+		border-radius: 36rpx;
+		display: flex;
+		position: relative;
+	}
+
+	.searchImg {
+		margin-top: 20rpx;
+		margin-left: 20rpx;
+		width: 32rpx;
+		height: 32rpx;
+	}
+
+	.searchInput {
+		height: 72rpx;
+		font-size: 28rpx;
+		padding-left: 16rpx;
+		width: 78%;
+	}
+
+	.searchClose {
+		position: absolute;
+		width: 36rpx;
+		height: 36rpx;
+		right: 36rpx;
+		top: 20rpx;
+
+	}
+</style>

pages.json

@@ -21,7 +21,8 @@
 		{
 			"path": "pages/mobile/group",
 			"style": {
-				"navigationBarTitleText": "车型件"
+				
+				 "navigationStyle": "custom"
 			}
 		},
 		{
@@ -35,7 +36,52 @@
 				"navigationBarTitleText": "车型件"
 			}
 		}
-	],
+	    ,{
+            "path" : "pages/mobile/OemDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "OEM零件详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mobile/OemSearch",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "OEM搜索",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mobile/CarModelList",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "适用车型",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mobile/SonGroup",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "选择子组",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mobile/CarDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "车辆详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "VIN查询",

pages/mobile/CarDetail.vue

@@ -0,0 +1,92 @@
+<template>
+	<view class="box">
+		<view class="mainBox">
+			
+			<view class="workBox2" v-for="(item,index) in itemList" :key="index">
+					
+					<view class="titleBox">分组1</view>
+					<view class="comtent2">
+						<view class="left2">标题</view>
+						<view class="right2">1201D0</view>
+					</view>
+					<view class="comtent2">
+						<view class="left2">零件编号</view>
+						<view class="right2">12</view>
+					</view>
+					
+					<view class="comtent2">
+						<view class="left2">名称</view>
+						<view class="right2">1201D0</view>
+					</view>
+					<view class="comtent2">
+						<view class="left2">位置</view>
+						<view class="right2">12</view>
+					</view>
+					
+					<view class="comtent2">
+						<view class="left2">用量</view>
+						<view class="right2">1201D0</view>
+					</view>
+					
+								
+				
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				itemList:[1,2,3,4]
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+	.box {
+		min-height: 100vh;
+		background: #F4F5F7;
+		padding-top: 20rpx;
+	}
+	.mainBox {
+		background: #FFFFFF;
+		
+	}
+	.titleBox{
+		font-size: 30rpx;
+		color: #333333;
+		font-weight: bold;
+		padding-bottom: 20rpx;
+	}
+	
+	.comtent2 {
+		display: flex;
+		align-items: baseline;
+		font-size: 26rpx;
+		padding-bottom: 20rpx;
+	}
+	.workBox2{
+		
+		background: #FFFFFF;
+		border-bottom: 1rpx solid #EEEEEE;
+		padding: 20rpx 24rpx 0rpx;
+		
+	}
+	
+	.left2 {
+		width: 40%;
+		color: #999999;
+		white-space: nowrap;
+	}
+	
+	.right2 {
+		width: 60%;
+		color: #333333;
+	}
+</style>

pages/mobile/CarModelList.vue

@@ -0,0 +1,131 @@
+<template>
+	<view class="box">
+		<view class="mainBox">
+			
+			<view @click="goSonGroup()" class="workBox2" v-for="(item,index) in itemList" :key="index">
+				<view class="leftBox">
+					<view class="oneBox">
+						<view class="comtent2">
+							<view class="left2">名称：</view>
+							<view class="right2">1201D0</view>
+						</view>
+						<view class="comtent2">
+							<view class="left2">车型：</view>z
+							<view class="right2">12</view>
+						</view>
+					</view>
+					
+					<view class="oneBox">
+						<view class="comtent2">
+							<view class="left2">年份：</view>
+							<view class="right2">1201D0</view>
+						</view>
+						<view class="comtent2">
+							<view class="left2" style="width: 28%;">发动机：</view>
+							<view class="right2">12</view>
+						</view>
+					</view>
+					
+					<view class="oneBox">
+						<view class="comtent2">
+							<view class="left2" style="width: 28%;">变数箱：</view>
+							<view class="right2">1201D0</view>
+						</view>
+						<view class="comtent2">
+							<view class="left2">地区：</view>
+							<view class="right2">12</view>
+						</view>
+					</view>
+					
+					<view class="oneBox">
+						<view class="comtent2">
+							<view class="left2">配置：</view>
+							<view class="right2">1201D0</view>
+						</view>
+						<view class="comtent2">
+							<view class="left2">级别：</view>
+							<view class="right2">12</view>
+						</view>
+					</view>
+					
+					<view class="oneBox">
+						<view class="comtent2">
+							<view class="left2" style="width: 35%;">模型代码：</view>
+							<view class="right2">1201D0</view>
+						</view>
+						
+					</view>
+								
+				</view>
+				<image src="../../static/img/rightArrow.png" mode="" style="width: 12rpx; height: 20rpx"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				itemList:[1,2,3,4]
+			}
+		},
+		methods: {
+			goSonGroup(id) {
+				uni.navigateTo({
+					url: 'SonGroup?id=' + id
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+	.box {
+		min-height: 100vh;
+		background: #F4F5F7;
+		padding-top: 20rpx;
+	}
+	.mainBox {
+		background: #FFFFFF;
+		
+	}
+	.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%;
+	}
+	.workBox2{
+		
+		background: #FFFFFF;
+		border-bottom: 1rpx solid #EEEEEE;
+		padding: 20rpx 24rpx 0rpx;
+		
+		display: flex;
+		align-items: center;
+	}
+	.leftBox{
+		width: calc(100vw - 20rpx);
+	}
+	.rightBox{
+		width: 20rpx;
+	}
+	.left2 {
+		width: 20%;
+		color: #999999;
+		white-space: nowrap;
+	}
+	
+	.right2 {
+		width: 80%;
+		color: #333333;
+	}
+</style>

pages/mobile/OemDetail.vue

@@ -0,0 +1,350 @@
+<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">EQ867-51LO</view>
+			</view>
+			<view class="comtent">
+				<view class="left">名称</view>
+				<view class="right">EQ867-51LO</view>
+			</view>
+			<view class="comtent">
+				<view class="left">位置</view>
+				<view class="right">EQ867-51LO</view>
+			</view>
+			<view class="comtent">
+				<view class="left">用量</view>
+				<view class="right">EQ867-51LO</view>
+			</view>
+			<view class="comtent">
+				<view class="left">备注</view>
+				<view class="right">这是备注这是备注这是备注这是备注过长换行这是备注这是备注这是备注这是备注过长换行</view>
+			</view>
+			<view class="comtent">
+				<view class="left">英文名称</view>
+				<view class="right">EQ867-51LO</view>
+			</view>
+			<view class="comtent">
+				<view class="left">适用车型代码</view>
+				<view class="right">EQ867-51LO</view>
+			</view>
+			<view class="comtent">
+				<view class="left">是否颜色配件</view>
+				<view class="right">EQ867-51LO</view>
+			</view>
+			<view class="comtent">
+				<view class="left">4S价格</view>
+				<view class="right" style="color: #FF4F00; font-weight: bold;">¥265.00</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==2" 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">1201D0</view>
+					</view>
+					<view class="comtent2">
+						<view class="left2" style="width: 26%;">零件号：</view>z
+						<view class="right2">12</view>
+					</view>
+				</view>
+				
+				<view class="oneBox">
+					<view class="comtent2">
+						<view class="left2">名称：</view>
+						<view class="right2">1201D0</view>
+					</view>
+					<view class="comtent2">
+						<view class="left2">价格：</view>
+						<view class="right2">12</view>
+					</view>
+				</view>
+				
+				
+			</view>
+		</view>
+
+		<!-- EPC车型 -->
+		<view class="mainBox" v-if="tabIndex==3" style="margin-top: 0rpx; padding: 0rpx">
+			<view class="topTitle">共<span style="color: #FF3B30;">999</span>条</view>
+			
+			<view class="workBox2" v-for="(item,index) in epsList" :key="index">
+				<view class="oneBox">
+					<view class="comtent2">
+						<view class="left2">名称：</view>
+						<view class="right2">1201D0</view>
+					</view>
+					<view class="comtent2">
+						<view class="left2">车型：</view>z
+						<view class="right2">12</view>
+					</view>
+				</view>
+				
+				<view class="oneBox">
+					<view class="comtent2">
+						<view class="left2">年份：</view>
+						<view class="right2">1201D0</view>
+					</view>
+					<view class="comtent2">
+						<view class="left2" style="width: 28%;">发动机：</view>
+						<view class="right2">12</view>
+					</view>
+				</view>
+				
+				<view class="oneBox">
+					<view class="comtent2">
+						<view class="left2" style="width: 28%;">变数箱：</view>
+						<view class="right2">1201D0</view>
+					</view>
+					<view class="comtent2">
+						<view class="left2">地区：</view>
+						<view class="right2">12</view>
+					</view>
+				</view>
+				
+				<view class="oneBox">
+					<view class="comtent2">
+						<view class="left2">配置：</view>
+						<view class="right2">1201D0</view>
+					</view>
+					<view class="comtent2">
+						<view class="left2">级别：</view>
+						<view class="right2">12</view>
+					</view>
+				</view>
+				
+				<view class="oneBox">
+					<view class="comtent2">
+						<view class="left2" style="width: 35%;">模型代码：</view>
+						<view class="right2">1201D0</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 epsList" :key="index">
+				<view class="carMode">2009 手自一体变速器（MT）模拟7档 前置四驱 S5 Ca
+briolet</view>
+			</view>
+		</view>
+
+
+
+
+
+
+
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabIndex: 0,
+				tabList: ['配件信息', '维修工时', '通用件', 'EPC车型', '4S销售车型'],
+				workHourseList: [1, 2, 3],
+				tongyongList: [1, 2, 3],
+				epsList: [1, 2, 3],
+			}
+		},
+		methods: {
+			topClick(index) {
+				this.tabIndex = index
+			},
+		}
+	}
+</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>

pages/mobile/OemSearch.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="box">
+		<view class="brand">当前品牌：奥迪</view>
+
+		<view class="tab">
+			<view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">品牌下搜索</view>
+			<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">车型下搜索</view>
+
+		</view>
+		<!-- 搜索 -->
+		<view class="searchBoxBg">
+			<searchBox placeholder="配件名称/原厂OEM" @search='search($event)'></searchBox>
+		</view>
+
+
+		<view class="history" v-if="searchValue.length==0">
+			<view class="historyTop">
+				<view class="historyTopTxt">历史搜索</view>
+				<image src="../../static/img/icon_delete.png" mode="" class="historyDelImg"></image>
+			</view>
+			<view v-for="(item,index) in historyList" class="historyLIneBox">
+				<view class="historyLIne" @click="gogroup">前刹车片</view>
+			</view>
+
+
+
+		</view>
+
+
+		<view v-if="searchValue.length!=0" class="commentBox" v-for="(item,index) in itemList" :key="index">
+
+			<view class="name">节气门总成</view>
+			<view class="comment">这是备注，没有就不显示该行</view>
+			<view @click="goCarModelList()" class="code">1678-RRT-001</view>
+		</view>
+		
+
+	</view>
+</template>
+
+<script>
+	import searchBox from '@/components/searchBox/searchBox.vue'
+	export default {
+		components: {
+			searchBox
+		},
+
+		data() {
+			return {
+				tabIndex: 0,
+				searchValue: '',
+				historyList: [1, 2, 3, 4, 5],
+				itemList:[1,2,3,4]
+			}
+		},
+		methods: {
+			goCarModelList(id) {
+				uni.navigateTo({
+					url: 'CarModelList?id=' + id
+				})
+			},
+			tabClick(num) {
+				this.tabIndex = num;
+			},
+			search(val) {
+				// console.log(val);
+				this.searchValue = val
+
+			},
+		}
+	}
+</script>
+
+<style>
+	.box {
+		min-height: 100vh;
+		background: #FFFFFF;
+	}
+
+	.brand {
+
+		background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
+		padding: 24rpx;
+		color: #FFFFFF;
+		font-size: 28rpx;
+	}
+
+	.tab {
+		background: #FFFFFF;
+		display: flex;
+		justify-content: space-around;
+		line-height: 87rpx;
+		/* position: fixed; */
+		width: calc(100vw - 100rpx);
+		padding-left: 50rpx;
+		padding-right: 50rpx;
+		height: 87rpx;
+		/* z-index: 11; */
+	}
+
+	.tabLine {
+
+		font-size: 32rpx;
+		color: #999999;
+		text-align: center;
+	}
+
+	.tabActive {
+		color: #3F90F7;
+		font-weight: bold;
+		border-bottom: 4rpx solid #3F90F7;
+
+	}
+
+	.searchBoxBg {
+
+		width: 100%;
+		background-color: #FFFFFF;
+		border-top: 1rpx solid #EEEEEE;
+		border-bottom: 1rpx solid #EEEEEE;
+	}
+
+	.searchBox {
+		display: flex;
+		height: 72rpx;
+		margin: 24rpx;
+		background-color: #F4F5F7;
+		border-radius: 36rpx;
+	}
+
+	.history {
+		padding: 24rpx;
+	}
+
+	.historyTop {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.historyDelImg {
+		width: 34rpx;
+		height: 34rpx;
+	}
+
+	.historyTopTxt {
+		font-size: 28rpx;
+		font-weight: 400;
+		color: #666666;
+		line-height: 34rpx;
+	}
+
+	.historyLIneBox {
+		display: inline-flex;
+		
+		flex-wrap: wrap;
+	}
+
+	.historyLIne {
+		color: #333333;
+		font-size: 24rpx;
+		height: 64rpx;
+		background: #F4F5F7;
+		border-radius: 32rpx;
+		line-height: 64rpx;
+		padding: 0 24rpx;
+		margin-top: 20rpx;
+		margin-right: 24rpx;
+	}
+	
+	.commentBox {
+	
+		padding: 20rpx 24rpx;
+		border-bottom: 1rpx solid #EEEEEE;
+	}
+	
+	
+	
+	.name {
+		color: #333333;
+		font-size: 26rpx;
+		font-weight: bold;
+		padding-top: 16rpx;
+		padding-bottom: 10rpx;
+	}
+	
+	.comment {
+		color: #999999;
+		font-size: 24rpx;
+		padding-bottom: 14rpx;
+	}
+	
+	
+	
+	.code {
+		color: #3F90F7;
+		font-size: 24rpx;
+	}
+	
+	
+</style>

pages/mobile/SonGroup.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="box">
+		<view class="mainBox">
+
+			<view class="workBox2" v-for="(item,index) in itemList" :key="index">
+				<view class="leftBox">
+					<view class="name">节气门总成节气门总成节气门总成节气门总成节气门总成节气门总成节气门总成节气门总成节气门总成节气门总成</view>
+					<view @click="goModelThree()" class="code">1678-RRT-001</view>
+					<view class="comment">子组名称</view>
+					<view class="comment">总组名称</view>
+				</view>
+				<image src="../../static/img/rightArrow.png" mode="" style="width: 12rpx; height: 20rpx"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				itemList: [1, 2, 3, 4]
+			}
+		},
+		methods: {
+			goModelThree() {
+				uni.navigateTo({
+					url: 'modelThree'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.box {
+		min-height: 100vh;
+		background: #F4F5F7;
+		padding-top: 20rpx;
+	}
+
+	.mainBox {
+		background: #FFFFFF;
+
+	}
+
+	.workBox2 {
+
+		background: #FFFFFF;
+		border-bottom: 1rpx solid #EEEEEE;
+		padding: 20rpx 24rpx 0rpx;
+
+		display: flex;
+		align-items: center;
+	}
+
+	.leftBox {
+		width: calc(100vw - 20rpx);
+	}
+
+	.name {
+		color: #333333;
+		font-size: 26rpx;
+		font-weight: bold;
+
+		padding-bottom: 15rpx;
+	}
+
+	.comment {
+		color: #999999;
+		font-size: 24rpx;
+		padding-bottom: 15rpx;
+	}
+
+	.code {
+		color: #3F90F7;
+		font-size: 24rpx;
+		padding-bottom: 15rpx;
+	}
+
+	.rightBox {
+		width: 20rpx;
+	}
+</style>

pages/mobile/group.vue

@@ -1,15 +1,40 @@
 <template>
 	<view class="content">
+		
+		<!-- 自定义导航 -->
+		<view class="zdyNavBox">
+			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+			<view class="zdyNav">
+				<view class="zdyNavLeft">
+					<image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback">
+					</image>
+		
+				</view>
+				<view class="zdyNavTitle">车型件</view>
+				<view class="zdyNavRight" @click="goOemSearch">OEM搜索</view>
+				<!-- <view style="width: 10rpx;"></view> -->
+			</view>
+		</view>
+		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+		<view style="height: 44px;"></view>
+		
+		
 		<view class="top">
 			<view class="topCont">
 				<view class="carBox">
 					<image src="../../static/img/nocar.png" mode="" class="carLogo"></image>
 					<view class="carTxt">华晨宝马iX3 G08 电动 HA001N0电动领先型 ( 改款 )（2021-2021）过长换行</view>
-					<image src="../../static/img/jt.png" mode="" class="carJt"></image>
+					<!-- <image src="../../static/img/jt.png" mode="" class="carJt"></image> -->
 				</view>
 				<view class="vinBox">
-					<view class="vinB">VIN</view>
-					<view class="vinNum">HNUJN8888999H9098</view>
+					<view class="vinBox2">
+						<view class="vinB">VIN</view>
+						<view class="vinNum">HNUJN8888999H9098</view>
+					</view>
+					<view class="vinBox2">
+						<view class="detail" @click="goCarDetail()">车辆详情</view>
+						<image src="../../static/img/icon_arrow_blue_r@2x.png" mode="" style="width: 12rpx; height: 20rpx"></image>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -28,13 +53,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				title: 'Hello',
+				iStatusBarHeight: '',
 			}
 		},
 		onLoad() {
+           this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
            
 		},
 		methods: {
+			goCarDetail(){
+				uni.navigateTo({
+					url:'CarDetail'
+				})
+			},
+			goOemSearch(){
+				uni.navigateTo({
+					url:'OemSearch'
+				})
+			},
+			goback(){
+				console.log('返回');
+				uni.navigateBack({})
+			},
             goTwo(){
 				uni.navigateTo({
 					url:'modelTwo'
@@ -49,6 +90,65 @@
 		background: #F4F5F7;
 		min-height: 100vh;
 	}
+	.zdyNavBox {
+		width: 100vw;
+		background: #FFFFFF;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 9999999;
+	
+	
+	}
+	
+	.zdyNav {
+		height: 44px;
+		display: flex;
+		justify-content: space-between;
+	
+		align-items: center;
+	
+	}
+	
+	.backImg {
+		width: 44rpx;
+		height: 44rpx;
+		margin-left: 10rpx;
+		margin-right: 20rpx;
+	}
+	
+	.homeImg {
+		width: 44rpx;
+		height: 44rpx;
+	
+	}
+	
+	.zdyNavLeft {
+		display: flex;
+		align-items: center;
+	}
+	
+	.zdyNavTitle {
+	
+		height: 44px;
+		background: #FFFFFF;
+		text-align: center;
+		font-size: 34rpx;
+		line-height: 44px;
+	}
+	.zdyNavRight{
+		height: 44px;
+		background: #FFFFFF;
+		text-align: center;
+		font-size: 28rpx;
+		line-height: 44px;
+		color: #3F90F7;
+		margin-right: 24rpx;
+	}
+	
+	
+	
+	
 	.top{
 		padding: 20rpx 0;
 	}
@@ -66,7 +166,7 @@
 		font-weight: 500;
 		color: #333333;
 		line-height: 36rpx;
-		width: 560rpx;
+		width: 606rpx;
 	}
 	.carJt{
 		width: 25rpx;
@@ -80,7 +180,18 @@
 	}
 	.vinBox{
 		display: flex;
+		justify-content: space-between;
 		padding-left: 120rpx;
+		padding-right: 24rpx;
+	}
+	.vinBox2{
+		display: flex;	
+		align-items: center;
+	}
+	.detail{
+		color: #3F90F7;
+		font-size: 24rpx;
+		margin-right: 10rpx;
 	}
 	.vinB{
 		background: #F19D01;
@@ -116,7 +227,7 @@
 		display: flex;
 		justify-content: space-between;
 		border-bottom: 1px solid #EEEEEE;
-		padding: 29rpx 24rpx;
+		padding:24rpx;
 	}
 	.lineName{
 		font-size: 28rpx;

pages/mobile/modelThree.vue

@@ -1,44 +1,190 @@
-<template>
-	<view class="content">
-		<view class="top">
-			<image class="topIMg" src="http://dmsimg.66km.com/thFiles/7C057545-E11E-40F5-AD3C-637EF653B417.jpg" mode=""></image>
-		    <image src="../../static/img/icon_fangda@2x.png" mode="" class="enlarge"></image>
-		</view>
-		<view style="height: 20rpx;background: #F4F5F7;"></view>
-		<view class="mainBox">
-			<view class="mainTop">
-				view.
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-           
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style scoped>
-	.topIMg{
-		width: 100%;    display: block;
-	}
-	.top{
-		position: relative;
-	}
-	.enlarge{
-		position: absolute;
-		width: 44rpx;height: 44rpx;
-		right: 30rpx;bottom: 34rpx;
-	}
+<template>
+	<view class="content">
+		<view class="top">
+			<image class="topIMg" src="http://dmsimg.66km.com/thFiles/7C057545-E11E-40F5-AD3C-637EF653B417.jpg" mode="">
+			</image>
+			<image @click="previewImage('http://dmsimg.66km.com/thFiles/7C057545-E11E-40F5-AD3C-637EF653B417.jpg')"
+				src="../../static/img/icon_fangda@2x.png" mode="" class="enlarge"></image>
+		</view>
+		<view style="height: 20rpx;background: #F4F5F7;"></view>
+		<view class="mainBox">
+			<view class="mainTop">
+				<view class="arrowBox">
+					<image src="../../static/img/icon_arrow_blue_l@2x.png" mode="" class="arrow"></image>
+					<view class="title">上一组</view>
+				</view>
+				<view class="page">1/20</view>
+				<view class="arrowBox">
+					<view class="title">下一组</view>
+					<image src="../../static/img/icon_arrow_blue_r@2x.png" mode="" class="arrow"></image>
+				</view>
+			</view>
+
+			<view class="commentBox" v-for="(item,index) in itemList" :key="index">
+				<view class="line">
+					<view class="wei">位置1</view>
+					<view class="yong">用量1</view>
+				</view>
+				<view class="name">节气门总成</view>
+				<view class="comment">这是备注，没有就不显示该行</view>
+				<view class="forLine">
+					<view @click="goOemDetail()" class="code">1678-RRT-001</view>
+					<view class="price">4S店价：
+						<span class="orangePrice">¥ 99.98</span>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: 'Hello',
+				itemList: [1, 2, 3, 4],
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			goOemDetail(id) {
+				uni.navigateTo({
+					url: 'OemDetail?id=' + id
+				})
+			},
+			previewImage(imgUrl) {
+				var arr = [];
+				var img = imgUrl
+				arr.push(img)
+
+				// 预览图片
+				uni.previewImage({
+					urls: arr,
+					current: img,
+					longPressActions: {
+						itemList: ['发送给朋友', '保存图片', '收藏'],
+						success: function(data) {
+							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+						},
+						fail: function(err) {
+							console.log(err.errMsg);
+						}
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.topIMg {
+		width: 100%;
+		display: block;
+	}
+
+	.top {
+		position: relative;
+	}
+
+	.enlarge {
+		position: absolute;
+		width: 44rpx;
+		height: 44rpx;
+		right: 30rpx;
+		bottom: 34rpx;
+	}
+
+	.mainBox {
+		width: 100vw;
+	}
+
+	.mainTop {
+		padding: 28rpx 25rpx;
+		display: flex;
+		justify-content: space-between;
+		border-bottom: 1rpx solid #EEEEEE;
+	}
+
+	.arrowBox {
+		display: flex;
+		align-items: center;
+	}
+
+	.arrow {
+		width: 25rpx;
+		height: 24rpx;
+	}
+
+	.title {
+		font-size: 24rpx;
+		color: #3F90F7;
+	}
+
+	.page {
+		font-size: 28rpx;
+		color: #333333;
+	}
+
+	.commentBox {
+
+		padding: 20rpx 24rpx;
+		border-bottom: 1rpx solid #EEEEEE;
+	}
+
+	.line {
+		display: flex;
+		align-items: center;
+	}
+
+	.wei {
+		color: #F19D01;
+		font-size: 22rpx;
+		background: #FDF7EB;
+		border-radius: 4px;
+		padding: 0 8rpx;
+	}
+
+	.yong {
+		color: #666666;
+		font-size: 22rpx;
+		margin-left: 10rpx;
+	}
+
+	.name {
+		color: #333333;
+		font-size: 26rpx;
+		font-weight: bold;
+		padding-top: 16rpx;
+		padding-bottom: 10rpx;
+	}
+
+	.comment {
+		color: #999999;
+		font-size: 24rpx;
+		padding-bottom: 14rpx;
+	}
+
+	.forLine {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.code {
+		color: #3F90F7;
+		font-size: 24rpx;
+	}
+
+	.price {
+		color: #999999;
+		font-size: 24rpx;
+	}
+
+	.orangePrice {
+		color: #FF4F00;
+		font-weight: bold;
+	}
 </style>

pages/mobile/modelTwo.vue

@@ -5,11 +5,17 @@
 				<view class="carBox">
 					<image src="../../static/img/nocar.png" mode="" class="carLogo"></image>
 					<view class="carTxt">华晨宝马iX3 G08 电动 HA001N0电动领先型 ( 改款 )（2021-2021）过长换行</view>
-					<image src="../../static/img/jt.png" mode="" class="carJt"></image>
+					<!-- <image src="../../static/img/jt.png" mode="" class="carJt"></image> -->
 				</view>
 				<view class="vinBox">
-					<view class="vinB">VIN</view>
-					<view class="vinNum">HNUJN8888999H9098</view>
+					<view class="vinBox2">
+						<view class="vinB">VIN</view>
+						<view class="vinNum">HNUJN8888999H9098</view>
+					</view>
+					<view class="vinBox2">
+						<view class="detail" @click="goCarDetail()">车辆详情</view>
+						<image src="../../static/img/icon_arrow_blue_r@2x.png" mode="" style="width: 12rpx; height: 20rpx"></image>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -55,6 +61,11 @@
            
 		},
 		methods: {
+			goCarDetail(){
+				uni.navigateTo({
+					url:'CarDetail'
+				})
+			},
              goThree(){
 				 uni.navigateTo({
 				 	url:'modelThree'
@@ -111,7 +122,7 @@
 		font-weight: 500;
 		color: #333333;
 		line-height: 36rpx;
-		width: 560rpx;
+		width: 606rpx;
 	}
 	.carJt{
 		width: 25rpx;
@@ -125,7 +136,18 @@
 	}
 	.vinBox{
 		display: flex;
+		justify-content: space-between;
 		padding-left: 120rpx;
+		padding-right: 24rpx;
+	}
+	.vinBox2{
+		display: flex;	
+		align-items: center;
+	}
+	.detail{
+		color: #3F90F7;
+		font-size: 24rpx;
+		margin-right: 10rpx;
 	}
 	.vinB{
 		background: #F19D01;