zx_flk_app/pages/carList/carList.vue

<template>
	<view class="car-list">
		<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>
			<view class="btn btn-right">{{ $t('绑定设备') }}</view>
		</view>
	</view>
</template>

<script>
	var config = require('../../common/config.js');
	var app = getApp();
	var config = require('../../common/config.js');
	var common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	export default {
		data() {
			return {
				carList:[],
				car_sn:"",
				car_info:{}
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			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(){
				this.car_info = uni.getStorageSync('car_info') || {};
				const me = this
				common.loading()
				http.postApi(config.API_FLK_CAR_DEVICE_LIST, {}, (resp) => {
					uni.hideLoading();
					if (resp.data.code === 200) {
						const carList=resp.data.data.list
						me.setData({
							carList,
						})
					} else {
						common.simpleToast(resp.data.msg);
					}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
.car-list{
    padding: 24rpx;
}
.car-list-card{
	width:100%;
    height: 596rpx;
    background: linear-gradient( 135deg, #DEE0E8 0%, rgba(255,255,255,0.4) 50%, #F1F3F4 100%);
    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%);
}
.car-name{
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 48rpx;
    color: #828DA2;
}
.car-name-i{
    color: #060809;
}
.options {
        padding: 0 28rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 44rpx;
		margin-top: 44rpx;
        .btn {
            width: 336rpx;
            height: 98rpx;
            border-radius: 50rpx;
            border: 4rpx solid #060809;
            font-size: 36rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
  
        .btn-left {
            color: #060809;
            background: rgba(255, 255, 255, 0.6);
			margin-right: 22rpx;
        }
  
        .btn-right {
            color: #fff;
            background: #060809;
        }
    }
</style>