leiyun
/
cytx_mp
1
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
5 Revīzijas
1 Atzars
5.2 MiB
 
 
 
 
Koks: 9be8ec1929
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no '9be8ec1929'
${ noResults }
cytx_mp/pages/verify/verify.vue

684 rindas
16 KiB
Neapstrādāts Vainot Vēsture 

  1. <template>

  2. 	<view class="page">

  3. 		<view class="page-content">

  4. 			<view class="page-title">请确认申请人信息</view>

  5. 

  6. 			<!-- 第1步：证件类型选择 + 上传 -->

  7. 			<view class="section">

  8. 				<view class="section-header">

  9. 					<view class="step-num">1</view>

  10. 					<text class="label">为谁申请</text>

  11. 					<text class="tag warn">请用患者本人信息进行实名申请</text>

  12. 				</view>

  13. 				<view class="section-desc">请选择用来实名证件的类型</view>

  14. 

  15. 				<view class="cert-tabs">

  16. 					<view class="cert-tab" :class="{ active: certType === 'idcard' }" @tap="certType = 'idcard'">

  17. 						<text>身份证证件</text>

  18. 					</view>

  19. 					<view class="cert-tab" :class="{ active: certType === 'child' }" @tap="certType = 'child'">

  20. 						<text>无证件儿童</text>

  21. 					</view>

  22. 					<view class="cert-tab" :class="{ active: certType === 'temp' }" @tap="certType = 'temp'">

  23. 						<text>临时身份证</text>

  24. 					</view>

  25. 				</view>

  26. 

  27. 				<!-- 身份证 / 临时身份证 -->

  28. 				<view v-if="certType === 'idcard' || certType === 'temp'" class="upload-area">

  29. 					<view class="upload-item" @tap="chooseImage('front')">

  30. 						<image :src="form.frontImage || placeholderFront" mode="aspectFill" class="upload-img" />

  31. 						<text class="upload-label">请上传证件人像面</text>

  32. 					</view>

  33. 					<view class="upload-item" @tap="chooseImage('back')">

  34. 						<image :src="form.backImage || placeholderBack" mode="aspectFill" class="upload-img" />

  35. 						<text class="upload-label">请上传证件国徽面</text>

  36. 					</view>

  37. 				</view>

  38. 

  39. 				<!-- 无证件儿童 -->

  40. 				<view v-if="certType === 'child'" class="child-upload">

  41. 					<view class="child-tip">请上传近期免冠照片 <text class="tip-highlight">用于无证件儿童身份核验</text></view>

  42. 					<view class="child-desc">为了避免增加审核时长，如已办理身份证，请走身份证件通道</view>

  43. 					<view class="child-photo-box" @tap="chooseImage('child')">

  44. 						<image v-if="form.childImage" :src="form.childImage" mode="aspectFill" class="child-photo-img" />

  45. 						<view v-else class="child-photo-placeholder">

  46. 							<u-icon name="camera" size="40" color="#ccc" />

  47. 						</view>

  48. 					</view>

  49. 				</view>

  50. 			</view>

  51. 

  52. 			<!-- 第2步：信息核验 -->

  53. 			<view class="section">

  54. 				<view class="section-header">

  55. 					<view class="step-num">2</view>

  56. 					<text class="label">信息核验</text>

  57. 					<text class="tag info">如姓名有误，请进行修改再提交</text>

  58. 				</view>

  59. 				<view class="section-desc">请核对证件信息是否有误</view>

  60. 

  61. 				<view class="form-row">

  62. 					<text class="form-label">证件姓名</text>

  63. 					<input class="form-input" v-model="form.name" :placeholder="certType === 'child' ? '请输入姓名' : '上传身份证后自动识别'" />

  64. 				</view>

  65. 				<view class="form-row">

  66. 					<text class="form-label">证件号码</text>

  67. 					<input class="form-input" v-model="form.idNo" :placeholder="certType === 'child' ? '请输入身份证' : '上传身份证后自动识别'" />

  68. 				</view>

  69. 				<view class="form-row" v-if="certType !== 'child'">

  70. 					<text class="form-label">发证机关</text>

  71. 					<input class="form-input" v-model="form.authority" placeholder="上传身份证后自动识别" />

  72. 				</view>

  73. 				<view class="form-row border-none" v-if="certType !== 'child'">

  74. 					<text class="form-label">有效期限</text>

  75. 					<input class="form-input" v-model="form.validity" placeholder="上传身份证后自动识别" />

  76. 				</view>

  77. 			</view>

  78. 

  79. 			<!-- 第3步：手机号码绑定 -->

  80. 			<view class="section">

  81. 				<view class="section-header">

  82. 					<view class="step-num">3</view>

  83. 					<text class="label">手机号码绑定</text>

  84. 				</view>

  85. 				<view class="section-desc">请输入未进行过平台认证的号码进行绑定</view>

  86. 

  87. 				<view class="phone-row">

  88. 					<input class="phone-input" type="number" v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />

  89. 				</view>

  90. 				<view class="sms-row">

  91. 					<input class="sms-input" type="number" v-model="form.smsCode" placeholder="请输入验证码" maxlength="6" />

  92. 					<button class="sms-btn" :disabled="countdown > 0" @tap="sendSms">

  93. 						{{ countdown > 0 ? countdown + 's后重新获取' : '获取验证码' }}

  94. 					</button>

  95. 				</view>

  96. 			</view>

  97. 		</view>

  98. 

  99. 		<!-- 底部提交按钮 -->

  100. 		<view class="submit-bar">

  101. 			<button class="submit-btn" @tap="handleSubmit">提交认证</button>

  102. 		</view>

  103. 

  104. 		<!-- 绑定已有患者确认弹窗 -->

  105. 		<u-popup :show="showBindPopup" mode="center" round="12" :safeAreaInsetBottom="false" @close="showBindPopup = false">

  106. 			<view class="confirm-popup">

  107. 				<view class="confirm-title">提示</view>

  108. 				<view class="confirm-content">检测到患者信息已存在（{{ bindPatientInfo.name }} {{ bindPatientInfo.phone }}），是否确认绑定该患者信息？</view>

  109. 				<view class="confirm-btns">

  110. 					<u-button text="取消" size="normal" :plain="true" shape="circle" @click="showBindPopup = false" />

  111. 					<u-button text="确认绑定" size="normal" color="#0E63E3" shape="circle" @click="doSubmit(true)" />

  112. 				</view>

  113. 			</view>

  114. 		</u-popup>

  115. 	</view>

  116. </template>

  117. 

  118. <script setup>

  119. import { ref, reactive, onUnmounted } from 'vue'

  120. import { onShow } from '@dcloudio/uni-app'

  121. import { get, post, upload } from '@/utils/request.js'

  122. import { getUserInfo, setUserInfo } from '@/utils/cache.js'

  123. 

  124. const CDN_BASE = 'https://cdn.csybhelp.com'

  125. const placeholderFront = CDN_BASE + '/images/patient/user/idcard-front.webp?v=1'

  126. const placeholderBack = CDN_BASE + '/images/patient/user/idcard-back.webp?v=1'

  127. 

  128. const certType = ref('idcard')

  129. const countdown = ref(0)

  130. const submitting = ref(false)

  131. const showBindPopup = ref(false)

  132. const bindPatientInfo = ref({ name: '', phone: '' })

  133. let timer = null

  134. 

  135. // 身份证号格式校验（18位，含校验位）

  136. const validateIdCard = (id) => {

  137. 	if (!/^\d{17}[\dXx]$/.test(id)) return false

  138. 	const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]

  139. 	const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']

  140. 	let sum = 0

  141. 	for (let i = 0; i < 17; i++) sum += parseInt(id[i]) * weights[i]

  142. 	return checkCodes[sum % 11] === id[17].toUpperCase()

  143. }

  144. 

  145. // 证件类型映射: certType -> idCardType (后端字段)

  146. const certTypeMap = { idcard: 1, child: 2, temp: 3 }

  147. 

  148. const form = reactive({

  149. 	frontImage: '',    // 上传后的CDN URL

  150. 	backImage: '',

  151. 	childImage: '',

  152. 	name: '',

  153. 	idNo: '',

  154. 	authority: '',

  155. 	validity: '',

  156. 	gender: '',

  157. 	birthday: '',

  158. 	phone: '',

  159. 	smsCode: ''

  160. })

  161. 

  162. // 页面显示时加载已有认证信息

  163. onShow(() => {

  164. 	loadAuthInfo()

  165. })

  166. 

  167. onUnmounted(() => {

  168. 	if (timer) { clearInterval(timer); timer = null }

  169. })

  170. 

  171. const loadAuthInfo = async () => {

  172. 	try {

  173. 		const res = await get('/api/mp/authInfo')

  174. 		if (res.data.authStatus === 1) {

  175. 			const d = res.data

  176. 			// 反向映射 idCardType -> certType

  177. 			const typeMap = { 1: 'idcard', 2: 'child', 3: 'temp' }

  178. 			certType.value = typeMap[d.idCardType] || 'idcard'

  179. 			form.frontImage = d.idCardFront || ''

  180. 			form.backImage = d.idCardBack || ''

  181. 			form.childImage = d.photo || ''

  182. 			form.name = d.realName || ''

  183. 			form.idNo = d.idCard || ''

  184. 			form.authority = d.issuingAuthority || ''

  185. 			form.validity = d.validPeriod || ''

  186. 			form.gender = d.gender || ''

  187. 			form.birthday = d.birthday || ''

  188. 			form.phone = d.phone || ''

  189. 		}

  190. 	} catch (e) {

  191. 		// 未认证，忽略

  192. 	}

  193. }

  194. 

  195. // 上传图片到COS，返回CDN URL

  196. const uploadImage = (tempFilePath) => {

  197. 	return new Promise((resolve, reject) => {

  198. 		uni.showLoading({ title: '上传中...' })

  199. 		upload('/api/mp/upload', { filePath: tempFilePath, name: 'file' })

  200. 			.then(res => {

  201. 				uni.hideLoading()

  202. 				resolve(res.data.url)

  203. 			})

  204. 			.catch(err => {

  205. 				uni.hideLoading()

  206. 				uni.showToast({ title: '上传失败', icon: 'none' })

  207. 				reject(err)

  208. 			})

  209. 	})

  210. }

  211. 

  212. // OCR识别身份证正面

  213. const doOcrFront = async (imageUrl) => {

  214. 	uni.showLoading({ title: '识别中...' })

  215. 	try {

  216. 		const res = await post('/common/ocr/idcard', { imageUrl, cardSide: 'FRONT' })

  217. 		const d = res.data

  218. 		form.name = d.name || ''

  219. 		form.idNo = d.idNum || ''

  220. 		uni.hideLoading()

  221. 	} catch (e) {

  222. 		uni.hideLoading()

  223. 		uni.showToast({ title: '识别失败，请手动填写', icon: 'none' })

  224. 	}

  225. }

  226. 

  227. // OCR识别身份证反面

  228. const doOcrBack = async (imageUrl) => {

  229. 	uni.showLoading({ title: '识别中...' })

  230. 	try {

  231. 		const res = await post('/common/ocr/idcard', { imageUrl, cardSide: 'BACK' })

  232. 		form.authority = res.data.authority || ''

  233. 		form.validity = res.data.validDate || ''

  234. 		uni.hideLoading()

  235. 	} catch (e) {

  236. 		uni.hideLoading()

  237. 	}

  238. }

  239. 

  240. const chooseImage = (type) => {

  241. 	uni.chooseImage({

  242. 		count: 1,

  243. 		sizeType: ['compressed'],

  244. 		sourceType: ['album', 'camera'],

  245. 		success: async (res) => {

  246. 			const tempPath = res.tempFilePaths[0]

  247. 			try {

  248. 				const url = await uploadImage(tempPath)

  249. 				if (type === 'front') {

  250. 					form.frontImage = url

  251. 					await doOcrFront(url)

  252. 				} else if (type === 'back') {

  253. 					form.backImage = url

  254. 					await doOcrBack(url)

  255. 				} else if (type === 'child') {

  256. 					form.childImage = url

  257. 				}

  258. 			} catch (e) {

  259. 				// 上传失败已提示

  260. 			}

  261. 		}

  262. 	})

  263. }

  264. 

  265. const sendSms = async () => {

  266. 	if (countdown.value > 0) return

  267. 	if (!form.phone || form.phone.length !== 11) {

  268. 		uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })

  269. 		return

  270. 	}

  271. 	try {

  272. 		const res = await post('/api/mp/sendSmsCode', { mobile: form.phone, bizType: 'real_name_auth' })

  273. 		// 开发环境可能返回验证码

  274. 		if (res.data?.code) {

  275. 			uni.showToast({ title: `验证码: ${res.data.code}`, icon: 'none', duration: 3000 })

  276. 		} else {

  277. 			uni.showToast({ title: '验证码已发送', icon: 'none' })

  278. 		}

  279. 		countdown.value = 60

  280. 		timer = setInterval(() => {

  281. 			countdown.value--

  282. 			if (countdown.value <= 0) { clearInterval(timer); timer = null }

  283. 		}, 1000)

  284. 	} catch (e) {

  285. 		if (e && e.msg) uni.showToast({ title: e.msg, icon: 'none' })

  286. 	}

  287. }

  288. 

  289. const handleSubmit = async () => {

  290. 	if (submitting.value) return

  291. 

  292. 	// 前端校验

  293. 	const idCardType = certTypeMap[certType.value]

  294. 	if (idCardType === 2) {

  295. 		if (!form.childImage) return uni.showToast({ title: '请上传免冠照片', icon: 'none' })

  296. 	} else {

  297. 		if (!form.frontImage) return uni.showToast({ title: '请上传证件人像面', icon: 'none' })

  298. 		if (!form.backImage) return uni.showToast({ title: '请上传证件国徽面', icon: 'none' })

  299. 	}

  300. 	if (!form.name) return uni.showToast({ title: '请输入证件姓名', icon: 'none' })

  301. 	if (!form.idNo) return uni.showToast({ title: '请输入证件号码', icon: 'none' })

  302. 	// 身份证格式校验

  303. 	if (!validateIdCard(form.idNo)) return uni.showToast({ title: '身份证号格式不正确', icon: 'none' })

  304. 

  305. 	// 从身份证号解析性别和生日（提交时统一解析，确保一定有值）

  306. 	if (form.idNo.length === 18) {

  307. 		const genderNum = parseInt(form.idNo.charAt(16))

  308. 		form.gender = genderNum % 2 === 1 ? '男' : '女'

  309. 		form.birthday = `${form.idNo.substring(6, 10)}-${form.idNo.substring(10, 12)}-${form.idNo.substring(12, 14)}`

  310. 	}

  311. 

  312. 	if (!form.phone || form.phone.length !== 11) return uni.showToast({ title: '请输入正确的手机号', icon: 'none' })

  313. 	if (!form.smsCode || form.smsCode.length !== 6) return uni.showToast({ title: '请输入6位验证码', icon: 'none' })

  314. 

  315. 	await doSubmit(false)

  316. }

  317. 

  318. const doSubmit = async (confirmBind) => {

  319. 	showBindPopup.value = false

  320. 	submitting.value = true

  321. 	try {

  322. 		await post('/api/mp/authSubmit', {

  323. 			idCardType: certTypeMap[certType.value],

  324. 			idCardFront: form.frontImage,

  325. 			idCardBack: form.backImage,

  326. 			photo: form.childImage,

  327. 			realName: form.name,

  328. 			idCard: form.idNo,

  329. 			gender: form.gender,

  330. 			birthday: form.birthday,

  331. 			issuingAuthority: form.authority,

  332. 			validPeriod: form.validity,

  333. 			mobile: form.phone,

  334. 			code: form.smsCode,

  335. 			confirmBind: confirmBind || undefined

  336. 		})

  337. 

  338. 		// 刷新用户信息缓存

  339. 		try {

  340. 			const userRes = await get('/api/mp/userinfo')

  341. 			setUserInfo(userRes.data)

  342. 		} catch (e) {}

  343. 

  344. 		uni.showToast({ title: '认证成功', icon: 'success' })

  345. 		setTimeout(() => { uni.navigateBack() }, 1500)

  346. 	} catch (e) {

  347. 		if (e && e.code === 1010) {

  348. 			// 患者已存在，弹出确认绑定弹窗

  349. 			bindPatientInfo.value = {

  350. 				name: e.data?.patientName || '',

  351. 				phone: e.data?.patientPhone || ''

  352. 			}

  353. 			showBindPopup.value = true

  354. 		} else if (e && e.msg) {

  355. 			uni.showToast({ title: e.msg, icon: 'none' })

  356. 		}

  357. 	} finally {

  358. 		submitting.value = false

  359. 	}

  360. }

  361. </script>

  362. 

  363. <style lang="scss" scoped>

  364. .page {

  365. 	min-height: 100vh;

  366. 	background: #f4f4f5;

  367. 	padding-bottom: 200rpx;

  368. }

  369. 

  370. .page-content {

  371. 	padding: 32rpx;

  372. }

  373. 

  374. .page-title {

  375. 	font-size: 36rpx;

  376. 	font-weight: 600;

  377. 	color: #303133;

  378. 	margin-bottom: 32rpx;

  379. }

  380. 

  381. .section {

  382. 	background: #fff;

  383. 	border-radius: 8rpx;

  384. 	padding: 40rpx 32rpx;

  385. 	margin-bottom: 24rpx;

  386. 	border: 1rpx solid #ebeef5;

  387. }

  388. 

  389. .section-header {

  390. 	display: flex;

  391. 	align-items: center;

  392. 	flex-wrap: wrap;

  393. 	gap: 12rpx;

  394. 	margin-bottom: 8rpx;

  395. }

  396. 

  397. .step-num {

  398. 	width: 44rpx;

  399. 	height: 44rpx;

  400. 	border-radius: 50%;

  401. 	background: #0e63e3;

  402. 	color: #fff;

  403. 	font-size: 24rpx;

  404. 	font-weight: 600;

  405. 	display: flex;

  406. 	align-items: center;

  407. 	justify-content: center;

  408. 	flex-shrink: 0;

  409. }

  410. 

  411. .label {

  412. 	font-size: 32rpx;

  413. 	font-weight: 600;

  414. 	color: #303133;

  415. }

  416. 

  417. .tag {

  418. 	font-size: 22rpx;

  419. 	border-radius: 8rpx;

  420. 	padding: 4rpx 16rpx;

  421. 

  422. 	&.warn {

  423. 		color: #e6a23c;

  424. 		background: #fdf6ec;

  425. 		border: 1rpx solid #faecd8;

  426. 	}

  427. 

  428. 	&.info {

  429. 		color: #3a85f0;

  430. 		background: #e8f0fe;

  431. 		border: 1rpx solid #c6d9f7;

  432. 	}

  433. }

  434. 

  435. .section-desc {

  436. 	font-size: 26rpx;

  437. 	color: #909399;

  438. 	margin: 12rpx 0 28rpx 56rpx;

  439. }

  440. 

  441. .cert-tabs {

  442. 	display: flex;

  443. 	gap: 0;

  444. 	margin-bottom: 32rpx;

  445. }

  446. 

  447. .cert-tab {

  448. 	flex: 1;

  449. 	display: flex;

  450. 	align-items: center;

  451. 	justify-content: center;

  452. 	padding: 16rpx 0;

  453. 	border: 1rpx solid #dcdfe6;

  454. 	font-size: 26rpx;

  455. 	color: #606266;

  456. 	background: #fff;

  457. 	white-space: nowrap;

  458. 	margin-left: -1rpx;

  459. 

  460. 	&:first-child {

  461. 		border-radius: 8rpx 0 0 8rpx;

  462. 		margin-left: 0;

  463. 	}

  464. 

  465. 	&:last-child {

  466. 		border-radius: 0 8rpx 8rpx 0;

  467. 	}

  468. 

  469. 	&.active {

  470. 		color: #0e63e3;

  471. 		border-color: #0e63e3;

  472. 		background: #e8f0fe;

  473. 		position: relative;

  474. 		z-index: 1;

  475. 	}

  476. }

  477. 

  478. .upload-area {

  479. 	display: flex;

  480. 	gap: 24rpx;

  481. }

  482. 

  483. .upload-item {

  484. 	flex: 1;

  485. 	display: flex;

  486. 	flex-direction: column;

  487. 	align-items: center;

  488. }

  489. 

  490. .upload-img {

  491. 	width: 100%;

  492. 	height: 200rpx;

  493. 	border-radius: 12rpx;

  494. }

  495. 

  496. .upload-label {

  497. 	font-size: 24rpx;

  498. 	color: #606266;

  499. 	margin-top: 12rpx;

  500. }

  501. 

  502. 

  503. .child-upload {

  504. 	margin-top: 24rpx;

  505. }

  506. 

  507. .child-tip {

  508. 	font-size: 26rpx;

  509. 	color: #303133;

  510. 	margin-bottom: 8rpx;

  511. 

  512. 	.tip-highlight {

  513. 		color: #0e63e3;

  514. 		margin-left: 10rpx;

  515. 	}

  516. }

  517. 

  518. .child-desc {

  519. 	font-size: 22rpx;

  520. 	color: #909399;

  521. 	margin-bottom: 20rpx;

  522. }

  523. 

  524. .child-photo-box {

  525. 	width: 200rpx;

  526. 	height: 200rpx;

  527. 	border-radius: 12rpx;

  528. 	overflow: hidden;

  529. }

  530. 

  531. .child-photo-img {

  532. 	width: 100%;

  533. 	height: 100%;

  534. }

  535. 

  536. .child-photo-placeholder {

  537. 	width: 100%;

  538. 	height: 100%;

  539. 	background: #f5f5f5;

  540. 	display: flex;

  541. 	align-items: center;

  542. 	justify-content: center;

  543. }

  544. 

  545. .form-row {

  546. 	display: flex;

  547. 	align-items: center;

  548. 	padding: 28rpx 0;

  549. 	border-bottom: 1rpx solid #f2f6fc;

  550. 

  551. 	&.border-none {

  552. 		border-bottom: none;

  553. 	}

  554. }

  555. 

  556. .form-label {

  557. 	width: 160rpx;

  558. 	font-size: 28rpx;

  559. 	color: #303133;

  560. 	flex-shrink: 0;

  561. }

  562. 

  563. .form-input {

  564. 	flex: 1;

  565. 	font-size: 28rpx;

  566. 	color: #303133;

  567. }

  568. 

  569. .phone-row {

  570. 	margin-top: 20rpx;

  571. }

  572. 

  573. .phone-input {

  574. 	width: 100%;

  575. 	height: 80rpx;

  576. 	border: 1rpx solid #dcdfe6;

  577. 	border-radius: 8rpx;

  578. 	padding: 0 24rpx;

  579. 	font-size: 28rpx;

  580. 	box-sizing: border-box;

  581. }

  582. 

  583. .sms-row {

  584. 	display: flex;

  585. 	align-items: center;

  586. 	gap: 20rpx;

  587. 	margin-top: 20rpx;

  588. }

  589. 

  590. .sms-input {

  591. 	flex: 1;

  592. 	height: 80rpx;

  593. 	border: 1rpx solid #dcdfe6;

  594. 	border-radius: 8rpx;

  595. 	padding: 0 24rpx;

  596. 	font-size: 28rpx;

  597. 	box-sizing: border-box;

  598. }

  599. 

  600. .sms-btn {

  601. 	height: 80rpx;

  602. 	line-height: 80rpx;

  603. 	padding: 0 28rpx;

  604. 	background: #0e63e3;

  605. 	color: #fff;

  606. 	border: none;

  607. 	border-radius: 8rpx;

  608. 	font-size: 26rpx;

  609. 	white-space: nowrap;

  610. 

  611. 	&::after {

  612. 		border: none;

  613. 	}

  614. 

  615. 	&:active {

  616. 		opacity: 0.85;

  617. 	}

  618. 

  619. 	&[disabled] {

  620. 		background: #a0cfff;

  621. 		color: #fff;

  622. 	}

  623. }

  624. 

  625. .submit-bar {

  626. 	position: fixed;

  627. 	bottom: 0;

  628. 	left: 0;

  629. 	right: 0;

  630. 	padding: 24rpx 32rpx;

  631. 	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));

  632. 	background: #fff;

  633. 	border-top: 1rpx solid #ebeef5;

  634. 	z-index: 10;

  635. }

  636. 

  637. .submit-btn {

  638. 	width: 100%;

  639. 	height: 88rpx;

  640. 	line-height: 88rpx;

  641. 	background: #0e63e3;

  642. 	color: #fff;

  643. 	border: none;

  644. 	border-radius: 44rpx;

  645. 	font-size: 32rpx;

  646. 	font-weight: 500;

  647. 	box-shadow: 0 8rpx 24rpx rgba(14, 99, 227, 0.3);

  648. 

  649. 	&::after {

  650. 		border: none;

  651. 	}

  652. 

  653. 	&:active {

  654. 		opacity: 0.85;

  655. 	}

  656. }

  657. 

  658. .confirm-popup {

  659. 	padding: 48rpx 40rpx 40rpx;

  660. 	width: 560rpx;

  661. }

  662. 

  663. .confirm-title {

  664. 	font-size: 34rpx;

  665. 	font-weight: 600;

  666. 	color: #333;

  667. 	text-align: center;

  668. 	margin-bottom: 28rpx;

  669. }

  670. 

  671. .confirm-content {

  672. 	font-size: 28rpx;

  673. 	color: #666;

  674. 	line-height: 1.7;

  675. 	text-align: center;

  676. 	margin-bottom: 40rpx;

  677. }

  678. 

  679. .confirm-btns {

  680. 	display: flex;

  681. 	gap: 24rpx;

  682. }

  683. </style>