smartDriveEEUniApp/pages/ucenter/components/DeviceBindPopup.vue

<template>
	<uni-popup ref="deviceBindPopup" type="dialog">
		<view class="device-bind-dialog">
			<view class="device-bind-title">设备绑定</view>
			<view class="device-bind-field">
				<text class="device-bind-label">设备编号</text>
				<uni-easyinput v-model="deviceBindForm.deviceCode" placeholder="请输入设备编号" />
			</view>
			<view class="device-bind-field">
				<text class="device-bind-label">电话</text>
				<uni-easyinput v-model="deviceBindForm.salesPhone" placeholder="请输入电话" type="number" />
			</view>
			<view class="device-bind-field">
				<text class="device-bind-label">所属门店</text>
				<uni-easyinput v-model="deviceBindForm.dealershipName" placeholder="请输入所属门店" />
			</view>
			<view class="device-bind-actions">
				<button class="dialog-btn cancel" @click="closeDeviceBindDialog">取消</button>
				<button class="dialog-btn confirm" :disabled="deviceBindSubmitting" @click="submitDeviceBind">
					{{ deviceBindSubmitting ? '提交中...' : '提交' }}
				</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import { post } from '@/common/request.js'
	
	export default {
		name: 'DeviceBindPopup',
		data() {
			return {
				deviceBindForm: {
					deviceCode: '',
					salesPhone: '',
					dealershipName: ''
				},
				deviceBindSubmitting: false
			}
		},
		methods: {
			/**
			 * 打开设备绑定弹窗
			 */
			open() {
				this.deviceBindForm = {
					deviceCode: '',
					salesPhone: '',
					dealershipName: ''
				}
				if (this.$refs.deviceBindPopup) {
					this.$refs.deviceBindPopup.open()
				}
			},
			/**
			 * 关闭设备绑定弹窗
			 */
			close() {
				if (this.$refs.deviceBindPopup) {
					this.$refs.deviceBindPopup.close()
				}
			},
			/**
			 * 关闭设备绑定弹窗（内部方法）
			 */
			closeDeviceBindDialog() {
				this.close()
			},
			/**
			 * 提交设备绑定
			 */
			async submitDeviceBind() {
				if (this.deviceBindSubmitting) return
				
				const { deviceCode, salesPhone, dealershipName } = this.deviceBindForm
				
				// 验证设备编号
				if (!deviceCode || !deviceCode.trim()) {
					return uni.showToast({
						title: '请输入设备编号',
						icon: 'none'
					})
				}
				
				this.deviceBindSubmitting = true
				try {
					// 构建请求参数
					const requestData = {
						deviceCode: deviceCode.trim(),
						salesPhone: salesPhone ? salesPhone.trim() : '',
						dealershipName: dealershipName ? dealershipName.trim() : '',
						bindStatus: true
					}
					
					// 调用后端接口
					const res = await post('/api/deviceManagement/add', requestData)
					
					// 检查响应状态
					if (res.statusCode === 200 && res.data && res.data.success) {
						this.close()
						uni.showToast({
							title: res.data.message || '设备绑定成功',
							icon: 'success'
						})
						// 触发成功事件，通知父组件刷新
						this.$emit('success')
					} else {
						// 处理失败情况
						const errorMessage = res.data?.message || '设备绑定失败，请稍后重试'
						uni.showToast({
							title: errorMessage,
							icon: 'none'
						})
					}
				} catch (e) {
					console.error('设备绑定失败:', e)
					const errorMessage = e?.data?.message || e?.message || '设备绑定失败，请稍后重试'
					uni.showToast({
						title: errorMessage,
						icon: 'none'
					})
				} finally {
					this.deviceBindSubmitting = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.device-bind-dialog {
		padding: 40rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		width: 600rpx;
	}

	.device-bind-title {
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.device-bind-field {
		margin-bottom: 20rpx;
	}

	.device-bind-label {
		display: block;
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 10rpx;
	}

	.device-bind-actions {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.dialog-btn {
		min-width: 140rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		padding: 0 24rpx;
	}

	.dialog-btn.cancel {
		background-color: #f5f5f5;
		color: #333333;
		margin-right: 20rpx;
	}

	.dialog-btn.confirm {
		background-color: #007AFF;
		color: #FFFFFF;
	}

	.dialog-btn:after {
		border: none;
	}
</style>