leiyun
/
cytx_mp
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
5.2 MiB
 
 
 
 
Tree: bc497ec898
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'bc497ec898'
${ noResults }
cytx_mp/pages/verify/verify.vue

615 lines
14 KiB
Raw Blame History 

  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="上传身份证后自动识别" />

  64. 				</view>

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

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

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

  68. 				</view>

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

  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">

  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. 	</view>

  104. </template>

  105. 

  106. <script setup>

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

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

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

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

  111. 

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

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

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

  115. 

  116. const certType = ref('idcard')

  117. const countdown = ref(0)

  118. const submitting = ref(false)

  119. let timer = null

  120. 

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

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

  123. 

  124. const form = reactive({

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

  126. 	backImage: '',

  127. 	childImage: '',

  128. 	name: '',

  129. 	idNo: '',

  130. 	authority: '',

  131. 	validity: '',

  132. 	gender: '',

  133. 	birthday: '',

  134. 	phone: '',

  135. 	smsCode: ''

  136. })

  137. 

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

  139. onShow(() => {

  140. 	loadAuthInfo()

  141. })

  142. 

  143. onUnmounted(() => {

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

  145. })

  146. 

  147. const loadAuthInfo = async () => {

  148. 	try {

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

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

  151. 			const d = res.data

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

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

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

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

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

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

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

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

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

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

  162. 			form.gender = d.gender || ''

  163. 			form.birthday = d.birthday || ''

  164. 			form.phone = d.phone || ''

  165. 		}

  166. 	} catch (e) {

  167. 		// 未认证，忽略

  168. 	}

  169. }

  170. 

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

  172. const uploadImage = (tempFilePath) => {

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

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

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

  176. 			.then(res => {

  177. 				uni.hideLoading()

  178. 				resolve(res.data.url)

  179. 			})

  180. 			.catch(err => {

  181. 				uni.hideLoading()

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

  183. 				reject(err)

  184. 			})

  185. 	})

  186. }

  187. 

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

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

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

  191. 	try {

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

  193. 		const d = res.data

  194. 		form.name = d.name || ''

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

  196. 		// 从身份证号解析性别和生日

  197. 		if (d.idNum && d.idNum.length === 18) {

  198. 			const genderNum = parseInt(d.idNum.charAt(16))

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

  200. 			form.birthday = `${d.idNum.substring(6, 10)}-${d.idNum.substring(10, 12)}-${d.idNum.substring(12, 14)}`

  201. 		}

  202. 		uni.hideLoading()

  203. 	} catch (e) {

  204. 		uni.hideLoading()

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

  206. 	}

  207. }

  208. 

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

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

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

  212. 	try {

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

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

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

  216. 		uni.hideLoading()

  217. 	} catch (e) {

  218. 		uni.hideLoading()

  219. 	}

  220. }

  221. 

  222. const chooseImage = (type) => {

  223. 	uni.chooseImage({

  224. 		count: 1,

  225. 		sizeType: ['compressed'],

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

  227. 		success: async (res) => {

  228. 			const tempPath = res.tempFilePaths[0]

  229. 			try {

  230. 				const url = await uploadImage(tempPath)

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

  232. 					form.frontImage = url

  233. 					await doOcrFront(url)

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

  235. 					form.backImage = url

  236. 					await doOcrBack(url)

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

  238. 					form.childImage = url

  239. 				}

  240. 			} catch (e) {

  241. 				// 上传失败已提示

  242. 			}

  243. 		}

  244. 	})

  245. }

  246. 

  247. const sendSms = async () => {

  248. 	if (countdown.value > 0) return

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

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

  251. 		return

  252. 	}

  253. 	try {

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

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

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

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

  258. 		} else {

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

  260. 		}

  261. 		countdown.value = 60

  262. 		timer = setInterval(() => {

  263. 			countdown.value--

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

  265. 		}, 1000)

  266. 	} catch (e) {

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

  268. 	}

  269. }

  270. 

  271. const handleSubmit = async () => {

  272. 	if (submitting.value) return

  273. 

  274. 	// 前端校验

  275. 	const idCardType = certTypeMap[certType.value]

  276. 	if (idCardType === 2) {

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

  278. 	} else {

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

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

  281. 	}

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

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

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

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

  286. 

  287. 	submitting.value = true

  288. 	try {

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

  290. 			idCardType,

  291. 			idCardFront: form.frontImage,

  292. 			idCardBack: form.backImage,

  293. 			photo: form.childImage,

  294. 			realName: form.name,

  295. 			idCard: form.idNo,

  296. 			gender: form.gender,

  297. 			birthday: form.birthday,

  298. 			issuingAuthority: form.authority,

  299. 			validPeriod: form.validity,

  300. 			mobile: form.phone,

  301. 			code: form.smsCode

  302. 		})

  303. 

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

  305. 		try {

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

  307. 			setUserInfo(userRes.data)

  308. 		} catch (e) {}

  309. 

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

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

  312. 	} catch (e) {

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

  314. 	} finally {

  315. 		submitting.value = false

  316. 	}

  317. }

  318. </script>

  319. 

  320. <style lang="scss" scoped>

  321. .page {

  322. 	min-height: 100vh;

  323. 	background: #f4f4f5;

  324. 	padding-bottom: 200rpx;

  325. }

  326. 

  327. .page-content {

  328. 	padding: 32rpx;

  329. }

  330. 

  331. .page-title {

  332. 	font-size: 36rpx;

  333. 	font-weight: 600;

  334. 	color: #303133;

  335. 	margin-bottom: 32rpx;

  336. }

  337. 

  338. .section {

  339. 	background: #fff;

  340. 	border-radius: 8rpx;

  341. 	padding: 40rpx 32rpx;

  342. 	margin-bottom: 24rpx;

  343. 	border: 1rpx solid #ebeef5;

  344. }

  345. 

  346. .section-header {

  347. 	display: flex;

  348. 	align-items: center;

  349. 	flex-wrap: wrap;

  350. 	gap: 12rpx;

  351. 	margin-bottom: 8rpx;

  352. }

  353. 

  354. .step-num {

  355. 	width: 44rpx;

  356. 	height: 44rpx;

  357. 	border-radius: 50%;

  358. 	background: #0e63e3;

  359. 	color: #fff;

  360. 	font-size: 24rpx;

  361. 	font-weight: 600;

  362. 	display: flex;

  363. 	align-items: center;

  364. 	justify-content: center;

  365. 	flex-shrink: 0;

  366. }

  367. 

  368. .label {

  369. 	font-size: 32rpx;

  370. 	font-weight: 600;

  371. 	color: #303133;

  372. }

  373. 

  374. .tag {

  375. 	font-size: 22rpx;

  376. 	border-radius: 8rpx;

  377. 	padding: 4rpx 16rpx;

  378. 

  379. 	&.warn {

  380. 		color: #e6a23c;

  381. 		background: #fdf6ec;

  382. 		border: 1rpx solid #faecd8;

  383. 	}

  384. 

  385. 	&.info {

  386. 		color: #3a85f0;

  387. 		background: #e8f0fe;

  388. 		border: 1rpx solid #c6d9f7;

  389. 	}

  390. }

  391. 

  392. .section-desc {

  393. 	font-size: 26rpx;

  394. 	color: #909399;

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

  396. }

  397. 

  398. .cert-tabs {

  399. 	display: flex;

  400. 	gap: 0;

  401. 	margin-bottom: 32rpx;

  402. }

  403. 

  404. .cert-tab {

  405. 	flex: 1;

  406. 	display: flex;

  407. 	align-items: center;

  408. 	justify-content: center;

  409. 	padding: 16rpx 0;

  410. 	border: 1rpx solid #dcdfe6;

  411. 	font-size: 26rpx;

  412. 	color: #606266;

  413. 	background: #fff;

  414. 	white-space: nowrap;

  415. 	margin-left: -1rpx;

  416. 

  417. 	&:first-child {

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

  419. 		margin-left: 0;

  420. 	}

  421. 

  422. 	&:last-child {

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

  424. 	}

  425. 

  426. 	&.active {

  427. 		color: #0e63e3;

  428. 		border-color: #0e63e3;

  429. 		background: #e8f0fe;

  430. 		position: relative;

  431. 		z-index: 1;

  432. 	}

  433. }

  434. 

  435. .upload-area {

  436. 	display: flex;

  437. 	gap: 24rpx;

  438. }

  439. 

  440. .upload-item {

  441. 	flex: 1;

  442. 	display: flex;

  443. 	flex-direction: column;

  444. 	align-items: center;

  445. }

  446. 

  447. .upload-img {

  448. 	width: 100%;

  449. 	height: 200rpx;

  450. 	border-radius: 12rpx;

  451. }

  452. 

  453. .upload-label {

  454. 	font-size: 24rpx;

  455. 	color: #606266;

  456. 	margin-top: 12rpx;

  457. }

  458. 

  459. 

  460. .child-upload {

  461. 	margin-top: 24rpx;

  462. }

  463. 

  464. .child-tip {

  465. 	font-size: 26rpx;

  466. 	color: #303133;

  467. 	margin-bottom: 8rpx;

  468. 

  469. 	.tip-highlight {

  470. 		color: #0e63e3;

  471. 		margin-left: 10rpx;

  472. 	}

  473. }

  474. 

  475. .child-desc {

  476. 	font-size: 22rpx;

  477. 	color: #909399;

  478. 	margin-bottom: 20rpx;

  479. }

  480. 

  481. .child-photo-box {

  482. 	width: 200rpx;

  483. 	height: 200rpx;

  484. 	border-radius: 12rpx;

  485. 	overflow: hidden;

  486. }

  487. 

  488. .child-photo-img {

  489. 	width: 100%;

  490. 	height: 100%;

  491. }

  492. 

  493. .child-photo-placeholder {

  494. 	width: 100%;

  495. 	height: 100%;

  496. 	background: #f5f5f5;

  497. 	display: flex;

  498. 	align-items: center;

  499. 	justify-content: center;

  500. }

  501. 

  502. .form-row {

  503. 	display: flex;

  504. 	align-items: center;

  505. 	padding: 28rpx 0;

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

  507. 

  508. 	&.border-none {

  509. 		border-bottom: none;

  510. 	}

  511. }

  512. 

  513. .form-label {

  514. 	width: 160rpx;

  515. 	font-size: 28rpx;

  516. 	color: #303133;

  517. 	flex-shrink: 0;

  518. }

  519. 

  520. .form-input {

  521. 	flex: 1;

  522. 	font-size: 28rpx;

  523. 	color: #303133;

  524. }

  525. 

  526. .phone-row {

  527. 	margin-top: 20rpx;

  528. }

  529. 

  530. .phone-input {

  531. 	width: 100%;

  532. 	height: 80rpx;

  533. 	border: 1rpx solid #dcdfe6;

  534. 	border-radius: 8rpx;

  535. 	padding: 0 24rpx;

  536. 	font-size: 28rpx;

  537. 	box-sizing: border-box;

  538. }

  539. 

  540. .sms-row {

  541. 	display: flex;

  542. 	align-items: center;

  543. 	gap: 20rpx;

  544. 	margin-top: 20rpx;

  545. }

  546. 

  547. .sms-input {

  548. 	flex: 1;

  549. 	height: 80rpx;

  550. 	border: 1rpx solid #dcdfe6;

  551. 	border-radius: 8rpx;

  552. 	padding: 0 24rpx;

  553. 	font-size: 28rpx;

  554. 	box-sizing: border-box;

  555. }

  556. 

  557. .sms-btn {

  558. 	height: 80rpx;

  559. 	line-height: 80rpx;

  560. 	padding: 0 28rpx;

  561. 	background: #0e63e3;

  562. 	color: #fff;

  563. 	border: none;

  564. 	border-radius: 8rpx;

  565. 	font-size: 26rpx;

  566. 	white-space: nowrap;

  567. 

  568. 	&::after {

  569. 		border: none;

  570. 	}

  571. 

  572. 	&:active {

  573. 		opacity: 0.85;

  574. 	}

  575. 

  576. 	&[disabled] {

  577. 		background: #a0cfff;

  578. 		color: #fff;

  579. 	}

  580. }

  581. 

  582. .submit-bar {

  583. 	position: fixed;

  584. 	bottom: 0;

  585. 	left: 0;

  586. 	right: 0;

  587. 	padding: 24rpx 32rpx;

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

  589. 	background: #fff;

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

  591. 	z-index: 10;

  592. }

  593. 

  594. .submit-btn {

  595. 	width: 100%;

  596. 	height: 88rpx;

  597. 	line-height: 88rpx;

  598. 	background: #0e63e3;

  599. 	color: #fff;

  600. 	border: none;

  601. 	border-radius: 44rpx;

  602. 	font-size: 32rpx;

  603. 	font-weight: 500;

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

  605. 

  606. 	&::after {

  607. 		border: none;

  608. 	}

  609. 

  610. 	&:active {

  611. 		opacity: 0.85;

  612. 	}

  613. }

  614. </style>