<template>
|
<view class="bind-vehicle-container">
|
<view class="header">
|
<text class="title">绑定车辆</text>
|
</view>
|
|
<!-- 扫码绑定 - 已隐藏 -->
|
<!-- <view class="scan-section">
|
<view class="section-title">扫一扫绑定</view>
|
<view class="scan-content">
|
<view class="scan-icon" @click="scanQRCode">
|
<uni-icons type="scan" size="40" color="#007AFF"></uni-icons>
|
<text class="scan-text">点击扫码绑定车辆</text>
|
</view>
|
</view>
|
</view> -->
|
|
<!-- 下拉选择绑定 -->
|
<view class="form-section">
|
<view class="section-title">选择车牌号绑定</view>
|
<view class="form-item">
|
<view class="form-label">车牌号</view>
|
<picker mode="selector" :range="vehiclePlates" @change="onVehiclePlateChange">
|
<view class="form-input picker-input">
|
{{ selectedVehiclePlate || '请选择车牌号' }}
|
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
</view>
|
</picker>
|
</view>
|
|
<view class="form-actions">
|
<button class="submit-btn" @click="bindVehicle" :disabled="!selectedVehiclePlate">确认绑定</button>
|
<button class="cancel-btn" @click="goBack">取消</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import { listAvailableVehicles, bindVehicleToUser, getUserBoundVehicle } from '@/api/vehicle'
|
|
export default {
|
data() {
|
return {
|
selectedVehiclePlate: '',
|
selectedVehicleId: null,
|
// 车辆列表数据
|
vehiclePlates: [],
|
vehicleOptions: [],
|
loading: false,
|
// 当前绑定的车辆信息
|
currentBoundVehicle: null
|
}
|
},
|
computed: {
|
...mapState({
|
currentUser: state => state.user
|
})
|
},
|
onLoad() {
|
// 加载车辆列表
|
this.loadVehicleList()
|
// 加载当前用户绑定的车辆
|
this.loadCurrentBoundVehicle()
|
},
|
methods: {
|
// 加载当前用户绑定的车辆
|
loadCurrentBoundVehicle() {
|
const userId = this.currentUser.userId
|
getUserBoundVehicle(userId).then(response => {
|
if (response.code === 200 && response.data) {
|
this.currentBoundVehicle = response.data
|
console.log('当前绑定车辆:', this.currentBoundVehicle)
|
} else {
|
this.currentBoundVehicle = null
|
}
|
}).catch(error => {
|
console.error('获取绑定车辆失败:', error)
|
this.currentBoundVehicle = null
|
})
|
},
|
|
// 加载车辆列表（只加载同一分公司的车辆）
|
loadVehicleList() {
|
this.loading = true
|
// 获取当前用户的部门ID
|
const deptId = this.currentUser.deptId
|
|
if (!deptId) {
|
this.loading = false
|
console.error('无法获取用户部门信息')
|
this.$modal.showToast('无法获取用户部门信息')
|
return
|
}
|
|
// 使用用户所在的部门ID加载车辆列表
|
listAvailableVehicles(deptId, 'GENERAL').then(response => {
|
this.loading = false
|
const vehicleList = response.data || response.rows || []
|
|
if (vehicleList.length === 0) {
|
console.log('当前分公司暂无可用车辆')
|
this.$modal.showToast('当前分公司暂无可用车辆')
|
}
|
|
this.vehicleOptions = vehicleList.map(vehicle => ({
|
id: vehicle.vehicleId,
|
name: vehicle.vehicleNo,
|
type: vehicle.vehicleType,
|
brand: vehicle.vehicleBrand,
|
model: vehicle.vehicleModel
|
}))
|
this.vehiclePlates = this.vehicleOptions.map(v => v.name)
|
|
console.log(`加载了 ${vehicleList.length} 辆车辆（部门ID: ${deptId}）`)
|
}).catch(error => {
|
this.loading = false
|
console.error('加载车辆列表失败:', error)
|
this.$modal.showToast('加载车辆列表失败')
|
})
|
},
|
|
// 扫码绑定车辆
|
scanQRCode() {
|
// #ifdef H5
|
this.$modal.showToast('H5环境暂不支持扫码功能')
|
// #endif
|
|
// #ifndef H5
|
uni.scanCode({
|
success: (res) => {
|
console.log('扫码结果：', res)
|
// 解析扫码结果，这里假设扫码结果是车牌号
|
this.selectedVehiclePlate = res.result
|
this.$modal.showToast('扫码成功，正在绑定车辆...')
|
// 扫码成功后自动绑定
|
this.bindVehicle()
|
},
|
fail: (err) => {
|
console.log('扫码失败：', err)
|
this.$modal.showToast('扫码失败，请重试')
|
}
|
})
|
// #endif
|
},
|
|
// 车牌号选择
|
onVehiclePlateChange(e) {
|
const index = e.detail.value
|
this.selectedVehiclePlate = this.vehiclePlates[index]
|
this.selectedVehicleId = this.vehicleOptions[index]?.id
|
},
|
|
// 绑定车辆
|
bindVehicle() {
|
if (!this.selectedVehiclePlate || !this.selectedVehicleId) {
|
this.$modal.showToast('请选择车牌号')
|
return
|
}
|
|
// 检查是否选择的是当前已绑定的车辆
|
if (this.currentBoundVehicle && this.currentBoundVehicle.vehicleId === this.selectedVehicleId) {
|
this.$modal.showToast('当前已绑定此车辆，无需重复绑定')
|
return
|
}
|
|
// 如果已经绑定了其他车辆，提示是否强制绑定
|
if (this.currentBoundVehicle) {
|
const currentVehicleNo = this.currentBoundVehicle.vehicleNumber || '未知车牌'
|
const confirmMsg = `您当前已绑定车辆：${currentVehicleNo}\n\n确认要解绑旧车辆并绑定新车辆：${this.selectedVehiclePlate} 吗？`
|
|
this.$modal.confirm(confirmMsg).then(() => {
|
this.performBind()
|
}).catch(() => {
|
// 用户取消强制绑定
|
console.log('用户取消强制绑定')
|
})
|
} else {
|
// 没有绑定车辆，直接绑定
|
this.$modal.confirm('确认绑定车辆 ' + this.selectedVehiclePlate + ' 吗？').then(() => {
|
this.performBind()
|
}).catch(() => {
|
// 用户取消操作
|
})
|
}
|
},
|
|
// 执行绑定操作
|
performBind() {
|
this.loading = true
|
const userId = this.currentUser.userId
|
|
bindVehicleToUser(userId, this.selectedVehicleId).then(response => {
|
this.loading = false
|
|
if (response.code === 200) {
|
this.$modal.showToast('车辆绑定成功')
|
// 更新Vuex中的用户信息
|
this.$store.dispatch('GetInfo')
|
// 返回上一页
|
setTimeout(() => {
|
this.$tab.navigateBack()
|
}, 1500)
|
} else {
|
this.$modal.showToast(response.msg || '绑定失败')
|
}
|
}).catch(error => {
|
this.loading = false
|
console.error('绑定车辆失败:', error)
|
const errorMsg = error.msg || error.message || '绑定车辆失败，请重试'
|
this.$modal.showToast(errorMsg)
|
})
|
},
|
|
goBack() {
|
this.$tab.navigateBack()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.bind-vehicle-container {
|
padding: 20rpx;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
.header {
|
text-align: center;
|
padding: 40rpx 0;
|
|
.title {
|
font-size: 40rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
}
|
|
.section-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
margin: 30rpx 0 20rpx 0;
|
color: #333;
|
}
|
|
.scan-section {
|
background-color: white;
|
border-radius: 15rpx;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
.scan-content {
|
text-align: center;
|
padding: 40rpx 0;
|
|
.scan-icon {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
.scan-text {
|
margin-top: 20rpx;
|
font-size: 28rpx;
|
color: #007AFF;
|
}
|
}
|
}
|
}
|
|
.form-section {
|
background-color: white;
|
border-radius: 15rpx;
|
padding: 30rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
.form-item {
|
margin-bottom: 40rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.form-label {
|
font-size: 28rpx;
|
margin-bottom: 15rpx;
|
color: #333;
|
}
|
|
.form-input {
|
height: 70rpx;
|
padding: 0 20rpx;
|
border: 1rpx solid #eee;
|
border-radius: 10rpx;
|
font-size: 28rpx;
|
|
&.picker-input {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
}
|
}
|
|
.form-actions {
|
display: flex;
|
margin-top: 50rpx;
|
|
.submit-btn, .cancel-btn {
|
flex: 1;
|
height: 80rpx;
|
border-radius: 10rpx;
|
font-size: 32rpx;
|
margin: 0 10rpx;
|
}
|
|
.submit-btn {
|
background-color: #007AFF;
|
color: white;
|
|
&[disabled] {
|
background-color: #cccccc;
|
}
|
}
|
|
.cancel-btn {
|
background-color: #f0f0f0;
|
color: #333;
|
}
|
}
|
}
|
</style>
|
