leiyun
/
cytx_mp
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
9 Commits
1 Branch
5.2 MiB
 
 
 
 
Struktur: c2ea2bb0f5
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „c2ea2bb0f5“
${ noResults }
cytx_mp/pages/verify/verify.vue

691 Zeilen
17 KiB
Originalformat Blame Verlauf 

  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="authorityPlaceholder" />

  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="validityPlaceholder" />

  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 authorityPlaceholder = ref('上传身份证后自动识别')

  149. const validityPlaceholder = ref('上传身份证后自动识别')

  150. 

  151. const form = reactive({

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

  153. 	backImage: '',

  154. 	childImage: '',

  155. 	name: '',

  156. 	idNo: '',

  157. 	authority: '',

  158. 	validity: '',

  159. 	gender: '',

  160. 	birthday: '',

  161. 	phone: '',

  162. 	smsCode: ''

  163. })

  164. 

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

  166. onShow(() => {

  167. 	loadAuthInfo()

  168. })

  169. 

  170. onUnmounted(() => {

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

  172. })

  173. 

  174. const loadAuthInfo = async () => {

  175. 	try {

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

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

  178. 			const d = res.data

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

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

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

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

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

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

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

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

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

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

  189. 			form.gender = d.gender || ''

  190. 			form.birthday = d.birthday || ''

  191. 			form.phone = d.phone || ''

  192. 		}

  193. 	} catch (e) {

  194. 		// 未认证，忽略

  195. 	}

  196. }

  197. 

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

  199. const uploadImage = (tempFilePath) => {

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

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

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

  203. 			.then(res => {

  204. 				uni.hideLoading()

  205. 				resolve(res.data.url)

  206. 			})

  207. 			.catch(err => {

  208. 				uni.hideLoading()

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

  210. 				reject(err)

  211. 			})

  212. 	})

  213. }

  214. 

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

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

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

  218. 	try {

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

  220. 		const d = res.data

  221. 		form.name = d.name || ''

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

  223. 		uni.hideLoading()

  224. 	} catch (e) {

  225. 		uni.hideLoading()

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

  227. 	}

  228. }

  229. 

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

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

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

  233. 	try {

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

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

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

  237. 		if (!form.authority) authorityPlaceholder.value = '请输入发证机关'

  238. 		if (!form.validity) validityPlaceholder.value = '请输入有效期限'

  239. 		uni.hideLoading()

  240. 	} catch (e) {

  241. 		uni.hideLoading()

  242. 		authorityPlaceholder.value = '请输入发证机关'

  243. 		validityPlaceholder.value = '请输入有效期限'

  244. 	}

  245. }

  246. 

  247. const chooseImage = (type) => {

  248. 	uni.chooseImage({

  249. 		count: 1,

  250. 		sizeType: ['compressed'],

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

  252. 		success: async (res) => {

  253. 			const tempPath = res.tempFilePaths[0]

  254. 			try {

  255. 				const url = await uploadImage(tempPath)

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

  257. 					form.frontImage = url

  258. 					await doOcrFront(url)

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

  260. 					form.backImage = url

  261. 					await doOcrBack(url)

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

  263. 					form.childImage = url

  264. 				}

  265. 			} catch (e) {

  266. 				// 上传失败已提示

  267. 			}

  268. 		}

  269. 	})

  270. }

  271. 

  272. const sendSms = async () => {

  273. 	if (countdown.value > 0) return

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

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

  276. 		return

  277. 	}

  278. 	try {

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

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

  281. 		if (res.data && res.data.code) {

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

  283. 		} else {

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

  285. 		}

  286. 		countdown.value = 60

  287. 		timer = setInterval(() => {

  288. 			countdown.value--

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

  290. 		}, 1000)

  291. 	} catch (e) {

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

  293. 	}

  294. }

  295. 

  296. const handleSubmit = async () => {

  297. 	if (submitting.value) return

  298. 

  299. 	// 前端校验

  300. 	const idCardType = certTypeMap[certType.value]

  301. 	if (idCardType === 2) {

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

  303. 	} else {

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

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

  306. 	}

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

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

  309. 	// 身份证格式校验

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

  311. 

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

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

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

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

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

  317. 	}

  318. 

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

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

  321. 

  322. 	await doSubmit(false)

  323. }

  324. 

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

  326. 	showBindPopup.value = false

  327. 	submitting.value = true

  328. 	try {

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

  330. 			idCardType: certTypeMap[certType.value],

  331. 			idCardFront: form.frontImage,

  332. 			idCardBack: form.backImage,

  333. 			photo: form.childImage,

  334. 			realName: form.name,

  335. 			idCard: form.idNo,

  336. 			gender: form.gender,

  337. 			birthday: form.birthday,

  338. 			issuingAuthority: form.authority,

  339. 			validPeriod: form.validity,

  340. 			mobile: form.phone,

  341. 			code: form.smsCode,

  342. 			confirmBind: confirmBind || undefined

  343. 		})

  344. 

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

  346. 		try {

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

  348. 			setUserInfo(userRes.data)

  349. 		} catch (e) {}

  350. 

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

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

  353. 	} catch (e) {

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

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

  356. 			bindPatientInfo.value = {

  357. 				name: (e.data && e.data.patientName) || '',

  358. 				phone: (e.data && e.data.patientPhone) || ''

  359. 			}

  360. 			showBindPopup.value = true

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

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

  363. 		}

  364. 	} finally {

  365. 		submitting.value = false

  366. 	}

  367. }

  368. </script>

  369. 

  370. <style lang="scss" scoped>

  371. .page {

  372. 	min-height: 100vh;

  373. 	background: #f4f4f5;

  374. 	padding-bottom: 200rpx;

  375. }

  376. 

  377. .page-content {

  378. 	padding: 32rpx;

  379. }

  380. 

  381. .page-title {

  382. 	font-size: 36rpx;

  383. 	font-weight: 600;

  384. 	color: #303133;

  385. 	margin-bottom: 32rpx;

  386. }

  387. 

  388. .section {

  389. 	background: #fff;

  390. 	border-radius: 8rpx;

  391. 	padding: 40rpx 32rpx;

  392. 	margin-bottom: 24rpx;

  393. 	border: 1rpx solid #ebeef5;

  394. }

  395. 

  396. .section-header {

  397. 	display: flex;

  398. 	align-items: center;

  399. 	flex-wrap: wrap;

  400. 	gap: 12rpx;

  401. 	margin-bottom: 8rpx;

  402. }

  403. 

  404. .step-num {

  405. 	width: 44rpx;

  406. 	height: 44rpx;

  407. 	border-radius: 50%;

  408. 	background: #0e63e3;

  409. 	color: #fff;

  410. 	font-size: 24rpx;

  411. 	font-weight: 600;

  412. 	display: flex;

  413. 	align-items: center;

  414. 	justify-content: center;

  415. 	flex-shrink: 0;

  416. }

  417. 

  418. .label {

  419. 	font-size: 32rpx;

  420. 	font-weight: 600;

  421. 	color: #303133;

  422. }

  423. 

  424. .tag {

  425. 	font-size: 22rpx;

  426. 	border-radius: 8rpx;

  427. 	padding: 4rpx 16rpx;

  428. 

  429. 	&.warn {

  430. 		color: #e6a23c;

  431. 		background: #fdf6ec;

  432. 		border: 1rpx solid #faecd8;

  433. 	}

  434. 

  435. 	&.info {

  436. 		color: #3a85f0;

  437. 		background: #e8f0fe;

  438. 		border: 1rpx solid #c6d9f7;

  439. 	}

  440. }

  441. 

  442. .section-desc {

  443. 	font-size: 26rpx;

  444. 	color: #909399;

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

  446. }

  447. 

  448. .cert-tabs {

  449. 	display: flex;

  450. 	gap: 0;

  451. 	margin-bottom: 32rpx;

  452. }

  453. 

  454. .cert-tab {

  455. 	flex: 1;

  456. 	display: flex;

  457. 	align-items: center;

  458. 	justify-content: center;

  459. 	padding: 16rpx 0;

  460. 	border: 1rpx solid #dcdfe6;

  461. 	font-size: 26rpx;

  462. 	color: #606266;

  463. 	background: #fff;

  464. 	white-space: nowrap;

  465. 	margin-left: -1rpx;

  466. 

  467. 	&:first-child {

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

  469. 		margin-left: 0;

  470. 	}

  471. 

  472. 	&:last-child {

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

  474. 	}

  475. 

  476. 	&.active {

  477. 		color: #0e63e3;

  478. 		border-color: #0e63e3;

  479. 		background: #e8f0fe;

  480. 		position: relative;

  481. 		z-index: 1;

  482. 	}

  483. }

  484. 

  485. .upload-area {

  486. 	display: flex;

  487. 	gap: 24rpx;

  488. }

  489. 

  490. .upload-item {

  491. 	flex: 1;

  492. 	display: flex;

  493. 	flex-direction: column;

  494. 	align-items: center;

  495. }

  496. 

  497. .upload-img {

  498. 	width: 100%;

  499. 	height: 200rpx;

  500. 	border-radius: 12rpx;

  501. }

  502. 

  503. .upload-label {

  504. 	font-size: 24rpx;

  505. 	color: #606266;

  506. 	margin-top: 12rpx;

  507. }

  508. 

  509. 

  510. .child-upload {

  511. 	margin-top: 24rpx;

  512. }

  513. 

  514. .child-tip {

  515. 	font-size: 26rpx;

  516. 	color: #303133;

  517. 	margin-bottom: 8rpx;

  518. 

  519. 	.tip-highlight {

  520. 		color: #0e63e3;

  521. 		margin-left: 10rpx;

  522. 	}

  523. }

  524. 

  525. .child-desc {

  526. 	font-size: 22rpx;

  527. 	color: #909399;

  528. 	margin-bottom: 20rpx;

  529. }

  530. 

  531. .child-photo-box {

  532. 	width: 200rpx;

  533. 	height: 200rpx;

  534. 	border-radius: 12rpx;

  535. 	overflow: hidden;

  536. }

  537. 

  538. .child-photo-img {

  539. 	width: 100%;

  540. 	height: 100%;

  541. }

  542. 

  543. .child-photo-placeholder {

  544. 	width: 100%;

  545. 	height: 100%;

  546. 	background: #f5f5f5;

  547. 	display: flex;

  548. 	align-items: center;

  549. 	justify-content: center;

  550. }

  551. 

  552. .form-row {

  553. 	display: flex;

  554. 	align-items: center;

  555. 	padding: 28rpx 0;

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

  557. 

  558. 	&.border-none {

  559. 		border-bottom: none;

  560. 	}

  561. }

  562. 

  563. .form-label {

  564. 	width: 160rpx;

  565. 	font-size: 28rpx;

  566. 	color: #303133;

  567. 	flex-shrink: 0;

  568. }

  569. 

  570. .form-input {

  571. 	flex: 1;

  572. 	font-size: 28rpx;

  573. 	color: #303133;

  574. }

  575. 

  576. .phone-row {

  577. 	margin-top: 20rpx;

  578. }

  579. 

  580. .phone-input {

  581. 	width: 100%;

  582. 	height: 80rpx;

  583. 	border: 1rpx solid #dcdfe6;

  584. 	border-radius: 8rpx;

  585. 	padding: 0 24rpx;

  586. 	font-size: 28rpx;

  587. 	box-sizing: border-box;

  588. }

  589. 

  590. .sms-row {

  591. 	display: flex;

  592. 	align-items: center;

  593. 	gap: 20rpx;

  594. 	margin-top: 20rpx;

  595. }

  596. 

  597. .sms-input {

  598. 	flex: 1;

  599. 	height: 80rpx;

  600. 	border: 1rpx solid #dcdfe6;

  601. 	border-radius: 8rpx;

  602. 	padding: 0 24rpx;

  603. 	font-size: 28rpx;

  604. 	box-sizing: border-box;

  605. }

  606. 

  607. .sms-btn {

  608. 	height: 80rpx;

  609. 	line-height: 80rpx;

  610. 	padding: 0 28rpx;

  611. 	background: #0e63e3;

  612. 	color: #fff;

  613. 	border: none;

  614. 	border-radius: 8rpx;

  615. 	font-size: 26rpx;

  616. 	white-space: nowrap;

  617. 

  618. 	&::after {

  619. 		border: none;

  620. 	}

  621. 

  622. 	&:active {

  623. 		opacity: 0.85;

  624. 	}

  625. 

  626. 	&[disabled] {

  627. 		background: #a0cfff;

  628. 		color: #fff;

  629. 	}

  630. }

  631. 

  632. .submit-bar {

  633. 	position: fixed;

  634. 	bottom: 0;

  635. 	left: 0;

  636. 	right: 0;

  637. 	padding: 24rpx 32rpx;

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

  639. 	background: #fff;

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

  641. 	z-index: 10;

  642. }

  643. 

  644. .submit-btn {

  645. 	width: 100%;

  646. 	height: 88rpx;

  647. 	line-height: 88rpx;

  648. 	background: #0e63e3;

  649. 	color: #fff;

  650. 	border: none;

  651. 	border-radius: 44rpx;

  652. 	font-size: 32rpx;

  653. 	font-weight: 500;

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

  655. 

  656. 	&::after {

  657. 		border: none;

  658. 	}

  659. 

  660. 	&:active {

  661. 		opacity: 0.85;

  662. 	}

  663. }

  664. 

  665. .confirm-popup {

  666. 	padding: 48rpx 40rpx 40rpx;

  667. 	width: 560rpx;

  668. }

  669. 

  670. .confirm-title {

  671. 	font-size: 34rpx;

  672. 	font-weight: 600;

  673. 	color: #333;

  674. 	text-align: center;

  675. 	margin-bottom: 28rpx;

  676. }

  677. 

  678. .confirm-content {

  679. 	font-size: 28rpx;

  680. 	color: #666;

  681. 	line-height: 1.7;

  682. 	text-align: center;

  683. 	margin-bottom: 40rpx;

  684. }

  685. 

  686. .confirm-btns {

  687. 	display: flex;

  688. 	gap: 24rpx;

  689. }

  690. </style>