new

pages/device/detail.vue

@@ -36,6 +36,20 @@
 			</view>
 		</view>
 
+		<!-- 手机号输入 -->
+		<view class="phone-section" v-if="!hasActiveOrder">
+			<view class="section-title">联系方式</view>
+			<view class="phone-input-wrap">
+				<input 
+					type="number" 
+					class="phone-input" 
+					maxlength="11"
+					placeholder="请输入手机号码" 
+					v-model="phoneNumber"
+				/>
+			</view>
+		</view>
+
 		<!-- 使用说明 -->
 		<view class="notice-section">
 			<view class="section-title">使用说明</view>
@@ -61,7 +75,7 @@
 				<text class="deposit-text">押金：</text>
 				<text class="deposit-amount">￥99</text>
 			</view>
-			<button class="action-btn" :class="hasActiveOrder ? 'return' : 'rent'" @click="handleAction">
+			<button class="action-btn" :class="hasActiveOrder ? 'return' : 'rent'" @click="handleRent">
 				{{ hasActiveOrder ? '归还设备' : '立即租借' }}
 			</button>
 		</view>
@@ -101,7 +115,8 @@
 						unitPrice: '1.25'
 					}
 				],
-				isLoggedIn: false
+				isLoggedIn: true,
+				phoneNumber: ''
 			}
 		},
 		onLoad(options) {
@@ -166,6 +181,24 @@
 					return
 				}
 
+				// 添加手机号验证
+				if (!this.phoneNumber) {
+					uni.showToast({
+						title: '请输入手机号码',
+						icon: 'none'
+					})
+					return
+				}
+
+				// 验证手机号格式
+				if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
+					uni.showToast({
+						title: '请输入正确的手机号码',
+						icon: 'none'
+					})
+					return
+				}
+
 				const selectedPkg = this.packages[this.selectedPackage]
 				uni.showModal({
 					title: '确认租借',
@@ -186,12 +219,13 @@
 					})
 
 					const selectedPkg = this.packages[this.selectedPackage]
-					// TODO: 调用租借接口
+					// 添加手机号到请求参数
 					const result = await this.$api.createOrder({
 						deviceId: this.deviceId,
 						packageId: this.selectedPackage,
 						duration: selectedPkg.time,
-						amount: selectedPkg.price
+						amount: selectedPkg.price,
+						phone: this.phoneNumber
 					})
 
 					uni.hideLoading()
@@ -368,6 +402,37 @@
 			}
 		}
 
+		.phone-section {
+			background: #fff;
+			border-radius: 24rpx;
+			padding: 30rpx;
+			margin-bottom: 30rpx;
+			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+
+			.section-title {
+				font-size: 32rpx;
+				font-weight: 600;
+				color: #333;
+				margin-bottom: 24rpx;
+			}
+
+			.phone-input-wrap {
+				.phone-input {
+					width: 100%;
+					height: 88rpx;
+					background: #F5F5F5;
+					border-radius: 16rpx;
+					padding: 0 30rpx;
+					font-size: 28rpx;
+					box-sizing: border-box;
+					
+					&::placeholder {
+						color: #999;
+					}
+				}
+			}
+		}
+
 		.notice-section {
 			background: #fff;
 			border-radius: 24rpx;