Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
jgdl
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-08-05 20:35:12 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
45567965026221187d32a09e3c041da0dfa92350
45567965
1 parent
b6f7ca69
feat(authCar): 添加支付协议勾选功能及弹窗
增加支付协议勾选组件和协议弹窗展示功能 修改认证按钮逻辑,需同意协议方可操作 添加用户协议状态检查及更新逻辑
Show whitespace changes
Inline
Side-by-side
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
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;
}
...
...
src/pages/authCar/index.vue
View file @
4556796
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-0
4 13:29:4
5
* @LastEditTime: 2025-08-0
5 20:33:5
5
* @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()
// 获取认证费用
...
...
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: '8
0
%' }"
:style="{ width: '100%', height: '8
5
%' }"
: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: '8
0
%' }"
:style="{ width: '100%', height: '8
5
%' }"
: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>
...
...
Please
register
or
login
to post a comment