Merge branch 'feature-task'

wlzboy

2025-10-26 2c86a8bd60deed0dd0e044bad6fb83f75d19a332

 app/pages/bind-vehicle.vue

New file
@@ -0,0 +1,335 @@
<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>