Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
23ffb1af 1 parent a0295d7a

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

统一使用UserServiceAgreementModal组件替换多处支付协议弹框实现
Inline Side-by-side
Showing 4 changed files with 26 additions and 142 deletions
......@@ -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"
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>
@confirm="() => { protocolVisible = false; isChecked = true; }"
@cancel="protocolVisible = false"
/>
</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. 平台有权对异常交易进行风险控制。
......
......@@ -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">
......
<!--
* @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"
: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>
@confirm="() => { protocolVisible = false; isChecked = true; }"
@cancel="protocolVisible = false"
/>
</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. 平台有权对异常交易进行风险控制。
......
<!--
* @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"
: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>
@confirm="() => { protocolVisible = false; isChecked = true; }"
@cancel="protocolVisible = false"
/>
</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. 平台有权对异常交易进行风险控制。
......