epc/pages/mobile/homePage.vue

<template>
	<view class="box">
		<!-- 自定义导航 -->
		<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<view class="zdyNavLeft">
					<div @click="goback" class="uni-page-head-btn"><i class="uni-btn-icon"
							style="color: rgb(0, 0, 0); font-size: 27px;"></i></div>
					
				</view>
				<view class="zdyNavTitle">车型件</view>
				<view class="zdyNavRight" ></view>
				
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>


		<view class="mainBox">
			<!-- 轮播图 -->
			<!-- <swiper class="swiper" :circular="true" :indicator-dots="true" indicator-active-color="#FF4F00">
				<swiper-item v-for="(item,index) in bannerArr">
				
					<image :src="item" mode="" class="swpImg"></image>
					
					</image>
					
				</swiper-item>
				
			</swiper> -->
		<!-- 	
		<view class="btnBox">
			<image @click="goIndex()" class="searchBtn" src="../../static/img/button_search.png" mode=""></image>
			<view @click="goSelectCarModel()" class="brand">选择品牌</view>
		</view>
		<image class="content"  src="../../static/img/text_shuoming.png" mode=""></image> -->
			<view class="vinSbimgBox" >
				<img src="../../static/img/icon_home_scan@2x.png" alt="" @click="ScanVin" class="vinSbimg">
				<image class="titleiMG" src="../../static/img/text_zhongjian.png" mode=""></image>
			</view>
			<view class="contBox">
				<view class="contLine" @click="ImgVin">
					<image src="../../static/img/icon_home_1@2x.png" mode="" class="contLineImg"></image>
					<view class="contLineTxt">VIN相册</view>
				</view>
				<view class="contLine" @click="goSelectCarModel()">
					<image src="../../static/img/icon_home_2@2x.png" mode="" class="contLineImg"></image>
					<view class="contLineTxt">车型查询</view>
				</view>
				<view class="contLine" @click="goIndex()">
					<image src="../../static/img/icon_home_3@2x.png" mode="" class="contLineImg"></image>
					<view class="contLineTxt">手输VIN</view>
				</view>
				<view class="contLine" @click="goOe">
					<image src="../../static/img/icon_home_4@2x.png" mode="" class="contLineImg"></image>
					<view class="contLineTxt">OE查询</view>
				</view>
				
			</view>
		
			
			
		
			
			
		</view>


	</view>
</template>

<script>
	import searchBox from '@/components/searchBox/searchBox.vue'
	export default {
		components: {
			searchBox
		
		},
		data() {
			return {
				iStatusBarHeight: '',
				bannerArr:['../../static/img/home_banner1.png','../../static/img/home_banner2.png','../../static/img/home_banner3.png'],
				searchValue: '',
				vin:'',
			}
		},
		onLoad(opt) {
			this.vin=opt.Vin;
			if(this.vin){
				uni.navigateTo({
					url:'index?vin='+this.vin
				})
			}
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;

		},
		methods: {
			search(val) {
				// console.log(val);
				this.searchValue = val
			
			},
			goOe(){
				uni.navigateTo({
					url: 'oeindex'
				})
			},
			goIndex() {
				uni.navigateTo({
					url: 'index'
				})
			},
			goSelectCarModel(){
				uni.navigateTo({
					url: 'SelectCarModel'
				})
			},
			ImgVin(){
				var standalone = window.navigator.standalone
				var userAgent = window.navigator.userAgent.toLowerCase()
				var safari = /safari/.test(userAgent)
				var ios = /iphone|ipod|ipad|mac/.test(userAgent)
				var android = /android/.test(userAgent)
				if (ios) {
					 window.webkit.messageHandlers.goImgVin.postMessage(null)
				} else if (android) {
						window.android.goImgVin()
				}
			},
			ScanVin(){
				var standalone = window.navigator.standalone
				var userAgent = window.navigator.userAgent.toLowerCase()
				var safari = /safari/.test(userAgent)
				var ios = /iphone|ipod|ipad|mac/.test(userAgent)
				var android = /android/.test(userAgent)
				if (ios) {
					 window.webkit.messageHandlers.goScanVin.postMessage(null)
				} else if (android) {
						 window.android.goScanVin()
				}
			},
			goback() {
				console.log('返回');
				// uni.navigateBack({})
				//app交互
				var standalone = window.navigator.standalone
				var userAgent = window.navigator.userAgent.toLowerCase()
				var safari = /safari/.test(userAgent)
				var ios = /iphone|ipod|ipad|mac/.test(userAgent)
				var android = /android/.test(userAgent)
				if (ios) {
								 if ( true) {//!standalone&& !safari
								   window.webkit.messageHandlers.goMyNav.postMessage(null)
								 }
				} else if (android) {
								 window.android.postMessage()
				}
			},
		}
	}
</script>

<style scoped>
	.vinSbimg{
		width: 484rpx;
		height: 484rpx;
		
	}
	.titleiMG{
		width: 518rpx;
		height: 40rpx;
		
	}
	.vinSbimgBox{
		text-align: center;
		padding-top: 32rpx;
	}
	.contBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.contLine{
		width: 331rpx;
		height: 74rpx;
		background: #F4F5F7;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		padding: 30rpx 0;
	}
	.contLineImg{
		width: 73rpx;height: 73rpx;
	}
	.contLineTxt{
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 73rpx;
		padding-left: 20rpx;
	}
	.box {
		min-height: 100vh;
		background: #ffffff;
		/* iOS 底部安全区 */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.zdyNavBox {
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;

	}

	.zdyNav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 6rpx;
	}
	.zdyNavLeft{
		width: 120rpx;
	}
	
	.zdyNavTitle {
		background: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.zdyNavRight {
		background: #FFFFFF;
		text-align: center;
		font-size: 28rpx;
		color: #3F90F7;
		width: 120rpx;
	}

	

	.mainBox {
		background: #FFFFFF;
		min-height: 100vh;
		width: 100vw;
	}

	.swiper,
	.swiper-item,
	.swpImg {
		width: 100%;
		height: 390rpx;
		
	}
	.btnBox{
		padding: 30rpx 24rpx;
		
		height: 92rpx;
		position: relative;
	}
	.searchBtn{
		width: calc(100vw - 48rpx);
		height: 92rpx;
	}
	.brand{
		color: #FFFFFF;
		font-size: 28rpx;
		width: 160rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #F4F5F7 linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
		border-radius: 51rpx;
		text-align: center;
		position: absolute;
		top: 38rpx;
		right: 32rpx;
	}
	.centerBox{
		margin-top: 140rpx;
		margin-bottom: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.title{
		padding: 142rpx 116rpx 100rpx;
		width: calc(100vw - 232rpx);
		height: 40rpx;
	}
	.content{
		padding: 0 47rpx;
		width: calc(100vw - 94rpx);
		height: 224rpx;
	}
</style>