781 lines
22 KiB
Vue
781 lines
22 KiB
Vue
<template>
|
||
<view class="real-name-auth-page">
|
||
<view class="header-fixed-wrapper" :style="{ height: headerHeight + 'px' }">
|
||
<NavHeader title="实名认证" />
|
||
</view>
|
||
<view class="main-wrap" :style="{ paddingTop: headerHeight + 'px' }">
|
||
<!-- 加载中 -->
|
||
<view class="loading-wrap" v-if="realNameLoading">
|
||
<text class="loading-text">加载实名信息中...</text>
|
||
</view>
|
||
|
||
<!-- 表单内容区 -->
|
||
<scroll-view class="form-content" scroll-y="true" v-else>
|
||
<!-- 基本信息 -->
|
||
<view class="form-section">
|
||
<view class="section-title">基本信息</view>
|
||
|
||
<!-- 实名状态提示（不可编辑时显示） -->
|
||
<view class="status-tip" v-if="!formEditable && realNameStatus != null">
|
||
<text class="status-tip-text">当前状态：{{ realNameStatusText }}，不可修改</text>
|
||
</view>
|
||
|
||
<!-- 真实姓名 -->
|
||
<view class="form-item">
|
||
<view class="input-wrapper">
|
||
<text class="input-label">真实姓名</text>
|
||
<input
|
||
class="input-field"
|
||
type="text"
|
||
v-model="formData.realName"
|
||
placeholder="请输入真实姓名"
|
||
maxlength="20"
|
||
:disabled="!formEditable"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 证件类型 -->
|
||
<view class="form-item">
|
||
<view class="input-wrapper">
|
||
<text class="input-label">证件类型</text>
|
||
<picker
|
||
v-if="formEditable"
|
||
mode="selector"
|
||
:range="idTypeOptions"
|
||
range-key="label"
|
||
:value="idTypeIndex"
|
||
@change="handleIdTypeChange"
|
||
>
|
||
<view class="picker-view">
|
||
<text :class="['picker-text', !formData.idType ? 'placeholder' : '']">
|
||
{{ formData.idType ? idTypeOptions.find(item => item.value === formData.idType)?.label : '请选择证件类型' }}
|
||
</text>
|
||
</view>
|
||
</picker>
|
||
<text v-else class="picker-text readonly">{{ idTypeLabel }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 证件号码 -->
|
||
<view class="form-item">
|
||
<view class="input-wrapper">
|
||
<text class="input-label">证件号码</text>
|
||
<input
|
||
class="input-field"
|
||
type="text"
|
||
v-model="formData.idNumber"
|
||
placeholder="请输入证件号码"
|
||
maxlength="30"
|
||
:disabled="!formEditable"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 身份证照片 -->
|
||
<view class="form-section">
|
||
<view class="section-title">身份证照片</view>
|
||
|
||
<!-- 身份证正面 -->
|
||
<view class="form-item">
|
||
<view class="upload-wrapper">
|
||
<text class="upload-label">身份证正面</text>
|
||
<view class="upload-box" :class="{ disabled: !formEditable }" @click="formEditable && chooseImage('idFrontImg')">
|
||
<image
|
||
v-if="formData.idFrontImg"
|
||
class="uploaded-image"
|
||
:src="formData.idFrontImg"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view v-else class="upload-placeholder">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">点击上传</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 身份证背面 -->
|
||
<view class="form-item">
|
||
<view class="upload-wrapper">
|
||
<text class="upload-label">身份证背面</text>
|
||
<view class="upload-box" :class="{ disabled: !formEditable }" @click="formEditable && chooseImage('idBackImg')">
|
||
<image
|
||
v-if="formData.idBackImg"
|
||
class="uploaded-image"
|
||
:src="formData.idBackImg"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view v-else class="upload-placeholder">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">点击上传</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 驾驶证照片 -->
|
||
<view class="form-section">
|
||
<view class="section-title">驾驶证照片</view>
|
||
|
||
<!-- 驾驶证正面 -->
|
||
<view class="form-item">
|
||
<view class="upload-wrapper">
|
||
<text class="upload-label">驾驶证正面</text>
|
||
<view class="upload-box" :class="{ disabled: !formEditable }" @click="formEditable && chooseImage('driverLicenseFrontImg')">
|
||
<image
|
||
v-if="formData.driverLicenseFrontImg"
|
||
class="uploaded-image"
|
||
:src="formData.driverLicenseFrontImg"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view v-else class="upload-placeholder">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">点击上传</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 驾驶证背面 -->
|
||
<view class="form-item">
|
||
<view class="upload-wrapper">
|
||
<text class="upload-label">驾驶证背面</text>
|
||
<view class="upload-box" :class="{ disabled: !formEditable }" @click="formEditable && chooseImage('driverLicenseBackImg')">
|
||
<image
|
||
v-if="formData.driverLicenseBackImg"
|
||
class="uploaded-image"
|
||
:src="formData.driverLicenseBackImg"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view v-else class="upload-placeholder">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">点击上传</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 行驶证照片 -->
|
||
<view class="form-section">
|
||
<view class="section-title">行驶证照片</view>
|
||
|
||
<!-- 行驶证正面 -->
|
||
<view class="form-item">
|
||
<view class="upload-wrapper">
|
||
<text class="upload-label">行驶证正面</text>
|
||
<view class="upload-box" :class="{ disabled: !formEditable }" @click="formEditable && chooseImage('vehicleLicenseFrontImg')">
|
||
<image
|
||
v-if="formData.vehicleLicenseFrontImg"
|
||
class="uploaded-image"
|
||
:src="formData.vehicleLicenseFrontImg"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view v-else class="upload-placeholder">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">点击上传</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 行驶证背面 -->
|
||
<view class="form-item">
|
||
<view class="upload-wrapper">
|
||
<text class="upload-label">行驶证背面</text>
|
||
<view class="upload-box" :class="{ disabled: !formEditable }" @click="formEditable && chooseImage('vehicleLicenseBackImg')">
|
||
<image
|
||
v-if="formData.vehicleLicenseBackImg"
|
||
class="uploaded-image"
|
||
:src="formData.vehicleLicenseBackImg"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view v-else class="upload-placeholder">
|
||
<text class="upload-icon">+</text>
|
||
<text class="upload-text">点击上传</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 备注信息 -->
|
||
<view class="form-section">
|
||
<view class="section-title">备注信息</view>
|
||
|
||
<view class="form-item">
|
||
<view class="textarea-wrapper">
|
||
<textarea
|
||
class="textarea-field"
|
||
v-model="formData.imgVerifyRemark"
|
||
placeholder="请输入备注信息（选填）"
|
||
maxlength="200"
|
||
:auto-height="true"
|
||
:disabled="!formEditable"
|
||
></textarea>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 协议同意区域（仅可编辑时显示） -->
|
||
<view class="agreement-section" v-if="formEditable">
|
||
<view class="agreement-checkbox" @click="toggleAgreement">
|
||
<view class="checkbox-icon" :class="{ checked: agreedToTerms }">
|
||
<text v-if="agreedToTerms" class="checkmark">✓</text>
|
||
</view>
|
||
<text class="agreement-text">
|
||
我已阅读并同意
|
||
<text class="link-text" @click.stop="goToUserAgreement">《用户服务协议》</text>
|
||
和
|
||
<text class="link-text" @click.stop="goToPrivacyPolicy">《隐私政策》</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮（仅可编辑时显示） -->
|
||
<view class="submit-section" v-if="formEditable">
|
||
<button
|
||
class="submit-btn"
|
||
:class="{ disabled: loading || !agreedToTerms }"
|
||
:disabled="loading || !agreedToTerms"
|
||
@click="handleSubmit"
|
||
>
|
||
{{ loading ? '提交中...' : '提交认证' }}
|
||
</button>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { createRealNameInfo, getRealNameInfo } from '@/api/profile.js'
|
||
import NavHeader from "@/components/NavHeader/NavHeader.vue";
|
||
|
||
export default {
|
||
components: {
|
||
NavHeader
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight: 0,
|
||
loading: false,
|
||
realNameLoading: true, // 实名信息加载中
|
||
realNameStatus: null, // 实名状态：0 未认证/没有 1 待审核 2 已通过 3 已退回 4 已过期
|
||
agreedToTerms: false, // 是否同意协议
|
||
idTypeIndex: 0,
|
||
idTypeOptions: [
|
||
{ label: '身份证', value: 1 },
|
||
{ label: '其他', value: 2 }
|
||
],
|
||
formData: {
|
||
realName: '',
|
||
idType: null,
|
||
idNumber: '',
|
||
idFrontImg: '',
|
||
idBackImg: '',
|
||
driverLicenseFrontImg: '',
|
||
driverLicenseBackImg: '',
|
||
vehicleLicenseFrontImg: '',
|
||
vehicleLicenseBackImg: '',
|
||
imgVerifyRemark: ''
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
headerHeight() {
|
||
return this.statusBarHeight + 44
|
||
},
|
||
// 仅 没有(无数据/0)、退回(3)、过期(4) 可编辑；待审核(1)、已通过(2) 不可编辑
|
||
formEditable() {
|
||
const s = this.realNameStatus
|
||
if (s == null) return true
|
||
return s === 0 || s === 3 || s === 4
|
||
},
|
||
realNameStatusText() {
|
||
const map = { 0: '未认证', 1: '待审核', 2: '已通过', 3: '已退回', 4: '已过期' }
|
||
return map[this.realNameStatus] ?? '未知'
|
||
},
|
||
idTypeLabel() {
|
||
if (this.formData.idType == null) return '请选择证件类型'
|
||
const opt = this.idTypeOptions.find(item => item.value === this.formData.idType)
|
||
return opt ? opt.label : '请选择证件类型'
|
||
}
|
||
},
|
||
onLoad() {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
||
this.loadRealNameInfo()
|
||
},
|
||
methods: {
|
||
async loadRealNameInfo() {
|
||
this.realNameLoading = true
|
||
try {
|
||
const userInfo = uni.getStorageSync('userInfo')
|
||
if (!userInfo || !userInfo.id) {
|
||
this.realNameStatus = 0
|
||
return
|
||
}
|
||
const res = await getRealNameInfo({ id: userInfo.id })
|
||
this.fillFormFromApi(res)
|
||
} catch (e) {
|
||
console.error('获取实名信息失败:', e)
|
||
this.realNameStatus = 0
|
||
} finally {
|
||
this.realNameLoading = false
|
||
}
|
||
},
|
||
fillFormFromApi(data) {
|
||
if (!data || typeof data !== 'object') {
|
||
this.realNameStatus = 0
|
||
return
|
||
}
|
||
const s = data.status != null ? Number(data.status) : (data.id ? 1 : 0)
|
||
this.realNameStatus = s
|
||
this.formData.realName = data.realName ?? ''
|
||
this.formData.idType = data.idType != null ? data.idType : null
|
||
this.formData.idNumber = data.idNumber ?? ''
|
||
this.formData.idFrontImg = data.idFrontImg ?? ''
|
||
this.formData.idBackImg = data.idBackImg ?? ''
|
||
this.formData.driverLicenseFrontImg = data.driverLicenseFrontImg ?? ''
|
||
this.formData.driverLicenseBackImg = data.driverLicenseBackImg ?? ''
|
||
this.formData.vehicleLicenseFrontImg = data.vehicleLicenseFrontImg ?? ''
|
||
this.formData.vehicleLicenseBackImg = data.vehicleLicenseBackImg ?? ''
|
||
this.formData.imgVerifyRemark = data.imgVerifyRemark ?? ''
|
||
const idx = this.idTypeOptions.findIndex(item => item.value === this.formData.idType)
|
||
this.idTypeIndex = idx >= 0 ? idx : 0
|
||
},
|
||
|
||
toggleAgreement() {
|
||
this.agreedToTerms = !this.agreedToTerms
|
||
},
|
||
goToUserAgreement() {
|
||
uni.navigateTo({ url: '/pages/profileSub/userAgreement' })
|
||
},
|
||
goToPrivacyPolicy() {
|
||
uni.navigateTo({ url: '/pages/profileSub/privacyPolicy' })
|
||
},
|
||
|
||
// 证件类型选择
|
||
handleIdTypeChange(e) {
|
||
this.idTypeIndex = e.detail.value
|
||
this.formData.idType = this.idTypeOptions[e.detail.value].value
|
||
},
|
||
|
||
// 选择图片
|
||
chooseImage(field) {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
const tempFilePath = res.tempFilePaths[0]
|
||
// 先显示本地预览
|
||
this.formData[field] = tempFilePath
|
||
// 上传图片到服务器
|
||
this.uploadImage(tempFilePath, field)
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择图片失败:', err)
|
||
uni.showToast({
|
||
title: '选择图片失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 上传图片
|
||
uploadImage(filePath, field) {
|
||
uni.showLoading({
|
||
title: '上传中...',
|
||
mask: true
|
||
})
|
||
|
||
// 获取token
|
||
const token = uni.getStorageSync('token')
|
||
const BASE_URL = 'https://siji.chenjuncn.top'
|
||
|
||
uni.uploadFile({
|
||
url: `${BASE_URL}/app-api/infra/file/upload`,
|
||
filePath: filePath,
|
||
name: 'file',
|
||
header: {
|
||
'Authorization': `Bearer ${token}`,
|
||
'tenant-id': '1'
|
||
},
|
||
success: (res) => {
|
||
uni.hideLoading()
|
||
try {
|
||
const data = JSON.parse(res.data)
|
||
if (data.code === 200 || data.code === 0) {
|
||
// 上传成功，保存图片URL
|
||
const imageUrl = data.data?.url || data.data || data.url
|
||
if (imageUrl) {
|
||
this.formData[field] = imageUrl
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
} else {
|
||
throw new Error('上传成功但未返回图片地址')
|
||
}
|
||
} else {
|
||
throw new Error(data.message || data.msg || '上传失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('解析上传结果失败:', error)
|
||
uni.showToast({
|
||
title: '上传失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
// 上传失败，清除预览
|
||
this.formData[field] = ''
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading()
|
||
console.error('上传图片失败:', err)
|
||
uni.showToast({
|
||
title: '上传失败，请检查网络',
|
||
icon: 'none'
|
||
})
|
||
// 上传失败，清除预览
|
||
this.formData[field] = ''
|
||
}
|
||
})
|
||
},
|
||
|
||
// 提交表单
|
||
async handleSubmit() {
|
||
// 基本验证
|
||
if (!this.formData.realName || !this.formData.realName.trim()) {
|
||
uni.showToast({
|
||
title: '请输入真实姓名',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!this.formData.idType) {
|
||
uni.showToast({
|
||
title: '请选择证件类型',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!this.formData.idNumber || !this.formData.idNumber.trim()) {
|
||
uni.showToast({
|
||
title: '请输入证件号码',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
try {
|
||
// 构建提交数据，只包含有值的字段
|
||
const submitData = {}
|
||
if (this.formData.realName) submitData.realName = this.formData.realName.trim()
|
||
if (this.formData.idType !== null) submitData.idType = this.formData.idType
|
||
if (this.formData.idNumber) submitData.idNumber = this.formData.idNumber.trim()
|
||
if (this.formData.idFrontImg) submitData.idFrontImg = this.formData.idFrontImg
|
||
if (this.formData.idBackImg) submitData.idBackImg = this.formData.idBackImg
|
||
if (this.formData.driverLicenseFrontImg) submitData.driverLicenseFrontImg = this.formData.driverLicenseFrontImg
|
||
if (this.formData.driverLicenseBackImg) submitData.driverLicenseBackImg = this.formData.driverLicenseBackImg
|
||
if (this.formData.vehicleLicenseFrontImg) submitData.vehicleLicenseFrontImg = this.formData.vehicleLicenseFrontImg
|
||
if (this.formData.vehicleLicenseBackImg) submitData.vehicleLicenseBackImg = this.formData.vehicleLicenseBackImg
|
||
if (this.formData.imgVerifyRemark) submitData.imgVerifyRemark = this.formData.imgVerifyRemark.trim()
|
||
|
||
await createRealNameInfo(submitData)
|
||
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success'
|
||
})
|
||
|
||
// 延迟返回上一页
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
} catch (error) {
|
||
console.error('提交失败:', error)
|
||
// 错误信息已在request中统一处理
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.real-name-auth-page {
|
||
min-height: 100vh;
|
||
background: #e2e8f1;
|
||
}
|
||
|
||
.header-fixed-wrapper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
background: #e2e8f1;
|
||
}
|
||
|
||
.main-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
|
||
.loading-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 80rpx 0;
|
||
.loading-text {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.form-content {
|
||
height: calc(100vh - 120rpx);
|
||
padding: 0 30rpx 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-section {
|
||
margin-bottom: 40rpx;
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 24rpx;
|
||
padding-left: 10rpx;
|
||
}
|
||
|
||
.status-tip {
|
||
margin-bottom: 20rpx;
|
||
padding: 16rpx 20rpx;
|
||
background: rgba(255, 152, 0, 0.1);
|
||
border-radius: 12rpx;
|
||
.status-tip-text {
|
||
font-size: 26rpx;
|
||
color: #e65100;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 30rpx;
|
||
|
||
.input-wrapper {
|
||
position: relative;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.input-label {
|
||
width: 160rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.input-field {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #1a1819;
|
||
}
|
||
|
||
.picker-view {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.picker-text {
|
||
font-size: 28rpx;
|
||
color: #1a1819;
|
||
|
||
&.placeholder {
|
||
color: #999999;
|
||
}
|
||
|
||
&.readonly {
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.picker-arrow {
|
||
font-size: 40rpx;
|
||
color: #cccccc;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-wrapper {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.upload-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.upload-box {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
border: 2rpx dashed #d0d0d0;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fafafa;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.uploaded-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.upload-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
|
||
.upload-icon {
|
||
font-size: 60rpx;
|
||
color: #999999;
|
||
line-height: 1;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
&.disabled {
|
||
pointer-events: none;
|
||
opacity: 0.85;
|
||
}
|
||
}
|
||
}
|
||
|
||
.textarea-wrapper {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.textarea-field {
|
||
width: 100%;
|
||
min-height: 200rpx;
|
||
font-size: 28rpx;
|
||
color: #1a1819;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement-section {
|
||
padding: 30rpx;
|
||
padding-bottom: 0;
|
||
|
||
.agreement-checkbox {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12rpx;
|
||
|
||
.checkbox-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 1rpx solid #cccccc;
|
||
border-radius: 4rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
margin-top: 4rpx;
|
||
|
||
&.checked {
|
||
background-color: #004294;
|
||
border-color: #004294;
|
||
|
||
.checkmark {
|
||
color: #ffffff;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement-text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 1.6;
|
||
flex: 1;
|
||
|
||
.link-text {
|
||
color: #004294;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.submit-section {
|
||
margin-top: 20rpx;
|
||
padding: 0 30rpx;
|
||
padding-bottom: 40rpx;
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #004294 0%, #0066cc 100%);
|
||
border-radius: 44rpx;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
&.disabled {
|
||
background: #cccccc;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
</style>
|