lhyt_shop_applet/XCX-Shop/pages/index/screen.vue

<template>
	<view class="body">
		<view class="content">
			<!-- p品牌 -->
			<view class="price">
			  <view class="pricecon">品牌</view>
			  <ul>
				  <li :class="brandIndex==index? 'cssselect' : '' "  v-for="(item,index) in brand " :key="index"  @click="Clickbran(item,index)" >{{item.name}}</li>
			  </ul>
			</view>
			<!-- 价格 -->
			<view class="price">
			  <view class="pricecon">价格</view>
			  <ul>
				  <li :class="piceconIndex==index? 'cssselect' : '' "  v-for="(item,index) in priceList " :key="index"  @click="Clickpice(item,index)" >{{item.name}}</li>
			  </ul>
			</view>
			<!-- 变速箱 -->
			<view class="price">
			  <view class="pricecon">变速箱</view>
			  <ul>
				  <li :class="TransmissionIndex==index? 'cssselect' : '' " v-for="(item,index) in Transmission " :key="index" @click="Clicktransmission(item,index)" >{{item.name}}</li>
			  </ul>
			</view>
			<!-- 里程 -->
			<view class="price">
			  <view class="pricecon">里程 (万公里)</view>
			  <ul>
				  <li :class="mileageListIndex==index? 'cssselect' : '' "  v-for="(item,index) in mileageList " :key="index" @click="ClickmileageList(item,index)">{{item.name}}</li>
			  </ul>
			</view>
			<!-- 排量 -->
			<view class="price">
			  <view class="pricecon">排量</view>
			  <ul>
				  <li :class="displacementIndex==index? 'cssselect' : '' " v-for="(item,index) in displacement " :key="index"  @click="Clickdisplacement(item,index)" >{{item.name}}</li>
			  </ul>
			</view>
			<!-- 排放标准 -->
			<view class="price">
			  <view class="pricecon">排量标准</view>
			  <ul>
				  <li :class="emissionStandardIndex==index? 'cssselect' : '' " v-for="(item,index) in emissionStandard " :key="index" @click="ClickemissionStandard(item,index)" >{{item.name}}</li>
			  </ul>
			</view>
			<!-- 车辆颜色 -->
			<view class="price">
			  <view class="pricecon">车辆颜色</view>
			  <ul>
				  <li  :class="VehicleColorIndex==index? 'cssselect' : '' " v-for="(item,index) in VehicleColor " :key="index" @click="ClickVehicleColor(item,index)"  >{{item.name}}</li>
			  </ul>
			</view>
			<!-- 座位 -->
			<view class="price">
			  <view class="pricecon">座位数</view>
			  <ul>
				  <li  :class="seatsIndex==index? 'cssselect' : '' "  v-for="(item,index) in seats " :key="index"  @click="Clickseats(item,index)" >{{item.name}}</li>
			  </ul>
			</view>
			<!-- 车龄 -->
			<view class="price">
			  <view class="pricecon">车龄(年)</view>
			  <ul>
				  <li :class="carAgeIndex==index? 'cssselect' : '' " v-for="(item,index) in carAge " :key="index" @click="ClickcarAge(item,index)" >{{item.name}}</li>
			  </ul>
			</view>
		</view>
		<view class="foot">
			<view style="width: 20vw; height: 10vw; border-radius: 5px; text-align: center; line-height: 10vw; border: 1px solid lightgray;"> 重置</view>
			<view class="button" @click="goUserdList">为你找到{{count}}车型</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				selectIndex:'',
				brandIndex:-1,
				piceconIndex:-1,
				mileageListIndex:-1,
				TransmissionIndex:-1,
				emissionStandardIndex:-1,
				VehicleColorIndex:-1,
				carAgeIndex:-1,
				seatsIndex:-1,
				displacementIndex:-1,
				selected: {}, //选取的分类 ,用对象更方便存取数据
				brand:[],
				carbrand:'',//搜索
				carprice:'',
				cartransmission:'',
				carmileage:'',
				cardisplacement:'',
				caremission:'',
				carseat:'',
				caryear:'',
				carcolor:'',
				caryear:'',
				caroil_type:'',
				priceList:[
					{ name:'不限',id:'' },
					{ name:'三万以下',id:'0,3'  },
					{ name:'3-5万',id:'3,5'  },
					{ name:'5-8万',id:'5,8'  },
					{name:'8-12万',id:'8,12' },
					{ name:'12-18万',id:'12,18'  },
					{ name:'18-25万',id:'18,25'  },
					{name:'25-35万',id:'25,35' },
					{name:'35-50万',id:'35,50' },
					{name:'50-70万',id:'50,70' },
					{name:'70万以上',id:'70' }
				],
				produceAge:[],
				Transmission:[],
				mileageList:[
					{name:'不限',id:''},
					{name:'1万公里以内',id:'0,1'},
					{name:'1-3万公里',id:'1,3'},
					{name:'3-6万公里',id:'3,6'},
					{name:'6-10万公里',id:'6,10'},
					{name:'10-20万公里',id:'10,20'},
					{name:'20万公里以上',id:'20'}
				],
				displacement:[],
				emissionStandard:[],
				dirve:[],
				VehicleColor:[],
				seats:[],
				count:0,
				userdCar:[],
				carAge:[
					{name:'不限',id:''},
					{name:'1年内',id:'0,1'},
					{name:'1-3年',id:'1,3'},
					{name:'3-5年',id:'3,5'},
					{name:'5-8年',id:'5,8'},
					{name:'8-10年',id:'8,10'},
					{name:'10年以上',id:'10'}
				],
				fuel:[]
			}
		},
		onLoad() {
			this.SearchType()
		},
		methods:{
			// 二手车列表
			UsedCarList(name,brand,gearbox,color,displacement,emission,seat_count,oil_type,price_range,mileage__range,years_range){
				this.$api.getUsedCarList(name,brand,gearbox,color,displacement,emission,seat_count,oil_type,price_range,mileage__range,years_range,res=>{
					if(res.code==0){
						this.count=res.count
						this.userdCar=res.data
					}
				})
			},
			// 搜索
			Clickbran(item,index){
				this.brandIndex=index
				this.carbrand=item.id
				this.UsedCarList('',this.carbrand,this.cartransmission,this.carcolor,this.cardisplacement,this.caremission,this.carseat,this.caroil_type,this.carprice,this.carmileage,this.caryear)
			},
			//价格
			Clickpice(item,index){
					this.piceconIndex=index
					this.carprice=item.id
					this.UsedCarList('',this.carbrand,this.cartransmission,this.carcolor,this.cardisplacement,this.caremission,this.carseat,this.caroil_type,this.carprice,this.carmileage,this.caryear)
			},
			Clicktransmission(item,index){
				this.TransmissionIndex=index
				this.cartransmission=item.id
				this.UsedCarList('',this.carbrand,this.cartransmission,this.carcolor,this.cardisplacement,this.caremission,this.carseat,this.caroil_type,this.carprice,this.carmileage,this.caryear)
			},
			// 公里
			ClickmileageList(item,index){
					this.mileageListIndex=index
					this.carmileage=item.id
					this.UsedCarList('',this.carbrand,this.cartransmission,this.carcolor,this.cardisplacement,this.caremission,this.carseat,this.caroil_type,this.carprice,this.carmileage,this.caryear)
			},
			Clickdisplacement(item,index){
				this.displacementIndex=index
				this.cardisplacement=item.id
				this.UsedCarList('',this.carbrand,this.cartransmission,this.carcolor,this.cardisplacement,this.caremission,this.carseat,this.caroil_type,this.carprice,this.carmileage,this.caryear)
			},
			ClickemissionStandard(item,index){
				this.emissionStandardIndex=index
				this.caremission=item.id
				this.UsedCarList('',this.carbrand,this.cartransmission,this.carcolor,this.cardisplacement,this.caremission,this.carseat,this.caroil_type,this.carprice,this.carmileage,this.caryear)
			},
			ClickVehicleColor(item,index){
				this.VehicleColorIndex=index
				this.carcolor=item.id
				this.UsedCarList('',this.carbrand,this.cartransmission,this.carcolor,this.cardisplacement,this.caremission,this.carseat,this.caroil_type,this.carprice,this.carmileage,this.caryear)
			},
			Clickseats(item,index){
				this.seatsIndex=index
				this.carseat=item.id
				this.UsedCarList('',this.carbrand,this.cartransmission,this.carcolor,this.cardisplacement,this.caremission,this.carseat,this.caroil_type,this.carprice,this.carmileage,this.caryear)
			},
			ClickcarAge(item,index){
				this.carAgeIndex=index
				this.caryear=item.id
				this.UsedCarList('',this.carbrand,this.cartransmission,this.carcolor,this.cardisplacement,this.caremission,this.carseat,this.caroil_type,this.carprice,this.carmileage,this.caryear)
			},
			// 搜索跳转
			goUserdList(){
				uni.redirectTo({
					url:'/pages/index/buyCar?userdCar='+encodeURIComponent(JSON.stringify(this.userdCar))
				})
			},
			// 搜索类型
			SearchType(){
				this.$api.getSearchType(res=>{
					if(res.code==0){
						this.brand=res.data.brands
						this.Transmission=res.data.gearboxs
						this.VehicleColor=res.data.colors
						this.displacement=res.data.displacements
						this.emissionStandard=res.data.emissions
						this.seats=res.data.seat_counts
						this.fuel=res.data.oil_types
					}
				})
			},
			select(item){
			 this.$set(this.selected, item.id, !this.selected[item.id]) //动态更新视图数据
			}
		}
	}
