<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>
|