daijia/司机端/pages/my/owner/owner.vue

<template>
	<view>
		<!-- 选择车型 -->
		<u-popup v-model="showRight" mode="right">
			<scroll-view :scroll-top="0" scroll-y="true" :style="{ height: winHeight + 'px' }">
				<block>
					<view class="vehicle-list-item">
						<!-- <view v-if="list.data && list.data.length" :id="list.letter" class="vehicle-list-item-title">{{ list.letter }}</view> -->
						<view class="uni-list">
							<view v-if="vehicle" v-for="(item, index) in vehicle" :key="index" class="vehicle-list-item-contect" hover-class="uni-list-item--hover"
							 @click="chooseVehicle(item)">
								<view v-if="item.name" class="uni-list-item__content">{{ item.name }}</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</u-popup>
		<!-- 选择品牌 -->
		<u-index-list :scrollTop="scrollTop" :index-list="indexList">
			<view v-for="(item, index) in list" :key="index">
				<u-index-anchor :index="item.letter" />
				<!-- 第一个渲染宫格 -->
				<view v-if="index==0" class="list-cell u-border-bottom">
					<u-grid :col="5">
						<u-grid-item v-for="(item, index1) in item.data" :key="index1" @click="chooseEvent(item)">
							<u-image width="80rpx" height="80rpx" :fade="false" :src="item.img" @click="chooseEvent(item)"></u-image>
							<view class="grid-text">{{item.name}}</view>
						</u-grid-item>
					</u-grid>
				</view>
				<!-- 其它渲染列表 -->
				<view v-else class="list-cell u-border-bottom" v-for="(item, index2) in item.data" :key="index2" @click="chooseEvent(item)">
					<u-image width="60rpx" height="60rpx" :src="item.img" @click="chooseEvent(item)"></u-image> <text class="anchor-text">{{item.name}}</text>
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	var _self;
	import {
		carBrands
	} from '@/components/brand.js'
	export default {
		data() {
			return {
				showRight: false,
				scrollTop: 0,
				indexList: [],//
				list: [],//全部品牌列表
				vehicle: [],//车型列表
				select_path: {},
				winHeight: uni.getSystemInfoSync().windowHeight,
				params: [],
				brand:'',//品牌
				name:'',//车型
			}
		},
		onShow() {
			_self = this;
		},
		created() {
			let _obj = []
			_obj.push({
				'letter': 'HOT',
				'data': []
			});
			//热门车型数据
			carBrands.HotBrand.filter(item => {
				_obj[0].data.push({
					'brand': item.initials + '-' + item.name,
					'name': item.name,
					'img': item.pic_image,
					'id': item.id
				})
			})
			// 车型列表
			carBrands.car_brand.filter(item => {
				var _index = _obj.findIndex(_item => {
					return _item.letter == item.initials ? true : false;
				})
				if (-1 == _index) {
					_obj.push({
						'letter': item.initials,
						'data': [{
							'brand': item.initials + '-' + item.name,
							'name': item.name,
							'img': item.pic_image,
							'id': item.id
						}]
					})
				} else {
					_obj[_index].data.push({
						'brand': item.initials + '-' + item.name,
						'name': item.name,
						'img': item.pic_image,
						'id': item.id
					})

				}
			})
			this.list = _obj;
			this.indexList = this.list.map(val => {
				return val.letter;
			})
		},
		onPageScroll(e) {
			_self.scrollTop = e.scrollTop;
		},
		methods: {
			//选择品牌
			chooseEvent(e) {
				console.log(e);
				this.brand = e.name
				let _obj = []
				this.$http('/addons/ddrive/banner/car_type', {
					brand_id: e.id
				}, "POST").then(data => {
					console.log(data);
					data.car_type.filter(item => {
						_obj.push({
							'name': item.name
						})
						this.vehicle = _obj;
					})
				})
				this.showRight = true;
			},
			//选择车辆
			chooseVehicle(e) {
				console.log(e);
				uni.$emit('brand',{
					brand: this.brand,
					name: e.name
				})
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 30px;
		background-color: #fff;
	}

	.anchor-text {
		margin-left: 20rpx;
	}

	.vehicle-list-item-title {
		min-width: 300rpx;
		padding: 24upx 30upx;
		line-height: 1.5;
		background-color: #f7f7f7;
		font-size: 32upx
	}

	.vehicle-list-item-contect {
		font-size: 32upx;
		padding: 24upx 30upx;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-data: center;
		border-bottom: 1rpx solid #eee;
		;
	}
</style>