You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.0 KiB
153 lines
3.0 KiB
<template>
|
|
<view class="container">
|
|
<view class="header_info">
|
|
<view class="header_info_left" @click="getBack">
|
|
<uni-icons type="left" size="30" >
|
|
</uni-icons>
|
|
</view>
|
|
|
|
<text class="header_info_right">
|
|
选择品牌
|
|
</text>
|
|
</view>
|
|
<view class="containers">
|
|
<scroll-view scroll-y="true" class="scroll-view" :scroll-into-view="currentIndex">
|
|
<view v-for="(item, index) in indexList" :key="index" :id="item.letter">
|
|
<view class="index-letter">{{ item.letter }}</view>
|
|
<view v-for="(car, i) in item.cars" :key="i" class="car-item" @click="getID(car.id,car.name)">
|
|
{{ car.name }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="index-bar">
|
|
<view :class="['test',letter == item.letter ?'test1':'']" v-for="(item, index) in indexList" :key="index" @tap="scrollToIndex(item.letter)">
|
|
{{ item.letter }}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {getList,childList} from "@/api.uts"
|
|
import transformBrands from '@/js/airport.uts'
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentIndex: '',
|
|
letter:"",
|
|
clientInfo:{},
|
|
indexList: [],
|
|
certFront:'',
|
|
carPic:'',
|
|
certBack:'',
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.clientInfo = JSON.parse(decodeURIComponent(options.clientInfo));
|
|
console.log(this.clientInfo.appOrderCarList[0].carSeries);
|
|
},
|
|
mounted() {
|
|
getList().then((res)=>{
|
|
let list = transformBrands(res.result)
|
|
this.indexList = list;
|
|
})
|
|
},
|
|
methods: {
|
|
scrollToIndex(letter) {
|
|
this.letter = letter
|
|
this.currentIndex = letter;
|
|
},
|
|
getID(id,name){
|
|
console.log(id);
|
|
this.clientInfo.appOrderCarList[0].carSeries = name;
|
|
// console.log('1',this.clientInfo.appOrderCarList[0].carSeries );
|
|
// console.log(res.result);
|
|
getApp().pid = id;
|
|
uni.redirectTo(
|
|
{url:'/pages/views/carTwo?clientInfo='+ encodeURIComponent(JSON.stringify(this.clientInfo))
|
|
}
|
|
)
|
|
|
|
},
|
|
getBack(){
|
|
console.log(1)
|
|
uni.navigateBack(
|
|
{delta:1}
|
|
)
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
|
|
|
|
.containers {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 90%;
|
|
}
|
|
.header_info{
|
|
height:10%;
|
|
width: 100%;
|
|
background-color: #f8f8f8;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.header_info_right{
|
|
width: 100%;
|
|
color: #101010;
|
|
display: flex;
|
|
margin-left: 35%;
|
|
/* justify-content: center; */
|
|
}
|
|
|
|
.scroll-view {
|
|
flex: 1;
|
|
height: 100%;
|
|
/* margin-top: 10%; */
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.index-bar {
|
|
width: 1rem;
|
|
height: 90%;
|
|
margin-top: 15%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
/* background-color: #f0f0f0; */
|
|
background: transparent;
|
|
}
|
|
.test{
|
|
width: 100%;
|
|
margin: 0.2rem 0.2rem 0.2rem 0;
|
|
font-size: 0.7rem;
|
|
color: #b1b1b1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.test1{
|
|
background-color: #047af9;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.index-letter {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.car-item {
|
|
padding: 10px;
|
|
border-bottom: 0.01rem solid #e0e0e0;
|
|
font-size: 0.8rem;
|
|
}
|
|
</style>
|