<template>
<view class="box">
<!-- 自定义头部 -->
<view class="zdyNav">
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
<view class="zdyNavCont">
<view class="zdyNavContLeft">
<image src="../../../static/img/baiheiback.png" mode="" class="baiheibackImg" @click="gofhj"></image>
<!-- <image src="../../static/img/chahao.png" mode="" class="gaunbiIMg" @click="goback"></image> -->
</view>
<view class="zdyNavContTitle">自主选车</view>
<view class="zdyNavContRight"></view>
</view>
</view>
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
<view style="height: 44px;"></view>
<!-- <view class="tab">
<view class="tabLine" :class="{activeTab:tabIndex==1}" @click="tabIndex=1">手动选车</view>
<view class="tabLine" :class="{activeTab:tabIndex==2}" @click="tabIndex=2">VIN识别</view>
</view> -->
<view class="tab1 " v-if="tabIndex==1">
<scroll-view class="scroll-view" :scroll-into-view="toView" scroll-y="true" >
<view class="brand-select">
<template v-for="item in carModelList">
<view :id="item['首字母']" v-if="item['首字母']!='热门'">
<view class="brand-select-title" :id="item['首字母']+'-model'">
<h5 :class="{'brand-select-titleselect':item['首字母']==toView}">{{item['首字母']}}</h5>
</view>
<view class="brand-select-wrapper">
<a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
<img :src="item2.logo" class="brand-select-item-icon">
<span>{{item2.brand||item2.name}}</span>
</a>
</view>
</view>
<view :id="'rm'" v-if="item['首字母']=='热门'">
<view class="brand-select-title" :id="item['首字母']+'-model'">
<h5 :class="{'brand-select-titleselect':item['首字母']==toView}">{{item['首字母']}}</h5>
</view>
<view class="brand-select-wrapper">
<a class="brand-select-item" v-for="item2 in item['品牌列表']" @click="selectBrand(item2)" :id="item2.brand">
<img :src="item2.logo" class="brand-select-item-icon">
<span>{{item2.brand||item2.name}}</span>
</a>
</view>
</view>
</template>
</view>
</scroll-view >
<div class="fast-navigation">
<a class="fast-navigation-sel" :class="{'select':item['首字母']==toView}" v-for="item in carModelList" @tap="bindToView(item)">{{item['首字母']}}</a>
</div>
</view>
<uni-popup ref="popup" type="right" :mask-click="true">
<view class="popup-content" >
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
<view style="height: 44px;"></view>
<h3 class="carModel-nav-title cell-logo">
<img :src="selectedCarBrand.logo" class="carModel-nav-title-img">
<span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }}</span>
</h3>
<scroll-view class="brandList" scroll-y="true">
<view v-for="item in carSeriesList" :key="item.manufactor" >
<h3 class="cell-item-title">{{ item.manufactor }}</h3>
<span v-for="item2 in item.carSeries" :key="item2" :title="item2" class="span-cell" @click="selectCarFactory(item.manufactor,item2)" >{{item2}}</span>
</view>
</scroll-view>
</view>
</uni-popup>
<!-- 排量 -->
<view class="displacementListBox" v-show="displacementListShow">
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
<view style="height: 44px;"></view>
<h3 class="carModel-nav-title">
<img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
<span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }} {{ carSeries }}</span>
</h3>
<scroll-view scroll-y="true" class="brandList">
<view @click="selectDisplacement(item)" v-for="item in displacementList" class="displacementListLine" >
{{item}}
</view>
</scroll-view>
</view>
<!-- 离合器 -->
<view class="carGroupListBox" v-show="carGroupListShow">
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
<view style="height: 44px;"></view>
<h3 class="carModel-nav-title">
<img :src="selectedCarBrand.logo" class="carModel-nav-title-img" @click="$emit('changeStep', 1)">
<span class="carModel-nav-title-msg">{{ selectedCarBrand.brand }} {{ carSeries }}{{displacement}}</span>
</h3>
<scroll-view scroll-y="true" class="brandList">
<view @click="goAddCar(item)" v-for="item in carGroupList" class="displacementListLine" >
{{item.title}}
</view>
</scroll-view>
</view>
<!-- 离合器 -->
<view class="tab2" v-if="tabIndex==2">
<view class="vinboxone" v-if="vinboxoneShow">
<view class="smvin">请扫描VIN</view>
<view class="smvin2">扫描时请保持环境光线充足不要反光</view>
<view class="sltp">
<!-- <image src="../../static/img/vin.png" mode="" class="sltpImg" ></image> --><!-- v-if="!vinImg" -->
<!-- <image :src="vinImg" mode="widthFix" class="vinImg" v-if="vinImg"></image> -->
</view>
<view class="vinSc" @click="scVinIMg">上传图片</view>
</view>
<view class="vinboxTwo" v-if="vinboxtwoShow">
<view class="vinboxTwoTopFh" @click="vinboxtwoShow=false"> 返回扫描 </view>
<view class="vinboxTwoTopVIn">车辆识别代码：{{vin}}</view>
<view class="vinCxNum"> 共{{vinSbList.length}}条查询结果</view>
<view class="vinXzBox">
<!-- <view class="vinXzLine">
<view class="vinXzLineCx">品牌+车系+排量+变速器描述</view>
<image src="../../static/img/icon_checked.png" mode="" class="loginLogo"></image>
</view> -->
<view class="vinXzLine" v-for="(vinItem,vIndex) in vinSbList" @click="ckVin(vinItem,vIndex)">
<view class="vinXzLineCx">{{vinItem.title}}</view>
<view class="vinXzLineyk" v-if="vinIndex!=vIndex"></view>
<!-- <image src="../../static/img/icon_checked.png" mode="" v-if="vinIndex==vIndex" class="loginLogo"></image> -->
</view>
<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
</view>
</view>
<view class="vinboxTwoBottom" v-if="vinboxtwoShow" :style="{bottom:iStatusBarHeight+'px'}">
<view class="shoudonng" @click="shoudong">都不是，手动选车</view>
<view class="qrcx" @click="qrcx">确认车型</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
carList:'',
tabIndex:1,
carModelList:'',
toView:'',
type:'right',
brand:'',
carSeriesList:'',
selectedCarBrand:'',
manufactor:'',
carSeries:'',
displacementList:'',
displacementListShow:false,
selectedCarSeries:'',
displacement:'',
carGroupList:'',
carGroupListShow:false,
type:'',
delId:'',
vinImg:'',
file:'',
vin:'',
vinboxoneShow:true,
vinboxtwoShow:false,
addNum:'',
iStatusBarHeight:'',
popupShow:false,
vinSbList:[],
vinIndex:0,
vincarModelInfo:'',
}
},
onLoad(opt) {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
if(opt.type==2){
this.type=2
}
if(opt.add){
this.addNum=opt.add
}
this.delId=opt.delId;
this.queryCarModelGroupPackage();
},
methods: {
ckVin(vinItem,vIndex){
this.vinIndex=vIndex;
this.vincarModelInfo=vinItem
},
qrcx(){
this.goAddCar(this.vincarModelInfo)
},
shoudong(){
this.vinboxtwoShow=false;
this.tabIndex=1;
},
goback(){
uni.navigateBack({
delta:1
})
},
gofhj(){
if(this.carGroupListShow){
this.carGroupListShow=false
}else if(this.displacementListShow){
this.displacementListShow=false
}else if(this.popupShow){
this.popupShow=false
this.$refs.popup.close()
}else{
uni.navigateBack({
delta:1
})
}
},
scVinIMg(){
var that = this;
uni.chooseImage({
sourceType: ['album','camera'],
count:1,
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
that.file=tempFilePaths[0]
uni.uploadFile({
url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
console.log(JSON.parse(uploadFileRes.data).data );
//that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
that.vinImg=JSON.parse(uploadFileRes.data).data[0];
that.vinScanner()
}
});
/* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
}) */
}
});
},
vinScanner(){
uni.showLoading({
title:'正在识别中'
});
/*
this.$http('miniAppMyBMemberCar/vinScanner', {
photo:this.file,
},'POST').then(res => {
uni.hideLoading();
//this.carGroupList=res.data.carGroupList
}) */
var that=this;
uni.uploadFile({
url: that.$request.baseUrl+'miniAppMyBMemberCar/vinScanner',
filePath: that.file,
name: 'photo',
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
uni.hideLoading();
console.log(JSON.parse(uploadFileRes.data) );
if(JSON.parse(uploadFileRes.data).code==0){
that.vin = JSON.parse(uploadFileRes.data).data;
that.queryCarModelGroupByVin()
}else{
uni.showToast({
title: JSON.parse(uploadFileRes.data).msg,
icon: 'none',
duration: 2000,
});
}
}
});
},
queryCarModelGroupByVin(){
uni.showLoading({ });
this.$http('miniAppMyBMemberCar/queryCarModelGroupByVin', {
vin:this.vin,
},'GET').then(res => {
uni.hideLoading();
if(res.code!=0){
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000,
});
}else{
this.vinboxtwoShow=true
this.vinSbList=res.data;
this.vincarModelInfo=this.vinSbList[0]
}
})
},
goAddCar(item){
console.log(item)
var carModelInfo=item;
var that=this;
uni.setStorage({
key: 'carModelInfo',
data: carModelInfo,
success: function () {
uni.navigateBack({
delta:1
})
}
});
},
selectBrand(item){
console.log(item)
this.selectedCarBrand=item;
this.$refs.popup.open("right")
this.popupShow=true;
this.brand=item.brand
this.getbrand()
},
selectCarFactory(manufactor,item){
this.manufactor=manufactor;
this.carSeries=item;
//this.selectedCarSeries=item
this.displacementListShow=true;
this.getdisplacementList()
},
selectDisplacement(item){
this.displacement=item;
this.carGroupListShow=true;
this.getmodelList();
},
getmodelList(){
uni.showLoading({
title: '加载中'
})
this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
brand:this.brand,
manufactor:this.manufactor,
carSeries:this.carSeries,
displacement:this.displacement
},'POST').then(res => {
uni.hideLoading();
this.carGroupList=res.data.carGroupList
})
},
getdisplacementList(){
uni.showLoading({
title: '加载中'
})
this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
brand:this.brand,
manufactor:this.manufactor,
carSeries:this.carSeries
},'POST').then(res => {
uni.hideLoading();
this.displacementList=res.data.displacementList
})
},
queryCarModelGroupPackage(){
uni.showLoading({
title: '加载中'
})
this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
},'POST').then(res => {
uni.hideLoading();
this.carModelList=res.data.brands
})
},
bindToView(item){
console.log(item)
if(item['首字母']=='热门'){
this.toView ='rm'
}else{
this.toView = item['首字母']
}
console.log(this.toView)
//this.scrollTop = 0
},
/* login(){
uni.navigateTo({
url:'../login/login'
})
} */
close(){
this.$refs.popup.close()
},
getbrand(){
uni.showLoading({
title: '加载中'
})
this.$http('opencarInfoOwner/queryCarModelGroupPackage', {
brand:this.brand
},'POST').then(res => {
uni.hideLoading();
this.carSeriesList=res.data.carSeriesList
})
}
}
}
</script>
<style scoped lang="scss">
.box{
min-height: 100vh;
background:#F4F5F7 ;
}
.vinboxTwoTopFh{
font-size: 26rpx;
padding: 30rpx 24rpx;
color: #3F90F7;
}
.vinboxTwoBottom{
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: space-around;
}
.shoudonng{
width: 336rpx;
height: 74rpx;
border-radius: 37rpx;
border: 1px solid #FF4F00;
line-height: 74rpx;
text-align: center;
font-size: 30rpx;
color: #FF4F00;
margin-top: 23rpx;
}
.qrcx{
width: 336rpx;
height: 74rpx;
background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
border-radius: 37rpx;
line-height: 74rpx;
text-align: center;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 23rpx;
}
.vinXzBox{
padding-bottom: 120rpx;
}
.loginLogo{
width: 28rpx;
height: 28rpx;
}
.vinXzLineyk{
width: 24rpx;
height: 24rpx;
border: 2rpx solid #999999;
border-radius: 50%;
}
.vinXzLine{
padding: 30rpx 24rpx;
display: flex;
justify-content: space-between;
color: #3C3C3C;
font-size: 28rpx;
line-height: 28rpx;
border-bottom: 1px solid #DDDDDD;
}
.vinboxTwoTopVIn{
font-size: 28rpx;
color: #666666;
padding-left: 24rpx;
padding-bottom: 30rpx;
}
.zdyNav{
width: 100vw;
background: #FFFFFF;
position: fixed;
top: 0;
left: 0;
z-index: 1111111;
}
.zdyNavCont{
height: 44px;
font-size: 28rpx;
// font-weight: bold;
display: flex;
justify-content: space-between;
line-height: 44px;
}
.vinCxNum{
background: #F4F5F7;
font-size: 26rpx;
padding: 18rpx 24rpx;
color: #999999;
}
.baiheibackImg{
width: 70px;
height: 44px;
}
.gaunbiIMg{
width: 20px;
height: 20px;
padding: 12px;
}
.zdyNavContLeft{
}
.zdyNavContTitle{
color: #000000;
font-size: 30rpx;
font-weight: bold;
}
.zdyNavContRight{
width: 100px;
}
.smvin{
color: #3C3C3C;
font-size: 30rpx;
}
.smvin2{
color: #999999;
font-size: 26rpx;
}
.tab2{
padding: 30rpx 24rpx;
min-height: calc(100vh - 150rpx - 44px);
background: #FFFFFF;
position: relative;
}
.vinboxTwo{
position: absolute;
top: 0;
left: 0;
width: 750rpx;
min-height: calc(100vh - 150rpx - 44px);
background: #FFFFFF;
}
.sltpImg{
width: 704rpx;
height: 353rpx;
}
.vinImg{
width: 704rpx;
}
.sltp{
padding-top: 20rpx;
}
.vinSc{
width: 690rpx;
height: 74rpx;
background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
border-radius: 37rpx;
text-align: center;
line-height: 74rpx;
color: #FFFFFF;
font-size: 30rpx;
margin-top: 70rpx;
}
.nodataImg{
width: 400rpx;
padding-top: 100rpx;
}
.noTxt{
font-size: 36rpx;
color: #999999;
padding-top: 50rpx;
}
.nodataBox{
text-align: center;
}
.addBtn{
width: 690rpx;
height: 74rpx;
background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
border-radius: 37rpx;
line-height: 74rpx;
text-align: center;
color: #FFFFFF;
font-size: 30rpx;
position: fixed;
bottom: 23rpx;
left: 30rpx;
}
.carlistBox{
padding-bottom: 120rpx;
}
.tab{
background: #FFFFFF;
display: flex;
justify-content: space-around;
line-height: 93rpx;
color: #3C3C3C;
font-size: 30rpx;
border-bottom: 1px solid #F4F5F7;
}
.activeTab{
color: #FF4F00;text-decoration: underline
}
/* .brand-select-title{
height: 80px;
background:rgba(247,247,247,1);
position: relative;
} */
.brand-select{
.brand-select-title{
height: 80rpx;
background:rgba(247,247,247,1);
position: relative;
h5{
position: absolute;
height:40rpx;
font-size:28rpx;
font-weight:500;
color:rgba(102,102,102,1);
line-height:40rpx;
top: 20rpx;
left: 30rpx;
}
}
.brand-select-wrapper{
display: flex;
flex-wrap: wrap;
background:rgba(255,255,255,1);
width: 100vw;
.brand-select-item{
display: block;
width: 80rpx;
height: 100rpx;
padding: 30rpx;
img{
display: inline-block;
margin-left: 10rpx;
width: 60rpx;
height: 60rpx;
}
span{
display: inline-block;
text-align: center;
height:33rpx;
width: 90rpx;
font-size:24rpx;
font-weight:400;
color:rgba(51,51,51,1);
line-height:33rpx;
}
}
}
}
.fast-navigation{
position: fixed;
text-align: center;
right: 16rpx;
top: 360rpx;
width: 23rpx;
font-size:24rpx;
font-weight:500;
line-height:35rpx;
color: rgb(153, 153, 153);
a{
display: block;
}
.select{
color: #FF4F00;
}
}
.scroll-view{
height: calc(100vh - 93rpx);
}
.popup-height {
width: 200px;
}
.popup-content{
width: 590rpx;
background: #FFFFFF;
height: 100vh;
}
.carModel-nav-title{
height:100rpx;
background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
line-height: 100rpx;
display: flex;
z-index: 500;
&.cell-logo{
position: sticky;
top: 0;
background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
}
.carModel-nav-title-box{
width: 100%;
display: flex;
}
.carModel-nav-title-img{
margin: 20rpx;
width: 60rpx;
height: 60rpx;
}
.carModel-nav-title-msg{
font-size:30rpx;
font-weight:400;
color:rgba(255,255,255,1);
display: block;
padding-right: 20rpx;
}
}
.cell-item-title{
height:60rpx;
background:rgba(250,250,250,1);
font-size:28rpx;
font-weight:400;
color:rgba(102,102,102,1);
line-height:60rpx;
padding-left: 26rpx;
}
.span-cell{
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
width: 100%;
padding: 6rpx 30rpx;
overflow: hidden;
color: #323233;
font-size: 3.73333vw;
line-height: 82rpx;
height: 82rpx;
background-color: #fff;
border-bottom: 1px solid #ebedf0;
}
.carModel-nav-title{
height:100rpx;
background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
line-height: 100rpx;
display: flex;
z-index: 500;
&.cell-logo{
position: sticky;
top: 0;
background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%);
}
.carModel-nav-title-box{
width: 100%;
display: flex;
}
.carModel-nav-title-img{
margin: 20rpx;
width: 60rpx;
height: 60rpx;
}
.carModel-nav-title-msg{
font-size:30rpx;
font-weight:400;
color:rgba(255,255,255,1);
display: block;
padding-right: 20px;
}
}
.displacementListLine{
min-height: 50rpx;
padding: 20rpx 20rpx 20rpx 30rpx;
font-size:28rpx;
font-weight:600;
color:rgba(51,51,51,1);
line-height:50rpx;
border-top: 2rpx solid rgb(238, 238, 238);
background-color: rgb(255, 255, 255);
}
.displacementListBox{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background:#F4F5F7 ;
z-index: 11111;
/* #ifdef H5 */
top:44px;
/* #endif */
}
.carGroupListBox{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background:#F4F5F7 ;
z-index: 11111;
/* #ifdef H5 */
top:44px;
/* #endif */
}
.brandList{
height: calc(100vh - 250rpx);
}
.brand-select-titleselect{
color: #FF4F00 !important;
}
</style>