concrete-transportation-uniapp-20250821/components/select-car.vue

<template>
	<view class="b-relative">
		<view class="mask" :class="{ 'active':!!show }" @click="close" v-if="!!show"></view>
		<view class="iu b-relative" :class="{ 'active':!!show }">
			<view class="it">选择设备</view>
			<view class="itc" @click="close">关闭</view>
			<view>
				
				<view class="re-card-p32" v-for="(ele,idx) in cars">
					<view class="re-empty" v-if="cars.length<1">
						<view>暂无数据</view>
					</view>
					<view class="flex-sb">
						<view>
							<image class="re-from-car" src="/static/icons/icon11.png"></image>
							<span>{{ele.carNo}}</span>
						</view>
						<view class="re-card-show" @click="success(ele)" v-if="ele.status && +ele.status===0">
							<span style="color: #F40000;">确认选择</span>
						</view>
						<view class="re-card-show" @click="success(ele)" v-if="ele.status && +ele.status===1">
							<span style="color: #F40000;">确认选择</span>
						</view>
						<view class="re-card-show" v-if="ele.status && +ele.status===2">
							<span style="color: #F40000;">未通过审核</span>
						</view>
						<view class="re-card-show" v-if="ele.status && +ele.status===3">
							<span style="color: #F40000;">设备使用中</span>
						</view>
					</view>
					<view class="flex-sb re-card-select mt20">
						<view>轴数</view>
						<view class="flex" style="color: #9E9E9E;">
							<span v-if="!ele.mi">错误轴数</span>
							<view style="color: #0d0d0d;" v-if="ele.mi">{{ ele.mi }}</view>
							<uni-icons v-if="!ele.mi" type="down" size="28rpx" color="#9E9E9E"></uni-icons>
						</view>
					</view>
					<view class="flex-sb re-card-select">
						<view>上传证件</view>
						<view class="flex" style="color: #9E9E9E;" v-if="!ele.syximage" >
							<span>未上传证件</span>
							<uni-icons type="right" size="28rpx" color="#9E9E9E"></uni-icons>
						</view>
						<view class="flex" style="color: #0d0d0d;" v-if="ele.syximage" @click="clickCar(ele.id)">
							<span>查看证件信息</span>
							<uni-icons type="right" size="28rpx" color="#2d2d2d"></uni-icons>
						</view>
					</view>
				</view>
						
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				cars: []
			}
		},
		methods: {
			close(){
				this.$emit("close")
			},
			success(car){
				console.log(car);
				this.$emit("success", car)
				this.close()
			},
			loadCars(){
				this.$httpGet("/api/car/select", {}, (res) => {
					console.log('[/car/select]', res);
					if(res.data){
						this.cars = this.$utils.toArray(res.data)
						this.$httpGet("/api/car/checkOrder", {}, (res) => {
							if(res.data){
								let uesd = this.$utils.toArray(res.data)
								uesd.forEach(usd => {
									this.cars.forEach(car => {
										if(car.id === usd.car_id){
											car.status = 3
										}
									})
								})
							}
						})
					}
				})
			},
			clickCar(id){
				uni.navigateTo({ url: `/pages/base/showcar?id=${id}`})
			}
		},
		props: {
			show: {
				type: Boolean,
				required: false,
				default: false
			}
		},
		mounted(){
			this.loadCars()
		},
		onShow(){
			this.loadCars()
		}
	}
</script>

<style>
	.re-from-car{
		width: 72rpx;
		height: 60rpx;
		margin: 0 16rpx -20rpx 0;
	}
	
	.mask{
		content: ' ';
		width: 100vw;
		height: 100vh;
		background-color: rgba(51, 51, 51, 0.8);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		opacity: 0;
	}
	.mask.active{
		opacity: 1;
	}
	.iu{
		/* width: calc(100vw - 88rpx); */
		min-height: 342rpx;
		padding: 0 0;
		background-color: #dcdcdc;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		transform: translateY(100%);
		transition: .2s ease-in;
	}
	.iu.active{
		transform: translateY(0);
	}
	.it{
		font-size: 32rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #111;
		letter-spacing: 0em;
		padding-left: 44rpx;
		background-color: #fff;
		margin-bottom: 32rpx;
	}
	.itc{
		font-size: 28rpx;
		line-height: 72rpx;
		color: #888;
		
		position: absolute;
		right: 44rpx;
		top: 12rpx;
	}
	.ii{
		width: 670rpx;
		min-height: 342rpx;
		border-radius: 16rpx;
	}
	.ic{
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		top: calc(50% - 55rpx);
		left: calc(50% - 55rpx);
	}
</style>