180 lines
4.2 KiB
Vue
180 lines
4.2 KiB
Vue
<template>
|
||
<view class="app-container">
|
||
<HeaderBar title="车辆信息" text-align="center" enable-back />
|
||
|
||
<view class="car-list">
|
||
<view
|
||
v-for="item in carList"
|
||
:key="item.id"
|
||
class="car-item"
|
||
@click="selectCar(item)"
|
||
>
|
||
<image :src="item.picture" class="car-img" mode="aspectFill" />
|
||
<view class="car-info">
|
||
<view class="no">
|
||
{{ item.no | dv}}
|
||
<view v-if="item.isDefault" class="default-tag">默认</view>
|
||
</view>
|
||
<view class="name">{{ item.name | dv}}</view>
|
||
<view class="mobile">{{ item.mobile | dv}}</view>
|
||
</view>
|
||
<view class="car-actions">
|
||
<view class="action-btn edit" @click.stop="editCar(item)">
|
||
<u-icon name="edit-pen" size="32" color="#2979ff"></u-icon>
|
||
</view>
|
||
<view class="action-btn delete" @click.stop="deleteCar(item)">
|
||
<u-icon name="trash" size="32" color="#f56c6c"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="car-item add-placeholder" @click="addCar">
|
||
<view class="add-content">
|
||
<u-icon name="plus" size="40" color="#2979ff"></u-icon>
|
||
<text class="add-text">添加新车辆</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { appGetCarList, appDeleteCar } from '@/api/app/car'
|
||
import HeaderBar from '@/components/HeaderBar.vue'
|
||
import { appUpdateTask } from '@/api/app/task'
|
||
|
||
export default {
|
||
name: 'CarIndex',
|
||
components: { HeaderBar },
|
||
data() {
|
||
return {
|
||
carList: [],
|
||
taskId: null,
|
||
queryParams: {
|
||
orderByColumn: "createTime",
|
||
isAsc: "desc"
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.taskId = options.taskId
|
||
},
|
||
onShow() {
|
||
this.getCarList()
|
||
},
|
||
methods: {
|
||
getCarList() {
|
||
appGetCarList(this.queryParams).then(res => {
|
||
this.carList = res.data
|
||
})
|
||
},
|
||
// 选择车辆，如果taskId不为空，则更新task表
|
||
selectCar(car) {
|
||
if (this.taskId == null || car == null) {
|
||
return;
|
||
}
|
||
this.$modal.loading("加载中");
|
||
appUpdateTask({
|
||
id: this.taskId,
|
||
carId: car.id,
|
||
carNo: car.no,
|
||
createName: car.name,
|
||
createMobile: car.mobile,
|
||
}).then(res => {
|
||
this.$modal.closeLoading();
|
||
uni.navigateBack();
|
||
})
|
||
},
|
||
deleteCar(car) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要删除该车辆吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
appDeleteCar(car.id).then(() => {
|
||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||
this.getCarList()
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
editCar(car) {
|
||
uni.navigateTo({
|
||
url: `/pages/car/edit?id=${car.id}`
|
||
})
|
||
},
|
||
addCar() {
|
||
uni.navigateTo({
|
||
url: '/pages/car/edit'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.car-list {
|
||
margin-top: 30rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
.car-item {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
&.add-placeholder {
|
||
background: #ffffff71;
|
||
border: 2rpx dashed #fff;
|
||
justify-content: center;
|
||
padding: 40rpx;
|
||
.add-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
.add-text {
|
||
font-size: 28rpx;
|
||
color: #2979ff;
|
||
}
|
||
}
|
||
}
|
||
.car-img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 20rpx;
|
||
background: #f7f8fa;
|
||
}
|
||
.car-info {
|
||
flex: 1;
|
||
.no { font-size: 32rpx; color: #333; }
|
||
.mobile, .name { font-size: 28rpx; color: #666; }
|
||
.default-tag {
|
||
display: inline-block;
|
||
background: #2979ff;
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
font-size: 22rpx;
|
||
padding: 2rpx 10rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.car-actions {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
.action-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
background: #f7f8fa;
|
||
}
|
||
}
|
||
}
|
||
</style>
|