contract-front/pages/views/carOne.uvue

<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>