zk-driver-wechat-applet/pages/ucenter/car.vue

<template>
	<view>
		<view class="car-box">
			<uni-swiper-dot :info="datalist" :current="current" field="content" mode="default" :dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in datalist" 
						:key="item.id"
						@click="$utils.navigateTo('ucenter/car_show',{plate: item.plate})">
						<view class="swiper-item">
							<view class="top">
								<view>{{item.plate || '-'}}</view>
								<view><image src="../../static/icon-car.png"></image></view>
							</view>
							<view class="bottom">
								<view class="carpic"><image src="../../static/car.jpg"></image></view>
								<view class="list">
									<view>车型：</view><view>{{item.vehModel || '-'}}</view>
								</view>
								<view class="list">
									<view>VIN码：</view><view>{{item.vin || '-'}}</view>
								</view>
								<view class="list">
									<view>累计行驶里程：</view><view>{{item.totalMileage || '-'}}km</view>
								</view>
								<view class="list">
									<view>累计换电次数：</view><view>{{item.totalExchangeCnt || '-'}}次</view>
								</view>
								<view class="list">
									<view>累计换电量：</view><view>{{item.totalExchangePower || '-'}}(kW/h)</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<tab-bar></tab-bar>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist: [],
				current: 0,
				dotsStyles:{
					backgroundColor: 'rgba(88, 190, 107,0.6)',
					selectedBackgroundColor: 'rgba(88, 190, 107,0.9)',
				}
			}
		},
		mounted() {
			this.getexchangeHistoryCar()
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			getexchangeHistoryCar(){
				this.$http.exchangeHistoryCar().then(rs=>{
					if(rs.code === 0){
						this.datalist=rs.data
					}else{
						this.$utils.msg(rs.msg)
					}
				})
				.catch(error=>{
					this.$utils.msg(error);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.car-box{
		padding: 0 30rpx;
		.swiper-box{
			width: 100%;
			display: flex;
			background-color:#fff;
			border-radius: 20rpx;
			border-top-right-radius: 40rpx;
			min-height: 1050rpx;
			margin-top: 15rpx;
			.swiper-item{
				display: flex;
				flex-direction: column;
				.top{
					display: flex;
					padding-left: 50rpx;
					justify-content: space-between;
					view:first-child{
						padding-top: 40rpx;
						font-size: 30rpx;
						font-weight: bold;
					}
					image{
						width: 110rpx;
						height: 98rpx;
					}
				}
				.bottom{
					padding:0 30rpx;
					display: flex;
					flex-direction: column;
					.carpic{
						text-align: center;
						margin-bottom: 30rpx;
					}
					image{
						width: 630rpx;
						height: 480rpx;
						border-radius:28rpx;
					}
					.list{
						width: 100%;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						height: 80rpx;
						justify-content: space-between;
						font-size: 30rpx;
						view:first-child{
							color: #86909c;
						}
						view:last-child{
							color: #1d2129;
							
						}
					}
				}
			}
		}
	}
</style>