表单校验

pages/lease/lease.vue

@@ -23,7 +23,11 @@
           <!-- 姓名 -->
           <view class="form-item">
             <text class="field-label">姓名</text>
-            <input v-model="formData.name" class="field-input" placeholder="请输入姓名" />
+            <input 
+              v-model="formData.name" 
+              class="field-input" 
+              placeholder="请输入姓名"
+            />
           </view>
 
           <!-- 手机号 -->
@@ -46,6 +50,7 @@
             @location-error="onLocationError"
             @use-location="onUseLocation"
             @map-opened="onMapOpened"
+
           />
 
           <!-- 详细位置 -->
@@ -82,8 +87,8 @@
       <view class="payment-section">
         <button
           :class="['pay-button', { disabled: !canPay }]"
-          @click="handlePayment"
           :disabled="!canPay"
+          @click="handlePayment"
         >
           {{ canPay ? `立即支付 ¥${totalAmount}` : '请完善信息' }}
         </button>
@@ -125,25 +130,65 @@
 <script>
 import commonEnum from '../../enum/commonEnum'
 import MapLocation from '@/components/map-location/map-location.vue'
-import { getDeviceTypes as fetchDeviceTypes, getPeriodPackages as fetchPeriodPackages } from '@/api/lease/lease.js'
+import {
+  getDeviceTypes as fetchDeviceTypes,
+  getPeriodPackages as fetchPeriodPackages,
+} from '@/api/lease/lease.js'
 
 export default {
   name: 'LeasePage',
   components: {
-    MapLocation
+    MapLocation,
   },
   computed: {
     commonEnum() {
       return commonEnum
     },
-    // 检查是否可以支付
+    // 检查是否可以支付 - 直接验证，不依赖formData默认值
     canPay() {
-      return this.formData.name.trim() && 
+      const nameValid = this.formData.name.trim().length > 0
-             this.formData.phone.trim() && 
+      const phoneValid = this.formData.phone.trim().length > 0
-             this.formData.address.trim() && 
+      const addressValid = this.formData.address.trim().length > 0
-             this.formData.equipmentId && 
+      const equipmentSelected = !!this.formData.equipmentId
-             this.formData.periodId && 
+      const packageSelected = !!this.formData.periodId
-             parseFloat(this.totalAmount) > 0
+      const amountValid = parseFloat(this.totalAmount) > 0
+      
+      const canPayResult = nameValid && phoneValid && addressValid && 
+                          equipmentSelected && packageSelected && amountValid
+      
+      // 实时调试信息
+      console.log('🔍 canPay 实时检查:', {
+        nameValid,
+        phoneValid,
+        addressValid,
+        equipmentSelected,
+        packageSelected,
+        amountValid,
+        canPay: canPayResult
+      })
+      
+      return canPayResult
+    },
+  },
+  watch: {
+    // 监控关键数据变化（可选，用于调试）
+    'formData.name'() {
+      console.log('🔍 姓名变化:', this.formData.name)
+    },
+    'formData.phone'() {
+      console.log('🔍 手机号变化:', this.formData.phone)
+    },
+    'formData.address'() {
+      console.log('🔍 地址变化:', this.formData.address)
+    },
+    'formData.equipmentId'() {
+      console.log('🔍 设备ID变化:', this.formData.equipmentId)
+    },
+    'formData.periodId'() {
+      console.log('🔍 套餐ID变化:', this.formData.periodId)
+    },
+    'totalAmount'() {
+      console.log('🔍 总金额变化:', this.totalAmount)
     }
   },
   onLoad() {
@@ -153,7 +198,7 @@ export default {
   data() {
     return {
       formData: {
-        name: '张珊珊',
+        name: '',
         phone: '',
         address: '',
         detailAddress: '',
@@ -171,6 +216,8 @@ export default {
     }
   },
   methods: {
+
+
     // 地图组件事件处理
     onLocationSuccess(location) {
       console.log('位置获取成功:', location)
@@ -256,7 +303,7 @@ export default {
           // 清空之前选择的套餐
           this.formData.period = ''
           this.formData.periodId = ''
-          this.formData.equipmentSuitId=''
+
           this.selectedPackage = null
           this.totalAmount = '0.00'
 
@@ -297,8 +344,8 @@ export default {
           this.formData.period = selectedPackage.name
           this.formData.periodId = selectedPackage.id
           this.totalAmount = selectedPackage.amount.toFixed(2)
-          
           console.log('选中套餐:', selectedPackage)
+          console.log('选中时长:', this.formData.periodId)
         },
       })
     },
@@ -366,7 +413,7 @@ export default {
               ...this.formData,
               amount: this.totalAmount,
               selectedDevice: this.selectedDevice,
-              selectedPackage: this.selectedPackage
+              selectedPackage: this.selectedPackage,
             })
 
             uni.showToast({
@@ -484,8 +531,6 @@ export default {
   }
 }
 
-
-
 // 选择器
 .selector {
   flex: 3;
@@ -625,4 +670,3 @@ export default {
   }
 }
 </style>
-