epc/pages/mobile/SelectCarModel.vue

<template>
	<view class="box">


		<scroll-view class="scroll-view" :scroll-into-view="toView" scroll-y="true">
			<view class="brand-select">
				<template v-for="item in brandList">
					<view :id="item.titleStr">
						<view class="brand-select-title" :id="item.titleStr">
							<h5 :class="{'brand-select-titleselect':item.titleStr==toView}">{{item.titleStr}}</h5>
						</view>

						<view class="brand-select-wrapper">
							<a class="brand-select-item" v-for="item2 in item.list" @click="selectBrand(item2)"
								:id="item2.brand">
								<img :src="item2.icon" 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.titleStr==toView}" v-for="item in brandList" @tap="bindToView(item)">{{item.titleStr}}</a>
		</div>


	</view>
</template>


<script>
	export default {
		components: {

		},
		data() {
			return {
				brandList: [],
				toView: '',
				
				

			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.getItemData();
		},
		methods: {
			//获取品牌
			getItemData() {
				let that = this
				uni.showLoading({
					title: '加载中'
				});
				this.$http('advancedEpc/getBrands', {
					// epc_id: this.epc_id,
					// token: this.token,
					// param: this.param,
					// access_time: this.access_time,
					// page: this.page
				}, 'GET').then(res => {
					uni.hideLoading();

					var list = res.data.result.list;
					var sectionTitle = [];
					var brandList = [];
					list.forEach(item => {
						if (item) {
							sectionTitle.push(item.first_letter);
						}
					})
					sectionTitle.sort();
					sectionTitle = Array.from(new Set(sectionTitle))
					
					sectionTitle.forEach(title => {
						var arr = [];
						list.forEach(item => {
							if (item.first_letter == title) {
								arr.push(item);
							}
						})
						var dic = {
							titleStr: title,
							list: arr
						};
						brandList.push(dic);
					})

					that.brandList = brandList;
					console.log('list==', brandList);

				});
			},
			selectBrand(item) {
				console.log(item)
				
				uni.navigateTo({
					url:'SelectCarTwo?epc_id=' + item.epc_id + '&brand_name=' + item.brand
				})
				
			},

			bindToView(item) {
				console.log(item)
				
				this.toView = item.titleStr
				
				console.log(this.toView)
				//this.scrollTop = 0

			},


		}
	}
</script>

<style scoped lang="scss">
	.box {
		height: calc(100vh - 44px);
		background: #F4F5F7;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.baiheibackImg {
		width: 70rpx;
		height: 44rpx;
	}

	.gaunbiIMg {
		width: 20px;
		height: 20px;
		padding: 12px;
	}

	.sltpImg {
		width: 704rpx;
		height: 353rpx;
	}

	.sltp {
		padding-top: 20rpx;
	}

	.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: 126rpx;
				height: 120rpx;
				padding: 30rpx;

				img {
					display: inline-block;
					margin-left: 10rpx;
					width: 60rpx;
					height: 60rpx;
				}

				span {
					display: inline-block;
					text-align: center;
					// height: 33rpx;
					width: 106rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					// line-height: 33rpx;
					margin-left: -10rpx;
				}
			}

		}
	}

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