BD-LDBD-UNI/pages/preCarWash/chooseCar/index.vue

<template>
	<view class="chooseCar">
		<radio-group @change="radioChange">
			<view class="body" v-for="(item, index) in carList" :key="index" @tap="goBack(item)">
				<view style="display: flex;align-items: center;">
					<image :src="baseImagePath+item.brandLogo" alt="">
						<view class="carView">
							<view class="carBodyHead">
								<image class="carImg" :src="require('../../../static/car.png')">
									<span>{{item.carNumber}}</span>
									<view class="vehicleBorder"></view><span>{{item.carMadelLevel}}</span>
							</view>
							<view class="classBodyContent">
								{{item.brandName}} {{item.carSeriesName}}
								</view>
					</view>
				</view>

				<view class="radio">
					<radio style="line-height: 66rpx;" color="#FF5C00" :value="index" :checked="id==item.id" />
				</view>
			</view>
		</radio-group>

	</view>
</template>

<script>
	import {
		getUserCarPage
	} from "@/api/shop.js";
	export default {
		components: {},
		data: function() {
			return {
				baseImagePath: this.baseImagePath,
				id: "",
				carList: [],
				pageSize: 20,
				pageNo: 1
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
		this.id = option.id
			this.getPage()
		},
		onReachBottom() {
			this.getPage()
		},
		methods: {
			getPage(){
				let _this = this;
					getUserCarPage({
						pageSize:  _this.pageSize,
						pageNo:  _this.pageNo,
					}).then((res) => {
						console.log(res,'选择');
						_this.carList = _this.carList.concat(res.data.rows)
						_this.pageNo++
					})
			},
			radioChange(e) {

			},
			goBack(datas) {
				uni.$emit('chooseCar', datas)
				uni.setStorageSync('chooseCar',datas)
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.body {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 33rpx 24rpx 33rpx 26rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			border: 2px solid #F4F4F4;
			border-radius: 8rpx;
		}

		.carView {
			padding-left: 29rpx;
			padding-top: 8rpx;

			.carBodyHead {
				display: flex;

				.carImg {
					width: 33rpx;
					height: 27rpx;
				}

				.vehicleBorder {
					width: 1px;
					height: 20rpx;
					background: #DBDBDB;
				}

				span {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 31rpx;
					padding: 0 15rpx 0 15rpx;
				}
			}

			.classBodyContent {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 34rpx;
				padding: 20rpx 45rpx 8rpx 0;
			}
		}
	}
</style>