通过安装协议之后才能进行申请租赁

pages/lease/lease.vue

@@ -95,6 +95,14 @@
           {{ `立即支付 ¥${totalAmount}` }}
         </button>
 
+        <view class="agreement">
+          <view :class="{ checked: hasAgreed }" class="checkbox" @click="hasAgreed = !hasAgreed">
+            <text v-if="hasAgreed">✓</text>
+          </view>
+          <text class="text">我已阅读并同意</text>
+          <text class="link" @click="$refs.popup.open()">《安装协议》</text>
+        </view>
+
         <view class="payment-details">
           <view class="details-header" @click="toggleDetails">
             <text class="details-title">明细</text>
@@ -179,7 +187,9 @@ export default {
     // 检查是否可以支付 - 直接验证，不依赖formData默认值
   },
   onShow() {
-    this.$refs.popup.open()
+    if (!this.hasAgreed) {
+      ;(this.$refs.popup.open(), (this.hasAgreed = true))
+    }
   },
   onLoad() {
     uni.authorize({
@@ -193,6 +203,7 @@ export default {
   },
   data() {
     return {
+      hasAgreed: false,
       formData: {
         name: '',
         phone: '',
@@ -372,6 +383,14 @@ export default {
         return
       }
 
+      if (!this.hasAgreed) {
+        uni.showToast({
+          title: '请同意安装协议',
+          icon: 'none',
+        })
+        return
+      }
+
       // 表单验证
       if (!this.formData.name.trim()) {
         uni.showToast({
@@ -662,7 +681,7 @@ export default {
     border-radius: 10rpx;
     font-size: 32rpx;
     font-weight: bold;
-    margin-bottom: 40rpx;
+
     box-shadow: 0 10rpx 30rpx rgba(255, 154, 158, 0.3);
     transition: all 0.3s ease;
 
@@ -804,4 +823,44 @@ export default {
     }
   }
 }
+
+.agreement {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  padding: 30rpx;
+
+  .checkbox {
+    width: 28rpx;
+    height: 28rpx;
+    border: 2rpx solid #ff6b35;
+    border-radius: 6rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+
+    &.checked {
+      background: #ff6b35;
+    }
+
+    text {
+      color: #fff;
+      font-size: 18rpx;
+      font-weight: bold;
+    }
+  }
+
+  .text {
+    font-size: 24rpx;
+    color: #666;
+  }
+
+  .link {
+    font-size: 24rpx;
+    color: #ff6b35;
+    text-decoration: underline;
+  }
+}
 </style>