<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>
|
export default {
|
data() {
|
return {
|
selectedVehiclePlate: '',
|
// 模拟车辆列表数据
|
vehiclePlates: ['粤A12345', '粤B67890', '粤C11111', '粤D22222', '粤E33333']
|
}
|
},
|
methods: {
|
// 扫码绑定车辆
|
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) {
|
this.selectedVehiclePlate = this.vehiclePlates[e.detail.value]
|
},
|
|
// 绑定车辆
|
bindVehicle() {
|
if (!this.selectedVehiclePlate) {
|
this.$modal.showToast('请选择车牌号')
|
return
|
}
|
|
// 这里可以调用API进行车辆绑定
|
this.$modal.confirm('确认绑定车辆 ' + this.selectedVehiclePlate + ' 吗？').then(() => {
|
this.$modal.showToast('车辆绑定成功')
|
// 返回上一页
|
this.$tab.navigateBack()
|
}).catch(() => {
|
// 用户取消操作
|
})
|
},
|
|
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>
|
