zhapp/pages/quote/queryVehicleModel.vue

<template>
	<view class="page">
		<view class="header dis a-c j-s">
			<u-icon name="arrow-left" color="#333" size="18" :bold="true" style="margin-right: 20rpx;"
				@click="back"></u-icon>
			<u-search placeholder="可使用车架号/品牌型号查询" v-model="keyword" bgColor="#f7f7f7"
				:actionStyle="{position: 'absolute',right:'20px',background:'#FDE935',padding:'8rpx 24rpx',boxSiting:'border-box',borderRadius:'100rpx'}"
				actionText="查询" @search="search" @custom="custom"></u-search>
		</view>
		<view class="vehicleModel" v-if="vehicleModelList.length">
			<view class="item mb-2" v-for="(item,index) in vehicleModelList" :key="index"
				@click="chooseVehicleType(index)">
				<text class="title">{{item.modelName}}</text>
				<view class="dis a-c f-wrap content">
					<text>新车购置价：{{item.replacementValue}}</text>
					<text>年款：{{item.marketYear}}</text>
					<text>排量：{{item.displacement}}</text>
					<text>座位数：{{item.ratedPassengerCapacity}}座</text>
				</view>
				<view class="colorBlock">
					<text class="font-weight">车系</text>
					<text class="ml-2 mr-2">{{item.modelCode}}</text>
					<text>{{item.series}}</text>
				</view>
			</view>
		</view>
		<u-empty v-else mode="car" icon="/static/image/Frame.png" text="没有查询到数据，可使用品牌型号查询">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				vehicleModelList: [],
				frameNo: "", //车架号
				modelName: "", //车型
			}
		},
		onShow() {

		},
		async onLoad(options) {
			if (options.frameNo) {
				this.keyword = options.frameNo;
				this.getCarModel(options.frameNo);
			} else if (options.modelName) {
				this.getBrandModel(options.modelName);
			}
		},
		methods: {
			back() {
				uni.navigateBack(1)
			},
			chooseVehicleType(index) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.carInfo.brandName = this.vehicleModelList[index].modelName; //车型
				prevPage.$vm.carInfo.modelcname = this.vehicleModelList[index].modelName; //车型
				prevPage.$vm.carInfo.caryear = this.vehicleModelList[index].marketYear; //年款
				prevPage.$vm.carInfo.seatCount = this.vehicleModelList[index].ratedPassengerCapacity; //座位数
				prevPage.$vm.carInfo.purchasePrice = this.vehicleModelList[index].replacementValue; //价格
				prevPage.$vm.carInfo.modelCode = this.vehicleModelList[index].modelCode; //车辆型号编码
				prevPage.$vm.carInfo.familyName = this.vehicleModelList[index].series; //系列
				prevPage.$vm.carInfo.displacement = this.vehicleModelList[index].displacement; //排量
				prevPage.$vm.carInfo.energyTypeCode = this.vehicleModelList[index].fuelTypeCode; //燃油种类
				prevPage.$vm.carInfo.powerScale = this.vehicleModelList[index].powerScale; //功率
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			search(value) {
				if (this.frameNo) {
					this.getCarModel(value);
				} else if (this.modelName) {
					this.getBrandModel(value);
				}
			},
			custom(value) {
				if (this.frameNo) {
					this.getCarModel(value);
				} else if (this.modelName) {
					this.getBrandModel(value);
				}

			},
			async getCarModel(cctype) {
				let res = await this.$http.get('/order/carModel/vinSearch?frameNo=' + cctype);
				this.vehicleModelList = res.data;
			},
			//品牌型号查询
			async getBrandModel(cctype, marketYear) {
				let cctypeName = cctype.replace(/[^u4e00-u9fa5|,]+/ig, ''); //去掉中文
				let res = await this.$http.post('/order/carModel/modelsQuery', {
					modelName: cctypeName,
					marketYear: marketYear
				});
				this.vehicleModelList = res.data;
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.page {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.header {
		padding: 116rpx 30rpx 16rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;

	}

	.u-empty {
		width: 100%;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%);
	}

	.vehicleModel {
		padding: 220rpx 30rpx 20rpx;

		.item {
			width: 100%;
			background: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			.title {
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
			}

			.content {
				margin: 24rpx 0;

				text {
					width: 50%;
					font-size: 30rpx;
					color: #666;
					margin-bottom: 16rpx;
				}

				text:nth-child(3),
				text:nth-child(4) {
					margin-bottom: 0;
				}
			}

			.colorBlock {
				width: 100%;
				height: 50rpx;
				border-radius: 80rpx 0 0 20rpx;
				background: linear-gradient(90deg, #FFF9F1 0%, rgba(255, 249, 241, 0) 100%);
				font-size: 30rpx;
				color: #333;
				padding: 4rpx 30rpx;
				box-sizing: border-box;
			}
		}
	}
</style>