车辆列表选择

pages/carList/carList.vue

@@ -1,7 +1,14 @@
 <template>
 	<view class="car-list">
-		<view class="car-list-card">
-            <view class="car-name">奥迪A6L</view>
+		<view v-for="(item,index) of carList" :key="index" @click="clickItem(item)" class="car-list-card" :class="{ 'car-list-card-i' : car_info.car_sn == item.car_sn}">
+		    <view class="car-name" :class="{ 'car-name-i' : car_info.car_sn == item.car_sn}">{{item.car_name}}</view>
+			<image v-if="car_info.car_sn == item.car_sn" class="icon" src="/static/resource/images/gyq_ly.png" mode=""></image>
+			<!-- https://qiniu.bms16.com/Fg8_p7083jpsy8BXG4bR6yMs7jQX -->
+			<image class="img" :src="item.model_images" mode="aspectFit"></image>
+			<view v-if="car_info.car_sn == item.car_sn" class="select">
+				<image class="icon1" src="/static/resource/images/gyq_select.png" mode=""></image>
+				<text>当前选择</text>
+			</view>
 		</view>
 		<view class="options">
 			<view class="btn btn-left">{{ $t('租赁设备') }}</view>
@@ -33,9 +40,13 @@
 			this.loadUserCarList()
 		},
 		methods: {
+			clickItem(item){
+				if(item.car_sn == this.car_info.car_sn) return
+				uni.setStorageSync('car_info',item)
+				this.car_info = item
+			},
 			loadUserCarList(){
-				uni.getStorageSync('car_info');
-				return
+				this.car_info = uni.getStorageSync('car_info') || {};
 				const me = this
 				common.loading()
 				http.postApi(config.API_FLK_CAR_DEVICE_LIST, {}, (resp) => {
@@ -64,6 +75,48 @@
     border-radius: 40rpx;
     border: 6rpx solid #FFF;
     position: relative;
+	padding: 30rpx;
+	.select{
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 164rpx;
+		height: 78rpx;
+		text-align: center;
+		.icon1{
+			width: 164rpx;
+			height: 78rpx;
+			position: absolute;
+			left: 0;
+			top: 0;
+			
+		}
+		text{
+			position: relative;
+			z-index: 1;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 600;
+			font-size: 28rpx;
+			color: #FFFFFF;
+			line-height: 28rpx;
+			margin-top: 10rpx;
+			display: block;
+		}
+	}
+	.icon{
+		position: absolute;
+		width: 48rpx;
+		height: 48rpx;
+		left: 30rpx;
+		top: 120rpx;
+	}
+	.img{
+		width: 520rpx;
+		height: 400rpx;
+		display: block;
+		margin: auto;
+		margin-top: 40rpx;
+	}
 }
 .car-list-card-i{
     background: linear-gradient( 135deg, #DEEAFF 0%, rgba(220,244,251,0.4) 50%, #DAFFF6 100%);
@@ -82,7 +135,7 @@
         display: flex;
         justify-content: space-between;
         margin-bottom: 44rpx;
-  
+		margin-top: 44rpx;
         .btn {
             width: 336rpx;
             height: 98rpx;