重构前端代码架构， 完善我的内容区

pages/ucenter/components/DeviceBindPopup.vue

@@ -0,0 +1,187 @@
+<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>