refactor(协议弹框): 将支付协议弹框替换为用户服务协议组件

统一使用UserServiceAgreementModal组件替换多处支付协议弹框实现

refactor(协议弹框): 将支付协议弹框替换为用户服务协议组件
统一使用UserServiceAgreementModal组件替换多处支付协议弹框实现
hookehuyr
Commit 23ffb1af1c255f6951a6a5a0cfb709c7c932f486 23ffb1af 1 parent a0295d7a
Showing 4 changed files with 28 additions and 144 deletions
src/components/PaymentAgreementModal.vue
src/components/PrivacyAgreementModal.vue
src/components/payCard.vue
src/pages/authCar/index.vue
--- a/src/components/PaymentAgreementModal.vue
View file @23ffb1a
+++ b/src/components/PaymentAgreementModal.vue
View file @23ffb1a
@@ -31,7 +31,7 @@
                         <view class="checkbox-text">
                             <text>我已阅读并同意</text>
                             <text class="agreement-link" @tap.stop="showProtocol">
-                                《支付协议》
+                                《用户服务协议》
                             </text>
                         </view>
                     </nut-checkbox>
@@ -75,33 +75,12 @@
             </div>
         </div>
-        <!-- 支付协议弹框 -->
+        <!-- 用户服务协议弹框 -->
-        <nut-popup
+          <UserServiceAgreementModal
-            v-model:visible="protocolVisible"
+              v-model:visible="protocolVisible"
-            position="right"
+              @confirm="() => { protocolVisible = false; isChecked = true; }"
-            :closeable="true"
+              @cancel="protocolVisible = false"
-            :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>
     </nut-popup>
 </template>
@@ -109,6 +88,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
 import Taro from '@tarojs/taro'
+import UserServiceAgreementModal from '@/components/UserServiceAgreementModal.vue'
 // 导入接口
 import { updateProfileAPI, getProfileAPI, bindJeePayAPI } from '@/api/index'
