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

<template>
	<view class="body">
		<view class="header">
			<view style="margin-right: 6vw;" :class=" index==0? 'xuanzhong' : 'Car'" @click="switchTab(0)">新车</view>
			<view :class=" index==1? 'xuanzhong' : 'Car'" @click="switchTab(1)">二手车</view>
		</view>
		<view class="content">
			<!-- 新车 -->
			<view class="newCar" v-if="index==0? true : false ">
				<view class="search">
					<p>
						<image style="width: 5vw; height: 5vw; margin-top: 1vw; " src="../../static/search.png"></image>
					</p>
					<p style="margin-left: 2vw;"> <input style="font-size: 0.75rem; width: 60vw; height: 10vw;"
							type="text" name="" v-model="CarName" id="" placeholder="搜索车辆" @blur="searchCar"> </p>
				</view>
				<!-- 项 -->
				<view class="content_up">
					<view
						style=" width: 100vw; height: 7vw; font-size: 0.9rem; font-weight: 550; padding-left: 8vw; padding-top: 2vw;">
						热门车系
					</view>
				<view class="content_con">
					<view class="model" v-for="(item,index) in NewCarList" :key="index"
						@click="newDetial(item)">
						<view style="margin-left: 2vw; margin-top: 2vw;">
							<image style="width: 15vw; height: 15vw;" :src="item.img.url"></image>
						</view>
						<view style="margin-top: 5vw; margin-left: 3vw;">
							<p
								style="width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; ">
								{{item.name}}
							</p>
							<p> <span style="font-size: 0.75rem;">指导价:</span> <span
									style="font-size: 0.75rem; color: red;">{{Number(item.min_price/10000)}}万起</span>
							</p>
						</view>
						<view
							style="width: 20vw; margin-left: 2vw; margin-top: 6vw; height: 8vw; background-color: #fff5f5; color: red;  text-align: center; font-size: 0.75rem; line-height: 8vw; border-radius: 4vw;">
							<p>{{item.brand_name}} </p>
						</view>
					</view>
				
				</view>
				</view>
			</view>
			<!-- 二手车 -->
			<view class="oldCar" v-if="index==1? true : false ">
				<view class="search">
					<p>
						<image style="width: 5vw; height: 5vw; margin-top: 1vw; " src="../../static/search.png"></image>
					</p>
					<p style="margin-left: 2vw;"> <input style="font-size: 0.75rem; width: 60vw; height: 10vw;"
							type="text" name="" id="" placeholder="搜索车辆"> </p>
				</view>
				<!-- 买车/卖车 -->
				<view style="display: flex; justify-content: space-around; margin-top: 2vw;">
					<view style="display: flex;" @click="BuyUsedCar">
						<p style="margin-top:2vw;">
							<image style="width: 8vw; height: 6vw;" src="../../static/buyCar.png"></image>
						</p>
						<p style="font-size: 0.9rem; margin-top: 2vw; margin-left: 2vw;">买二手车 </p>
						<!-- 	<u-popup :show="show"  mode="top">
						            <view style="width: 100vw; height: 50vh;">
						                <text>出淤泥而不染，濯清涟而不妖</text>
						            </view>
								</u-popup> -->
					</view>
					<view style="display: flex;" @click="sellCar">
						<p style="margin-top:2vw;">
							<image style="width: 8vw; height: 6vw;" src="../../static/sellCar.png"></image>
						</p>
						<p style="font-size: 0.9rem; margin-top: 2vw; margin-left: 2vw;">卖二手车</p>
					</view>
				</view>
				<!-- 点击筛选 -->
				<view class="screen">
					<view style="display: flex;" @click="screen">
						<p style="font-size: 0.75rem;">筛选</p>
						<p>
							<image style="width: 5vw; height: 5vw;" src="../../static/screen.png"></image>
						</p>
					</view>
					<!-- 	<view style="display: flex;">
						<p style="font-size: 0.75rem;" @click="sortList">默认排序</p>
						<p v-if="sortHeight<20? true : false ">
							<image style="width: 5vw; height: 5vw;" src="../../static/xiangxia.png"></image>
						</p>
						<view class="sort" :style="{ height:sortHeight +'vw'}">
							<view v-if="sortHeight>20? true : false ">
								<p style="font-size: 0.95rem; margin-top: 3vw;">默认排序</p>
								<p style="font-size: 0.95rem; margin-top: 3vw; ">价格从低到高</p>
								<p style="font-size: 0.95rem; margin-top: 3vw; ">价格从高到低</p>
							</view>
						</view>
					</view> -->
					<view style="display: flex;">
						<p style="font-size: 0.75rem;" @click="brands">品牌</p>
						<p v-if="brand>20? true : false ">
							<image style="width: 5vw; height: 5vw;" src="../../static/xiangxia.png"></image>
						</p>
						<view class="caragecss" :style="{ height:brand +'vw'}">
							<view style=" width: 98vw;flex-wrap: wrap; display: flex;" v-if="brand>20? true : false ">
								<p class="agecss" v-for="(item,index)  in brandList " @click="screenCarList(item,1)">
									{{item.name}}</p>
							</view>
						</view>
					</view>
					<view style="display: flex;">
						<p style="font-size: 0.75rem;" @click="carAges">车龄(年)</p>
						<p>
							<image style="width: 5vw; height: 5vw;" src="../../static/xiangxia.png"></image>
						</p>
						<view class="caragecss" :style="{ height:carAge +'vw'}">
							<view style=" width: 98vw; flex-wrap: wrap; display: flex;" v-if="carAge>20? true : false ">
								<p class="agecss" v-for="(item,index)  in carAgeList " @click="screenCarList(item,2)">
									{{item.name}}</p>
							</view>
						</view>
					</view>
					<view style="display: flex;">
						<p style="font-size: 0.75rem;" @click="mileages">里程(万公里)</p>
						<p v-if="mileage>20? true : false ">
							<image style="width: 5vw; height: 5vw;" src="../../static/xiangxia.png"></image>
						</p>
						<view class="caragecss" :style="{ height:mileage +'vw'}">
							<view style=" width: 98vw; flex-wrap: wrap; display: flex;"
								v-if="mileage>20? true : false ">
								<p class="agecss" v-for="(item,index)  in mileageList " @click="screenCarList(item,3)">
									{{item.name}}</p>
							</view>
						</view>
					</view>
				</view>
				<!-- 内容 -->
				<view class="usedCar">
					<view class="userCarContent">
						<view class="model" v-for="(item,index) in  userdCar" :key="index"
							@click="oldCarDetial(item.id)">
							<view style="margin-left: 2vw; margin-top: 2vw;">
								<image style="width: 15vw; height: 15vw;" :src="item.picture.url"></image>
							</view>
							<view style="margin-top: 5vw; margin-left: 3vw;">
								<p
									style="width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; ">
									{{item.brand_name}}
								</p>
								<p> <span style="font-size: 0.75rem;">指导价:</span> <span
										style="font-size: 0.75rem; color: red;">{{Number(item.sale_price/10000)}}万起</span>
								</p>
							</view>
							<view
								style="width: 20vw; margin-left: 2vw; margin-top: 6vw; height: 8vw; background-color: #fff5f5; color: red;  text-align: center; font-size: 0.75rem; line-height: 8vw; border-radius: 4vw;">
								<p> {{item.status_text}} </p>
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: true,
				index: 0,
				sortHeight: 0,
				brand: 0,
				carAge: 0,
				mileage: 0,
				NewCarList: [],
				CarName: '',
				userdname: '',
				userdCar: [],
				brandList: [],
				carAgeList: [{
						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'
					}
				],
				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'
					}
				],
			}
		},
		onLoad(option) {
			if (option.userdCar) {
				this.userdCar = JSON.parse(decodeURIComponent(option.userdCar))
				this.index = 1
			}
			this.SearchType()
			this.getNewCarList(1, '')
		},
		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.userdCar = res.data
						}
					})
			},
			screenCarList(item, index) {
				this.mileage = 0
				this.brand = 0,
					this.carAge = 0
				if (index == 1) {
					this.UsedCarList(this.userdname, item.id, '', '', '', '', '', '', '', '', '')
				} else if (2) {
					this.UsedCarList(this.userdname, '', '', '', '', '', '', '', '', '', item.id)
				} else if (3) {
					this.UsedCarList(this.userdname, '', '', '', '', '', '', '', '', item.id, '')
				}
			},
			// 搜索类型
			SearchType() {
				this.$api.getSearchType(res => {
					if (res.code == 0) {
						this.brandList = res.data.brands
					}
				})
			},
			searchCar() {
				this.getNewCarList('', this.CarName)
			},
			getNewCarList(is_hot, name) {
				this.$api.getNewCar(is_hot, name, res => {
					if (res.code == 0) {
						this.NewCarList = res.data
					}
				})
			},
			oldCarDetial(id) {
				uni.navigateTo({
					url: '/pages/index/oldCarDetial?id=' + id
				})
			},
			mileages() {
				if (this.mileage > 1) {
					this.mileage = 0
				} else {
					this.mileage = 50
					this.sortHeight = 0,
						this.brand = 0,
						this.carAge = 0
				}
			},
			carAges() {
				if (this.carAge > 1) {
					this.carAge = 0
				} else {
					this.carAge = 50
					this.mileage = 0
					this.sortHeight = 0,
						this.brand = 0

				}
			},
			sortList() {
				if (this.sortHeight > 1) {
					this.sortHeight = 0
				} else {
					this.sortHeight = 50
					this.mileage = 0
					this.brand = 0,
						this.carAge = 0
				}
			},
			brands() {
				if (this.brand > 1) {
					this.brand = 0
				} else {
					this.brand = 80
					this.mileage = 0
					this.sortHeight = 0,
						this.carAge = 0
				}
			},
			switchTab(index) {
				this.index = index
				if (index == 1) {
					this.UsedCarList(this.userdname, '', '', '', '', '', '', '', '', '', '')
				}
			},
			screen() {
				uni.navigateTo({
					url: '/pages/index/screen'
				})
			},
			sellCar() {
				uni.navigateTo({
					url: '/pages/index/sellCar'
				})
			},
			BuyUsedCar() {
				uni.navigateTo({
					url: '/pages/index/buyUsedCar'
				})
			},
			newDetial(item) {
				uni.navigateTo({
					url: '/pages/index/newCarDetial?DetialInfo=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.body {
		width: 100vw;
		height: 100vh;

		.sort {
			z-index: 999;
			position: absolute;
			width: 100vw;
			transition: 0.3s;
			height: 20vh;
			top: 43vw;
			background-color: #f8f8f8;
			left: 0;
			box-sizing: border-box;
			overflow-y: auto;
			border-radius: 0px 0px 10px 10px;
		}

		.caragecss {
			z-index: 999;
			position: absolute;
			width: 100vw;
			transition: 0.3s;
			height: 20vh;
			top: 43vw;
			display: flex;
			background-color: white;
			left: 0;
			box-sizing: border-box;
			overflow-y: auto;
			border-radius: 0px 0px 10px 10px;
			width: 100vw;
			display: flex;
			flex-wrap: wrap; // 强制换行
		}

		.agecss {
			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;
		}

		.header {
			display: flex;
			width: 100vw;
			height: 11vw;
			margin-bottom: 1vw;
			justify-content: center;
			font-size: 0.8rem;
			line-height: 10vw;
			background-color: white;

			.Car {
				margin-right: 4vw;
			}

			.xuanzhong {
				text-align: center;
				color: red;
				height: 10vw;
				width: 13vw;
				border-bottom: 1px solid red;
			}

		}

		// 内容
		.content {
			.newCar {
				width: 100vw;
				height: 93vh;
				overflow: hidden;

				.search {
					box-sizing: border-box;
					padding: 0 4vw;
					width: 90vw;
					margin-left: 5vw;
					height: 12vw;
					border-radius: 7vw;
					background-color: #f8f8f8;
					display: flex;
					margin-top: 1vw;
					align-items: center;
				}
			}

			.content_up {
				width: 100vw;
				height: 93vh;

				.content_con {
					width: 100vw;
					height: 80vh;
					overflow-y: auto;
					background-color: white;
					padding: 0 4vw 0 4vw;

					.model {
						width: 90vw;
						height: 20vw;
						display: flex;
						margin-top: 2vw;
						background-color: #f8f8f8;
					}
				}
			}

			.oldCar {
				width: 100vw;
				height: 93vh;
				overflow: hidden;

				.search {
					box-sizing: border-box;
					padding: 0 4vw;
					width: 90vw;
					margin-left: 5vw;
					height: 12vw;
					border-radius: 7vw;
					background-color: #f8f8f8;
					display: flex;
					margin-top: 1vw;
					align-items: center;
				}

				.screen {
					width: 100vw;
					display: flex;
					margin-top: 1vw;
					justify-content: space-around;
				}

				.usedCar {
					width: 100vw;
					height: 77vh;

					.userCarContent {
						width: 100vw;
						height: 77vh;
						overflow-y: auto;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						padding-left: 5vw;
						padding-bottom: 4vw;
						background-color: #f8f8f8;

						.model {
							width: 90vw;
							height: 20vw;
							display: flex;
							margin-top: 2vw;
							background-color: white;
						}
					}
				}
			}
		}
	}
</style>