feat(authCar): 添加支付协议勾选功能及弹窗

增加支付协议勾选组件和协议弹窗展示功能修改认证按钮逻辑，需同意协议方可操作添加用户协议状态检查及更新逻辑

feat(authCar): 添加支付协议勾选功能及弹窗
增加支付协议勾选组件和协议弹窗展示功能修改认证按钮逻辑，需同意协议方可操作添加用户协议状态检查及更新逻辑
hookehuyr
Commit 45567965026221187d32a09e3c041da0dfa92350 45567965 1 parent b6f7ca69
Showing 3 changed files with 208 additions and 6 deletions
src/pages/authCar/index.less
src/pages/authCar/index.vue
src/pages/collectionSettings/index.vue
--- a/src/pages/authCar/index.less
View file @4556796
+++ b/src/pages/authCar/index.less
View file @4556796
@@ -499,3 +499,85 @@
 .popup-content::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
 }
+
+/* 协议勾选区域样式 */
+.agreement-section {
+  margin: 32rpx 0;
+  padding: 0 32rpx;
+  text-align: center;
+
+  .agreement-checkbox {
+    font-size: 28rpx;
+
+    .checkbox-text {
+      white-space: nowrap;
+      display: inline-block;
+    }
+
+    .agreement-link {
+      color: #ffa500;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+}
+
+/* 支付协议弹框样式 */
+.protocol-container {
+  width: 100%;
+  height: 100vh;
+  background: white;
+  display: flex;
+  flex-direction: column;
+}
+
+.protocol-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32rpx 40rpx;
+  border-bottom: 1rpx solid #eee;
+  background: white;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.protocol-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.close-btn {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.close-text {
+  font-size: 40rpx;
+  color: #666;
+  line-height: 1;
+}
+
+.protocol-scroll {
+  flex: 1;
+  padding: 0 40rpx;
+}
+
+.protocol-body {
+  padding: 40rpx 0;
+}
+
+.protocol-text {
+  font-size: 28rpx;
+  line-height: 1.8;
+  color: #333;
+  white-space: pre-line;
+}
--- a/src/pages/authCar/index.vue
View file @4556796
+++ b/src/pages/authCar/index.vue
View file @4556796
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-04 13:29:45
+ * @LastEditTime: 2025-08-05 20:33:55
  * @FilePath: /jgdl/src/pages/authCar/index.vue
  * @Description: 认证车源
 -->
@@ -101,17 +101,63 @@
           </view>
         </scroll-view>
+        <!-- 协议勾选区域 -->
+        <div v-if="!hasAgreed" class="agreement-section">
+            <nut-checkbox v-model="isChecked" class="agreement-checkbox">
+                <view class="checkbox-text">
+                    <text>我已阅读并同意</text>
+                    <text class="agreement-link" @tap.stop="showProtocol">
+                        《支付协议》
+                    </text>
+                </view>
+            </nut-checkbox>
+        </div>
+
         <!-- 底部按钮 -->
         <view class="popup-footer">
           <nut-button plain class="footer-btn cancel-btn" @click="showAuthInfoPopup = false">
             关闭
           </nut-button>
-          <nut-button type="warning" class="footer-btn confirm-btn" color="#fb923c" @click="handleConfirmAuth">
+          <nut-button
+            type="warning"
+            class="footer-btn confirm-btn"
+            color="#fb923c"
+            :disabled="!hasAgreed && !isChecked"
+            @click="handleConfirmAuth"
+          >
             知道了
           </nut-button>
         </view>
       </view>
     </nut-popup>
+
+    <!-- 支付协议弹框 -->
+    <nut-popup
+        v-model:visible="protocolVisible"
+        position="right"
+        :closeable="true"
+        :close-on-click-overlay="true"
+        :safe-area-inset-bottom="true"
+        :style="{ width: '100%', height: '100%' }"
+        @close="protocolVisible = false"
+    >
+        <view class="protocol-container">
+            <!-- 标题栏 -->
+            <view class="protocol-header">
+                <text class="protocol-title">支付协议</text>
+                <view class="close-btn" @click="protocolVisible = false">
+                    <text class="close-text">×</text>
+                </view>
+            </view>
+
+            <!-- 内容区域 -->
+            <scroll-view class="protocol-scroll" :scroll-y="true">
+                <view class="protocol-body">
+                    <view class="protocol-text">{{ protocolContent }}</view>
+                </view>
+            </scroll-view>
+        </view>
+    </nut-popup>
   </view>
 </template>
@@ -125,8 +171,13 @@ import './index.less'
 // 接口导入
 import { getVehicleListAPI, getArticleListAPI } from '@/api/car';
 import { getVerificationPriceAPI } from '@/api/other';
+import { updateProfileAPI, getProfileAPI } from '@/api/index';
+import { useUserStore } from '@/stores/user';
 import { DEFAULT_COVER_IMG } from '@/utils/config'
+
+const userStore = useUserStore()
+
 // Banner数据
 const bannerList = ref([])
@@ -154,6 +205,20 @@ const toastType = ref('success')
 // 认证费用说明弹窗
 const showAuthInfoPopup = ref(false)
+// 协议相关数据
+const isChecked = ref(false)
+const hasAgreed = ref(false)
+const protocolVisible = ref(false)
+
+// 支付协议内容
+const protocolContent = ref(`
+1. 用户在使用捡个电驴收款服务时，需遵守相关法律法规。
+2. 平台有权对异常交易进行风险控制。
+3. 用户应确保收款信息的真实性和准确性。
+4. 平台将按照约定收取相应的服务费用。
+5. 如有争议，双方应友好协商解决。
+`)
+
 // 滚动样式
 const scrollStyle = computed(() => {
   return {
@@ -172,7 +237,30 @@ const handleAuth = () => {
 /**
  * 确认认证，跳转到认证页面
  */
-const handleConfirmAuth = () => {
+const handleConfirmAuth = async () => {
+  // 如果未同意协议且未勾选，不允许操作
+  if (!hasAgreed.value && !isChecked.value) {
+    return
+  }
+
+  // 如果勾选了但还未同意，先更新协议状态
+  if (!hasAgreed.value && isChecked.value) {
+    try {
+      const result = await updateProfileAPI({
+        is_signed: true
+      })
+
+      if (result.code) {
+        hasAgreed.value = true
+        if (userStore.userInfo) {
+          userStore.userInfo.is_signed = true
+        }
+      }
+    } catch (error) {
+      console.error('更新协议状态失败:', error)
+    }
+  }
+
   // 关闭弹窗
   showAuthInfoPopup.value = false
   // 跳转到认证页面
@@ -194,6 +282,34 @@ const onCarClick = (car) => {
 const { toggleFavorite } = useFavorite()
 /**
+ * 显示支付协议
+ */
+const showProtocol = () => {
+  protocolVisible.value = true
+}
+
+/**
+ * 检查用户是否已同意过协议
+ */
+const checkAgreementStatus = async () => {
+  try {
+    const result = await getProfileAPI()
+
+    if (result.code && result.data) {
+      hasAgreed.value = result.data.is_signed || false
+      if (userStore.userInfo) {
+        userStore.userInfo.is_signed = result.data.is_signed
+      }
+    } else {
+      hasAgreed.value = userStore.userInfo?.is_signed || false
+    }
+  } catch (error) {
+    console.error('获取用户协议状态失败:', error)
+    hasAgreed.value = userStore.userInfo?.is_signed || false
+  }
+}
+
+/**
  * 加载认证车辆数据
  * @param {boolean} isLoadMore - 是否为加载更多
  */
@@ -288,6 +404,8 @@ const getVerificationPrice = async () => {
 // 初始化
 onMounted(async () => {
+  // 检查协议状态
+  await checkAgreementStatus()
   // 加载初始认证车辆数据
   await loadAuthCarData()
   // 获取认证费用
--- a/src/pages/collectionSettings/index.vue
View file @4556796
+++ b/src/pages/collectionSettings/index.vue
View file @4556796
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-05 18:35:51
+ * @LastEditTime: 2025-08-05 20:03:22
  * @FilePath: /jgdl/src/pages/collectionSettings/index.vue
  * @Description: 收款设置
 -->
@@ -41,7 +41,7 @@
     <nut-popup
       v-model:visible="showAccountModal"
       position="bottom"
-      :style="{ width: '100%', height: '80%' }"
+      :style="{ width: '100%', height: '85%' }"
       :catch-move="true"
       closeable
       close-icon-position="top-right"
@@ -69,6 +69,7 @@
               placeholder="请输入银行账号"
               class="form-input"
               type="number"
+              :cursorSpacing="50"
             />
           </view>
         </view>
@@ -98,7 +99,7 @@
     <nut-popup
       v-model:visible="showIdentityModal"
       position="bottom"
-      :style="{ width: '100%', height: '80%' }"
+      :style="{ width: '100%', height: '85%' }"
       :catch-move="true"
       closeable
       close-icon-position="top-right"
@@ -127,6 +128,7 @@
               class="form-input"
               maxlength="18"
               @blur="handleIdCardBlur"
+              :cursorSpacing="50"
             />
             <text v-if="idCardError" class="error-text">{{ idCardError }}</text>
           </view>