@@ -163,7 +143,7 @@ const paymentDescription = ref('交易金额会在交易完成后的3个工作
 // 扣费说明内容
 const feeDescription = ref('在每笔交易过程中，平台将抽取最终成交金额的1%作为平台服务费。')
-// 支付协议内容
+// 用户服务协议内容
 const protocolContent = ref(`
 1. 用户在使用捡个电驴收款服务时，需遵守相关法律法规。
 2. 平台有权对异常交易进行风险控制。
--- a/src/components/PrivacyAgreementModal.vue
View file @23ffb1a
+++ b/src/components/PrivacyAgreementModal.vue
View file @23ffb1a
@@ -78,7 +78,7 @@
           <view class="content-text" v-html="contentText"></view>
         </view>
       </scroll-view>
-      
+
       <!-- 底部按钮 -->
       <view class="modal-footer">
         <nut-button type="primary" block color="#fb923c" @click="onCloseContentModal">
@@ -132,63 +132,6 @@ const modalVisible = computed({
   }
 })
-// 用户服务协议内容
-const userAgreementContent = `
-<div class="agreement-section">
-  <div class="section-title">1.总则</div>
-  <div class="section-content">
-    <div class="clause-item">用户在使用本平台（以下简称"平台"）服务前，请务必仔细阅读并同意本协议。</div>
-    <div class="clause-item">注册或使用即视为接受本协议全部条款，包括免责声明及责任限制。</div>
-  </div>
-</div>
-
-<div class="agreement-section">
-  <div class="section-title">2.服务内容</div>
-  <div class="section-content">
-    <div class="clause-item">平台仅为校园用户提供二手电动车交易信息发布、浏览及沟通的中介服务，不参与实际交易（如定价、支付、交付），亦不保证车辆质量、合法性或卖家描述的真实性。</div>
-  </div>
-</div>
-
-<div class="agreement-section">
-  <div class="section-title">3.用户义务</div>
-  <div class="section-content">
-    <div class="clause-item">实名认证：需通过手机号注册，并提供真实学生身份信息（如校园邮箱/学号）。</div>
-    <div class="clause-item">信息真实性：卖家需如实描述车辆状况（如年限、里程、维修记录），禁止虚假宣传。</div>
-    <div class="clause-item">合法交易：禁止交易赃车、改装车或不符合校园安全规定的车辆。</div>
-  </div>
-</div>
-
-<div class="agreement-section">
-  <div class="section-title">4.责任限制与免责</div>
-  <div class="section-content">
-    <div class="clause-item">交易风险自担：平台不对车辆质量、权属纠纷或交易损失承担责任，用户需自行验车并签订书面交易协议。</div>
-    <div class="clause-item">纠纷处理：如发生争议，用户应协商解决或通过法律途径处理，平台无义务参与调解。</div>
-    <div class="clause-item">服务中断：因技术维护、不可抗力导致的服务暂停，平台不承担赔偿责任。</div>
-  </div>
-</div>
-
-<div class="agreement-section">
-  <div class="section-title">5.知识产权</div>
-  <div class="section-content">
-    <div class="clause-item">平台所有内容（包括Logo、界面设计）版权归开发者所有，未经许可不得复制、商用。</div>
-  </div>
-</div>
-
-<div class="agreement-section">
-  <div class="section-title">6.协议修改</div>
-  <div class="section-content">
-    <div class="clause-item">平台有权修订本协议，修改后将通过公告或站内通知生效，继续使用视为接受新条款。</div>
-  </div>
-</div>
-
-<div class="agreement-section">
-  <div class="section-title">7.关键免责条款强化建议</div>
-  <div class="section-content">
-    <div class="clause-item">平台仅提供信息服务，交易风险由用户自行承担。任何车辆质量问题、权属纠纷或资金损失均与平台无关。</div>
-  </div>
-</div>
-`
-
 // 隐私政策内容
 const privacyPolicyContent = `
 <div class="agreement-section">
--- a/src/components/payCard.vue
View file @23ffb1a
+++ b/src/components/payCard.vue
View file @23ffb1a
 <!--
  * @Date: 2023-12-20 14:11:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-08 10:33:57
+ * @LastEditTime: 2025-08-11 10:15:24
  * @FilePath: /jgdl/src/components/paycard.vue
  * @Description: 文件描述
 -->
@@ -19,7 +19,7 @@
             <view class="checkbox-text">
               <text>我已阅读并同意</text>
               <text class="agreement-link" @tap.stop="showProtocol">
-                《支付协议》
+                《用户服务协议》
               </text>
             </view>
           </nut-checkbox>
@@ -37,32 +37,12 @@
       </view>
     </nut-action-sheet>
-    <!-- 支付协议弹框 -->
+    <!-- 用户服务协议弹框 -->
-    <nut-popup
+    <UserServiceAgreementModal
       v-model:visible="protocolVisible"
-      position="right"
+      @confirm="() => { protocolVisible = false; isChecked = true; }"
-      :close-on-click-overlay="true"
+      @cancel="protocolVisible = false"
-      :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>
   </div>
 </template>
@@ -72,6 +52,7 @@ import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { getCurrentPageUrl } from "@/utils/weapp";
 import { payAPI, payCheckAPI, getProfileAPI, updateProfileAPI } from '@/api/index'
 import { useUserStore } from '@/stores/user'
+import UserServiceAgreementModal from '@/components/UserServiceAgreementModal.vue'
 /**
  * 格式化时间
@@ -114,7 +95,7 @@ const protocolVisible = ref(false);
 // 支付loading状态
 const isPaymentLoading = ref(false);
-// 支付协议内容
+// 用户服务协议内容
 const protocolContent = ref(`
 1. 用户在使用捡个电驴支付服务时，需遵守相关法律法规。
 2. 平台有权对异常交易进行风险控制。
--- a/src/pages/authCar/index.vue
View file @23ffb1a
+++ b/src/pages/authCar/index.vue
View file @23ffb1a
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-05 20:33:55
+ * @LastEditTime: 2025-08-11 10:09:54
  * @FilePath: /jgdl/src/pages/authCar/index.vue
  * @Description: 认证车源
 -->
@@ -107,7 +107,7 @@
                 <view class="checkbox-text">
                     <text>我已阅读并同意</text>
                     <text class="agreement-link" @tap.stop="showProtocol">
-                        《支付协议》
+                        《用户服务协议》
                     </text>
                 </view>
             </nut-checkbox>
@@ -131,33 +131,12 @@
       </view>
     </nut-popup>
-    <!-- 支付协议弹框 -->
+    <!-- 用户服务协议弹框 -->
-    <nut-popup
+      <UserServiceAgreementModal
         v-model:visible="protocolVisible"
-        position="right"
+        @confirm="() => { protocolVisible = false; isChecked = true; }"
-        :closeable="true"
+        @cancel="protocolVisible = false"
-        :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>
@@ -167,6 +146,7 @@ import { ref, computed, onMounted } from 'vue'
 import { Check, Heart1, HeartFill } from '@nutui/icons-vue-taro'
 import { useFavorite } from '@/composables/useFavorite'
 import BannerSwiper from '@/components/BannerSwiper.vue'
+import UserServiceAgreementModal from '@/components/UserServiceAgreementModal.vue'
 import './index.less'
 // 接口导入
 import { getVehicleListAPI, getArticleListAPI } from '@/api/car';
@@ -210,7 +190,7 @@ const isChecked = ref(false)
 const hasAgreed = ref(false)
 const protocolVisible = ref(false)
-// 支付协议内容
+// 用户服务协议内容
 const protocolContent = ref(`
 1. 用户在使用捡个电驴收款服务时，需遵守相关法律法规。
 2. 平台有权对异常交易进行风险控制。