255 lines
5.5 KiB
Vue
Raw Normal View History

2023-10-09 20:22:16 +08:00
<template>
2023-10-09 23:32:04 +08:00
<view class="box">
2023-10-11 15:54:26 +08:00
<!-- 搜索 -->
<view class="" style="padding:10rpx 20rpx;">
<u-search :showAction="true" bgColor='white' @search="queryCarFn" placeholder="搜索车牌号" actionText="搜索"
:animation="true" v-model="queryCar" @custom='queryCarFn'></u-search>
</view>
<view style="height: 80vh;" v-if="carList.length==0">
<u-empty mode="search" marginTop='100' icon="/static/img/empty/data.png">
</u-empty>
</view>
<view v-else class="car-list" v-for="item,index in carList" :key="index">
<view class="car-info">
<view class="car-info-l">
<view class="">
<u--image :src="a" width="150rpx" height="150rpx" style="margin-right:20rpx"></u--image>
2023-10-09 20:22:16 +08:00
</view>
2023-10-11 15:54:26 +08:00
<view class="car-info-c">
<view class="lincense">
车牌号: {{item.lincense}}
</view>
<view class="lincense">
行驶里程: 1212KM
</view>
<view class="lincense">
当前状态: 平台公司闲置中
</view>
2023-10-09 20:22:16 +08:00
</view>
</view>
2023-10-11 15:54:26 +08:00
<!-- -->
<view class="car-info-r">
<view class="" style="margin: 10rpx 50rpx;">
<u-checkbox-group v-model="item.checked" placement="column" @change="checkboxChange(index)">
<u-checkbox>
</u-checkbox>
</u-checkbox-group>
</view>
<view class="" v-show="index==carCheckedArr[0]">
选择该车辆为监管车辆
</view>
2023-10-09 23:32:04 +08:00
</view>
2023-10-11 15:54:26 +08:00
2023-10-09 20:22:16 +08:00
</view>
2023-10-09 23:32:04 +08:00
</view>
2023-10-11 15:54:26 +08:00
<view class="bottom">
<view class="" @tap="open">
已选择{{carCheckedArr.length}}辆车
</view>
<view class="bottom-btn" @tap="buyCarFn">
<u-button type="primary" style="background-color: #0122C7;border: none;" text="确定"></u-button>
</view>
2023-10-09 23:32:04 +08:00
</view>
2023-10-11 15:54:26 +08:00
<!-- 组件 -->
<u-popup :show="showPop" mode="bottom" @close="close" @open="open">
<view class="pop">
<view class="check-car-list" v-for="item,index in carList" v-show="item.checked.length" :key="index">
<u--image :src="a" width="150rpx" height="150rpx"></u--image>
<view class="" style="margin-top: 10rpx;">
{{item.lincense}}
2023-10-09 23:32:04 +08:00
</view>
2023-10-11 15:54:26 +08:00
<view class="pop-check">
<u-checkbox-group v-model="item.checked" @change="popChange(index)">
<u-checkbox>
</u-checkbox>
</u-checkbox-group>
</view>
</view>
</view>
2023-10-09 23:32:04 +08:00
</u-popup>
2023-10-09 20:22:16 +08:00
</view>
</template>
<script scoped>
2023-10-11 15:54:26 +08:00
// import { methods } from '../../uni_modules/uview-ui/libs/mixin/mixin'
import {
canBuyCarListApi,
buyCarApi
} from "@/api/property.js"
import {
Toast
} from "../../libs/uniApi"
export default {
data() {
return {
queryCar: '',
a: "https://tse3-mm.cn.bing.net/th/id/OIP-C.0xzWZj1_A-nzJiUBxrk8XQHaEo?w=298&h=186&c=7&r=0&o=5&pid=1.7",
carList: [],
carListI: [{
checked: [],
lincense: '川Y103D1'
}, {
checked: [],
lincense: '川Y103D6'
}, {
checked: [],
lincense: '川Y103D5'
}, {
checked: [],
lincense: '川Y103D4'
}, {
checked: [],
lincense: '川Y103D3'
}, {
checked: [],
lincense: '川Y103D2'
}],
showPop: false,
carCheckeList: [1, 1, 1, 1, 1, 1, 1, 1],
carCheckedArr: []
2023-10-10 18:44:37 +08:00
}
},
2023-10-11 15:54:26 +08:00
methods: {
buyCarFn() {
if (this.carCheckedArr.length == 0) {
Toast("请先选择车辆!")
return
}
// buyCarApi({}).then(res => {
// Toast("购买成功!")
// setTimeout(() => {
// uni.navigateTo({
// url: '/subpkg/property/index'
// })
// }, 500)
// })
uni.navigateTo({
url: '/subpkg/property/index'
})
},
queryCarFn() {
this.carList = []
this.carListI.forEach(item => {
if (item.lincense.includes(this.queryCar)) {
this.carList.push(item)
}
})
},
checkboxChange(i) {
if (this.carCheckedArr.includes(i)) {
// let index=this.ca
let index = this.carCheckedArr.indexOf(i)
// console.log(index)
this.carCheckedArr.splice(index, 1)
// this.arr
} else {
this.carCheckedArr.push(i)
}
// console.log(this.carCheckedArr)
},
popChange(index) {
this.checkboxChange(index)
console.log(this.carCheckedArr)
},
close() {
this.showPop = false
},
open() {
if (this.carCheckedArr.length == 0) return
this.showPop = true
},
change(e) {
console.log(e)
}
2023-10-09 23:32:04 +08:00
},
2023-10-11 15:54:26 +08:00
onLoad() {
// canBuyCarListApi({}).then(res => {
// this.carListI = res.data
// })
this.carList = Array.from(this.carListI);
2023-10-09 20:22:16 +08:00
}
2023-10-11 15:54:26 +08:00
2023-10-09 23:32:04 +08:00
}
2023-10-09 20:22:16 +08:00
</script>
<style lang="scss" scoped>
2023-10-11 15:54:26 +08:00
.box {
2023-10-09 23:32:04 +08:00
padding-bottom: 100rpx;
}
2023-10-11 15:54:26 +08:00
.car-list {
2023-10-09 20:22:16 +08:00
padding: 20rpx;
2023-10-11 15:54:26 +08:00
background-color: #fff;
2023-10-09 23:32:04 +08:00
// padding-bottom: 200rpx;
2023-10-11 15:54:26 +08:00
.car-info {
2023-10-09 20:22:16 +08:00
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
2023-10-11 15:54:26 +08:00
.car-info-l {
2023-10-09 20:22:16 +08:00
display: flex;
}
2023-10-11 15:54:26 +08:00
.car-info-c {
2023-10-09 20:22:16 +08:00
display: flex;
flex-direction: column;
justify-content: space-between;
}
2023-10-11 15:54:26 +08:00
.car-info-r {
2023-10-09 20:22:16 +08:00
max-width: 20vw;
}
}
}
2023-10-11 15:54:26 +08:00
.pop {
2023-10-09 23:32:04 +08:00
min-height: 40vh;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
2023-10-11 15:54:26 +08:00
padding: 20rpx 10rpx;
2023-10-09 23:32:04 +08:00
padding-right: 0;
padding-bottom: 100rpx;
2023-10-11 15:54:26 +08:00
.check-car-list {
2023-10-09 23:32:04 +08:00
// margin-right: 30rpx;
width: 182.5rpx;
display: flex;
// justify-content: ;
flex-direction: column;
align-items: center;
position: relative;
}
2023-10-11 15:54:26 +08:00
.pop-check {
2023-10-09 23:32:04 +08:00
position: absolute;
right: 0;
top: -5rpx;
}
}
2023-10-11 15:54:26 +08:00
.bottom {
2023-10-09 23:32:04 +08:00
background-color: white;
height: 100rpx;
position: fixed;
bottom: 0;
z-index: 1000000;
width: 100vw;
box-sizing: border-box;
border-radius: 30rpx 30rpx 0 0;
padding: 0 20rpx;
display: flex;
align-items: center;
2023-10-11 15:54:26 +08:00
justify-content: space-between;
.bottom-btn {
width: 200rpx;
}
2023-10-09 23:32:04 +08:00
}
2023-10-09 20:22:16 +08:00
</style>