表单校验

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"
+
           />
 
           <!-- 详细位置 -->
@@ -80,10 +85,10 @@
 
       <!-- 支付区域 -->
       <view class="payment-section">
-        <button 
+        <button
-          :class="['pay-button', { disabled: !canPay }]" 
+          :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)
@@ -196,7 +243,7 @@ export default {
     async getDeviceTypes() {
       try {
         const response = await fetchDeviceTypes()
-        
+
         if (response.code === 200) {
           this.deviceTypes = response.data
           console.log('设备类型列表:', this.deviceTypes)
@@ -243,7 +290,7 @@ export default {
 
       // 构建设备类型选项列表
       const itemList = this.deviceTypes.map(item => item.name)
-      
+
       uni.showActionSheet({
         itemList: itemList,
         success: res => {
@@ -252,17 +299,17 @@ export default {
           this.formData.equipment = selectedDevice.name
           this.formData.equipmentId = selectedDevice.id
           this.formData.equipmentSuitId = selectedDevice.suitId
-          
+
           // 清空之前选择的套餐
           this.formData.period = ''
           this.formData.periodId = ''
-          this.formData.equipmentSuitId=''
+
           this.selectedPackage = null
           this.totalAmount = '0.00'
-          
+
           // 根据选中的设备类型获取租赁套餐
           this.getPeriodPackages(selectedDevice.suitId)
-          
+
           console.log('选中设备:', selectedDevice)
         },
       })
@@ -288,7 +335,7 @@ export default {
 
       // 构建套餐选项列表
       const itemList = this.periodPackages.map(item => `${item.name} ¥${item.amount}`)
-      
+
       uni.showActionSheet({
         itemList: itemList,
         success: res => {
@@ -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,9 +413,9 @@ export default {
               ...this.formData,
               amount: this.totalAmount,
               selectedDevice: this.selectedDevice,
-              selectedPackage: this.selectedPackage
+              selectedPackage: this.selectedPackage,
             })
-            
+
             uni.showToast({
               title: '支付成功',
               icon: 'success',
@@ -484,8 +531,6 @@ export default {
   }
 }
 
-
-
 // 选择器
 .selector {
   flex: 3;
@@ -505,7 +550,7 @@ export default {
   .selector-text {
     font-size: 28rpx;
     color: #666;
-    
+
     &.placeholder {
       color: #999;
     }
@@ -625,4 +670,3 @@ export default {
   }
 }
 </style>
-