</script>
<style scoped lang="scss">
	.body{
		width: 100vw;
		height: 100vh;
	.content{
		width: 100vw;
		height: 90vh;
		overflow: auto;
		.price{
			width: 100vw;
			overflow: hidden;
			.pricecon{
				font-size: 0.9rem;
				font-weight: 550;
				width: 80vw;
				margin-top: 2vw;
				margin-left: 4vw;
			}
			ul{
				width: 100vw;
				display: flex;
				flex-wrap: wrap; // 强制换行
				li{
					width: 28vw;
					height: 8vw;
					margin-left: 2vw;
					margin-right: 2vw;
					font-size: 0.75rem;
					text-align: center;
					margin-top: 2vw;
					background-color: #f8f8f8;
					border: 1px solid #f8f8f8;
				    line-height: 8vw;
				}
			}
		}
	}
		.cssselect{
			width: 28vw;
			height: 8vw;
			margin-left: 2vw;
			margin-right: 2vw;
			font-size: 0.75rem;
			text-align: center;
			margin-top: 2vw;
			line-height: 8vw;
			background-color: #fcacad;
			color: red;
			border: 1px solid red;
		}
		.foot{
			width: 100vw;
			height: 20vw;
			border-top: 1px solid lightgray;
			position: fixed;
			bottom: 0;
			display: flex;
			background-color: white;
			justify-content: space-around;
			align-items: center;
		}
		.button{
			width: 65vw;
			height: 10vw;
			text-align: center;
			line-height: 10vw;
			background-color: #f83036;
			color: white;
			border-radius: 5px;
		}
		
	}
</style>